/* ============================================================================
   site.css — global enhancements layered over each page's inline styles.
   Loaded AFTER the inline <style> block so equal-specificity rules win by
   source order. Covers: accessibility contrast lifts, reduced-motion,
   mobile navigation (hamburger), and the skip link.
   ========================================================================== */

/* ── ACCESSIBLE ORANGE FOR TEXT ───────────────────────────────────────────
   --orange (#eb6a32) is 3.16:1 on white: fine as a fill, background or rule,
   but below the 4.5:1 WCAG AA floor for text, and every orange text on this
   site is under 24px, so all of it counts as "small". --orange-tx is the
   darkened text variant (4.80:1 on white) and is already in the palette as
   the Nylon 6,6 box on /solutions/nylon.

   Only light-theme surfaces need it. On the dark pages orange-on-dark already
   passes and darkening would make it worse — those pages (a2-instrument,
   admin) do not load this file at all, and the :root fallback keeps
   --orange-tx identical to --orange anywhere else.

   Use --orange-tx for `color:`. Keep --orange for backgrounds, borders,
   SVG strokes and diagram accents. */
:root { --orange-tx: var(--orange, #eb6a32); }
body.theme-light { --orange-tx: #c14e20; }

/* Three surfaces are tinted enough that #c14e20 lands just under 4.5:1
   (4.08-4.20). Lightening them to compensate would cost the banding that
   separates these sections from the white ones either side - the platform
   teaser would need its 0.10 grey cut to 0.036, i.e. erased. Re-point the
   token on the container instead: custom properties inherit, so every
   orange text inside picks up the deeper value with no selector changes.
   #b0451b is >= 4.57:1 on every tinted surface the site uses. */
body.theme-light .platform-teaser,
body.theme-light .enquiry-strip,
body.theme-light .vert-nav { --orange-tx: #b0451b; }

/* ── ACCESSIBLE ORANGE FOR SOLID BUTTONS ──────────────────────────────────
   The solid buttons set `background: var(--orange); color: var(--ink)`, and
   --ink is white under the light theme: 3.16:1, below the AA floor. Darken
   the fill rather than the label, so the button still reads as orange —
   white on --orange-btn is 4.80:1.

   Hover has to go DARKER, not lighter. Every one of these hovers to
   --orange-lt (#f08c5a) today, which drops white text to 2.44:1 — hovering
   currently makes the contrast worse than resting.

   Scoped to body.theme-light, which also out-specifies the per-page rules
   so it wins wherever it lands in the cascade. */
body.theme-light { --orange-btn: #c14e20; --orange-btn-hover: #a53f18; }
body.theme-light .btn-primary,
body.theme-light .btn-submit,
body.theme-light .form-submit,
body.theme-light .cta-waitlist,
body.theme-light .pc-filter.active,
body.theme-light .nav-cta:hover,
body.theme-light .skip-link,
body.theme-light .sc-consent-accept { background: var(--orange-btn); border-color: var(--orange-btn); }
body.theme-light .btn-primary:hover,
body.theme-light .btn-submit:hover,
body.theme-light .form-submit:hover,
body.theme-light .cta-waitlist:hover,
body.theme-light .sc-consent-accept:hover { background: var(--orange-btn-hover); border-color: var(--orange-btn-hover); }

/* ── SKIP LINK ────────────────────────────────────────────────────────────*/
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 1000;
  background: var(--orange); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  padding: 10px 18px; border-radius: 2px; transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ── ACCESSIBILITY: CONTRAST LIFTS ────────────────────────────────────────
   The design leans on very low text opacities that fail WCAG AA on the dark
   background. These nudge the worst offenders up without altering the look.
   Footer classes are shared by every page; the rest cover the common
   content components across templates.                                      */
/* Theme-aware foreground: defaults to white (dark pages); light pages set
   `class="theme-light"` on <body> to flip these to slate. */
body.theme-light { --sc-fg: 55,71,79; color-scheme: light; }

.section-body,
.hero-sub,
.hero-body,
.intro-body,
.signal-body { color: rgba(var(--sc-fg,255,255,255),0.8); }

.problem-desc,
.tech-pillar-desc,
.tech-header-right,
.chem-oneliner,
.chem-desc,
.cs-card-desc,
.enabler-desc,
.feature-desc,
.app-card-desc,
.step-desc { color: rgba(var(--sc-fg,255,255,255),0.8); }

.tech-attr-text,
.footer-col-title,
.footer-links a,
.chem-feedstock,
.stat-label,
.proof-strip-lbl,
.cs-card-index,
.cta-option-label { color: rgba(var(--sc-fg,255,255,255),0.8); }

.footer-address { color: rgba(var(--sc-fg,255,255,255),0.8); }
.footer-copy,
.footer-legal a { color: rgba(var(--sc-fg,255,255,255),0.8); }

/* ── MOBILE NAVIGATION ────────────────────────────────────────────────────*/
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px 8px;
    background: transparent; border: 0.5px solid var(--rule); border-radius: 2px;
    cursor: pointer; flex-shrink: 0;
  }
  .nav-toggle span {
    display: block; height: 1.5px; width: 100%;
    background: rgba(255,255,255,0.7); transition: transform 0.25s, opacity 0.25s;
  }
  nav.open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Reveal the existing link list as a dropdown panel when open.
     Higher specificity than the inline `.nav-links{display:none}` rule. */
  nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(26,31,34,0.97); backdrop-filter: blur(14px);
    border-bottom: 0.5px solid var(--rule);
    padding: 8px 24px 20px;
  }
  nav.open .nav-links li { width: 100%; }
  nav.open .nav-links a {
    display: block; padding: 16px 0; font-size: 13px;
    border-bottom: 0.5px solid var(--rule); color: rgba(255,255,255,0.7);
  }
  nav { position: fixed; }
}

/* ── REDUCED MOTION ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Ensure animated-in content is visible even with animations disabled. */
  .reveal { opacity: 1 !important; transform: none !important; }
  [class*="hero-"] { opacity: 1 !important; }
}

/* ── SCROLL PROGRESS BAR (scroll-linked) ──────────────────────────────────*/
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--orange, #eb6a32);
  z-index: 200; pointer-events: none;
}

