/* ============================================================
   chrome.css — the site-wide chrome: header with its navigation,
   footer, accessibility panel, cookie banner, buttons and the skip
   link. Shared by every page so the shell never drifts apart again.

   The markup for all of it lives in src/_includes/partials/, so a
   change here and there applies to the whole site at once.

   Requires base.css (tokens, reset, .wrap) to be loaded first.
   ============================================================ */

/* The chrome runs wider than a document's reading measure, so it keeps
   the same proportions on the landing page and on the document pages. */
:root{ --maxw-chrome: 1180px; }
.wrap--chrome{
  width:100%;
  max-width:var(--maxw-chrome);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ===================== SKIP LINK ===================== */
.skip-link{
  position:fixed; top:-200px; left:1rem; z-index:200;
  background:var(--ink); color:var(--bg); padding:0.7rem 1.1rem; border-radius:10px;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:1rem; }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  padding:0.72rem 1.25rem; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; min-height:44px; white-space:nowrap; transition:transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn--lg{ padding:0.95rem 1.6rem; font-size:1.06rem; min-height:52px; }
.btn--solid{ background:var(--accent-strong); color:var(--on-accent); border-color:var(--accent-strong); }
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 8px 22px color-mix(in oklab, var(--accent-strong), transparent 64%); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn--outline:hover{ border-color:var(--ink); background:color-mix(in oklab,var(--ink),transparent 94%); }
.btn--ghost{ background:transparent; border-color:transparent; padding:0.5rem 0.7rem; }
.btn--ghost:hover{ background:var(--surface-2); }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius); border:2px solid var(--border);
  background:var(--surface);
}
.iconbtn:hover{ border-color:var(--border-2); }
.iconbtn--sm{ width:38px; height:38px; }
.iconbtn svg{ fill:currentColor; }

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in oklab, var(--bg), transparent 12%);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{ display:flex; align-items:center; gap:1rem; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:0.38rem; text-decoration:none; color:var(--ink); }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.12rem; line-height:1; letter-spacing:-0.02em; display:flex; flex-direction:column; }
.brand__sub{ font-family:var(--font-body); font-weight:700; font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-top:3px; }

.brand__logo{ width:32px; height:32px; flex:0 0 auto; object-fit:contain; border-radius:var(--radius); display:block; }
.brand--footer .brand__logo{ width:29px; height:29px; }

.nav-desktop{ display:flex; gap:0.35rem; margin-left:1rem; }
.nav-link{ text-decoration:none; color:var(--ink); font-weight:700; padding:0.55rem 0.8rem; border-radius:10px; white-space:nowrap; }
.nav-link:hover{ background:var(--surface-2); }
.header-actions{ display:flex; align-items:center; gap:0.6rem; margin-left:auto; }

/* Header text-size control — fixed size (px), immune to the scaling it sets */
.size-seg{ flex:0 0 auto; }

/* Top-bar controls share one height so the row reads as a single, aligned unit */
.header-actions .seg,
.header-actions .lang-btn,
.header-actions .header-cta{ height:44px; }
.header-actions .iconbtn{ width:44px; height:44px; }
.seg__btn{ display:inline-flex; align-items:center; justify-content:center; }

.lang-btn{ font-weight:700; display:inline-flex; gap:0.3rem; align-items:center; border:2px solid var(--border); }
.lang-btn__cur{ color:var(--ink); }
.lang-btn__sep{ color:var(--border-2); }
.lang-btn__alt{ color:var(--muted); }
.lang-btn:hover .lang-btn__alt{ color:var(--ink); }

