/* file path: theme.css
   Shared styles for every page. Page-specific layout stays in each page's own
   inline <style> block; this file holds what must be identical everywhere.

   Section 1 is accessibility (skip link, focus rings).
   Section 2 is the colour tokens and the light/dark/system theme.
   Section 3 is the site header, including its narrow-screen collapse. */

/* ----------------------------------------------------- 1. accessibility  */

/* Skip link: hidden until focused, then slides into the top-left corner.
   Uses :focus rather than :focus-visible so it always appears for keyboard
   users, including those whose browser would not otherwise show a ring. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  transform: translateY(-250%);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* A visible focus indicator on everything interactive. 3px solid at 3.38:1
   against the darkest background on the site, which clears WCAG 1.4.11. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
/* On the dark CTA band the brand blue is too close to the background, so the
   ring goes white there instead. */
section.cta a:focus-visible,
section.cta button:focus-visible,
section.cta [tabindex]:focus-visible {
  outline-color: #ffffff;
}

/* The nav item for the page you are on. aria-current is the accessible way to
   say "you are here", and it doubles as the styling hook so the two can never
   disagree. */
/* :not(.signin) matches the page's own nav rule and adds one more class-level
   selector, so this wins on colour. Without it the page stylesheet, which loads
   after this file, ties on specificity and keeps the muted grey. */
header.site .nav a[aria-current="page"]:not(.signin) {
  color: var(--brand);
  font-weight: 600;
}

/* The skip link targets <main tabindex="-1">; moving focus there must not
   draw a ring around the whole page. */
main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ------------------------------------------ 2. colour tokens & dark theme  */

/* Every colour on the site resolves through these. Page-specific stylesheets
   reference the tokens, never raw hex, so light and dark stay in step.
   Both palettes are verified against WCAG AA: body text >= 4.5:1, large text
   and interface borders >= 3:1. */
:root {
  color-scheme: light;

  --bg:                 #f9fafb;
  --surface:            #ffffff;
  --surface-2:          #f3f4f6;

  --text:               #111827;   /* headings */
  --text-base:          #1f2937;   /* body copy */
  --text-body:          #4b5563;   /* secondary copy */
  --text-mid:           #374151;   /* table headers, meta */
  --text-muted:         #6b7280;
  --text-faint:         #9ca3af;

  --border:             #e5e7eb;
  --border-strong:      #d1d5db;

  --brand:              #1668d8;   /* links, accents, icons */
  --brand-hover:        #185099;
  --brand-solid:        #1668d8;   /* button and badge backgrounds */
  --brand-solid-hover:  #1d63c4;
  --on-brand:           #ffffff;

  --band-bg:            #111827;   /* the dark CTA strip */
  --band-text:          #d1d5db;
  --band-solid-hover:   #2f6fe0;

  --amber-bg:           #fef3c7;   /* dev notice + amber tint */
  --amber-fg:           #92400e;
  --amber-border:       #fde68a;
  --amber-icon:         #d97706;

  --tag-bg:             #e8f1fd;   /* blue tint: tags, feature icons */
  --violet-bg:          #ede9fe;
  --violet-fg:          #7c3aed;
  --green-bg:           #d1fae5;
  --green-fg:           #059669;

  --callout-bg:         #eef2ff;
  --callout-text:       #312e81;
  --callout-border:     #6366f1;

  /* Partner logos are solid-black artwork with no fill of their own. */
  --mono-logo-filter:   none;

  --glow-a:             #dbeafe;   /* soft blobs behind the hero */
  --glow-b:             #ede9fe;

  /* Pop-overs (the language menu). On light the shadow does the lifting; on
     dark a shadow is nearly invisible, so it goes deeper and the border does
     more of the work. */
  --shadow-pop:         0 8px 24px rgba(15, 23, 42, 0.12);
}

