/* =============================================================================
   ARC shared components — site header / mega menu, buttons, report viewer.
   Loaded on every page (see arc_component_assets() in inc/partials.php) on top
   of arc-tokens.css. Everything is class-scoped so it never restyles the older
   Tailwind pages it is dropped into.
   ============================================================================= */

/* Anchor targets clear the sticky header (76px) with a little air. */
[id] { scroll-margin-top: 88px; }

/* --- Buttons ---------------------------------------------------------------- */
.arcbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-semibold);border-radius:var(--radius-pill);cursor:pointer;transition:background .16s var(--ease-out),border-color .16s,color .16s;white-space:nowrap;border:1px solid transparent;line-height:1;text-decoration:none}
.arcbtn--sm{padding:9px 18px;font-size:var(--text-body-sm)}
.arcbtn--md{padding:12px 22px;font-size:var(--text-body-sm)}
.arcbtn--lg{padding:15px 30px;font-size:var(--text-body)}
.arcbtn--fw{width:100%}
.arcbtn--accent{background:var(--action-bg);color:var(--action-fg)}
.arcbtn--accent:hover{background:var(--action-bg-hover);color:var(--action-fg)}
.arcbtn--inverse{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28)}
.arcbtn--inverse:hover{background:rgba(255,255,255,.18);color:#fff}
.arcbtn--outline{background:transparent;color:var(--arc-navy);border-color:var(--border-strong)}
.arcbtn--outline:hover{border-color:var(--arc-navy)}

/* --- Site header ------------------------------------------------------------ */
.arc-site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;color:var(--text-primary);-webkit-font-smoothing:antialiased}
.arc-site-header *,.arc-site-header *::before,.arc-site-header *::after{box-sizing:border-box}
.arc-site-header a{text-decoration:none}
.arc-site-header a:not(.arcbtn){color:inherit}
.arc-site-header__bar{max-width:1200px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;gap:40px}
.arc-site-header__logo{display:inline-flex;align-items:center;flex:none}
.arc-site-header__logo img{height:56px;width:auto;display:block}
.arc-site-header__nav{display:flex;align-items:center;gap:28px;font-size:var(--text-body-sm);font-weight:var(--fw-medium)}
.arc-site-header__nav{gap:6px!important}
.arc-site-header__nav > a,.arc-site-header__trigger{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;margin:19px 0;border-radius:var(--radius-pill);color:var(--text-primary);transition:color .16s,background .2s}
.arc-site-header__nav > a:hover,.arc-site-header__trigger:hover,.arc-site-header__trigger[aria-expanded="true"]{background:var(--surface-sunken)}
.arc-site-header__nav > a:hover,.arc-site-header__trigger:hover,.arc-site-header__trigger[aria-expanded="true"]{color:var(--wai-orange)}
.arc-site-header__nav > a[aria-current="page"],.arc-site-header__trigger.is-active{color:var(--wai-orange);font-weight:var(--fw-semibold)}
.arc-site-header__trigger{appearance:none;background:none;border:0;margin:0;font:inherit;cursor:pointer}
.arc-site-header__caret{font-size:10px;color:var(--text-tertiary);transition:transform .16s}
.arc-site-header__trigger[aria-expanded="true"] .arc-site-header__caret{transform:rotate(180deg)}
.arc-site-header__actions{margin-left:auto;display:flex;align-items:center;gap:20px}

