/* ═══════════════════════════════════════════════════════════════════════════
   tegna-site.css — the TEGNA .design site, rebuilt on the ANCHOR ENTERPRISE
   WEB LIBRARY design system.
   ---------------------------------------------------------------------------
   This file REPLACES the previous deck-derived system. Every value is now an
   Anchor Enterprise token exposed as a CSS custom property (prefix --a-).

   Anchor character: neutral-forward, generous whitespace, ONE brand accent
   (Trust Blue), #101422 headlines, an Anchor global-nav header across the top.
   Full light + dark support. Font: Figtree (loaded by the page). Icons: Google
   Material Symbols (Rounded) — the site icon set.

   Token model
   -----------
   • PRIMITIVES  raw Anchor swatches (never used directly by components)
   • SEMANTIC    role tokens (bg / text / border / brand) — LIGHT in :root,
                 DARK redefined under BOTH the prefers-color-scheme media query
                 (system) AND [data-theme="dark"] (explicit opt-in)
   • SCALE       type, radius, stroke, spacing

   Structure
   ---------
     1. Primitives
     2. Semantic tokens — light
     3. Semantic tokens — dark (system + explicit)
     4. Type / radius / stroke / spacing scale
     5. Base + reset
     6. Layout container
     7. Global nav (site header)
     8. Hero
     9. Section titles
    10. Cards + chips + grid
    11. Buttons (primary / secondary)
    12. Footer
    13. Icons (Material Symbols)
    14. Focus-visible + reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. Primitives — raw Anchor Enterprise swatches ════════════════════════ */

:root {
  --a-white:          #FFFFFF;
  --a-neutral-50:     #F4F7FB;
  --a-neutral-100:    #EBEEF5;
  --a-neutral-300:    #BFC1C9;
  --a-neutral-600:    #5B6070;
  --a-neutral-700:    #3E4457;
  --a-neutral-900:    #101422;

  --a-blue-100:       #D7E4FE;
  --a-trust-blue-700: #032691;

  --a-green-700:      #006845;
  --a-orange-700:     #DA500C;
  --a-yellow-700:     #F3AC1C;

  --a-red-50:         #FFF6F8;
  --a-red-200:        #F6B4BF;
  --a-red-700:        #AA0B25;
  --a-red-800:        #900921;
}

/* ═══ 2. Semantic tokens — LIGHT (default) ═════════════════════════════════ */

:root {
  color-scheme: light;

  /* Surfaces */
  --a-bg-page:      #FFFFFF;
  --a-bg-surface:   #FFFFFF;   /* content containers / cards */
  --a-bg-menu:      #FFFFFF;
  --a-shade-subtle: rgba(2, 20, 75, 0.04);
  --a-shade-strong: rgba(2, 20, 75, 0.08);

  /* Text */
  --a-text-headline:   #101422;
  --a-text-body:       rgba(1, 10, 38, 0.90);
  --a-text-supporting: rgba(1, 10, 38, 0.70);
  --a-text-reversed:   #FFFFFF;

  /* Borders */
  --a-border-default: rgba(1, 10, 38, 0.50);
  --a-border-divider: rgba(1, 10, 38, 0.20);
  --a-border-subtle:  rgba(1, 10, 38, 0.10);

  /* Brand — the single accent. Trust Blue in light. */
  --a-brand:          #032691;   /* Trust Blue / 700 */
  --a-tint:           #D7E4FE;   /* Blue / 100 — interaction tint fill */
  --a-tint-hover:     rgba(3, 38, 145, 0.06);

  /* Nav item (team tab) */
  --a-nav-active:   #021D6E;      /* brand navy — active tab ink, no fill */
  --a-nav-hover-bg: #F4F7FB;      /* Neutral/50 — hover pill */

  /* Accent role tokens (flip per theme so components stay theme-agnostic) */
  --a-accent:          var(--a-brand);      /* links, active, focus ring */
  --a-accent-contrast: #FFFFFF;             /* text/icon on an accent fill */

  /* UI states */
  --a-ui-inactive: #5B6070;
  --a-ui-disabled: #BFC1C9;

  /* Status */
  --a-status-positive: #006845;
  --a-status-warning:  #F3AC1C;
  --a-status-notice:   #DA500C;
  --a-status-negative: #AA0B25;
}

