/* ================================================================
   FLOWCRAFT WEBSITE — DESIGN SYSTEM
   Loaded after MonsterUI CDN CSS (Theme.headers()).
   Sections:
   1. Tailwind @theme overrides (breakpoints, font families)
   2. CSS custom properties (design tokens)
   2b. WCAG-compliant muted text utilities
   3. Typography global rules
   4. Touch target override (mobile)
   5. Image handling rules
   6. Animation constraints
   7. Form validation states
   8. Reduced motion
   9. HTMX indicator
   10. FAQ accordion
   11. Documentation content — prose styles
   ================================================================ */


/* ----------------------------------------------------------------
   1. TAILWIND @THEME OVERRIDES
   Requires Tailwind v4 CDN. Adds xs=375px breakpoint and overrides
   xl from 1280px to 1440px. All other breakpoints are unchanged.
   ---------------------------------------------------------------- */

@theme {
  --breakpoint-xs: 23.4375rem;   /* 375px — mobile test viewport */
  --breakpoint-xl: 90rem;        /* 1440px — wide desktop (overrides default 80rem/1280px) */
  --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}


/* ----------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES
   Animation tokens only. Spacing uses Tailwind utilities directly.
   Breakpoints are compile-time values, not runtime properties.
   ---------------------------------------------------------------- */

:root {
  /* Animation durations — 300ms is the hard ceiling */
  --duration-fast:   100ms;   /* instant feedback: button press, checkbox */
  --duration-normal: 200ms;   /* standard hover, focus transitions */
  --duration-slow:   300ms;   /* page-level transitions, modal entry (MAXIMUM) */

  /* Easing functions */
  --ease-standard: ease-out;      /* most transitions: exits, hover */
  --ease-enter:    ease-in-out;   /* elements entering the viewport */

  /* ----------------------------------------------------------------
     WCAG AA-compliant muted text color.
     #595959 on #ffffff = 7.0:1 (AAA).
     #595959 on bg-base-200/50 (~#f2f3f5) ≈ 7.3:1 (AAA).
     Use for secondary / supporting copy that must remain visually
     subordinate to primary text yet pass the 4.5:1 minimum.
     ---------------------------------------------------------------- */
  --color-text-muted: #595959;

  /* ----------------------------------------------------------------
     Gradient Energy design tokens (FCS-M-024)
     ---------------------------------------------------------------- */

  /* Hero section: subtle radial gradient wash */
  --gradient-hero: radial-gradient(ellipse at 30% 20%, oklch(var(--p) / 0.08) 0%, oklch(var(--p) / 0.03) 40%, transparent 70%);

  /* CTA section: blue-to-indigo linear gradient */
  --gradient-cta: linear-gradient(135deg, oklch(var(--p)) 0%, oklch(var(--p) / 0.85) 60%, var(--fc-ink) 100%);

  /* Card accent: horizontal gradient border */
  --gradient-accent-border: linear-gradient(90deg, oklch(var(--p)), var(--fc-ink));

  /* Surface tint: very subtle primary wash for alt sections */
  --color-surface-tint: oklch(var(--p) / 0.04);

  /* ----------------------------------------------------------------
     Brand palette (FCS-M-025)
     ---------------------------------------------------------------- */
  --fc-ink: #0b1a2b;
  --fc-flow: #19C2B1;
  --fc-flow-light: #A7E7E0;
  --fc-sand: #f2f4f6;
  --fc-steel: #5c6f82;
  --fc-warm-gray: #e8e6dc;
}

/* DaisyUI theme overrides — plain :root wins over @layer base */
:root {
  --p: 0.7329 0.1267 183.68;
  --pc: 0.2142 0.0397 252.79;
  --b1: 1.0000 0.0001 263.28;
  --b2: 0.9662 0.0035 248.23;
  --b3: 0.9237 0.0135 97.54;
  --bc: 0.2142 0.0397 252.79;
}

