/*
 * ENADOW static website — shared stylesheet.
 *
 * Serves both website/index.html (option 3a — landing) and
 * website/privacy-policy/index.html (option 3b — privacy policy).
 *
 * Paths in the HTML (`/styles.css`, `/assets/...`) are root-relative and
 * assume the site is served from a domain root (the intent for
 * enadow.app) — they will not resolve correctly opened directly from a
 * `file://` URL without a local static server rooted at `website/`.
 *
 * Values are transcribed from the design mockup at
 * "layout and icons/Website_3ab_ENADOW/enadow-website/project/ENADOW Site Mockups.dc.html"
 * (options id="3a" and id="3b" only) — see docs/plans equivalent planning
 * doc for the extraction. Do not re-approximate pixel values here.
 */

:root {
  --bg: #0c0e10;       /* page background, both pages */
  --fg: #e8eaec;        /* primary text, and the Privacy Policy button fill */
  --muted: #b0b6bd;     /* body paragraph text on 3b */
  --dim: #868e97;       /* header nav text, "IN DEVELOPMENT" label */
  --faint: rgba(232, 234, 236, 0.52); /* stat captions, footer text, "LAST UPDATED" line — alpha-composited over --bg to hit ~4.91:1 (WCAG AA), see styles.css history/commit for the math */
  --live: #3ddc84;      /* the pulsing status dot */
  --hairline: rgba(255, 255, 255, 0.06); /* every header/footer/strip divider */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Barlow, system-ui, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------------------------------------------------------------------
 * Shared shell: header + footer (both pages)
 * ------------------------------------------------------------------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__nav {
  display: flex;
  gap: 28px;
  font: 500 12px Barlow, system-ui, sans-serif;
  letter-spacing: 1.6px;
  color: var(--dim);
}

.site-header__nav a {
  color: inherit;
  text-decoration: none;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--fg);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  font: 500 11px Barlow, system-ui, sans-serif;
  letter-spacing: 1.8px;
  color: var(--faint);
}

/* ---------------------------------------------------------------------
 * 3a — landing page
 * ------------------------------------------------------------------- */

