/* Shared site chrome: skip link, top navigation, footer and cookie banner.
   Every page that shows these loads this file BEFORE its own stylesheet, so the chrome is defined once
   and looks the same everywhere. Colour tokens (--accent, --glass, --line, ...) come from the page
   stylesheet; .btn / .btn-primary / .btn-soft base styles live there too. */

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* Top navigation */
.nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  padding-inline: clamp(12px, 3vw, 24px);
  padding-left: max(clamp(12px, 3vw, 24px), env(safe-area-inset-left));
  padding-right: max(clamp(12px, 3vw, 24px), env(safe-area-inset-right));
}
/* Frosted glass pill, matching the cookie banner's glass. Glass tokens are scoped to the nav. */
.nav {
  --nb-glass: rgba(255, 255, 255, 0.72);
  --nb-sheen: rgba(236, 232, 251, 0.55);
  --nb-edge: rgba(99, 64, 224, 0.18);
  --nb-hi: rgba(255, 255, 255, 0.6);
  --nb-low: rgba(60, 40, 140, 0.08);
  --nb-drop: rgba(70, 45, 160, 0.22);
  --nb-drop-deep: rgba(70, 45, 160, 0.4);
  --nb-btn: rgba(255, 255, 255, 0.3);
  --nb-btn-hover: rgba(255, 255, 255, 0.5);
  /* Slightly deeper than the banner's #8466f0 so white button text stays at 4.5:1 across the gradient. */
  --nb-accent-hi: #7c5cec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nav {
    --nb-glass: rgba(28, 24, 42, 0.72);
    --nb-sheen: rgba(33, 28, 51, 0.65);
    --nb-edge: rgba(200, 185, 255, 0.18);
    --nb-hi: rgba(255, 255, 255, 0.14);
    --nb-low: rgba(0, 0, 0, 0.35);
    --nb-drop: rgba(0, 0, 0, 0.5);
    --nb-drop-deep: rgba(0, 0, 0, 0.75);
    --nb-btn: rgba(255, 255, 255, 0.06);
    --nb-btn-hover: rgba(255, 255, 255, 0.12);
    --nb-accent-hi: #c4b1fd;
  }
}
:root[data-theme='dark'] .nav {
  --nb-glass: rgba(28, 24, 42, 0.72);
  --nb-sheen: rgba(33, 28, 51, 0.65);
  --nb-edge: rgba(200, 185, 255, 0.18);
  --nb-hi: rgba(255, 255, 255, 0.14);
  --nb-low: rgba(0, 0, 0, 0.35);
  --nb-drop: rgba(0, 0, 0, 0.5);
  --nb-drop-deep: rgba(0, 0, 0, 0.75);
  --nb-btn: rgba(255, 255, 255, 0.06);
  --nb-btn-hover: rgba(255, 255, 255, 0.12);
  --nb-accent-hi: #c4b1fd;
}
.nav-pill {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  height: 60px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: linear-gradient(155deg, var(--nb-sheen) 0%, var(--nb-glass) 48%, var(--nb-glass) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--nb-edge);
  box-shadow:
    inset 0 1px 0 var(--nb-hi),
    inset 0 -1px 0 var(--nb-low),
    0 2px 4px -2px var(--nb-drop),
    0 14px 28px -14px var(--nb-drop),
    0 40px 80px -36px var(--nb-drop-deep);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-pill {
    background: var(--surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-pill {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}
.brand img {
  width: 22px;
  filter: var(--logo-filter);
}
.ib {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 19px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.ib:hover {
  background: var(--nb-btn-hover, var(--tint));
}
/* Theme toggle: a small glass chip, like the cookie banner's secondary button. */
.nav [data-theme-toggle] {
  background: var(--nb-btn);
  border: 1px solid var(--nb-edge);
  box-shadow:
    inset 0 1px 0 var(--nb-hi),
    0 2px 6px -3px var(--nb-drop);
}
.nav [data-theme-toggle]:hover {
  background: var(--nb-btn-hover);
  border-color: var(--accent);
}
.nav .btn {
  padding: 11px 18px;
  font-size: 15px;
  margin-left: 6px;
}
/* Pinned here so a page's own .btn-primary styles can't change the nav button. */
.nav .btn-primary {
  background: linear-gradient(180deg, var(--nb-accent-hi), var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 10px 24px -12px var(--accent);
}
.nav .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 16px 30px -12px var(--accent);
}
.nav-icons {
  display: flex;
  gap: 2px;
  justify-self: center;
  transform: translateX(clamp(0px, calc((100vw - 900px) * 0.5), 220px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-short {
  display: none;
}
@media (max-width: 520px) {
  .nav-pill {
    height: 56px;
    padding: 0 6px 0 14px;
  }
  .brand span {
    display: none;
  }
  .nav .btn {
    padding: 10px 14px;
    font-size: 14px;
    margin-left: 2px;
  }
  .cta-full {
    display: none;
  }
  .cta-short {
    display: inline;
  }
}
@media (max-width: 1023px), (pointer: coarse) {
  .ib {
    width: 44px;
    height: 44px;
  }
  .brand {
    min-height: 44px;
    min-width: 44px;
  }
  .nav .btn {
    min-height: 44px;
  }
}
/* Small phones: keep every target at 44px and win the space back from padding and gaps instead. */
@media (max-width: 374px) {
  .nav {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .nav-pill {
    gap: 0;
    padding: 0 4px;
  }
  .nav-icons {
    gap: 0;
  }
  .brand {
    justify-content: center;
  }
  .nav .btn {
    padding-inline: 10px;
    margin-left: 0;
  }
}
/* 320px screens, and 320px layouts with a desktop scrollbar (e.g. 400% zoom): tighten once more. */
@media (max-width: 339px) {
  .nav {
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  .nav-pill {
    padding: 0 2px;
  }
  .nav .btn {
    padding-inline: 8px;
    font-size: 13px;
  }
}

/* Footer */
footer {
  padding-block: 48px 40px;
  font-size: 14px;
  color: var(--muted);
}
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
}
.foot span:first-child {
  margin-right: auto;
}
.foot a,
.foot .link-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.foot .link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.foot .link-btn:hover,
.foot a:hover {
  color: var(--accent);
}
@media (max-width: 1023px), (pointer: coarse) {
  .foot a,
  .foot .link-btn {
    min-height: 44px;
  }
}
/* Full opacity: dimming to 0.85 measured 4.42:1 in light mode, below WCAG 1.4.3's 4.5:1. */
.legal {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.7;
  max-width: 80ch;
}
@media (max-width: 600px) {
  .foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .foot span:first-child {
    grid-column: 1/-1;
    margin: 0 0 8px;
  }
  .foot a[href^='mailto'] {
    grid-column: 1/-1;
  }
  .foot > span:last-child {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Cookie banner: "Badge card" with the same frosted glass as the top navigation (.nav tokens above).
   Glass tokens are scoped to the banner. The glass is 90% opaque (the nav uses 72%) because the banner
   carries body text and a link, which must stay at 4.5:1 whatever content sits behind it. */
#consent-panel {
  --cp-glass: rgba(255, 255, 255, 0.9);
  --cp-sheen: rgba(236, 232, 251, 0.9);
  --cp-edge: rgba(99, 64, 224, 0.18);
  --cp-hi: rgba(255, 255, 255, 0.6);
  --cp-low: rgba(60, 40, 140, 0.08);
  --cp-drop: rgba(70, 45, 160, 0.22);
  --cp-drop-deep: rgba(70, 45, 160, 0.4);
  --cp-btn: rgba(255, 255, 255, 0.3);
  --cp-btn-hover: rgba(255, 255, 255, 0.5);
  --cp-badge: rgba(99, 64, 224, 0.12);
  /* Matches the nav button: deep enough for white Accept text to stay at 4.5:1. */
  --cp-accent-hi: #7c5cec;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(155deg, var(--cp-sheen) 0%, var(--cp-glass) 48%, var(--cp-glass) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--cp-edge);
  border-radius: 28px;
  padding: 24px;
  box-shadow:
    inset 0 1px 0 var(--cp-hi),
    inset 0 -1px 0 var(--cp-low),
    0 2px 4px -2px var(--cp-drop),
    0 14px 28px -14px var(--cp-drop),
    0 40px 80px -36px var(--cp-drop-deep);
  display: none;
  gap: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #consent-panel {
    --cp-glass: rgba(28, 24, 42, 0.9);
    --cp-sheen: rgba(33, 28, 51, 0.9);
    --cp-edge: rgba(200, 185, 255, 0.18);
    --cp-hi: rgba(255, 255, 255, 0.14);
    --cp-low: rgba(0, 0, 0, 0.35);
    --cp-drop: rgba(0, 0, 0, 0.5);
    --cp-drop-deep: rgba(0, 0, 0, 0.75);
    --cp-btn: rgba(255, 255, 255, 0.06);
    --cp-btn-hover: rgba(255, 255, 255, 0.12);
    --cp-badge: rgba(167, 139, 250, 0.14);
    --cp-accent-hi: #c4b1fd;
  }
}
:root[data-theme='dark'] #consent-panel {
  --cp-glass: rgba(28, 24, 42, 0.9);
  --cp-sheen: rgba(33, 28, 51, 0.9);
  --cp-edge: rgba(200, 185, 255, 0.18);
  --cp-hi: rgba(255, 255, 255, 0.14);
  --cp-low: rgba(0, 0, 0, 0.35);
  --cp-drop: rgba(0, 0, 0, 0.5);
  --cp-drop-deep: rgba(0, 0, 0, 0.75);
  --cp-btn: rgba(255, 255, 255, 0.06);
  --cp-btn-hover: rgba(255, 255, 255, 0.12);
  --cp-badge: rgba(167, 139, 250, 0.14);
  --cp-accent-hi: #c4b1fd;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #consent-panel {
    background: var(--surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  #consent-panel {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
#consent-panel.is-visible {
  display: grid;
}
/* While the banner is up, consent.js sets html.consent-open and --consent-space (the banner's height plus
   its offset). The extra padding lets the page scroll far enough that nothing is left underneath it. */
.consent-open body {
  padding-bottom: var(--consent-space, 0px);
}
.consent-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.consent-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--cp-badge);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 24px;
}
#consent-panel h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
#consent-panel p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
#consent-panel p a {
  color: var(--accent);
}
.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.consent-actions .btn {
  justify-content: center;
}
#consent-panel .btn-primary {
  background: linear-gradient(180deg, var(--cp-accent-hi), var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 10px 24px -12px var(--accent);
}
#consent-panel .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 16px 30px -12px var(--accent);
}
#consent-panel .btn-soft {
  background: var(--cp-btn);
  border: 1px solid var(--cp-edge);
  box-shadow:
    inset 0 1px 0 var(--cp-hi),
    0 2px 6px -3px var(--cp-drop);
}
#consent-panel .btn-soft:hover {
  background: var(--cp-btn-hover);
  border-color: var(--accent);
}
@media (max-width: 600px) {
  /* Floats as a card with 16px around it, kept clear of the home bar and any side insets. */
  #consent-panel {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    border-radius: 24px;
    padding: 18px;
    gap: 14px;
  }
  /* Badge sits beside the heading; the text runs full width below. */
  .consent-top {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
  }
  .consent-text {
    display: contents;
  }
  .consent-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 20px;
  }
  #consent-panel h2 {
    font-size: 16px;
    margin-bottom: 0;
  }
  #consent-panel p {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.5;
  }
  #consent-panel .btn {
    padding: 12px 16px;
    min-height: 44px;
  }
}
/* Short landscape phones: let the banner scroll rather than cover the whole screen. */
@media (max-height: 480px) {
  #consent-panel {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
}