.dark,
[data-theme="dark"] {
  --p: 0.7329 0.1267 183.68;
  --pc: 0.2142 0.0397 252.79;
  --b1: 0.2142 0.0397 252.79;
  --b2: 0.2600 0.0420 252.79;
  --b3: 0.3000 0.0440 252.79;
  --bc: 1.0000 0.0001 263.28;
}


/* ----------------------------------------------------------------
   2b. WCAG-COMPLIANT MUTED TEXT UTILITIES
   Override UIkit's uk-text-muted (typically ~#999, ~2.85:1) with a
   value that passes WCAG AA 4.5:1 on both white and light gray
   backgrounds. Also provides a .text-muted Tailwind-style utility.
   ---------------------------------------------------------------- */

.uk-text-muted,
.text-muted {
  color: var(--color-text-muted) !important;
}


/* ----------------------------------------------------------------
   3. TYPOGRAPHY GLOBAL RULES
   Enforces two-family budget site-wide without per-component classes.
   H1–H3 use the heading family (Inter). All other text uses the body
   family (system stack).
   ---------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

body,
h4,
h5,
h6,
p,
li,
label,
input,
button,
select,
textarea {
  font-family: var(--font-body);
}

/* Prevent iOS viewport zoom: form inputs must be at least 16px on mobile */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 1rem; /* 16px — prevents iOS Safari zoom on focus */
  }
}


/* ----------------------------------------------------------------
   4. TOUCH TARGET OVERRIDE (MOBILE)
   Safety-net floor for all interactive elements below the md
   breakpoint (below 768px). Components should also be designed at
   the correct size — this is a fallback, not the primary mechanism.
   ---------------------------------------------------------------- */

