/*
 * Accessibility Page Family — TFG token-first per CssUiStandards §2.4.1.
 *
 * Page-family layout for /accessibility + /erisilebilirlik-beyani +
 * /barrierefreiheitserklaerung. Custom wrapper + 2-col sticky sidebar shell
 * + centered legal-style hero + 4-stat metric strip + section spacing.
 *
 * Patron-directed 2026-05-08 single-cycle uplift to ground-truth UI
 * disipline (Pattern 1 layout shell + Pattern 10 hero + Pattern 11
 * page-family CSS per `.agents/skills/03-frontend-ui/diskhastanesi-page-uplift-discipline/SKILL.md`).
 *
 * Discovery: ContentPageLayout's `.content-page__layout` does NOT carry
 * a sidebar+main 2-col grid in RouteCore.css; legacy Legal/Corporate
 * pages stack the sidebar above the main content. Accessibility uplift
 * uses a custom wrapper (`tfg-accessibility-page`) with explicit 2-col
 * shell, mirroring the `services-index-wrapper` / `pillar-page-wrapper`
 * pattern from the düzeltilmiş 4-surface set.
 */

@layer sections {
[data-tfg="on"] .tfg-accessibility-page {
    color: var(--tfg-text-primary);
}

/* === Hero (centered, legal-style — BS27 §S2 0-italic gravitas pattern) === */

[data-tfg="on"] .accessibility-hero {
    padding-block: clamp(var(--tfg-space-7), 5vw, var(--tfg-space-9));
    padding-inline: clamp(var(--tfg-space-5), 4vw, var(--tfg-space-8));
}

[data-tfg="on"] .accessibility-hero__copy {
    display: grid;
    gap: clamp(var(--tfg-space-4), 2vw, var(--tfg-space-5));
    justify-items: center;
    text-align: center;
}

[data-tfg="on"] .accessibility-hero-badge {
    width: fit-content;
}

/* Hero typography: font-family / size / weight / tracking / line-height /
   text-wrap inherited from RouteCore.css `.tfg-page-hero :is(.hero-title,
   .hero-desc)` rule. Local rules add only color, margin reset, and lede
   readability max-width. */
[data-tfg="on"] .accessibility-hero .hero-title {
    color: var(--tfg-text-headline);
    margin: 0;
}

[data-tfg="on"] .accessibility-hero .hero-desc {
    color: var(--tfg-text-secondary);
    margin: 0;
    max-inline-size: min(100%, var(--tfg-page-hero-desc-max-width));
}

/* === Hero metric strip (4-stat, ground-truth Pattern 10) === */

/* 4-stat hero strip width parity with Services `.delivery-assurance-strip`
   (Services.css:840) — `width: min(100%, 58rem)` is the canonical 4-column
   metric-frame measure. Section Discipline Catalog archetype 2 + 10. */
[data-tfg="on"] .accessibility-hero-meta-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tfg-space-3);
    margin-block-start: var(--tfg-space-5);
    inline-size: min(100%, var(--tfg-measure-rem-2xl));
}

[data-tfg="on"] .accessibility-hero-stat {
    display: grid;
    gap: var(--tfg-space-2);
    padding: var(--tfg-space-4);
    text-align: center;

    /* Glass border / background / shadow inherited from .tfg-metric-card. */
}

[data-tfg="on"] .accessibility-hero-stat__value {
    color: var(--tfg-text-headline);
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-role-card-title);
    font-weight: var(--tfg-font-weight-semibold);
    line-height: var(--tfg-line-height-tight);
    letter-spacing: var(--tfg-tracking-card);
}

[data-tfg="on"] .accessibility-hero-stat__label {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-role-eyebrow);
    font-weight: var(--tfg-font-weight-medium);
    letter-spacing: var(--tfg-tracking-eyebrow);
    line-height: var(--tfg-line-height-tight);
    text-transform: uppercase;
}

/* === 2-col shell (desktop sticky aside + main; mobile single-col) === */

[data-tfg="on"] .accessibility-shell {
    display: grid;
    grid-template-columns: minmax(var(--tfg-grid-rail-min), 0.34fr) minmax(0, 1fr);
    gap: clamp(var(--tfg-space-5), 3vw, var(--tfg-space-7));
    padding-block: clamp(var(--tfg-space-5), 3vw, var(--tfg-space-7)) var(--tfg-geometry-page-section-gap);
    align-items: start;
}

[data-tfg="on"] .accessibility-sidebar {
    display: grid;
    gap: var(--tfg-space-3);
    position: sticky;
    top: var(--tfg-nav-clearance, var(--tfg-space-7));
    align-self: start;
}

[data-tfg="on"] .accessibility-sidebar-card {
    display: grid;
    gap: var(--tfg-space-2);
    padding: var(--tfg-space-4);

    /* border / background / box-shadow inherited from RouteCore.css line 101 */
}

