/* ============================================================
   Corvair global site chrome: shared header (with dropdown nav)
   and footer for every page in the /cks product area.
   Relies on the design tokens (--bg, --teal-br, --mono, .ms, ...)
   already defined on each page (inline or via docs.css), so it
   layers on top of both the marketing and the docs page styles.
   British spelling, no em or en dashes. JS-free.
   ============================================================ */

/* ---- header ---- */
.gnav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg, #081726) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line, rgba(125,165,200,0.14)); }
.gnav-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 14px; height: 60px; }
.gnav a { color: inherit; text-decoration: none; }

.gnav-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.gnav-brand img { width: 30px; height: 30px; object-fit: contain; }
.gnav-brand .nm { font-family: var(--serif); font-size: 19px; line-height: 1; color: var(--fg); }
.gnav-brand .sb { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); display: block; margin-top: 3px; }
.gnav-pill { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-br); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px; flex: 0 0 auto; }

.gnav-spacer { flex: 1; }

.gnav-menu { display: flex; align-items: center; gap: 2px; }
.gnav-item { position: relative; }
.gnav-link { display: inline-flex; align-items: center; gap: 3px; padding: 9px 12px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--fg-2); border-radius: 8px; white-space: nowrap; }
.gnav-link:hover, .gnav-item:hover .gnav-link, .gnav-link.on { color: var(--teal-br); }
.gnav-item.has-drop > .gnav-link::after { content: "expand_more"; font-family: "Material Symbols Rounded"; font-size: 16px; color: var(--faint); margin-left: -1px; }

.gnav-drop { position: absolute; top: calc(100% - 2px); left: 0; min-width: 232px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 13px; box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .14s, transform .14s, visibility .14s; }
.gnav-item:hover .gnav-drop, .gnav-item:focus-within .gnav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.gnav-drop a { display: block; padding: 8px 11px; font-size: 13px; color: var(--fg-2); border-radius: 8px; line-height: 1.3; }
.gnav-drop a:hover { background: var(--surface); color: var(--fg); }
.gnav-drop a .d { display: block; font-size: 11px; color: var(--faint); font-weight: 400; margin-top: 1px; }
.gnav-drop .gl { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 8px 11px 4px; }
.gnav-drop .gl:first-child { padding-top: 3px; }
.gnav-drop .ext { color: var(--violet); }

/* wide multi-column mega panel (Solutions, Resources) */
.gnav-drop.mega { display: flex; flex-wrap: wrap; gap: 10px 12px; width: max-content; max-width: 430px; padding: 14px; left: auto; right: 0; }
.gnav-drop.mega .mcol { min-width: 172px; }
.gnav-drop.mega .mcol a { padding: 7px 11px; }

.gnav-search { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--fg-2); flex: 0 0 auto; margin-left: 6px; }
.gnav-search:hover { color: var(--teal-br); border-color: var(--teal); }
.gnav-search .ms { font-size: 19px; }
.gnav-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 9px; color: #04211c; background: linear-gradient(180deg, var(--teal-br), var(--teal)); box-shadow: 0 8px 22px rgba(18,179,160,0.32); flex: 0 0 auto; margin-left: 8px; }
.gnav-cta:hover { filter: brightness(1.06); }
.gnav-cta .ms { font-size: 17px; }

.gnav-tog { display: none; }
.gnav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--fg); cursor: pointer; background: transparent; flex: 0 0 auto; }
.gnav-burger .ms { font-size: 22px; }