@media (max-width: 767px) {
  button,
  .uk-button,
  input,
  select,
  textarea,
  [role="button"],
  a.btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .uk-accordion-title {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ----------------------------------------------------------------
   5. IMAGE HANDLING RULES
   Tailwind base reset already covers img max-width: 100%.
   This section makes the intent explicit and adds video + iframe.
   ---------------------------------------------------------------- */

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------------------------------
   6. ANIMATION CONSTRAINTS
   Sets --duration-normal as the default transition duration.
   Components may use a shorter value. No component may set a
   transition-duration longer than var(--duration-slow) (300ms).

   Prohibited Tailwind duration classes: duration-500, duration-700,
   duration-1000 (all exceed the 300ms cap).
   ---------------------------------------------------------------- */

*,
*::before,
*::after {
  transition-duration: var(--duration-normal);
}


/* ----------------------------------------------------------------
   7. FORM VALIDATION STATES
   Uses :user-invalid (not :invalid) so the red border only appears
   after the user has interacted with a field — not on initial page
   load when required fields are empty and technically :invalid.
   ---------------------------------------------------------------- */

input:user-invalid {
  border-color: var(--color-error, #ef4444);
  outline-color: var(--color-error, #ef4444);
}


/* ----------------------------------------------------------------
   8. REDUCED MOTION
   Collapses all animation and transition durations to near-zero
   when the user has requested reduced motion. Every affordance and
   information cue must remain accessible without motion.
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:      0.01ms !important;
    transition-duration:     0.01ms !important;
    scroll-behavior:         auto   !important;
  }
}


/* ----------------------------------------------------------------
   9. HTMX INDICATOR — LOADING SPINNER VISIBILITY
   HTMX normally injects its own CSS (opacity:0 on .htmx-indicator,
   opacity:1 on .htmx-request .htmx-indicator) when htmx.js loads.
   DaisyUI's .loading class sets display/animation properties that
   override HTMX's opacity-only approach and make the spinner visible
   on initial page load before any request is in flight.
   These rules override DaisyUI with display:none/inline-flex so the
   spinner is reliably hidden until an HTMX request is active.
   The !important flags are required to win specificity over DaisyUI.
   ---------------------------------------------------------------- */

.htmx-indicator {
  opacity: 0 !important;
  display: none !important;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1 !important;
  display: inline-flex !important;
}


/* ----------------------------------------------------------------
   10. FAQ ACCORDION — CHEVRON INDICATOR
   Rotates the chevron icon 180° when the accordion item is open.
   UIkit adds .uk-open to the Li element when expanded.
   The global transition-duration: var(--duration-normal) rule in
   section 6 covers the animation; only transform is declared here.
   prefers-reduced-motion is handled globally in section 8.
   ---------------------------------------------------------------- */

.faq-chevron {
  transition: transform var(--duration-normal) var(--ease-standard);
}

.uk-open > .uk-accordion-title .faq-chevron {
  transform: rotate(180deg);
}


/* ----------------------------------------------------------------
   11. DOCUMENTATION CONTENT — PROSE STYLES
   Applied to Markdown-rendered content inside .doc-content.
   Provides typography for h1-h3, paragraphs, lists, inline code,
   code blocks, links, and tables.
   ---------------------------------------------------------------- */

.doc-content h1 { font-size: 1.875rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.doc-content h2 { font-size: 1.5rem;   font-weight: 700; margin: 1.5rem 0 0.5rem; }
.doc-content h3 { font-size: 1.25rem;  font-weight: 600; margin: 1.25rem 0 0.5rem; }
.doc-content p  { margin-bottom: 1rem; line-height: 1.75; }
.doc-content ul,
.doc-content ol { margin: 0.75rem 0 0.75rem 1.5rem; }
.doc-content li { margin-bottom: 0.25rem; }
.doc-content code {
  font-size: 0.875em;
  background: oklch(var(--b2));
  padding: 0.15em 0.3em;
  border-radius: 3px;
}
.doc-content pre  { border-radius: 6px; overflow-x: auto; margin: 1rem 0; }
/* Reset inline code styles inside pre (Pygments provides code block styling) */
.doc-content pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.doc-content a   { color: oklch(var(--p)); text-decoration: underline; }
.doc-content a:hover { text-decoration-thickness: 2px; }
.doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.doc-content th,
.doc-content td { border: 1px solid oklch(var(--b3)); padding: 0.5rem 0.75rem; }
.doc-content th { background: oklch(var(--b2)); font-weight: 600; }


/* ----------------------------------------------------------------
   12. HOMEPAGE REDESIGN — HERO GRID, FEATURE ROWS, FOOTER DARK
   ADR-008 / FCS-M-022
   ---------------------------------------------------------------- */

/* Two-column hero: 55% text / 45% image at lg (1024px+).
   Stacks to single column on mobile and tablet.
   Using CSS grid-template-columns instead of Tailwind fraction
   classes because 55fr/45fr is not in the default Tailwind scale. */
.hero-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-two-col {
    grid-template-columns: 55fr 45fr;
    gap: 3rem;
  }
}

/* Feature showcase alternating rows.
   Each .feature-row is a two-column grid: text + image.
   Even-indexed rows (0, 2, …): text left, image right (default).
   Odd-indexed rows (1, 3, …): image left, text right via CSS order reversal.
   Template sets data-row-parity attribute; CSS handles the swap. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* Odd rows: reverse column order (image left, text right) */
  .feature-row[data-row-parity="odd"] .feature-row__text {
    order: 2;
  }

  .feature-row[data-row-parity="odd"] .feature-row__visual {
    order: 1;
  }
}

/* Product screenshot / placeholder visual.
   Renders a colored placeholder div when no image path is present.
   Actual <img> elements use the same sizing via width/height attrs. */
.screenshot-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, oklch(var(--p) / 0.15), oklch(var(--p) / 0.30));
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--p));
  font-size: 0.875rem;
  font-weight: 500;
}

/* Hero screenshot placeholder — slightly taller aspect ratio */
.screenshot-placeholder--hero {
  aspect-ratio: 4 / 3;
}