/* ═══ 3. Semantic tokens — DARK ════════════════════════════════════════════
   Redefined under BOTH triggers:
   • system dark, unless the page has explicitly opted into light
   • explicit [data-theme="dark"]
   On dark, the visible brand accent shifts to Blue/100 (Trust Blue is too dark
   to read on #101422); text on that accent becomes near-black.               */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --a-bg-page:      #101422;
    --a-bg-surface:   #3E4457;
    --a-bg-menu:      #3E4457;
    --a-shade-subtle: rgba(0, 4, 15, 0.40);
    --a-shade-strong: rgba(0, 4, 15, 0.60);

    --a-text-headline:   #FFFFFF;
    --a-text-body:       rgba(255, 255, 255, 0.90);
    --a-text-supporting: rgba(255, 255, 255, 0.70);
    --a-text-reversed:   #101422;

    --a-border-default: rgba(244, 247, 251, 0.50);
    --a-border-divider: rgba(244, 247, 251, 0.30);
    --a-border-subtle:  rgba(244, 247, 251, 0.20);

    --a-tint:       rgba(215, 228, 254, 0.16);
    --a-tint-hover: rgba(215, 228, 254, 0.10);

    --a-accent:          #D7E4FE;   /* Blue / 100 reads on dark */
    --a-accent-contrast: #101422;

    --a-nav-active:   #FFFFFF;       /* active tab ink on dark */
    --a-nav-hover-bg: var(--a-bg-surface);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --a-bg-page:      #101422;
  --a-bg-surface:   #3E4457;
  --a-bg-menu:      #3E4457;
  --a-shade-subtle: rgba(0, 4, 15, 0.40);
  --a-shade-strong: rgba(0, 4, 15, 0.60);

  --a-text-headline:   #FFFFFF;
  --a-text-body:       rgba(255, 255, 255, 0.90);
  --a-text-supporting: rgba(255, 255, 255, 0.70);
  --a-text-reversed:   #101422;

  --a-border-default: rgba(244, 247, 251, 0.50);
  --a-border-divider: rgba(244, 247, 251, 0.30);
  --a-border-subtle:  rgba(244, 247, 251, 0.20);

  --a-tint:       rgba(215, 228, 254, 0.16);
  --a-tint-hover: rgba(215, 228, 254, 0.10);

  --a-accent:          #D7E4FE;
  --a-accent-contrast: #101422;

  --a-nav-active:   #FFFFFF;
  --a-nav-hover-bg: var(--a-bg-surface);
}

/* ═══ 4. Type / radius / stroke / spacing scale ════════════════════════════
   Type scale is Anchor Desktop px, scaled down responsively with clamp().
   Roles used by this site are exposed; the full Anchor scale is documented
   in comments for future pages.                                              */

