/* Shared look for the Casazium site shell - fonts, color tokens, header,
   and footer - used by BOTH casazium.com (website, imported by the React
   Navbar/Footer) and docs.casazium.com (docs, @imported by
   docs/.vitepress/theme/custom.css). Markup is still hand-maintained twice
   (JSX in shared/components, a Vue template in docs/.vitepress/theme/
   Layout.vue, because VitePress can't render React), so per CLAUDE.md any
   change to either markup must be checked against the other. The LOOK
   lives only here.

   Values come from the redesign's design system
   (design/casazium-homepage-handoff/DESIGN-SYSTEM.md and HOMEPAGE-SPEC.md
   sections 2 and 12). website/tailwind.config.cjs carries the same color
   values as Tailwind tokens for page content; keep the two in step. */

/* ---- Fonts: IBM Plex, self-hosted -------------------------------------
   Both sites serve the same files from /fonts/ (website/public/fonts and
   docs/public/fonts are identical copies). Self-hosted rather than Google
   Fonts so page views don't send visitors' IP addresses to a third party
   the Privacy Policy doesn't list. Latin subsets, only the weights the
   design uses: Sans 400/500/600, Mono 400/500.
   Source: Fontsource's builds of IBM Plex (OFL-1.1), fetched 2026-09-14 from
   https://cdn.jsdelivr.net/fontsource/fonts/<family>@latest/latin-<weight>-normal.woff2
   License: /fonts/IBM-Plex-LICENSE.txt (from github.com/IBM/plex).
   SHA-256:
     ibm-plex-sans-latin-400.woff2  3b646991d30055a93a4ecc499713d4347953a74a947ecab435ab72070cbdab0e
     ibm-plex-sans-latin-500.woff2  0717336fb31fcdcde4b8deb3675bb4a0f7f6d484864afcd6751ac29975962203
     ibm-plex-sans-latin-600.woff2  8960851d691c054ed38e259bdcf1a6190d157b4203ed5bb32c632a863fb8ec2f
     ibm-plex-mono-latin-400.woff2  08949f728dc52d528e69b1667d15c89a5686a4ee9a296ff90983985f99c380f7
     ibm-plex-mono-latin-500.woff2  01d285447409c8a588692162439a038b8cbd7871309ee20267b0d2d91c6e8e22 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

/* ---- Tokens -------------------------------------------------------------
   The light-ground and dark-ground greys are not interchangeable:
   --cz-muted is light-ground only, --cz-on-dark-4 is dark-ground only. */
:root {
  --cz-ink: #16150f;
  --cz-ink-2: #43413a;
  --cz-ink-3: #5b584c;
  --cz-muted: #6b6858;
  --cz-paper: #f7f6f3;
  --cz-paper-2: #f2f0ec;
  --cz-paper-3: #fdfcfa;
  --cz-rule: #e0ded7;
  --cz-rule-strong: #c9c6bb;
  --cz-rule-dark: #33312a;
  --cz-on-dark: #f7f6f3;
  --cz-on-dark-2: #cfcdc3;
  --cz-on-dark-3: #a5a294;
  --cz-on-dark-4: #8a8676;
  --cz-font-sans: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  --cz-font-mono: "IBM Plex Mono", monospace;

  /* Height of one unwrapped header row: 16px padding top and bottom, the
     Sign in button (14px text at line-height 1.5, 7px padding, 1px border
     = 37px) as the tallest item, plus the 1px bottom rule. Only docs needs
     it, to clear its fixed header; Layout.vue overwrites it with the
     measured height once mounted, so this is the pre-hydration fallback. */
  --casazium-header-height: calc(16px * 2 + 37px + 1px);
}

/* ---- Header (HOMEPAGE-SPEC.md section 2) ------------------------------- */
.casazium-header-bar {
  /* Sticky on casazium.com. On docs the bar sits inside Layout.vue's fixed
     .casazium-header-stack, where sticky has no effect. */
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  font-family: var(--cz-font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  color: var(--cz-ink);
  /* Opaque fallback first; translucent + blur only where supported. */
  background-color: var(--cz-paper);
  border-bottom: 1px solid var(--cz-rule);
}

@supports (
  (-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))
) {
  .casazium-header-bar {
    background-color: rgba(247, 246, 243, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.casazium-header-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.casazium-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cz-ink);
  text-decoration: none;
}

.casazium-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
}