/* ----------------------------------------------------------------
   13. DARK MODE TOGGLE
   The .dark-mode-toggle button matches the .lang-toggle pill style.
   FrankenUI/Tailwind uses the "dark" class on <html> for dark mode
   (darkMode: 'selector' in tailwind config).
   ---------------------------------------------------------------- */

/* Dark theme: invert toggle button appearance to stay legible */
.dark .dark-mode-toggle {
  border-color: oklch(var(--bc) / 0.3);
  color: oklch(var(--bc) / 0.7);
}

.dark .lang-toggle {
  border-color: oklch(var(--bc) / 0.3);
  color: #ffffff;
}

.dark .dark-mode-toggle:hover {
  background-color: oklch(var(--bc) / 0.1);
  color: oklch(var(--bc));
}

.dark .lang-toggle:hover {
  background-color: oklch(var(--bc) / 0.1);
  color: #ffffff;
}

/* Dark theme: update muted text to use DaisyUI base-content for contrast */
.dark .uk-text-muted,
.dark .text-muted {
  color: oklch(var(--bc) / 0.6) !important;
}

.dark {
  --gradient-hero: radial-gradient(ellipse at 30% 20%, oklch(var(--p) / 0.12) 0%, transparent 60%);
  --gradient-cta: linear-gradient(135deg, oklch(var(--p) / 0.9) 0%, var(--fc-ink) 100%);
  --gradient-accent-border: linear-gradient(90deg, oklch(var(--p) / 0.8), var(--fc-ink));
  --color-surface-tint: oklch(var(--p) / 0.08);
}


/* ----------------------------------------------------------------
   14. GRADIENT ENERGY — DESIGN REFRESH (FCS-M-024)
   Gradient backgrounds, card hover effects, enhanced visual treatments.
   All transitions use existing duration tokens (max 300ms).
   ---------------------------------------------------------------- */

/* --- Hero gradient background --- */
.hero-gradient-bg {
  background-image: var(--gradient-hero);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- CTA section gradient background ---
   Replaces flat uk-section-primary on waitlist CTA sections.
   White text is mandatory on this background. */
.cta-gradient-bg {
  background-image: var(--gradient-cta);
  color: white;
}

/* Override DaisyUI form/button colors inside gradient CTA */
.cta-gradient-bg .uk-input,
.cta-gradient-bg .uk-select,
.cta-gradient-bg .uk-textarea {
  background-color: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
}

.card-gradient-border {
  position: relative;
  overflow: hidden;
}

/* --- Card hover lift ---
   GPU-composited (transform + box-shadow only).
   Duration comes from the global --duration-normal (200ms). */
.card-hover-lift {
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

.card-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Dark mode: slightly stronger shadow for visibility */
.dark .card-hover-lift:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3),
              0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* --- Surface tint for alt sections ---
   Applied alongside bg-base-200/50 for a subtle blue wash. */
.surface-tint {
  background-color: var(--color-surface-tint);
}


/* ===========================================================================
   SECTION 15 — WAITLIST PAGE
   New tokens: .waitlist-two-col grid + .fc-checkbox custom checkbox style
   See: Documentation/Implementation/Active/task-3-waitlist-design.md §1 and §6
   =========================================================================== */

/* 15a. Two-column grid: 60% content left / 40% form right at lg (1024px+).
        Single-column stack on mobile and tablet (< 1024px).
        align-items: start keeps the form card anchored to the top of the
        right column so it does not float mid-page when the left column is tall.
        Do NOT modify .hero-two-col — it is used by the homepage hero.        */

.waitlist-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .waitlist-two-col {
    grid-template-columns: 3fr 2fr;  /* 60/40 exact */
    gap: 3rem;
  }
}

/* 15b. Custom checkbox label — .fc-checkbox
        The <label class="fc-checkbox"> carries the 44×44 tap area via
        min-height + padding. The inner input[type="checkbox"] is pinned to
        a stable 20×20 visual with explicit border-radius on ALL viewports.

        The !important on min-height/min-width is required to override the
        Section 4 mobile touch-target rule (input { min-height: 44px !important })
        which would otherwise stretch the checkbox visual to 44×44 on mobile.

        The global Section 8 (prefers-reduced-motion: reduce) rule covers the
        transition declared below via the universal * selector — no scoped
        @media rule is needed.                                                 */

