/*
 * naluma-pages — shared CSS for verify + legal surfaces.
 *
 * Design tokens mirror the Naluma email-template palette and align with
 * naluma-design-system/build/css/tokens.css. Every hex below corresponds
 * 1:1 to a `--primitive-color-*` in the design system (e.g. `--color-bg`
 * = `--primitive-color-warm-white`). Spacing/radius primitives match
 * `--primitive-{spacing,radius}-*` 1:1. Easing matches
 * `--primitive-easing-default`.
 *
 * TODO(ds-import): replace these redeclarations with a direct `@import`
 * of naluma-design-system/build/css/tokens.css once the pipeline can
 * resolve a cross-repo import (today, naluma-pages is a self-contained
 * subdirectory of naluma-app and doesn't depend on naluma-design-system).
 *
 * Mobile-first. Max content width 720px. Accessible focus rings +
 * 44×44 touch targets. Loaded as styles.<8charHash>.css — long-cached
 * and immutable.
 */

/* -----------------------------------------------------------------
   Self-hosted web fonts. Variable-font woff2 files copied from the
   naluma-wordpress theme (the canonical asset source). Self-hosting
   avoids the GDPR exposure of Google Fonts (Schrems II — 2022 LG
   München I ruling held that embedding Google Fonts without consent
   violates GDPR; pertinent for the German market).
   font-display:swap keeps the unstyled-text flash short.
   ----------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/PlusJakartaSans-VariableFont.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/Literata-VariableFont.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/Literata-Italic-VariableFont.woff2') format('woff2-variations');
}

:root {
  --color-bg: #fbfaf1;
  --color-surface: #ffffff;
  --color-pale-wheat: #f9dfae;
  --color-text-primary: #3d2e2a;
  --color-text-secondary: #7a6560;
  --color-text-muted: #b09a90;
  --color-action: #a55838;
  --color-action-hover: #914d31;
  --color-divider: rgba(122, 101, 96, 0.16);
  --color-error-text: #8b2e2e;

  --radius-md: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;

  /* Matches `--primitive-font-family-{heading,body}` in tokens.css. */
  --font-heading: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-body: 16px;
  --font-size-heading-h1: 28px;
  --font-size-heading-h2: 22px;
  --font-size-small: 14px;
  --font-size-meta: 13px;
  --font-weight-semibold: 600;

  /* Matches `--primitive-easing-default` in tokens.css. */
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  /* Matches `--primitive-shadow-md` in tokens.css. */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
               0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Layout chrome (header + footer) — shared across all surfaces
   ============================================================ */

.page-header {
  background: var(--color-surface);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: 1px solid var(--color-divider);
}
.page-header img.logo {
  display: block;
  width: 160px;
  height: 32px;
  border: 0;
  margin: 0 auto; /* horizontal centering within the page-header bar */
}

.page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-32) var(--spacing-24);
}

.page-footer {
  max-width: 720px;
  margin: var(--spacing-48) auto 0;
  padding: var(--spacing-24);
  border-top: 1px solid var(--color-divider);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}
.page-footer .legal-links {
  margin: 0 0 var(--spacing-12);
}
.page-footer .legal-links a {
  color: var(--color-text-muted);
  text-decoration: underline;
}
.page-footer .legal-links a:hover,
.page-footer .legal-links a:focus-visible {
  color: var(--color-action);
}
.page-footer .legal-copyright,
.page-footer .legal-address {
  margin: var(--spacing-4) 0;
  font-size: var(--font-size-meta);
}

/* Locale-switcher row above the footer (legal pages only; verify page hides). */
.locale-switcher {
  max-width: 720px;
  margin: var(--spacing-24) auto 0;
  padding: 0 var(--spacing-24);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: right;
}
.locale-switcher a {
  color: var(--color-text-muted);
  text-decoration: underline;
  margin-left: var(--spacing-8);
}
.locale-switcher a:hover,
.locale-switcher a:focus-visible {
  color: var(--color-action);
}
.locale-switcher .current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  margin-left: var(--spacing-8);
}

/* ============================================================
   Legal-page content — rendered markdown
   ============================================================ */

.legal-doc h1 {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text-primary);
}
.legal-doc .legal-meta {
  margin: 0 0 var(--spacing-32);
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
}
.legal-doc h2 {
  margin: var(--spacing-32) 0 var(--spacing-12);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.legal-doc h3 {
  margin: var(--spacing-24) 0 var(--spacing-8);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}
.legal-doc p {
  margin: 0 0 var(--spacing-16);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.legal-doc ul, .legal-doc ol {
  margin: 0 0 var(--spacing-16) var(--spacing-24);
  padding: 0;
  color: var(--color-text-secondary);
}
.legal-doc li {
  margin: 0 0 var(--spacing-8);
  line-height: 1.7;
}
.legal-doc a {
  color: var(--color-action);
  text-decoration: underline;
}
.legal-doc a:hover,
.legal-doc a:focus-visible {
  color: var(--color-action-hover);
}
.legal-doc strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
.legal-doc hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--spacing-32) 0;
}