.page-3a {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-3a .site-header {
  padding: 18px 56px;
  /* Caps the header bar itself (it's already the flex row via
     justify-content:space-between — no separate inner wrapper exists) so
     the brand mark and nav don't glue to the literal viewport edge on
     ultra-wide monitors. width:100% is required alongside max-width here:
     .site-header is a flex item of .page-3a (column direction), and a
     cross-axis auto margin disables stretch, so without an explicit width
     it would shrink-to-fit its content instead of filling the row. No-op
     at/under 1760px, so 1280px and below are unaffected. */
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.page-3a .site-header__brand img {
  width: 26px;
  height: 26px;
}

.page-3a .site-header__brand span {
  font: 600 15px Barlow, system-ui, sans-serif;
  letter-spacing: 5px;
}

.page-3a .site-footer {
  padding: 18px 56px;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

/* Hero — the flex:1 element, so the stat strip/footer stay pinned to the
   bottom of tall viewports (the live translation of the mockup's fixed
   min-height:820px card).
   .hero is a plain flex:1 shell around two stacked children — .hero__content
   and .stat-strip (a <main> landmark now wraps both, for a11y). .hero__content
   carries flex:1 itself, so it fills exactly the space left over after
   .stat-strip's natural height is subtracted — the same space .hero used to
   fill back when .stat-strip was a sibling of <main> rather than nested
   inside it. That reproduces the pre-nesting pixel layout exactly. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 56px 70px;
  gap: 24px;
}

.hero__mark {
  width: 112px;
  height: 112px;
  opacity: 0.95;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 11px Barlow, system-ui, sans-serif;
  letter-spacing: 2.4px;
  color: var(--dim);
}

.status-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
  /* Resting appearance (size, colour, glow) is pixel-sourced from the
     mockup, which is a static canvas. The pulse animation itself is an
     extrapolation to satisfy the "pulsing-dot" brief — built on top of
     those exact resting values. */
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px var(--live);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 14px var(--live);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill__dot {
    animation: none;
  }
}

.hero__headline {
  margin: 0;
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 700;
  /* clamp() caps at 52px, so viewports >= ~867px wide (6vw == 52px) render
     the exact desktop value — this is why 1280px stays pixel-identical
     without needing a media-query guard. See the Responsive section below
     for the narrow-width letter-spacing ease. */
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -1px;
  max-width: 20ch;
  /* Design update: headline hidden but its layout space is kept (matches
     the mockup's added `visibility:hidden` on 3a's h1 — pushes 3a further
     toward "no announcement" while leaving the hero's vertical rhythm
     unchanged). Not display:none — that would collapse the space. */
  visibility: hidden;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.button {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  font: 600 15px Barlow, system-ui, sans-serif;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
}

.button:hover {
  background: #fff;
}

.button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.stat-strip {
  display: flex;
  justify-content: center;
  gap: 56px;
  padding: 26px 56px;
  border-top: 1px solid var(--hairline);
  list-style: none;
  margin: 0;
}

.stat-strip__item {
  text-align: center;
}

.stat-strip__value {
  font: 600 22px Rajdhani, system-ui, sans-serif;
}

.stat-strip__label {
  font: 500 10.5px Barlow, system-ui, sans-serif;
  letter-spacing: 1.8px;
  color: var(--faint);
}

/* ---------------------------------------------------------------------
 * 3b — privacy policy page
 * ------------------------------------------------------------------- */

.page-3b {
  max-width: 900px;
  margin: 0 auto;
}

.page-3b .site-header {
  padding: 18px 48px;
}

.page-3b .site-header__brand img {
  width: 24px;
  height: 24px;
}

.page-3b .site-header__brand span {
  font: 600 14px Barlow, system-ui, sans-serif;
  letter-spacing: 5px;
}

.page-3b .site-footer {
  padding: 18px 48px;
}

.policy {
  padding: 64px 48px 70px;
  max-width: 660px;
}

.policy__dated {
  font: 600 11px Barlow, system-ui, sans-serif;
  letter-spacing: 2.4px;
  color: var(--faint);
  margin-bottom: 14px;
}

.policy__heading {
  margin: 0 0 28px;
  font: 700 40px/1.1 Barlow, system-ui, sans-serif;
  letter-spacing: -0.5px;
}

.policy__intro {
  margin: 0 0 34px;
  font: 400 17px/1.7 Barlow, system-ui, sans-serif;
  color: var(--muted);
}

.policy__sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.policy__section h2 {
  margin: 0 0 8px;
  font: 600 17px Barlow, system-ui, sans-serif;
}

.policy__section p {
  margin: 0;
  font: 400 15.5px/1.7 Barlow, system-ui, sans-serif;
  color: var(--muted);
}

.policy__section a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Responsive — EXTRAPOLATED (Step 3). The mockup is a fixed 1280px (3a)
 * / 900px (3b) desktop canvas with no mobile variant; everything below is
 * a reasonable extension of the desktop design, not a pixel source.
 *
 * All rules here live inside max-width media queries (or, for the
 * headline, a clamp() whose ceiling equals the exact desktop value) so
 * the unqualified desktop rules above are untouched above the breakpoint
 * and 1280px continues to render exactly as Steps 1-2 left it.
 * ------------------------------------------------------------------- */

/* Horizontal padding shrink: 3a 56px -> 32px -> 24px, 3b 48px -> 28px -> 20px.
   Vertical padding is left as-is per the plan (only horizontal shrinks). */
@media (max-width: 900px) {
  .page-3a .site-header,
  .page-3a .site-footer {
    padding-left: 32px;
    padding-right: 32px;
  }

  .hero__content {
    padding-left: 32px;
    padding-right: 32px;
  }

  .stat-strip {
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-3b .site-header,
  .page-3b .site-footer {
    padding-left: 28px;
    padding-right: 28px;
  }

  .policy {
    padding-left: 28px;
    padding-right: 28px;
    /* the 660px document column becomes fluid inside the shrinking
       padding rather than leaving unused space beside a fixed column */
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .page-3a .site-header,
  .page-3a .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero__content {
    padding-left: 24px;
    padding-right: 24px;
  }

  .stat-strip {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-3b .site-header,
  .page-3b .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .policy {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ease the -1px tracking slightly once the headline is well below 52px */
  .hero__headline {
    letter-spacing: -0.5px;
  }
}

/* Hero mark: 112px -> 76px under ~600px wide */
@media (max-width: 600px) {
  .hero__mark {
    width: 76px;
    height: 76px;
  }
}

/* Stat strip: 4-across -> 2x2 grid under ~760px -> single column under ~420px.
   Type sizes/letter-spacing are untouched; only the arrangement changes. */
@media (max-width: 760px) {
  .stat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: normal;
    gap: 28px 40px;
  }
}

@media (max-width: 420px) {
  .stat-strip {
    grid-template-columns: 1fr;
  }
}

/* Header/footer: let the long 3a footer line ("ENADOW IS NOT AFFILIATED
   WITH BMW AG") wrap to a second, centred line instead of colliding with
   the copyright. Shared .site-footer rule covers the 3b footer too. */
@media (max-width: 520px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
}