.fc-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;        /* 10px — approximately matches current gap-3 (12px) */
  min-height: 44px;     /* 44px tap area on the label */
  min-width: 44px;
  padding: 0.625rem 0;  /* contributes to 44×44 tap area vertically */
  cursor: pointer;
}

.fc-checkbox input[type="checkbox"] {
  width: 1.25rem;             /* 20px — matches current w-5 */
  height: 1.25rem;            /* 20px */
  border-radius: 0.25rem;     /* explicit square with rounded corners — on-brand */
  min-height: 1.25rem !important;  /* override Section 4 mobile safety net */
  min-width: 1.25rem !important;   /* override Section 4 mobile safety net */
  margin: 0;
  flex: none;                 /* prevent flex stretch */
  cursor: pointer;
  transition: background-color var(--duration-fast, 150ms) var(--ease-standard, ease),
              border-color var(--duration-fast, 150ms) var(--ease-standard, ease);
}


/* ===========================================================================
   SECTION 16 — FULL-BLEED HERO
   Cinematic top-of-page hero used by home + services. Image fills the
   viewport edge-to-edge; H1/subheadline/CTA overlay the lower-left third;
   a left-to-right Ink scrim ensures WCAG-AA contrast over any image region.

   Companion: section 17 (overlay-header). The sentinel inside the hero is
   what the IntersectionObserver in layout.py watches to swap the header.
   =========================================================================== */

/* Header height — used to pull the hero up under the sticky SiteHeader so
   the image truly starts at viewport y=0. Adjusts at the md breakpoint
   where the mobile-vs-desktop SiteHeader layout differs slightly. */
:root {
  --header-h: 57px;
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
  }
}

.hero-fullbleed {
  position: relative;
  width: 100%;
  min-height: 70vh;
  /* Pull the hero up under the sticky header so the constellation image
     starts at viewport y=0. The header sits at z-50, this section at z-0,
     so the header always wins the stacking contest. padding-top inside
     the content layer pushes the H1 back down out from under the header. */
  margin-top: calc(-1 * var(--header-h));
  overflow: hidden;
  background-color: var(--fc-ink); /* fallback while SVG is in flight */
}

@media (min-width: 768px) {
  .hero-fullbleed {
    min-height: 78vh;
  }
}

@media (min-width: 1024px) {
  .hero-fullbleed {
    /* Cinematic but not all-consuming. Cap absolute height so very tall
       windows do not produce a giant empty void below the text block. */
    min-height: 72vh;
    max-height: 820px;
  }
}

.hero-fullbleed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Decorative — semantic alt text is on the figure/img element */
}

/* Scrim — Ink gradient over the image so overlay text stays AA-readable.
   Desktop+: keeps a solid wall through the entire text column zone (out to
             ~58% viewport width) then fades. Anything below that opacity
             value under live text risks WCAG-AA fail on white body copy.
   Mobile:   vertical fade — text stacks top-to-bottom across the width. */
.hero-fullbleed__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11, 26, 43, 0.95) 0%,
    rgba(11, 26, 43, 0.92) 40%,
    rgba(11, 26, 43, 0.70) 60%,
    rgba(11, 26, 43, 0.30) 82%,
    rgba(11, 26, 43, 0.10) 100%
  );
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero-fullbleed__scrim {
    background: linear-gradient(
      to bottom,
      rgba(11, 26, 43, 0.55) 0%,
      rgba(11, 26, 43, 0.78) 55%,
      rgba(11, 26, 43, 0.92) 100%
    );
  }
}