/* Mega menu panels */
.arc-mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);animation:arcHeaderFade .16s var(--ease-out) both}
.arc-mega[hidden]{display:none}
.arc-mega__inner{max-width:1200px;margin:0 auto;padding:36px 32px 40px;display:grid;grid-template-columns:repeat(3,1fr) 280px;gap:36px}
.arc-mega__col{display:flex;flex-direction:column;gap:2px}
.arc-mega__heading{font-size:var(--text-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-tertiary);margin-bottom:10px}
.arc-mega__link{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin:0 -12px;border-radius:var(--radius-md);color:var(--text-primary);transition:background .12s}
.arc-mega__link:hover,.arc-mega__link:focus-visible{background:var(--surface-sunken)}
.arc-mega__name{font-weight:var(--fw-semibold)}
.arc-mega__desc{font-size:var(--text-body-sm);color:var(--text-secondary);line-height:1.4}
.arc-mega__promo{background:var(--navy-500);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:12px}
.arc-mega__promo-eyebrow{font-size:var(--text-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--teal-300)}
.arc-mega__promo-title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-h4);color:var(--white);line-height:var(--lh-snug)}
.arc-mega__promo p{margin:0;font-size:var(--text-body-sm);color:var(--navy-100)}
.arc-mega__promo .arcbtn{align-self:flex-start;margin-top:auto}
.arc-mega__audiences{max-width:1200px;margin:0 auto;padding:28px 32px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 24px}
.arc-mega__row-label{grid-column:1/-1;margin:4px 0 -4px}
.arc-mega__card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color .12s}
.arc-mega__card:hover,.arc-mega__card:focus-visible{border-color:var(--border-strong)}
.arc-mega__num{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--wai-orange)}
@keyframes arcHeaderFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Mobile menu */
.arc-site-header__mobile{display:none;position:relative}
.arc-site-header__mobile > summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:var(--radius-pill);border:1px solid var(--border-default);display:inline-flex;align-items:center;justify-content:center;color:var(--text-primary)}
.arc-site-header__mobile > summary::-webkit-details-marker{display:none}
.arc-site-header__mobile nav{position:absolute;right:0;top:calc(100% + 10px);width:260px;max-height:calc(100vh - 110px);overflow-y:auto;padding:8px;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;font-size:var(--text-body-sm);font-weight:var(--fw-medium)}
.arc-site-header__mobile nav a{padding:10px 12px;border-radius:var(--radius-md);color:var(--text-primary)}
.arc-site-header__mobile nav a:hover{background:var(--surface-sunken)}
.arc-site-header__mobile-group{padding:12px 12px 4px;font-size:var(--text-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-tertiary)}

@media (max-width:1100px){
  .arc-mega__inner{grid-template-columns:repeat(3,1fr)}
  .arc-mega__promo{display:none}
}
@media (max-width:960px){
  .arc-site-header__nav,.arc-mega{display:none!important}
  .arc-site-header__mobile{display:block}
}
@media (max-width:640px){
  .arc-site-header__bar{padding:0 20px;gap:16px}
  .arc-site-header__logo img{height:46px}
  .arc-site-header__actions{gap:10px}
}

/* --- Report viewer ---------------------------------------------------------- */
.arc-report{font-family:var(--font-sans);color:var(--white)}
.arc-report__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px}
.arc-report__controls{display:flex;align-items:center;gap:10px}
.arc-report__btn{appearance:none;width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--white);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .16s,opacity .16s}
.arc-report__btn:hover:not(:disabled){background:rgba(255,255,255,.12)}
.arc-report__btn:disabled{opacity:.35;cursor:default}
.arc-report__counter{min-width:110px;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em;color:var(--navy-100)}
.arc-report__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(32px,calc((100% - 1136px) / 2));padding:24px max(32px,calc((100% - 1136px) / 2)) 28px;margin-top:20px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.arc-report__track:focus-visible{outline:2px solid var(--teal-300);outline-offset:-2px}
.arc-report__page{flex:none;margin:0;width:var(--page-w,min(820px,82vw));aspect-ratio:841.89/595.28;scroll-snap-align:start;background:rgba(255,255,255,.06);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative}
.arc-report__page:not([data-state="done"])::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 70%);background-size:200% 100%;animation:arcReportShimmer 1.4s linear infinite}
.arc-report__page img{display:block;width:100%;height:100%;object-fit:contain}
.arc-report__status{margin:16px 0 0;font-size:var(--text-body-sm);color:var(--navy-100)}
.arc-report__status a{color:var(--teal-300);font-weight:var(--fw-semibold)}
@keyframes arcReportShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.arc-report__page::after{animation:none}.arc-mega{animation:none}}