[data-tfg="on"] .accessibility-sidebar-card .accessibility-sidebar-label {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-role-eyebrow);
    font-weight: var(--tfg-font-weight-medium);
    letter-spacing: var(--tfg-tracking-eyebrow);
    line-height: var(--tfg-line-height-tight);
    text-transform: uppercase;
}

[data-tfg="on"] .accessibility-sidebar-card strong {
    color: var(--tfg-text-headline);
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-size-body);
    font-weight: var(--tfg-font-weight-semibold);
}

/* PAGE-012 prelaunch fix (2026-07-10): mailto/tel links are controls — they
   carry the DH target-size floor (44px desktop / 48px touch via the 48rem
   media block below) per DhPageByPagePreLaunchUiAuditStandard target-size
   proof ("inline contact/phone/mail links are still controls"). Measured
   before-fix: 24.7px tall at 390px viewport. */
[data-tfg="on"] .accessibility-sidebar-card a {
    display: flex;
    align-items: center;
    min-height: var(--tfg-control-min-height);
    color: var(--tfg-text-primary);
    font-size: var(--tfg-font-size-body-sm);
    text-decoration: none;
    overflow-wrap: anywhere;
}

[data-tfg="on"] .accessibility-sidebar-card a:hover,
[data-tfg="on"] .accessibility-sidebar-card a:focus-visible {
    color: var(--tfg-accent-warm-bright);
    text-decoration: underline;
}

/* === Sidebar TOC (Sira 2 — anchor-list, no list-marker) === */

[data-tfg="on"] .accessibility-sidebar-toc {
    padding-block: var(--tfg-space-4);
}

[data-tfg="on"] .accessibility-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--tfg-space-2);
    counter-reset: tocidx;
}

[data-tfg="on"] .accessibility-toc-list li {
    counter-increment: tocidx;
    padding: 0;
    margin: 0;
}

[data-tfg="on"] .accessibility-toc-list li::marker {
    content: none;
}

/* PAGE-012 prelaunch fix (2026-07-10): TOC anchors carry the DH target-size
   floor (44px desktop / 48px touch via the 48rem media block below).
   Measured before-fix: 32.7-32.9px tall at 390/768/1440. align-items
   center (was baseline) keeps the 01-04 counter chip and the label
   vertically centered inside the taller hit area. */
[data-tfg="on"] .accessibility-toc-list a {
    display: grid;
    grid-template-columns: var(--tfg-len-rem-1-4) 1fr;
    align-items: center;
    gap: var(--tfg-space-2);
    color: var(--tfg-text-primary);
    font-size: var(--tfg-font-size-body-sm);
    text-decoration: none;
    min-height: var(--tfg-control-min-height);
    padding-block: var(--tfg-space-1);
    border-radius: var(--tfg-radius-sm);
    transition: color var(--tfg-duration-fast) var(--tfg-ease-standard), background var(--tfg-duration-fast) var(--tfg-ease-standard);
}

[data-tfg="on"] .accessibility-toc-list a::before {
    content: counter(tocidx, decimal-leading-zero);
    color: var(--tfg-accent-warm-bright);
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-role-eyebrow);
    font-weight: var(--tfg-font-weight-semibold);
    letter-spacing: var(--tfg-tracking-eyebrow);
}

[data-tfg="on"] .accessibility-toc-list a:hover,
[data-tfg="on"] .accessibility-toc-list a:focus-visible {
    color: var(--tfg-accent-warm-bright);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* === Main column === */

[data-tfg="on"] .accessibility-main {
    display: grid;
    gap: var(--tfg-space-5);
    min-width: 0;
}

/* Glass border / background / shadow inherited from .tfg-card. scroll-margin
   keeps :target sections visible below sticky nav after in-page TOC jump.
   Padding consumes `--tfg-card-padding-default` per Section Discipline
   Catalog §0.3 (Anti-Pattern A1: padding clamp on cards is forbidden;
   only hero shells may clamp). Token resolves to top/right-left/bottom
   = space-6 / space-6 / space-5 (Spacing.css:62), with mobile collapse
   to space-5 (Spacing.css:170). */
[data-tfg="on"] .accessibility-section {
    display: grid;
    gap: var(--tfg-space-4);
    padding: var(--tfg-card-padding-default);
    scroll-margin-block-start: var(--tfg-nav-clearance, var(--tfg-space-7));
}

[data-tfg="on"] .accessibility-section:target .tfg-section-header__title {
    color: var(--tfg-accent-warm-bright);
}

/* Body / list measure tokens per Section Discipline Catalog §0.6
   (Anti-Pattern A5: arbitrary `60ch` / `56ch` literals are forbidden).
   `--tfg-measure-narrow` = 58ch — the narrow lede measure shared with
   sector-cluster-bridge__lede when that surface is tightened.
   `--tfg-measure-default` = 64ch — used here for bullet copy where
   each bullet is shorter than a paragraph and benefits from a slightly
   wider measure. */
[data-tfg="on"] .accessibility-section__body {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-role-body);
    line-height: var(--tfg-line-height-body);
    letter-spacing: var(--tfg-tracking-body);
    margin: 0;
    max-inline-size: var(--tfg-measure-narrow);
    text-wrap: pretty;
}