/* Hide non-current locale variants — JS reveals the matching one. */
.legal-variant {
  display: none;
}
.legal-variant.active {
  display: block;
}

/* ============================================================
   Verify-page-specific (state-machine UI)
   ============================================================ */

.verify-card {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--spacing-32) var(--spacing-24);
  box-shadow: var(--shadow-md);
}
.verify-card h1 {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}
.verify-card p {
  margin: 0 0 var(--spacing-24);
  color: var(--color-text-secondary);
}
.verify-btn {
  appearance: none;
  border: none;
  background: var(--color-action);
  color: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--spacing-24);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms var(--easing-default);
}
.verify-btn:hover,
.verify-btn:focus-visible {
  background: var(--color-action-hover);
}
.verify-btn:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}
.verify-btn[disabled] {
  background: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}
.verify-hint {
  margin-top: var(--spacing-24);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* Inline spinner shown during POST. */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-surface);
  border-radius: 50%;
  margin-right: var(--spacing-8);
  animation: spin 720ms linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-tone {
  color: var(--color-error-text);
}

/* Respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.6);
  }
}

/* ============================================================
   Share landing page (share.naluma.app/s/<token>)
   ------------------------------------------------------------
   Warm earth tones reused from the shared palette: sand
   (--color-pale-wheat #f9dfae) surfaces, burnt-sienna action
   (--color-action #a55838), dark text (--color-text-primary
   #3d2e2a) — WCAG AA dark-on-light. Content is the hero; the
   "get the app" ask is soft + secondary.
   ============================================================ */

.share-root {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.share-loading {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--spacing-32) 0;
}

/* --- In-header language switcher (live pages only) --- */
.share-langbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--spacing-16);
  /* Empty (single-language or expired) ⇒ collapses with no layout jump. */
  min-height: 0;
}
.share-lang-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: var(--spacing-8) var(--spacing-12);
  font-family: inherit;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.share-lang-select:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.share-title {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* --- Insight: horizontal swipe cards --- */
.share-card-rail {
  display: flex;
  gap: var(--spacing-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--spacing-4) 0 var(--spacing-16);
  margin: 0 calc(-1 * var(--spacing-8));
}
.share-card {
  scroll-snap-align: center;
  flex: 0 0 85%;
  max-width: 480px;
  margin: 0 var(--spacing-8);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-24);
}
.share-card-number {
  margin: 0 0 var(--spacing-8);
  font-size: var(--font-size-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.share-card-title {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-h2);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}
.share-card-body {
  margin: 0 0 var(--spacing-12);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.share-card-body:last-child {
  margin-bottom: 0;
}
.share-card-footer {
  text-align: center;
  margin: var(--spacing-8) 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* Pager dots */
.share-dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  margin: var(--spacing-12) 0 0;
}
.share-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-divider);
  transition: background-color 160ms var(--easing-default);
}
.share-dot.active {
  background: var(--color-action);
}