.hero-fullbleed__content {
  position: relative; /* lifts above scrim */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  /* padding-top reserves space for the sticky overlay header so the H1
     never collides with logo/nav. padding-bottom gives the CTA breathing
     room from the lower image edge / scroll cue. */
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 4rem;
  padding-inline: 1rem;
  color: var(--fc-sand);
  /* On mobile + tablet the text column = the page column. Constrained
     enough to force a tight typographic rhythm; loose enough that EN/NL
     longer phrases still wrap to 3 lines, not 5. */
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .hero-fullbleed__content {
    padding-inline: 2rem;
    padding-bottom: 5rem;
    max-width: 36rem;
  }
}

@media (min-width: 1024px) {
  .hero-fullbleed__content {
    /* Switch to left-anchored full-container layout so the text block
       sits inside the dense scrim zone (left ~50%) while the constellation
       breathes on the right. uk-container width matches the rest of the
       site (1280px). The inner > * cap below keeps the text column itself
       tight enough to prevent H1 single-word orphans. */
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    align-self: stretch;
    padding-inline: 2.5rem;
  }

  .hero-fullbleed__content > * {
    max-width: 34rem; /* ~544px — keeps H1 to 3 lines, kills the orphan */
  }
}

/* Force Sand text colour on hero content — page baseline is Ink on white */
.hero-fullbleed__content h1,
.hero-fullbleed__content p {
  color: var(--fc-sand);
}

/* Hero-specific H1 sizing override.
   The shared HEADING_DISPLAY token jumps to text-7xl (4.5rem / 72px) at
   the xl breakpoint, which combined with the constrained text column
   produces 4–5 line wraps and a single-word "business" orphan on EN
   ("…across your / business"). Capping at 3.25rem / 52px at lg and
   3.75rem / 60px at xl keeps the same display character but tighter.
   text-wrap: balance distributes whichever lines remain so no single
   word lands alone on the last line. Browsers without balance support
   degrade to the same wrap they would produce today (no regression). */
.hero-fullbleed__content h1 {
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .hero-fullbleed__content h1 {
    font-size: 3.25rem;
    line-height: 1.05;
  }
}

@media (min-width: 1440px) {
  .hero-fullbleed__content h1 {
    font-size: 3.75rem;
  }
}

/* Sentinel — zero-pixel marker at the bottom of the hero. Used by the
   IntersectionObserver in layout.py to flip the header from transparent
   to solid when the user scrolls past the image. */
.hero-fullbleed__sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}


/* ===========================================================================
   SECTION 17 — OVERLAY HEADER MODE
   Activated by page_shell(hero_overlay=True) — sets data-overlay="true"
   on the <header>. Header starts transparent (sits on top of the hero
   image, navy/teal background carries the contrast for nav text + CTA).
   The IntersectionObserver toggles data-scrolled when the hero sentinel
   passes the top of the viewport, restoring the solid header look.

   All transitions cap at --duration-slow (300ms) per section 6.
   prefers-reduced-motion collapses transitions globally in section 8.
   =========================================================================== */

header[data-overlay="true"] {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition:
    background-color var(--duration-slow) var(--ease-standard),
    border-color     var(--duration-slow) var(--ease-standard);
}

/* Soft frosted-glass underlay: extends ~3rem below the header and fades
   to transparent so the blur edge does not read as a hard line. */