/* ---- mobile ---- */
@media (max-width: 1024px) {
  .gnav-burger { display: inline-flex; }
  .gnav-menu { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 14px 16px; max-height: calc(100vh - 60px); overflow-y: auto; }
  .gnav-tog:checked ~ .gnav-menu { display: flex; }
  .gnav-item { position: static; }
  .gnav-link { padding: 12px 8px; font-size: 15px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .gnav-item.has-drop > .gnav-link::after { margin-left: auto; }
  .gnav-drop { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 4px 0 8px 12px; border-radius: 0; }
  .gnav-drop a { padding: 8px 8px; }
  .gnav-drop.mega { flex-direction: column; gap: 0; width: auto; max-width: none; padding: 4px 0 8px 12px; }
  .gnav-drop.mega .mcol { min-width: 0; }
  .gnav-search { width: 100%; justify-content: flex-start; gap: 8px; height: auto; padding: 12px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
  .gnav-search::after { content: "Search"; font-family: var(--sans); font-size: 15px; }
  .gnav-cta { margin: 14px 0 4px; justify-content: center; padding: 12px; font-size: 14px; }
}

/* ---- footer ---- */
.gfoot { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 48px; }
.gfoot-in { max-width: 1180px; margin: 0 auto; padding: 46px 28px 30px; }
.gfoot a { color: inherit; text-decoration: none; }
.gfoot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .gfoot-cols { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .gfoot-cols { grid-template-columns: 1fr; } }
.gfoot-brand { max-width: 30ch; }
.gfoot-brand .b { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.gfoot-brand .b img { width: 28px; height: 28px; object-fit: contain; }
.gfoot-brand .b .nm { font-family: var(--serif); font-size: 18px; color: var(--fg); }
.gfoot-brand p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.gfoot-col .gl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.gfoot-col a { display: block; font-size: 13px; color: var(--fg-2); padding: 5px 0; }
.gfoot-col a:hover { color: var(--teal-br); }
.gfoot-col a .ext-mark { color: var(--faint); font-size: 11px; }
.gfoot-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--faint); }
.gfoot-bar .sp { flex: 1; }
.gfoot-bar .tag { color: var(--teal-br); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; }

/* injected-chrome placeholders: display:contents keeps .gnav sticky (no containing block) */
#header-placeholder, #footer-placeholder { display: contents; }

/* ===== warm colour pass (site-wide) =============================
   Activates the amber / coral / emerald accent tokens and gives pages a
   warm, textured section rhythm. body-prefixed so these win over the
   per-page inline <style> defaults, which load after site.css. */

body .eyebrow { color: var(--amber, #e0a93f); }

body .card:not(.bad):not(.meh):not(.good):nth-child(4n+1) .ic { background: var(--teal-soft, rgba(58,214,194,0.12)); color: var(--teal-br, #3ad6c2); }
body .card:not(.bad):not(.meh):not(.good):nth-child(4n+2) .ic { background: rgba(224,169,63,0.15);  color: var(--amber, #e0a93f); }
body .card:not(.bad):not(.meh):not(.good):nth-child(4n+3) .ic { background: rgba(224,115,92,0.15);  color: var(--coral, #e0735c); }
body .card:not(.bad):not(.meh):not(.good):nth-child(4n)   .ic { background: rgba(47,191,143,0.15);  color: var(--emerald, #2fbf8f); }

body section:nth-of-type(4n+1) { background:
    radial-gradient(1000px 460px at 84% -12%, rgba(224,169,63,0.12), transparent 60%),
    radial-gradient(760px 420px at 6% 118%, rgba(224,115,92,0.10), transparent 60%),
    radial-gradient(rgba(224,169,63,0.16) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(rgba(125,165,200,0.05) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(125,165,200,0.05) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(180deg, #14263c, #0f1f33); }
body section:nth-of-type(4n+3) { background:
    radial-gradient(940px 440px at 12% -14%, rgba(47,191,143,0.11), transparent 60%),
    radial-gradient(720px 420px at 92% 116%, rgba(224,169,63,0.10), transparent 60%),
    radial-gradient(rgba(47,191,143,0.15) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(rgba(125,165,200,0.05) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(125,165,200,0.05) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(180deg, #132a3f, #0e2033); }

body .note { border-left-color: var(--coral, #e0735c); }
body .note .ms { color: var(--coral, #e0735c); }

body .hero::before { background:
    radial-gradient(860px 440px at 80% -10%, rgba(58,214,194,0.16), transparent 60%),
    radial-gradient(620px 420px at 4% 12%, rgba(224,169,63,0.15), transparent 58%),
    radial-gradient(520px 380px at 60% 120%, rgba(224,115,92,0.10), transparent 60%); }