.menu-btn{ display:none; }
.menu-icon{ position:relative; width:20px; height:14px; }
.menu-icon i{ position:absolute; left:0; right:0; height:2.4px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.menu-icon i:nth-child(1){ top:0; }
.menu-icon i:nth-child(2){ top:6px; }
.menu-icon i:nth-child(3){ top:12px; }
.menu-icon.is-open i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-icon.is-open i:nth-child(2){ opacity:0; }
.menu-icon.is-open i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile{ border-bottom:1px solid var(--border); background:var(--bg); }
.nav-mobile__inner{ display:flex; flex-direction:column; gap:0.3rem; padding-block:0.8rem 1.2rem; }
.nav-mobile__link{ text-decoration:none; color:var(--ink); font-weight:700; font-size:1.1rem; padding:0.7rem 0.4rem; border-bottom:1px solid var(--border); }
.nav-mobile__cta{ margin-top:0.8rem; }
.nav-mobile__size{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }

/* ===================== FOOTER ===================== */
.site-footer{ background:var(--surface); border-top:1px solid var(--border); padding-block:clamp(2.5rem,6vw,4rem) 1.5rem; }
.site-footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.brand--footer{ margin-bottom:0.9rem; }
.site-footer__tag{ color:var(--muted); max-width:34ch; }
.site-footer__h{ font-family:var(--font-body); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.9rem; }
.footlink{ display:block; color:var(--ink); text-decoration:none; padding:0.35rem 0; }
.footlink--social{ display:flex; align-items:center; gap:0.55rem; }
.social-ico{ width:18px; height:18px; flex:0 0 auto; fill:currentColor; }
.footlink:hover{ color:var(--link); text-decoration:underline; }
.site-footer__bar{ margin-top:2.5rem; padding-top:1.3rem; border-top:1px solid var(--border); color:var(--muted); font-size:0.9rem; }

/* Registration details under the wordmark in the footer. Laid out as a
   label/value grid so the identifiers line up; collapses to stacked rows when
   the text is scaled up or the column gets narrow. */
.reg{
  margin:.9rem 0 0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.18rem .6rem;
  font-size:.82rem;
  line-height:1.45;
  color:var(--muted);
}
.reg__row{ display:contents; }
.reg dt{ white-space:nowrap; }
.reg dd{ margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:520px){
  .reg{ grid-template-columns:1fr; gap:0 0; }
  .reg__row{ display:block; margin-bottom:.3rem; }
  .reg dt{ display:inline; }
  .reg dt::after{ content:":"; }
  .reg dd{ display:inline; margin-left:.35rem; }
}

/* ===================== COOKIE CONSENT ===================== */
/* Consent gate: while the dialog is open the rest of the page is blurred and
   inert (no pointer, no focus, hidden from assistive tech), so a decision is
   required before browsing. Fixed size in px so the a11y text-scaling never
   pushes the dialog off-screen. */
html.consent-pending{ overflow:hidden; }
html.consent-pending .site-header,
html.consent-pending main,
html.consent-pending .partners,
html.consent-pending .site-footer,
html.consent-pending .a11y,
html.consent-pending .skip-link{
  filter:blur(7px);
  pointer-events:none;
  user-select:none;
}
.cookiebar{
  position:fixed; right:20px; bottom:20px; z-index:160;
  max-width:420px; padding:18px 20px;
  background:var(--surface); border:1.5px solid var(--border-2); border-radius:16px;
  box-shadow:0 18px 50px color-mix(in oklab,var(--ink),transparent 62%);
  font-size:16px; line-height:1.5;
}
.cookiebar[hidden]{ display:none; }
.cookiebar__title{ font-size:18px; margin-bottom:6px; }
.cookiebar__text{ color:var(--muted); margin-bottom:14px; }
.cookiebar__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cookiebar__actions .btn{ flex:1 1 auto; }
html[data-contrast="high"] .cookiebar{ box-shadow:none; border-color:#000; }
@media (max-width: 560px){
  /* keep clear of the accessibility fab pinned to the bottom-left corner */
  .cookiebar{ left:20px; right:20px; bottom:92px; max-width:none; }
}

/* footer "cookie settings" trigger — a real button styled like the links */
button.footlink{ background:none; border:0; width:100%; text-align:left; font:inherit; font-weight:400; }

/* ===================== ACCESSIBILITY WIDGET ===================== */
/* The widget is a control surface — keep it at a fixed size, immune to the
   document text-scaling it sets, so it never grows off-screen or clips. */
.a11y{ position:fixed; left:20px; bottom:20px; z-index:150; font-size:16px; line-height:1.4; }
.a11y-fab{
  width:58px; height:58px; border-radius:99px; border:2px solid var(--bg);
  background:var(--accent-strong); color:var(--on-accent);
  box-shadow:0 6px 20px color-mix(in oklab,var(--ink),transparent 70%);
  display:grid; place-items:center;
}
.a11y-fab:hover{ transform:translateY(-2px); }
.a11y-fab svg{ fill:currentColor; }
.a11y-panel{
  position:absolute; left:0; bottom:72px; width:300px;
  max-height:calc(100vh - 110px); overflow-y:auto;
  background:var(--surface); border:1.5px solid var(--border-2); border-radius:16px;
  box-shadow:0 18px 50px color-mix(in oklab,var(--ink),transparent 62%);
  padding:18px;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.a11y-panel__title{ font-size:19px; }
.a11y-field{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.a11y-field__label{ font-weight:700; font-size:15px; }
.seg{ display:inline-flex; border:1px solid var(--border-2); border-radius:10px; overflow:hidden; flex:0 0 auto; }
.seg__btn{ background:var(--surface); border:none; padding:6px 13px; color:var(--ink); border-right:1px solid var(--border); font-family:var(--font-display); font-weight:800; line-height:1; }
.seg__btn:last-child{ border-right:none; }
.seg__btn.s1{ font-size:13px; }
.seg__btn.s2{ font-size:16px; }
.seg__btn.s3{ font-size:21px; }
.seg__btn.is-active{ background:var(--accent-strong); color:var(--on-accent); }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border); }
.a11y-row__label{ font-weight:700; font-size:15px; }
.switch{ width:48px; height:28px; border-radius:99px; border:2px solid var(--border-2); background:var(--surface-2); position:relative; padding:0; flex:0 0 auto; transition:background .18s ease, border-color .18s ease; }
.switch.is-on{ background:var(--accent-strong); border-color:var(--accent-strong); }
.switch__knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:99px; background:#fff; transition:transform .18s ease; }
.switch.is-on .switch__knob{ transform:translateX(20px); }
.a11y-reset{ margin-top:16px; width:100%; background:transparent; border:2px solid var(--border-2); border-radius:10px; padding:9px; font-weight:700; font-size:15px; color:var(--ink); }
.a11y-reset:hover{ border-color:var(--ink); }

@media (max-width: 880px){
  .nav-desktop, .header-cta, .size-seg, .theme-toggle{ display:none; }
  .menu-btn{ display:inline-flex; }
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 520px){
  .site-footer__inner{ grid-template-columns:1fr; }
  .brand__name{ font-size:1rem; }
}

/* keep page content above the atmospheric layers
   (the header is already sticky with its own z-index:100, so it stays above) */
main, .site-footer{ position:relative; z-index:1; }

/* sticky header gains a soft shadow once the page scrolls */
.site-header{ transition: box-shadow .3s ease, background .3s ease; }

.site-header.is-stuck{ box-shadow:0 6px 26px color-mix(in oklab, var(--ink), transparent 90%); }

/* solid buttons: warm inner sheen + accent glow on hover (bg stays AAA-safe accent-strong) */
.btn--solid{ box-shadow:0 1px 0 color-mix(in oklab,#fff,transparent 72%) inset, 0 6px 18px color-mix(in oklab,var(--accent-strong),transparent 78%); }

.btn--solid:hover{ box-shadow:0 1px 0 color-mix(in oklab,#fff,transparent 60%) inset, 0 12px 30px color-mix(in oklab,var(--accent-strong),transparent 60%); }

.btn--solid:active{ transform:translateY(0); }

html[data-contrast="high"] .btn--solid{ box-shadow:none; }

/* FOOTER — accent hairline along the top edge */
.site-footer{ position:relative; }

.site-footer::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); }

html[data-contrast="high"] .site-footer::before{ display:none; }