/* ── PAGE TRANSITIONS (View Transitions API; graceful no-op elsewhere) ─────*/
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: ease; }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.001s !important; }
}

/* ── THEME-LIGHT TUNING (shared; wins over inline styles by source order) ──── */
body.theme-light .nav-links a { color: rgba(55,71,79,0.8); }
body.theme-light .nav-links a:hover { color: rgba(55,71,79,0.95); }
body.theme-light .nav-logo-name { color: rgba(55,71,79,0.9); }
body.theme-light .page-sub { color: rgba(55,71,79,0.8); }
body.theme-light .testimonial-role { color: rgba(55,71,79,0.8); }
body.theme-light .testimonial-name { color: rgba(55,71,79,0.88); }
body.theme-light .tech-pillar-unit { color: rgba(55,71,79,0.8); }
body.theme-light .btn-ghost { color: rgba(55,71,79,0.8); border-color: rgba(55,71,79,0.35); }
body.theme-light .btn-ghost:hover { color: rgba(55,71,79,0.95); border-color: rgba(55,71,79,0.55); }
/* mobile menu on light pages */
body.theme-light nav.open .nav-links { background: rgba(255,255,255,0.98); border-bottom-color: rgba(55,71,79,0.12); }
body.theme-light nav.open .nav-links a { color: rgba(55,71,79,0.82); border-bottom-color: rgba(55,71,79,0.1); }
body.theme-light .nav-toggle span { background: rgba(55,71,79,0.7); }
body.theme-light .partner-logo { opacity: 0.6; }
body.theme-light .partner-logo:hover { opacity: 0.9; }

/* ── COOKIE CONSENT BANNER ──────────────────────────────────────────────────*/
.sc-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  background: #ffffff; color: #37474f;
  border: 0.5px solid rgba(55,71,79,0.16);
  box-shadow: 0 12px 34px rgba(55,71,79,0.20);
  border-radius: 8px; padding: 16px 20px;
  font-family: 'Instrument Sans', sans-serif;
}
.sc-consent-text { flex: 1 1 300px; margin: 0; font-size: 13px; line-height: 1.55; color: rgba(55,71,79,0.82); }
.sc-consent-text a { color: var(--orange-tx); text-decoration: underline; }
.sc-consent-actions { display: flex; gap: 10px; margin-left: auto; }
.sc-consent-btn {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 9px 18px; border-radius: 2px;
  cursor: pointer; border: 0.5px solid; transition: all 0.2s;
}
.sc-consent-reject { background: transparent; color: rgba(55,71,79,0.8); border-color: rgba(55,71,79,0.3); }
.sc-consent-reject:hover { color: #37474f; border-color: rgba(55,71,79,0.55); }
.sc-consent-accept { background: #eb6a32; color: #fff; border-color: #eb6a32; }
.sc-consent-accept:hover { background: #f08c5a; border-color: #f08c5a; }
@media (max-width: 520px) {
  .sc-consent-actions { width: 100%; }
  .sc-consent-btn { flex: 1; }
}
/* Insight news tag: readable blue on the light theme */
body.theme-light .tag-insight { color: rgba(31,88,140,0.95); background: rgba(63,127,186,0.14); }

/* ── VISIBLE KEYBOARD FOCUS (WCAG 2.4.7) ─────────────────────────────────────
   A consistent focus ring for keyboard users only (:focus-visible, not mouse
   clicks). Higher specificity than the form controls' inline `outline:none`,
   so those get a visible ring on keyboard focus too. Orange works on light
   and dark surfaces; falls back if --orange is undefined. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
summary:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--orange, #eb6a32);
  outline-offset: 2px;
}

/* ── FEATURE IMAGERY ────────────────────────────────────────────────────────
   One treatment for every feature photograph: greyscale, with colour on
   hover. Loaded after each page's inline <style>, so it overrides the
   per-page brightness/saturate values inherited from the dark theme — those
   were three different combinations across three surfaces, none of them
   deliberate, and all of them muddy on white.

   Hero images are deliberately excluded -- see below.

   Note for touch devices: there is no hover, so these render greyscale
   throughout. That is the intended house look. To show colour instead where
   hover is unavailable, wrap the two filter rules below in
   @media (hover: hover).                                                   */
.cs-featured-img img,
.cs-card-img,
.news-item-img img {
  filter: grayscale(1);
  transition: filter 0.45s ease, transform 0.5s ease;
}
.cs-featured:hover .cs-featured-img img,
.cs-index-card:hover .cs-card-img,
.cs-card:hover .cs-card-img,
.news-item:hover .news-item-img img {
  filter: grayscale(0);
}

/* Hero images take no treatment at all: the featured image at the top of
   /news, and the in-article hero on a news post. Neither is a card to click
   into, so there is nothing for a hover reveal to lead to. Cards keep the
   greyscale treatment above.

   filter: none is explicit rather than just omitting them, because both
   carry a dark-theme value of their own (news.html brightness(.7)
   saturate(.5); news-article.njk brightness(.75) saturate(.55)). Leaving
   them out of the rule above would fall back to that dulling, not to the
   photograph. */
.news-featured-img img,
.article-featured-img img { filter: none; }