/* --- Site footer ------------------------------------------------------------ */
.arc-footer{position:relative;overflow:hidden;background:var(--navy-700);color:var(--navy-100);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.arc-footer *{box-sizing:border-box}
.arc-footer a{text-decoration:none}
.arc-footer__cta{max-width:1200px;margin:0 auto;padding:120px 32px 88px;border-bottom:1px solid rgba(255,255,255,.12)}
.arc-footer__headline{margin:0;max-width:980px;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(2.4rem,1.4rem + 4vw,5rem);line-height:1.02;letter-spacing:-0.04em;color:var(--white)}
.arc-footer__headline em{font-style:italic;color:var(--teal-300)}
.arc-footer__cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px}
.arc-footer__grid{max-width:1200px;margin:0 auto;padding:72px 32px 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.arc-footer__brand img{height:56px;width:auto;display:block}
.arc-footer__brand p{margin:20px 0 0;max-width:320px;font-size:var(--text-body-sm);color:var(--navy-200);line-height:var(--lh-relaxed)}
.arc-footer__col{display:flex;flex-direction:column;gap:12px}
.arc-footer__heading{font-size:var(--text-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--navy-200)}
.arc-footer__col a{font-size:var(--text-body-sm);color:var(--grey-50);transition:color .2s}
.arc-footer__col a:hover{color:var(--teal-300)}
.arc-footer__base{max-width:1200px;margin:56px auto 0;padding:24px 32px 32px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:var(--text-caption);color:var(--navy-200)}
.arc-footer__base div{display:flex;gap:20px}
.arc-footer__base a{color:var(--navy-200)}
.arc-footer__base a:hover{color:var(--white)}
/* Giant outlined ARC sitting behind the footer content as a background graphic */
.arc-footer > :not(.arc-footer__wordmark){position:relative;z-index:1}
.arc-footer__wordmark{position:absolute;z-index:0;left:0;right:0;bottom:-0.14em;font-family:var(--font-display);font-weight:900;font-size:clamp(14rem,6rem + 34vw,40rem);line-height:.8;letter-spacing:-0.06em;text-align:center;white-space:nowrap;color:rgba(116,169,172,.035);-webkit-text-stroke:1.5px rgba(116,169,172,.2);user-select:none;pointer-events:none}
@media (max-width:860px){.arc-footer__grid{grid-template-columns:1fr 1fr}.arc-footer__brand{grid-column:1/-1}}
@media (max-width:640px){.arc-footer__cta,.arc-footer__grid,.arc-footer__base{padding-left:20px;padding-right:20px}}

/* Pinned mode (desktop): the viewer sticks under the header and vertical scroll drives the track */
.arc-report.is-pinned{position:sticky!important;top:76px;padding-top:24px}
.arc-report.is-pinned .arc-report__intro{display:grid;grid-template-columns:1.1fr 1fr;column-gap:56px;align-items:end}
.arc-report.is-pinned .arc-report__intro > span{grid-column:1;grid-row:1}
.arc-report.is-pinned .arc-report__intro > h2{grid-column:1;grid-row:2;font-size:clamp(2rem,1.2rem + 2.4vw,3.2rem)!important}
.arc-report.is-pinned .arc-report__intro > p[style*="text-body-lg"]{grid-column:2;grid-row:1 / span 2;margin:0!important;font-size:var(--text-body)!important}
.arc-report.is-pinned .arc-report__bar,.arc-report.is-pinned .arc-report__status{grid-column:1 / -1}
.arc-report.is-pinned .arc-report__bar{margin-top:24px}
.arc-report.is-pinned .arc-report__track{scroll-snap-type:none;overflow-x:hidden;margin-top:8px;padding-top:16px;padding-bottom:20px}