.casazium-wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cz-ink);
}

.casazium-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.casazium-nav-list li {
  margin: 0;
}

.casazium-nav-link {
  color: var(--cz-ink-3);
  font-weight: 400;
  text-decoration: none;
}

.casazium-nav-link:hover {
  color: var(--cz-ink);
}

/* The current page is ink; the others are ink-3. */
.casazium-nav-link.active {
  color: var(--cz-ink);
}

/* Secondary button with an ink border. */
.casazium-nav-signin {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--cz-ink);
  border-radius: 4px;
  color: var(--cz-ink);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.casazium-nav-signin:hover {
  color: var(--cz-ink-3);
}

.casazium-header-bar a:focus-visible {
  outline: 2px solid var(--cz-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Narrow viewports: unpinned, two rows ------------------------------
   The one place this stylesheet uses a media query. The design system's
   "fluid, no media queries" rule covers content layout; whether the header
   is pinned is a discrete state, and wrapping can't toggle position.
   Measured one-row fit is >= 540px of row width (Plex loaded, Sign in
   present); 600 leaves margin for classic scrollbars and fallback fonts.
   Below it: logo on row 1, nav + Sign in on row 2, and the header scrolls
   away instead of covering a quarter of a phone screen. Docs mirrors the
   SAME number in docs/.vitepress/theme/custom.css, where its fixed header
   stack goes back into flow and VitePress's own sticky local nav takes
   over. Change the two together. */
@media (max-width: 599px) {
  .casazium-header-bar {
    position: static;
  }

  .casazium-header-row {
    row-gap: 12px;
  }

  /* The nav always takes its own row here. */
  .casazium-header-row > nav {
    flex-basis: 100%;
  }

  /* 28px gaps don't fit four links plus Sign in in 312px; 16px does, with
     room to spare at 360. Wrapping stays on, so below ~340px Sign in drops
     to a third row rather than overflowing. */
  .casazium-nav-list {
    gap: 16px;
  }

  /* Sign in sits at the right edge, as on the wide layout. :has() so no
     markup changes; without it Sign in just follows Contact. Not
     :last-child - when Sign in is env-gated out, that would push Contact
     right. */
  .casazium-nav-list > li:has(> .casazium-nav-signin) {
    margin-left: auto;
  }
}

/* ---- Footer (HOMEPAGE-SPEC.md section 12) ------------------------------ */
.casazium-footer {
  font-family: var(--cz-font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  background-color: var(--cz-ink);
  color: var(--cz-on-dark-3);
  border-top: 1px solid var(--cz-rule);
}

.casazium-footer-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 14px;
}

.casazium-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.casazium-footer-brand img {
  display: block;
  height: 28px;
  width: auto;
  max-width: none;
}

.casazium-footer-wordmark {
  color: var(--cz-on-dark);
  font-size: 16px;
  font-weight: 600;
}

.casazium-footer-links {
  display: flex;
  /* 24px between links (spec); 8px between wrapped lines so a wrapped link
     row still reads as one group. */
  gap: 8px 24px;
  flex-wrap: wrap;
}

.casazium-footer-links a {
  color: var(--cz-on-dark-3);
  text-decoration: none;
}

.casazium-footer-links a:hover {
  color: var(--cz-on-dark);
}

.casazium-footer-copyright,
.casazium-footer-entity {
  font-family: var(--cz-font-mono);
  font-size: 12px;
  color: var(--cz-on-dark-4);
}

.casazium-footer-entity-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 44px;
  box-sizing: border-box;
}

.casazium-footer-entity {
  text-wrap: pretty;
}

.casazium-footer a:focus-visible {
  outline: 2px solid var(--cz-on-dark);
  outline-offset: 3px;
  border-radius: 2px;
}