header[data-overlay="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  bottom: -3rem;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(11, 26, 43, 0.55) 0%,
    rgba(11, 26, 43, 0.35) 60%,
    rgba(11, 26, 43, 0) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

header[data-overlay="true"][data-scrolled="true"] {
  background-color: rgba(11, 26, 43, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom-color: rgba(25, 194, 177, 0.20);
}

/* Hide the soft underlay once the solid scrolled header takes over. */
header[data-overlay="true"][data-scrolled="true"]::before {
  opacity: 0;
}


/* ===========================================================================
   SECTION 18 — HOMEPAGE AI TEAM MAP (F-018)
   Three-column flow: channels -> AI team -> systems.
   Grid is driven by Tailwind utilities on the wrapper (grid-cols-1
   md:grid-cols-3 gap-...). This block owns: relative positioning context for
   the decorative connectors, the desktop column gap that gives the chevrons
   room to overlap, mobile reading order, and the model-strip layout.
   Connectors are hidden < 768px (the columns stack; a right arrow would
   point the wrong way) — handled by the `hidden md:flex` utility on the
   connector Div, mirrored here so the layout is self-documenting.
   See: Documentation/Design/Active/2026-06-02_f018-ai-team-map-design.md §5
   =========================================================================== */

.team-map {
  /* Desktop column gap large enough for the -right-5 connector to sit in the
     gutter without overlapping card content. On mobile the gap is smaller and
     vertical (Tailwind gap utilities still apply; this is the floor). */
  row-gap: 2rem;
}

@media (min-width: 768px) {
  .team-map {
    column-gap: 2.5rem;   /* ~40px gutter; connector w-10 (-right-5) overlaps it */
    align-items: stretch; /* equal-height column cards */
  }
}

/* Each column is the positioning context for its trailing connector. */
.team-map__col {
  position: relative;
}

/* Connector: hidden on mobile (columns stack vertically), shown md+.
   Positioning (absolute, top-1/2, -right-5, translate) is supplied by the
   Tailwind utility string on the Div; this rule is the responsive gate and a
   documentation anchor. Pointer-events off so it never intercepts clicks. */
.team-map__connector {
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Belt-and-suspenders: ensure the decorative connector is never visible
     when columns stack, even if a utility is dropped during refactor. */
  .team-map__connector {
    display: none;
  }

  /* Reading order on the smallest viewport is the natural DOM order:
     channels -> AI team -> systems. No `order` overrides needed because the
     DOM is already authored in reading order (unlike .feature-row). This
     comment documents the deliberate decision NOT to reorder. */
}

/* Model strip: centered, wrapping row of plain wordmark chips. */
.team-map__models {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

/* --- F-020 Visual Polish additions ---
   All new rules extend the existing SECTION 18 block.
   colour-mix() fallbacks via @supports cover pre-2023 Safari/Firefox. */

/* Centre column hero emphasis.
   Tinted surface: var(--fc-flow) at 6% gives a barely perceptible mint wash
   that distinguishes the card from the plain white side columns without
   violating the light-theme constraint. */
.team-map__col--center {
  background-color: color-mix(in srgb, var(--fc-flow) 6%, white);
  border-width: 2px;
  border-color: color-mix(in srgb, var(--fc-flow) 30%, transparent);
  box-shadow: 0 4px 16px -2px rgba(25, 194, 177, 0.12),
              0 2px 6px -1px rgba(11, 26, 43, 0.06);
  height: 100%;    /* fills the grid row when align-items:stretch is active */
}

/* Colour-mix fallback for browsers that don't support it (pre-2023 Safari).
   Falls back to the F-018 treatment — still passes the light-theme constraint. */
@supports not (background-color: color-mix(in srgb, red 6%, white)) {
  .team-map__col--center {
    background-color: var(--fc-sand);
    border-color: rgba(25, 194, 177, 0.30);
  }
}

/* Sub-group icon badge (centre column) — 48px */
.team-map__group-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: color-mix(in srgb, var(--fc-flow) 12%, white);
  border: 1px solid color-mix(in srgb, var(--fc-flow) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@supports not (background-color: color-mix(in srgb, red 12%, white)) {
  .team-map__group-badge {
    background-color: rgba(25, 194, 177, 0.12);
    border-color: rgba(25, 194, 177, 0.25);
  }
}

/* Side-column item icon badge — 32px */
.team-map__item-badge {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--fc-flow) 8%, white);
  border: 1px solid color-mix(in srgb, var(--fc-flow) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@supports not (background-color: color-mix(in srgb, red 8%, white)) {
  .team-map__item-badge {
    background-color: rgba(25, 194, 177, 0.08);
    border-color: rgba(25, 194, 177, 0.18);
  }
}

/* Side-column item as a bordered icon-pill (channels / systems).
   Boxing each item (vs a bare text row) gives the side columns visual
   structure and fills the vertical space against the taller centre column. */
.team-map__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--fc-warm-gray);
  background-color: #ffffff;
  transition: border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease,
              transform var(--duration-normal) ease;
}

.team-map__item:hover {
  border-color: color-mix(in srgb, var(--fc-flow) 45%, transparent);
  box-shadow: 0 2px 10px -3px rgba(25, 194, 177, 0.18);
  transform: translateY(-1px);
}

@supports not (border-color: color-mix(in srgb, red 45%, transparent)) {
  .team-map__item:hover {
    border-color: rgba(25, 194, 177, 0.45);
  }
}

/* Trust chip 2x2 grid — centre column.
   Fixed two-column layout prevents the orphaned-chip problem from the
   original flex-wrap. max-width ensures the grid does not sprawl on wide
   columns; auto-margins centre it. */
.team-map__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: 1.5rem;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

/* Individual trust chip pill. */
.team-map__chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background-color: var(--color-base-100, #ffffff);
  border: 1px solid color-mix(in srgb, var(--fc-flow) 20%, var(--fc-warm-gray));
  box-shadow: 0 1px 3px rgba(25, 194, 177, 0.08);
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

@supports not (border-color: color-mix(in srgb, red 20%, gray)) {
  .team-map__chip {
    border-color: rgba(25, 194, 177, 0.20);
  }
}

/* Section header — extra breathing room at md+ */
@media (min-width: 768px) {
  .team-map__header {
    margin-bottom: 3.5rem;
  }
}

/* Traceability micro-panel — sits inside the centre column below the chip grid. */
.team-map__trace {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background-color: color-mix(in srgb, var(--fc-flow) 5%, white);
  border: 1px solid color-mix(in srgb, var(--fc-flow) 20%, transparent);
}

@supports not (background-color: color-mix(in srgb, red 5%, white)) {
  .team-map__trace {
    background-color: var(--fc-sand);
    border-color: rgba(25, 194, 177, 0.20);
  }
}

/* Header row: icon badge + heading side by side. */
.team-map__trace-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

/* Small icon badge inside the trace header — 28px, same Teal wash as group badges. */
.team-map__trace-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background-color: color-mix(in srgb, var(--fc-flow) 12%, white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@supports not (background-color: color-mix(in srgb, red 12%, white)) {
  .team-map__trace-icon {
    background-color: rgba(25, 194, 177, 0.12);
  }
}

/* Guarantee lines list — no bullets, tight leading. */
.team-map__trace-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.team-map__trace-lines li {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fc-ink);
}

/* Teal check pip before each guarantee line.
   Uses a pseudo-element with a Unicode check so no additional icon call
   is needed inside the Li. Decorative — not read by screen readers. */
.team-map__trace-lines li::before {
  content: "\2713";   /* ✓ check mark — Unicode escape for CSS safety */
  color: var(--fc-flow);
  font-size: 0.75rem;
  line-height: 1.4;
  flex-shrink: 0;
  font-weight: 600;
}

/* CTA link — Ink base text (passes contrast), Teal underline, Teal on hover.
   Permanent underline satisfies WCAG 1.4.1 (Use of Color).
   Ink #0b1a2b on trace-panel background (~#f4fefe) is approximately 16:1 — AAA. */
.team-map__trace-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fc-ink);
  text-decoration: underline;
  text-decoration-color: var(--fc-flow);
  text-underline-offset: 2px;
  min-height: 2.75rem;    /* 44px — WCAG 2.5.5 touch target */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition: color var(--duration-normal) var(--ease-standard);
}

.team-map__trace-link:hover {
  color: var(--fc-flow);   /* Teal on hover — decorative; underline is always present */
}

.team-map__trace-link:focus-visible {
  outline: 2px solid var(--fc-flow);
  outline-offset: 2px;
  border-radius: 2px;
}