:root {
  --a-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --a-weight-regular: 400;
  --a-weight-bold:    700;

  /* Anchor Desktop type scale (px), responsive via clamp():
     Title1 68 · Title2 58 · Title3 48 · H1 40 · H2 32 · H3 28 · H4 24
     · H5 20 · H6 17 · Body1 17 · Body2 15 · Chips 13 · Supporting 12
     · Nav 11 · Label 10 */
  --a-type-title2:     clamp(2.25rem, 4.6vw, 3.625rem);  /* 58 — (unused on site) */
  --a-type-h1:         clamp(1.75rem, 3vw, 2.5rem);       /* 40 */
  --a-type-h2:         clamp(1.5rem, 2.4vw, 2rem);        /* 32 — hero / primary header */
  --a-type-h4:         clamp(1.25rem, 1.8vw, 1.5rem);     /* 24 — feature card */
  --a-type-h5:         1.25rem;                            /* 20 — section title, feature card */
  --a-type-h6:         1.0625rem;                          /* 17 — card title */
  --a-type-body1:      1rem;                               /* 16 — body */
  --a-type-body2:      0.875rem;                           /* 14 — nav / meta */
  --a-type-chip:       0.8125rem;                          /* 13 — chip */
  --a-type-supporting: 0.75rem;                            /* 12 */
  --a-type-nav:        0.6875rem;                          /* 11 — eyebrow */
  --a-type-label:      0.625rem;                           /* 10 */

  --a-lh-head: 1.1;
  --a-lh-body: 1.5;

  /* Radius — Anchor scale = 8 / 12 / 24 / 96 (no invented 16 step)
     Small 8 (nav item, button) · Large 12 (cards) · XL 24 (chip pill) · Max 96 */
  --a-radius-s:   8px;
  --a-radius-m:  12px;   /* Radius/Large — cards */
  --a-radius-xl: 24px;
  --a-radius-max: 96px;
  --a-radius-chip: 24px; /* pill = XL */

  /* Stroke — Anchor: hairline 0.5 · standard 1 · heavy 2 */
  --a-stroke-hairline: 0.5px;
  --a-stroke-standard: 1px;
  --a-stroke-heavy:    2px;

  /* Spacing */
  --a-space-1: 4px;
  --a-space-2: 8px;
  --a-space-3: 12px;
  --a-space-4: 16px;
  --a-space-5: 20px;
  --a-space-6: 24px;
  --a-space-8: 32px;
  --a-space-10: 40px;
  --a-space-12: 48px;

  --a-maxw:   1120px;
  --a-gutter: clamp(16px, 4vw, 56px);   /* 16px minimum side gutter on phones */
}

/* ═══ 5. Base + reset ══════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--a-bg-page);
  color: var(--a-text-body);
  font-family: var(--a-font);
  font-weight: var(--a-weight-regular);
  font-size: var(--a-type-body1);
  line-height: var(--a-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--a-accent); }

/* ═══ 6. Layout container ══════════════════════════════════════════════════ */

/* The page wrapper fills the viewport and stacks header, main, footer, so the
   footer's margin-top: auto pins it to the bottom on short pages. */
.tg-page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.tg-container {
  width: 100%;
  max-width: var(--a-maxw);
  margin-inline: auto;
  padding-inline: var(--a-gutter);
}

/* A single subtle fade-in for the whole page, once. Pages can override it
   with an inline rule after the stylesheet link. */
.tg-page { opacity: 0; animation: tg-fade 0.6s ease forwards; }
@keyframes tg-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tg-page { opacity: 1; animation: none; } }

/* Page rhythm: main padding and the gap between its stacked sections. */
.tg-main { padding-block: clamp(36px, 5vw, 64px); }
.tg-main > * + * { margin-top: clamp(32px, 4.5vw, 56px); }
.tg-work-head { display: flex; flex-direction: column; gap: 8px; }

/* ═══ 7. Global nav — the Anchor site header ═══════════════════════════════
   Anchor global nav: surface ground, a single full-width divider hairline at
   the bottom (NOT a side accent), brand lockup left, tabs right. Active tab is
   the one Trust-Blue signal; hover uses the interaction tint.                 */

.tg-header {
  background: var(--a-bg-menu);
  border-bottom: var(--a-stroke-standard) solid var(--a-border-divider);
  position: sticky;
  top: 0;
  z-index: 50;
}
.tg-header .tg-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;              /* wraps below 900px */
  gap: 12px 28px;
  max-width: 1280px;
  padding-inline: 32px;
  min-height: 52px;
  padding-block: 8px;
}
@media (min-width: 900px) {
  .tg-header .tg-container { flex-wrap: nowrap; padding-block: 0; }
}

.tg-brand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--a-text-headline);
}
.tg-brand svg { display: block; width: 72px; height: auto; }
.tg-brand .tg-descriptor {
  font-size: 0.9375rem;
  font-weight: var(--a-weight-regular);
  letter-spacing: -0.01em;
  color: var(--a-text-supporting);
  line-height: 1;
}

