/* ============================================================
   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;
  /* Height of the sticky header. Anchor targets (legal.css) offset by it, so a
     link into a document does not land under the bar. */
  --header-h: 72px;
}
.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; text-align:center; transition:transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Labels wrap. With nowrap the widest one measured 353px at the largest text
   size, wider than a 320px screen, and the page scrolled sideways (WCAG 1.4.10). */
.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-control); }
.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-control);
  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);
}
/* The header is a control surface, like the accessibility widget: sizes in px,
   immune to the text-size switch. In rem the row grew to 1488px at the largest
   size on a 1280px screen and the page scrolled sideways. */
.site-header__inner{ display:flex; align-items:center; gap:18px; height:var(--header-h); }
.brand{ display:inline-flex; align-items:center; gap:0.38rem; text-decoration:none; color:var(--ink); }
/* The wordmark may wrap between the two words, never inside one. base.css lets
   a, p, li and dd break anywhere so that a long e-mail address or a 22-letter
   Polish word cannot widen the page; the brand is an <a>, so that rule reached
   it too and a narrow window turned the header into "Unlocked Spar / k".
   Nav links get the same guard for the same reason. */
.brand__name, .nav-link, .footlink{ overflow-wrap:normal; word-break:normal; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1; letter-spacing:-0.02em; display:flex; flex-direction:column; }
.brand__sub{ font-family:var(--font-body); font-weight:700; font-size:12px; 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; align-items:center; gap:6px; margin-left:18px; }
.nav-link{ text-decoration:none; color:var(--ink); font-weight:700; font-size:18px; padding:10px 14px; border-radius:10px; white-space:nowrap; }
.nav-link:hover{ background:var(--surface-2); }
/* Wsparcie jako wezwanie do działania, nie kolejna pozycja menu: pełny przycisk
   na końcu nawigacji, przed regulacją czytelności i przełącznikiem języka. */
/* Dokładnie 44 px, tyle co segment wielkości tekstu i przełącznik języka obok:
   .btn ma własne odsadzenie pionowe, które podnosiło przycisk do 51 px i psuło
   linię rzędu. */
.nav-cta{ margin-left:0.5rem; height:44px; min-height:44px; padding-block:0; padding-inline:0.95rem; font-size:1rem; white-space:nowrap; }
/* Przycisk zabiera szerokość w rzędzie, w którym stoi jeszcze regulacja tekstu,
   motyw i język. Bez tego przełącznik języka łamał się na dwie linie i czytał
   jako „PE / LN”. */
.lang-btn{ white-space:nowrap; flex:0 0 auto; }
@media (max-width: 1200px){
  .nav-cta{ margin-left:0.3rem; padding-inline:0.7rem; }
  .nav-desktop{ gap:2px; }
}
.nav-mobile__cta{ margin-top:1rem; justify-content:center; }

/* The page you are on. aria-current tells assistive tech; these rules tell
   everyone else, and they must not rely on the accent colour alone: the
   underline carries the same information in high-contrast and greyscale. */
.nav-link[aria-current="page"]{ background:var(--accent-tint); color:var(--accent-text); box-shadow:inset 0 -2px 0 var(--accent); }
.nav-mobile__link[aria-current="page"],
.footlink[aria-current="page"]{ color:var(--accent-text); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

.header-actions{ display:flex; align-items:center; gap:11px; 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{ 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; font-size:18px; display:inline-flex; gap:5px; align-items:center; padding:9px 13px; border:2px solid var(--border-control); }
.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__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;
  /* Never taller than the viewport: at 320x256 the dialog stood 230px above the
     top edge with its title and first button unreachable. */
  max-height:calc(100dvh - 40px); overflow-y:auto;
}
.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; max-height:calc(100dvh - 112px); }
}

/* 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-control); 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); }

/* The full header row (wordmark, five links, text size, theme, language) needs
   about 1010px. Switching to the menu button at 880px left every width between
   the two with the language switch pushed off-screen and the page scrolling
   sideways, at the default text size. */
@media (max-width: 1023px){
  .nav-desktop, .size-seg, .theme-toggle{ display:none; }
  .menu-btn{ display:inline-flex; }
}

@media (max-width: 880px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
}

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

/* 320px: wordmark (166px), language switch (92px), menu button (44px), gaps and
   padding added up to 369px and pushed the menu button off-screen. Showing only
   the target language on the switch brings the row down to about 300px; its
   accessible name still contains the visible text (WCAG 2.5.3). */
@media (max-width: 400px){
  /* Pixel sizes on purpose: the header is a control surface like the a11y
     widget, so the text-size switch must not push its own button off-screen.
     Measured at the largest size, the row was 364px wide before this. */
  .site-header .wrap--chrome{ padding-inline:16px; }
  .site-header__inner{ gap:8px; }
  .header-actions{ gap:8px; }
  .brand__name{ font-size:16px; }
  .brand__sub{ font-size:10px; }
  .lang-btn{ font-size:16px; padding-inline:8px; }
  .lang-btn__cur, .lang-btn__sep{ display:none; }
  .lang-btn__alt{ color:var(--ink); }
}

/* 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; }

/* ===================== PRODUCT SITES ===================== */
/* A product site (sparkcode.unlockedspark.org) opens its header with the
   product's own wordmark and puts the foundation's mark behind a hairline, so
   the bar says what the page is about and whose work it is without a second
   logo. Markup: partials/product-brand.njk. Sizes in px like the rest of the
   header: it is a control surface and must not grow with the text-size switch. */
.site-header .brand--product .brand__name{ font-size:22px; line-height:1.1; }
/* The label under the product name: smaller than FOUNDATION, in the accent's
   text colour, flush with the right edge of the name. Letter spacing trails
   the last letter too, so a negative margin of the same size lines it up. */
.brand__badge{ align-self:flex-end; font-size:9px; letter-spacing:0.18em; margin-right:-0.18em; margin-top:2px; color:var(--accent-text); }
/* Whose product this is: the foundation's mark, divided from the product
   name by a hairline. --border is the decorative weight, which this line is. */
.by{ padding-left:13px; margin-left:3px; border-left:1px solid var(--border); }
/* The lockup is wider than the foundation's mark alone, so the links move to
   the right edge next to the controls instead of trailing the brand. */
.site-header--product .nav-desktop{ margin-left:auto; }
/* Below 1200px the full row (two wordmarks, three links, the button, text size,
   theme, language) no longer fits: measured at 1089px the theme and language
   controls were pushed off-screen. The foundation's mark stays and its name
   steps aside, but only visually: display:none would also take it out of the
   accessibility tree, and the icon next to it is decorative, so a screen
   reader would then hear nothing about whose product this is. */
@media (max-width: 1200px){
  .by .brand__name{
    position:absolute !important; width:1px; height:1px; margin:-1px;
    padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .by{ padding-left:8px; }
}
@media (max-width: 520px){
  .site-header .brand--product .brand__name{ font-size:18px; }
}