/* ============================================================
   Walter Poch — site styles.
   Lifted from the design prototype's <style> block (tokens,
   accent rotation, IntersectionObserver-driven reveal + reduced-motion,
   FAQ, .lift, hero/pull-quote grids, responsive, :focus-visible).
   ============================================================ */

* {
  box-sizing: border-box;
}

/* Anchor-link offset for the sticky nav. Set ONLY here, on the scroll
   container — do NOT also put scroll-margin-top on sections, or the two
   offsets STACK and every #anchor overshoots the section top by ~2x. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: #fbfbf9;
  color: #14161a;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #1b3a6b;
  color: #fff;
}

a {
  color: inherit;
}

input,
textarea,
button {
  font-family: inherit;
}

/* ---- Scroll reveal — fade + rise ----
   Driven entirely by IntersectionObserver (main.ts adds .is-visible) for ALL
   browsers. We deliberately do NOT use CSS scroll-driven animation
   (animation-timeline: view()): its `cover` range never completes for elements
   near the page bottom (e.g. the contact form), which strands them at a partial,
   greyed-out opacity. IO reveals at 10% visibility and never strands.
   A <noscript> block in the page reveals everything when JS is off. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion: content visible, no animation. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Desktop / mobile nav visibility ---- */
[data-desktop-nav] {
  display: flex;
}
[data-mobile-btn] {
  display: none;
}
@media (max-width: 820px) {
  [data-desktop-nav] {
    display: none;
  }
  [data-mobile-btn] {
    display: flex;
  }
}

/* Mobile menu panel: closed by default, and never shown on desktop.
   The panel carries an inline `display:flex` which on its own defeats the
   `hidden` attribute (an inline style beats the UA `[hidden]{display:none}`),
   so force it here. main.ts toggles `hidden` to open/close it on mobile. */
[data-mobile-menu][hidden] {
  display: none !important;
}
@media (min-width: 821px) {
  [data-mobile-menu] {
    display: none !important;
  }
}

/* ---- Focus ring ---- */
:focus-visible {
  outline: 2px solid #1b3a6b;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Visually-hidden (skip link) — revealed on keyboard focus ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  background: #14161a;
  color: #fbfbf9;
  border-radius: 8px;
  font-size: 14px;
}

/* ---- FAQ accordion — hide native marker; the + glyph rotates to × ---- */
details summary::-webkit-details-marker {
  display: none;
}
details[open] summary span:last-child {
  transform: rotate(45deg);
}
details summary span:last-child {
  transition: transform 0.18s ease;
}

/* ---- Three-accent rotation: cobalt / teal / terracotta ---- */
.accent-rotate > * {
  --ac: #1b3a6b;
}
.accent-rotate > *:nth-child(3n + 2) {
  --ac: #1f7a6b;
}
.accent-rotate > *:nth-child(3n + 3) {
  --ac: #c4623d;
}
.accent-rotate-dark > * {
  --ac: #7fa3d8;
}
.accent-rotate-dark > *:nth-child(3n + 2) {
  --ac: #5fc2ac;
}
.accent-rotate-dark > *:nth-child(3n + 3) {
  --ac: #e0916b;
}

/* ---- Hero + pull-quote layout helpers ---- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.hero-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-portrait {
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}

/* ---- Card hover lift ---- */
.lift {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.lift:hover {
  transform: translateY(-4px);
}

@media (max-width: 680px) {
  .pq-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .hero-stats {
    gap: 22px !important;
  }
  .hero-stats > div > div:first-child {
    font-size: 26px !important;
  }
}