[data-tfg="on"] .accessibility-section__list {
    display: grid;
    gap: var(--tfg-space-3);
    padding-inline-start: var(--tfg-space-5);
    margin: 0;
    max-inline-size: var(--tfg-measure-default);
    color: var(--tfg-text-primary);
    font-size: var(--tfg-font-role-body);
    line-height: var(--tfg-line-height-body);
    letter-spacing: var(--tfg-tracking-body);
}

[data-tfg="on"] .accessibility-section__list li {
    padding-inline-start: var(--tfg-space-2);
}

[data-tfg="on"] .accessibility-section__list li::marker {
    color: var(--tfg-accent-warm-bright);
}

/* === Sira 4: Icon-badge bullet variant (commitment / limitations / reporting) === */

[data-tfg="on"] .accessibility-section__list--badge {
    list-style: none;
    padding-inline-start: 0;
}

[data-tfg="on"] .accessibility-section__list--badge li {
    position: relative;
    padding-inline-start: calc(var(--tfg-space-5) + var(--tfg-space-1));
    padding-block: var(--tfg-nudge-xs);
}

[data-tfg="on"] .accessibility-section__list--badge li::marker {
    content: none;
}

[data-tfg="on"] .accessibility-section__list--badge li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.5em;
    inline-size: var(--tfg-space-3);
    block-size: var(--tfg-space-3);
    border-radius: var(--tfg-radius-pill);
    background: var(--tfg-accent-warm-bright);
    box-shadow: 0 0 0 var(--tfg-space-1) var(--tfg-accent-soft);
}

@supports (color: color-mix(in oklab, black, white)) {
    [data-tfg="on"] .accessibility-section__list--badge li::before {
        box-shadow: 0 0 0 var(--tfg-space-1) color-mix(in oklab, var(--tfg-accent-warm-bright) 22%, transparent);
    }
}

/* === Sira 3: Audit proof grid (3-card metric composition) === */

[data-tfg="on"] .accessibility-audit-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tfg-space-3);

    /* Kart #011 A-4: konteyner gerçek <ul> oldu — liste kutu modeli sıfırlanır. */
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-tfg="on"] .accessibility-audit-proof-card {
    display: grid;
    gap: var(--tfg-space-3);
    padding: var(--tfg-space-4);

    /* Glass border / background / shadow inherited from .tfg-metric-card. */
}

/* Proof value sized to `--tfg-font-size-step-4` (1.5–2rem) — bigger than
   hero stat (`--tfg-font-role-card-title`) so the proof outcome reads as
   the primary signal vs the hero strip's reference data. */
[data-tfg="on"] .accessibility-audit-proof-value {
    color: var(--tfg-accent-warm-bright);
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-size-step-4);
    font-weight: var(--tfg-font-weight-semibold);
    line-height: var(--tfg-line-height-tight);
    letter-spacing: var(--tfg-tracking-title);
}

[data-tfg="on"] .accessibility-audit-proof-label {
    color: var(--tfg-text-headline);
    font-family: var(--tfg-font-display);
    font-size: var(--tfg-font-role-card-title);
    font-weight: var(--tfg-font-weight-semibold);
    line-height: var(--tfg-line-height-title);
    letter-spacing: var(--tfg-tracking-card);
    margin: 0;
    text-wrap: balance;
}

[data-tfg="on"] .accessibility-audit-proof-body {
    color: var(--tfg-text-secondary);
    font-size: var(--tfg-font-size-body-sm);
    line-height: var(--tfg-line-height-body);
    letter-spacing: var(--tfg-tracking-body);
    margin: 0;
    text-wrap: pretty;
}

/* === Sira 5: Reporting CTA spacing === */

[data-tfg="on"] .accessibility-reporting-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfg-space-3);
    justify-content: flex-start;
    align-items: center;
    margin-block-start: var(--tfg-space-3);
}

/* === Target-size touch floor (≤48rem mirrors ThemeBundle control floor) === */

@media (max-width: 48rem) {
    [data-tfg="on"] .accessibility-sidebar-card a,
    [data-tfg="on"] .accessibility-toc-list a {
        min-height: var(--tfg-touch-min-height);
    }
}

/* === Mobile collapse (≤900px → single-col, sidebar above main) === */

@media (max-width: 56.25rem) {
    [data-tfg="on"] .accessibility-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tfg-space-5);
    }

    [data-tfg="on"] .accessibility-sidebar {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tfg-grid-col-14)), 1fr));
        grid-auto-rows: auto;
        display: grid;
    }

    [data-tfg="on"] .accessibility-hero-meta-row {
        grid-template-columns: 1fr 1fr;
    }

    [data-tfg="on"] .accessibility-hero-stat {
        text-align: start;
    }

    [data-tfg="on"] .accessibility-audit-proof-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 30rem) {
    [data-tfg="on"] .accessibility-hero-meta-row {
        grid-template-columns: 1fr;
    }

    [data-tfg="on"] .accessibility-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

}