/* Dark values live in one place and are applied twice: once for people whose
   system asks for dark and who have not chosen otherwise, and once for an
   explicit choice. The :not([data-theme="light"]) guard is what lets an
   explicit "light" win over a dark system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:                 #0f1626;
    --surface:            #18202f;
    --surface-2:          #212b3d;
    --text:               #e9eef7;
    --text-base:          #d6dde8;
    --text-body:          #c3ccda;
    --text-mid:           #c3ccda;
    --text-muted:         #97a3b6;
    --text-faint:         #7f8ca0;
    --border:             #2c3648;
    --border-strong:      #3b475c;
    --brand:              #7cb2f5;
    --brand-hover:        #a8ccf9;
    --brand-solid:        #2563eb;
    --brand-solid-hover:  #3566cc;
    --on-brand:           #ffffff;
    --band-bg:            #0a111d;
    --band-text:          #d1d5db;
    --band-solid-hover:   #3566cc;
    --amber-bg:           #3a2f10;
    --amber-fg:           #fcd34d;
    --amber-border:       #4d3f16;
    --amber-icon:         #fbbf24;
    --tag-bg:             #1c2b45;
    --violet-bg:          #241f45;
    --violet-fg:          #a78bfa;
    --green-bg:           #10321f;
    --green-fg:           #34d399;
    --callout-bg:         #1a2140;
    --callout-text:       #c7cdf5;
    --callout-border:     #6366f1;
    --mono-logo-filter:   brightness(0) invert(1);
    --glow-a:             #16233d;
    --glow-b:             #221c3d;
    --shadow-pop:         0 10px 28px rgba(0, 0, 0, 0.55);
  }
}

/* An explicit "dark" choice, which must win even when the system is light. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:                 #0f1626;
  --surface:            #18202f;
  --surface-2:          #212b3d;
  --text:               #e9eef7;
  --text-base:          #d6dde8;
  --text-body:          #c3ccda;
  --text-mid:           #c3ccda;
  --text-muted:         #97a3b6;
  --text-faint:         #7f8ca0;
  --border:             #2c3648;
  --border-strong:      #3b475c;
  --brand:              #7cb2f5;
  --brand-hover:        #a8ccf9;
  --brand-solid:        #2563eb;
  --brand-solid-hover:  #3566cc;
  --on-brand:           #ffffff;
  --band-bg:            #0a111d;
  --band-text:          #d1d5db;
  --band-solid-hover:   #3566cc;
  --amber-bg:           #3a2f10;
  --amber-fg:           #fcd34d;
  --amber-border:       #4d3f16;
  --amber-icon:         #fbbf24;
  --tag-bg:             #1c2b45;
  --violet-bg:          #241f45;
  --violet-fg:          #a78bfa;
  --green-bg:           #10321f;
  --green-fg:           #34d399;
  --callout-bg:         #1a2140;
  --callout-text:       #c7cdf5;
  --callout-border:     #6366f1;
  --mono-logo-filter:   brightness(0) invert(1);
  --glow-a:             #16233d;
  --glow-b:             #221c3d;
  --shadow-pop:         0 10px 28px rgba(0, 0, 0, 0.55);
}

/* The page background must come from the token, otherwise the browser paints
   its own white behind a dark page. */
