/**
 * Phase 10.1 Launch-Readiness styles.
 * Loaded globally via koallabs/launch_readiness library (koallabs.info.yml)
 * so the Klaro banner + footer manage-cookies link appear on every page
 * including 404 and the legal pages.
 *
 * Covers: Klaro brand overrides, legal-page surfaces, 404 page, scorecard
 * privacy link, footer manage-cookies link.
 *
 * Token discipline: ONLY var(--color-*) + var(--spacing-*) + var(--transition-*)
 * + var(--font-*). Raw rgba() allowed for shadows/track only (precedent:
 * site-shell.css). No new design tokens. No raw pixel values for spacing.
 * 400/600 font weights only.
 *
 * See 10.1-UI-SPEC.md §New CSS File Contract.
 */

/* ===========================================================================
   Legal pages (/privacy, /terms)
   =========================================================================== */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-3xl);
}

.legal-page-header {
  margin-bottom: var(--spacing-xl);
}

.legal-draft-marker {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  border-left: 3px solid var(--color-accent);
  background: var(--color-background-secondary);
  border-radius: 4px;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-md) 0;
  color: var(--color-foreground-muted);
  font-size: 14px;
  font-weight: 600;
}

.legal-draft-marker svg {
  flex: 0 0 auto;
  color: var(--color-accent);
}

.legal-last-updated {
  font-size: 14px;
  color: var(--color-foreground-subtle);
  margin: var(--spacing-sm) 0 var(--spacing-lg);
}

.legal-toc {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.legal-toc summary {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-foreground-muted);
  cursor: pointer;
}

.legal-toc a {
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.legal-toc a:hover {
  color: var(--color-accent);
}

.legal-body {
  max-width: 720px;
  margin: 0 auto;
}

.legal-page-footer {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  color: var(--color-foreground-muted);
  font-size: 14px;
}

/* ===========================================================================
   Scorecard privacy link (point-of-capture, below email input)
   =========================================================================== */
.scorecard-privacy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 14px;
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.scorecard-privacy-link a {
  color: var(--color-foreground-muted);
  text-decoration: underline;
}

.scorecard-privacy-link a:hover {
  color: var(--color-accent);
}

/* ===========================================================================
   404 page
   =========================================================================== */
.page-404 {
  min-height: 60vh;
  padding: var(--spacing-3xl) 0;
}

.page-404 .eyebrow {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.page-404 h1 {
  margin-bottom: var(--spacing-md);
}

.page-404 .sub-headline {
  color: var(--color-foreground-muted);
  margin-bottom: var(--spacing-lg);
}

.page-404 .path-stamp {
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--color-foreground-subtle);
  margin-bottom: var(--spacing-xl);
}

.page-404 .cta-row {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
}

/* ===========================================================================
   Footer "Manage cookie preferences" link (.bottom strip)
   =========================================================================== */
.footer-manage-cookies {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  color: var(--color-foreground-subtle);
  transition: color var(--transition-fast);
}

.footer-manage-cookies:hover {
  color: var(--color-accent);
}

/* ===========================================================================
   Klaro consent UI — brand override (Klaro 3.x)
   This Klaro version styles the banner/modal via --klaro-* custom properties on
   the .klaro container, over an upstream light-theme panel background. Klaro's
   `additionalClass` (klaro.settings library.additional_class = "klaro-override",
   Plan 05) is added to the .klaro WRAPPER element (verified via live
   drupalSettings + module klaro-override.css — memory
   feedback_inspect_dom_before_planning_selectors). So we override the variables
   and the panel surfaces under .klaro.klaro-override.
   =========================================================================== */
.klaro.klaro-override {
  /* Upstream Klaro theme palette (var(--name, #default) in klaro.min.css /
     klaro-extend.css) — re-pointed to the Koallabs dark brand. */
  --light1: var(--color-card);               /* panel background */
  --white2: var(--color-background-secondary);
  --white3: var(--color-border);
  --light2: var(--color-border);             /* borders */
  --light3: var(--color-foreground-subtle);
  --dark1: var(--color-foreground);          /* primary text */
  --dark2: var(--color-foreground);
  --dark3: var(--color-foreground-muted);
  --green1: var(--color-accent);             /* sliders / accents */
  --green2: var(--color-accent);
  --green3: var(--color-accent);
  --blue1: var(--color-accent);              /* links */
  --blue2: var(--color-accent);

  /* Module --klaro-* button/link variables */
  --klaro-primary-color: var(--color-accent);
  --klaro-button-bg: var(--color-accent);
  --klaro-button-text-color: var(--color-background);
  --klaro-button-bg-hover: var(--color-foreground);
  --klaro-button-text-color-hover: var(--color-background);
  --klaro-button-border: 1px solid var(--color-accent);
  --klaro-button-border-hover: 1px solid var(--color-foreground);
  --klaro-button-border-radius: 4px;
  --klaro-link-color: var(--color-accent);
  --klaro-link-color-hover: var(--color-accent);
  --klaro-slider-bg-active: var(--color-accent);
}

/* Panel surfaces — dark brand (override the upstream light theme) */
.klaro.klaro-override .cookie-notice,
.klaro.klaro-override .cookie-modal .cm-modal,
.klaro.klaro-override .context-notice {
  background: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); /* raw rgba for shadow only */
}

.klaro.klaro-override .cookie-notice,
.klaro.klaro-override .cookie-modal {
  z-index: 200; /* above sticky header (z-index 50) */
}

/* All consent-UI text uses the brand font + foreground colour */
.klaro.klaro-override .cookie-notice,
.klaro.klaro-override .cookie-notice p,
.klaro.klaro-override .cookie-notice strong,
.klaro.klaro-override .cookie-modal,
.klaro.klaro-override .cookie-modal p,
.klaro.klaro-override .cookie-modal .cm-title,
.klaro.klaro-override .cookie-modal .cm-purpose {
  color: var(--color-foreground);
  font-family: var(--font-sans);
}

/* Decline non-essential → neutral surface, equal prominence to Accept all */
.klaro.klaro-override .cm-btn.cm-btn-decline {
  background: var(--color-background-secondary);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}

.klaro.klaro-override .cm-btn.cm-btn-decline:hover {
  background: var(--color-border);
  color: var(--color-foreground);
}

/* 44px touch targets on all consent buttons */
.klaro.klaro-override .cm-btn {
  min-height: 44px;
}