.tg-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.tg-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 4px 10px;
  border-radius: var(--a-radius-s);  /* 8 */
  text-decoration: none;
  font-size: var(--a-type-body2);    /* 13 */
  font-weight: var(--a-weight-regular);  /* 400 */
  white-space: nowrap;
  color: var(--a-text-body);         /* rgba(1,10,38,.9) */
  transition: color 0.18s ease, background 0.18s ease;
}
.tg-tabs a:hover,
.tg-tabs a:focus-visible {
  background: var(--a-nav-hover-bg); /* #F4F7FB light / bg-surface dark */
  color: var(--a-text-body);
  font-weight: var(--a-weight-regular);
  outline: none;
}
.tg-tabs a[aria-current="page"] {
  background: transparent;           /* NO fill */
  font-weight: var(--a-weight-bold); /* 700 */
  color: var(--a-nav-active);        /* brand navy #021D6E / #FFFFFF dark */
}

/* ═══ 8. Hero ══════════════════════════════════════════════════════════════
   Anchor hero: no dark slab. Headline in ink, supporting copy in supporting
   text, on the page ground. Whitespace-forward.                              */

.tg-hero {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-3);
}
.tg-hero .tg-hero-title {
  font-size: var(--a-type-h2);
  font-weight: var(--a-weight-bold);
  line-height: var(--a-lh-head);
  letter-spacing: -0.02em;
  color: var(--a-text-headline);
}

/* ═══ 9. Section titles ════════════════════════════════════════════════════ */

.tg-section-title {
  font-size: var(--a-type-h5);
  font-weight: var(--a-weight-bold);
  line-height: var(--a-lh-head);
  letter-spacing: -0.015em;
  color: var(--a-text-headline);
}

/* ═══ 10. Cards + chips + grid ═════════════════════════════════════════════
   Anchor content cards: surface fill, full-perimeter hairline (inset
   box-shadow — NEVER a single-edge border), radius 12 (Radius/Large). Hover raises the
   card and switches the hairline to the brand accent. Category/state are shown
   with chips only.                                                            */

.tg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.tg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--a-space-3);
  padding: var(--a-space-5);
  border-radius: var(--a-radius-m);   /* Radius/Large = 12 */
  background: var(--a-bg-surface);
  box-shadow: inset 0 0 0 var(--a-stroke-standard) var(--a-border-subtle);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.tg-card:hover,
.tg-card:focus-visible {
  box-shadow: inset 0 0 0 var(--a-stroke-standard) var(--a-accent);
  transform: translateY(-2px);
  outline: none;
}

.tg-card-title {
  font-size: var(--a-type-h6);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--a-text-headline);
}
.tg-card-date {
  font-size: var(--a-type-body2);
  font-weight: 500;
  color: var(--a-text-supporting);
  margin-top: auto;
}

/* Feature card — newest item, given weight: subtle shade fill, larger title,
   spans the grid, row layout on wider screens. Full-perimeter hairline only. */
.tg-card-feature {
  grid-column: 1 / -1;
  background: var(--a-shade-subtle);
  box-shadow: inset 0 0 0 var(--a-stroke-standard) var(--a-border-subtle);
  gap: var(--a-space-4);
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--a-radius-m);   /* same radius 12 as cards */
}
.tg-card-feature .tg-card-title { font-size: var(--a-type-h5); }
.tg-card-feature:hover,
.tg-card-feature:focus-visible {
  box-shadow: inset 0 0 0 var(--a-stroke-standard) var(--a-accent);
}
@media (min-width: 641px) {
  .tg-card-feature {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .tg-card-feature .tg-card-date { margin-top: 0; }
  .tg-card-feature .tg-card-body { display: flex; flex-direction: column; gap: var(--a-space-3); }
}

/* Chips — Anchor chip: pill (radius 24), 13px, tint fill, brand ink.
   "Updated" state chip uses the notice status color on a soft fill.          */
.tg-chips { display: flex; flex-wrap: wrap; gap: var(--a-space-2); align-items: center; }
.tg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 8px;                    /* 8h / 2v */
  border-radius: var(--a-radius-chip); /* 24 — pill */
  font-size: var(--a-type-chip);       /* 13 */
  font-weight: var(--a-weight-bold);   /* 700 */
  line-height: 1.3;
  background: var(--a-tint);           /* interaction-tint fill */
  color: var(--a-brand);               /* brand text */
  white-space: nowrap;
}
:root[data-theme="dark"] .tg-chip { color: var(--a-text-headline); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-chip { color: var(--a-text-headline); }
}
.tg-chip-new {
  background: rgba(218, 80, 12, 0.14);
  color: var(--a-orange-700);
}