/* --- Audio --- */
.share-audio-description {
  margin: 0 0 var(--spacing-16);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.share-why-link {
  appearance: none;
  border: none;
  background: none;
  padding: var(--spacing-12) 0;
  margin: 0 0 var(--spacing-16);
  min-height: 44px;
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}
.share-why-link:hover,
.share-why-link:focus-visible {
  color: var(--color-action-hover);
}
.share-audio-player {
  display: block;
  width: 100%;
  margin: 0 0 var(--spacing-24);
}

/* --- "Why this works" overlay --- */
.share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(61, 46, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
  z-index: 1000;
  opacity: 1;
  transition: opacity 160ms var(--easing-default);
}
.share-overlay[hidden] {
  display: none;
}
.share-overlay-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-32) var(--spacing-24);
}
.share-overlay-close {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  appearance: none;
  border: none;
  background: none;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.share-overlay-close:hover,
.share-overlay-close:focus-visible {
  color: var(--color-action);
}
.share-overlay-title {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.share-overlay-body {
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.share-why-heading {
  margin: var(--spacing-16) 0 var(--spacing-4);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.share-why-heading:first-child {
  margin-top: 0;
}
.share-why-body {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* --- Soft CTA (live pages) --- */

/* --- Conversion wall (expired) --- */
.share-wall {
  max-width: 480px;
  margin: var(--spacing-24) auto 0;
  background: var(--color-pale-wheat);
  border-radius: var(--radius-md);
  padding: var(--spacing-32) var(--spacing-24);
  text-align: center;
}
.share-wall-headline {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text-primary);
}
.share-wall-value {
  margin: 0 0 var(--spacing-24);
  color: var(--color-text-primary);
  line-height: 1.7;
}



@media (prefers-reduced-motion: reduce) {
  .share-dot,
  .share-overlay,
    .share-card-rail {
    scroll-behavior: auto;
  }
}

/* Mobile-friendly footer + smaller heading on narrow screens. */
@media (max-width: 600px) {
  .page-main {
    padding: var(--spacing-24) var(--spacing-16);
  }
  .legal-doc h1 {
    font-size: 24px;
  }
  .legal-doc h2 {
    font-size: 20px;
  }
  .page-footer .legal-links a {
    display: inline-block;
    margin: var(--spacing-4) var(--spacing-4);
  }
  .share-title,
  .share-wall-headline {
    font-size: 24px;
  }
}

/* ============================================================
   Download block — one block, three surfaces
   (live /s/<token> page, expiry wall, /get).
   Markup: share/public/download-block.html
   Runtime: share/public/download-block.js
   ============================================================ */

.dl-block {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

/* On the expiry wall and /get there is no content above the block, so the
   divider would be a rule under the headline rather than a separator. */
.share-wall .dl-block {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--spacing-24);
}

.dl-value {
  margin: 0 0 var(--spacing-24);
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-text-primary);
}

/* Both badges, side by side, wrapping on a narrow screen rather than
   shrinking below either vendor's minimum size. */
.dl-stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  justify-content: center;
  align-items: center;
  margin: 0 0 var(--spacing-24);
  padding: 0;
  list-style: none;
}

/* EQUAL PROMINENCE IS EQUAL HEIGHT, NOT EQUAL WIDTH.
   Apple's badge is about 2.99:1 and Google's about 2.58:1, so matching their
   widths would render Apple's visibly shorter — which is the thing both
   vendors' guidelines forbid. Height is fixed and width follows the aspect
   ratio. 48px clears Apple's 40px minimum and gives the anchor a touch target
   over the 44px floor without a padding hack. */
.dl-badge {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border-radius: 8px;
  /* The vendor artwork carries its own padding, so the clear space is added
     here rather than by scaling the image down inside its own box. */
  padding: 2px;
  text-decoration: none;
}

/* EQUAL HEIGHT MEANS EQUAL *VISIBLE* HEIGHT, and the files disagree about what
   the badge is — including Google with itself, per locale.

   Apple's SVG artwork fills its viewBox. Google bakes its guideline clear space
   (one quarter of the badge height) into the PNG as transparent pixels, and the
   English asset is DIFFERENT ARTWORK from the German and Spanish ones: measured
   visible/file ratios are 0.672 and 0.768. One shared CSS height renders badges
   of different sizes; one hardcoded scale factor is wrong for two of the three
   locales.

   So the heights are NOT set here. They are injected into the served markup by
   the build and re-set by download-block.js on a locale switch, both from
   `shared/branding/badges/geometry.json`, which tools/measure-badges.py
   generates by measuring the shipped files and re-checks in CI. The target
   below is the VISIBLE artwork height both badges land on, and it is kept in
   step BY HAND with BADGE_ART_HEIGHT_PX in tools/build.ts.

   Compliance, because it is asymmetric and drives the rounding: Google requires
   the Play badge to be the same size OR LARGER than other store badges; Apple
   sets a 40px onscreen minimum and asks for clear space of one quarter the
   badge height. Equal satisfies both. Apple larger would not. */
:root {
  --dl-badge-art-height: 48px;
}

.dl-badge img {
  display: block;
  width: auto;
}

/* Apple ships no clear space in the file, so the layout supplies it — one
   quarter of the badge height, the guideline figure.

   Google's file carries its own, which is why only this side is padded. Note
   that "its own" is not uniform: the en badge's baked padding works out at
   ~11.7px rendered, close to the guideline quarter, while de/es carry ~7.25px.
   Both clear Google's stated minimum; only en matches the ¼ figure exactly.
   Adding layout padding on the Play side too would double-count en's. */
.dl-badge-ios {
  padding: calc(var(--dl-badge-art-height) / 4);
}

.dl-badge:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
}

/* The visitor's own platform. A ring, not a recolour: neither badge may be
   altered, and the promotion must not read as one badge being the only
   working link. */
.dl-badge-primary {
  box-shadow: 0 0 0 2px var(--color-action);
}

/* The screenshot rail. Native scroll-snap and no JavaScript animation, so
   prefers-reduced-motion is satisfied by construction — there is no motion to
   suppress. `scroll-behavior: auto` is left at its default for the same
   reason. */
.dl-shots {
  display: flex;
  gap: var(--spacing-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
}

/* Keyboard users reach the rail itself and scroll it with the arrow keys;
   the frames are decorative so they are not individually focusable, and
   nothing inside can trap focus. */
.dl-shots:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 4px;
  border-radius: 12px;
}

.dl-shot {
  flex: 0 0 auto;
  width: 240px;
  height: auto;
  border-radius: 12px;
  scroll-snap-align: center;
  background: var(--color-pale-wheat);
}

.dl-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .dl-shot {
    width: 60vw;
  }
  .dl-value {
    font-size: 16px;
  }
}