html {
  background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  /* Only the toggle animates; page content must not cross-fade on theme change. */
  .gh-theme-btn svg {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
}

/* The inline illustrations use presentation attributes, so they cannot read the
   tokens on their own. These rules point each art colour at its token. In light
   mode the tokens equal the original values, so nothing changes; in dark mode
   the whole illustration follows along instead of glowing white. */
svg [fill="#ffffff"]   { fill: var(--surface); }
svg [fill="#f3f4f6"]   { fill: var(--surface-2); }
svg [fill="#e8f1fd"]   { fill: var(--tag-bg); }
svg [fill="#d1fae5"]   { fill: var(--green-bg); }
svg [fill="#fef3c7"]   { fill: var(--amber-bg); }
svg [fill="#ede9fe"]   { fill: var(--violet-bg); }
svg [fill="#dbeafe"]   { fill: var(--glow-a); }
svg [fill="#111827"]   { fill: var(--text); }
svg [fill="#374151"]   { fill: var(--text-mid); }
svg [fill="#6b7280"]   { fill: var(--text-muted); }
svg [stroke="#e5e7eb"] { stroke: var(--border); }
svg [stroke="#9ca3af"] { stroke: var(--text-faint); }
/* The dark CTA band keeps its own dark backdrop in both themes, so the orbit
   rings there must not be re-tinted. */
section.cta svg [stroke="#374151"] { stroke: #374151; }
/* Same idea for the hero's hub card: it is brand blue in both themes, so the
   logo and label drawn on top of it stay white instead of following --surface,
   which turned them near-black on a blue card in dark mode. */
svg .on-brand [fill="#ffffff"] { fill: #ffffff; }

/* The partner logos are all supplied as solid-black artwork, so on a dark
   background they would disappear. They render as a single-colour white row
   instead. The alternative, if the brand colours matter more than uniformity,
   is a white chip behind each logo. */
.int-logo {
  filter: var(--mono-logo-filter);
}

/* --------------------------------------------------- 3. the site header  */

/* This block lived inline in all seven pages, seven near-identical copies, and
   none of them had a narrow-screen story. It moved here when the mobile
   collapse had to be written — once, rather than seven times. Page stylesheets
   load after this file, so any page can still override a rule (404.html does,
   to centre its brand-only header). */
header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* the collapsed nav panel is positioned against this */
  position: relative;
}
header.site .brand {
  display: inline-flex; align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  line-height: 0;
}
header.site .brand .brand-icon {
  height: 100%; width: auto; display: block;
  transition: transform 0.4s ease;
}
header.site .brand .brand-wordmark {
  height: 38%; width: auto; display: block;
}
header.site .brand:hover .brand-icon { transform: rotate(360deg); }
header.site .nav { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
header.site .nav a:not(.signin) {
  color: var(--text-body); text-decoration: none;
  transition: color 0.15s ease;
}
header.site .nav a:not(.signin):hover { color: var(--brand); }
header.site .signin {
  display: inline-flex; align-items: center;
  padding: 0.55rem 1.25rem; border-radius: 0.5rem;
  background: var(--brand-solid); color: var(--on-brand); font-weight: 600;
  font-size: 0.9rem; line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 104, 216, 0.2);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
header.site .signin:hover {
  background: var(--brand-solid-hover); color: var(--on-brand);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(22, 104, 216, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  header.site .brand .brand-icon { transition: none; }
}

/* ---- narrow screens ----
   Wordmark + four links + theme + language + Sign in measured 501px of nav
   inside a 390px viewport, which pushed the whole document sideways. Below the
   breakpoint the nav collapses into a panel under the header.

   The hiding is gated on .gh-nav-js, which nav.js sets on <html>. With no JS
   there is no button to open the panel, so the header keeps every link and
   wraps onto a second row instead. */
.gh-nav-toggle { display: none; }

@media (max-width: 900px) {
  html:not(.gh-nav-js) header.site .wrap { flex-wrap: wrap; justify-content: center; }
  html:not(.gh-nav-js) header.site .nav { flex-wrap: wrap; justify-content: center; }

  html.gh-nav-js .gh-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    /* 2.75rem square: a comfortable touch target (WCAG 2.5.5 asks for 44px) */
    width: 2.75rem; height: 2.75rem; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 0.5rem;
    background: var(--surface); color: var(--text-body);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  html.gh-nav-js .gh-nav-toggle:hover { color: var(--brand); border-color: var(--brand); }
  html.gh-nav-js .gh-nav-toggle svg { display: block; }

  html.gh-nav-js header.site .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0.15rem;
    padding: 0.5rem 1.25rem 1.15rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    font-size: 1rem;
  }
  html.gh-nav-js header.site.nav-open .nav { display: flex; }

  html.gh-nav-js header.site .nav a:not(.signin) {
    padding: 0.7rem 0.5rem;
    border-radius: 0.4rem;
  }
  html.gh-nav-js header.site .nav a:not(.signin):hover { background: var(--surface-2); }
  /* Sign in is the one call to action here, so it goes last and full width,
     under the links and above the two icon controls. */
  html.gh-nav-js header.site .nav .signin {
    order: 1;
    justify-content: center;
    margin-top: 0.6rem;
    padding: 0.8rem 1.25rem;
    font-size: 0.95rem;
  }
}