@media (max-width: 900px) {
  .tg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tg-grid { grid-template-columns: 1fr; }
}

/* ═══ 11. Buttons — Anchor primary / secondary ═════════════════════════════
   Primary: brand fill, reversed-on-accent text. Secondary: transparent with a
   full-perimeter default-border hairline. Both pill-radius, no side accents.  */

.tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-space-2);          /* 8 */
  height: 40px;
  padding: 8px 12px;             /* 12h / 8v */
  border: none;
  border-radius: var(--a-radius-s);  /* 8 */
  font-family: var(--a-font);
  font-size: var(--a-type-body2);    /* 15 */
  font-weight: var(--a-weight-bold); /* 700 */
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.tg-btn:active { transform: translateY(1px); }

.tg-btn-primary {
  background: var(--a-accent);
  color: var(--a-accent-contrast);
}
.tg-btn-primary:hover,
.tg-btn-primary:focus-visible {
  background: var(--a-brand);
  color: #FFFFFF;
  outline: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-btn-primary:hover,
  :root:not([data-theme="light"]) .tg-btn-primary:focus-visible {
    background: #FFFFFF; color: #101422;
  }
}
:root[data-theme="dark"] .tg-btn-primary:hover,
:root[data-theme="dark"] .tg-btn-primary:focus-visible { background: #FFFFFF; color: #101422; }

.tg-btn-secondary {
  background: transparent;
  color: var(--a-text-headline);
  box-shadow: inset 0 0 0 var(--a-stroke-standard) var(--a-border-default);
}
.tg-btn-secondary:hover,
.tg-btn-secondary:focus-visible {
  background: var(--a-tint-hover);
  box-shadow: inset 0 0 0 var(--a-stroke-standard) var(--a-accent);
  outline: none;
}

.tg-btn .material-symbols-rounded { font-size: 18px; }

/* ═══ 12. Footer ═══════════════════════════════════════════════════════════
   Anchor footer: surface ground, one full-width top divider hairline (no side
   accents). Quiet, neutral, wordmark in ink.                                  */

.tg-footer {
  margin-top: auto;
  background: var(--a-bg-surface);
  border-top: var(--a-stroke-standard) solid var(--a-border-divider);
  color: var(--a-text-supporting);
}
.tg-footer .tg-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-4);
  padding-block: var(--a-space-6);
}
.tg-footer .tg-foot-meta {
  font-size: var(--a-type-body2);
  font-weight: 500;
  color: var(--a-text-supporting);
}
.tg-footer .tg-mark { display: block; width: 92px; height: auto; color: var(--a-text-headline); }

/* ═══ 13. Icons — Google Material Symbols (Rounded) ════════════════════════ */

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
/* leading icon inside a chip */
.tg-chip .material-symbols-rounded { font-size: 15px; margin-left: -1px; }
.tg-chip-new .material-symbols-rounded { color: var(--a-orange-700); }
/* card link affordance — arrow settles in on hover/focus */
.tg-card-arrow {
  position: absolute; top: 16px; right: 16px;
  font-size: 20px; color: var(--a-text-supporting);
  opacity: 0; transform: translate(-2px, 2px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
  pointer-events: none;
}
.tg-card:hover .tg-card-arrow,
.tg-card:focus-visible .tg-card-arrow {
  opacity: 1; transform: translate(0, 0); color: var(--a-accent);
}

/* ═══ 14. Focus-visible + reduced motion ═══════════════════════════════════ */

:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .tg-card:hover, .tg-card:focus-visible { transform: none; }
  .tg-card-arrow { transition: none; }
}