/* ============================================================================
   FDB 2026 - Event site base
   Layered on top of colors_and_type.css (tokens + Geist + semantic classes).
   The brand is still: colour transitions on hover only, no transforms.
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fdb-font-sans);
  background: var(--fdb-cream);
  color: var(--fdb-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--fdb-purple-soft); color: var(--fdb-ink); }

/* The editorial reading measure. Every page composes inside this. */
.fdb-wrap { max-width: 1000px; margin: 0 auto; padding-left: 3rem; padding-right: 3rem; }

@media (max-width: 720px) {
  .fdb-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── Responsive header ──────────────────────────────────────────────────────
   The header row holds logo + meta + 5 nav links + the fixed Register CTA.
   Tighten padding and gaps as the viewport narrows; drop the decorative date
   meta, then the inline nav links, so the Register CTA is never clipped and no
   sitewide horizontal scrollbar appears. */
@media (max-width: 1040px) {
  .fdb-header-inner { padding: 0 1.5rem !important; gap: 1rem !important; }
  .fdb-header-nav { gap: 1.1rem !important; }
  .fdb-header-meta { display: none !important; }
}
@media (max-width: 860px) {
  .fdb-nav-link { display: none !important; }
}

/* ── Responsive hero ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .fdb-hero-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .fdb-hero-motif { order: -1; justify-content: flex-start !important; }
  .fdb-hero-motif svg { width: 200px !important; height: 200px !important; }
}

/* ── Access band — collapse the 4-up to 2-up on narrow screens ───────────── */
@media (max-width: 720px) {
  .fdb-access-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1.25rem !important; }
}

/* ── Registration: stack the access map above the route panel on narrow ──── */
@media (max-width: 860px) {
  .fdb-reg-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}

/* ── Speaker holding grid — 3-up → 2-up → 1-up ───────────────────────────── */
@media (max-width: 820px) { .fdb-speaker-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 520px) { .fdb-speaker-grid { grid-template-columns: 1fr !important; } }

/* Hairline rule used between major bands. */
.fdb-rule { border: none; border-top: 1px solid var(--fdb-border); margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

/* Focus ring - quiet, brand-coloured, accessible. */
:focus-visible { outline: 2px solid var(--fdb-purple); outline-offset: 2px; }

/* The single allowed motion: a slow vertical reveal on first paint per page.
   Honours reduced-motion. No transforms beyond a small translate. */
@media (prefers-reduced-motion: no-preference) {
  /* Page entrances are handled by the View Transitions crossfade (see below),
     so the per-section rise is a no-op to avoid a mid-fade snapshot. */
  .fdb-rise { }
  .fdb-mark-pivot { }

  /* Homepage day rail: a slick staggered pivot-in, plus a lift on hover. */
  .fdb-rail-mark { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: center center; }
  .fdb-rail-mark:hover { transform: perspective(420px) rotateY(-16deg) scale(1.08); }
}

/* ── Seamless cross-page transition (View Transitions API) ───────────────────
   The NEW view sits fully opaque; only the OLD view fades out over it, so there
   is no mid-crossfade dip through the background (which read as a blink). */
::view-transition-new(root) { animation: none; }
::view-transition-old(root) { animation: fdbVtFade 0.32s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes fdbVtFade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: none; }
}