/* ───────────────────────────────────────────────────────────────────────────
   Atelier theme — chrome + design-system CSS
   (Tailwind utilities come from the CDN in the layout; this file owns the
   stateful header variants + a few component niceties that are awkward inline.)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Header variants ──────────────────────────────────────────────────────── */
.site-header { background: transparent; }
.site-brand { color: #0d1117; }
.site-nav-link { color: #4b5563; }
.site-nav-link:hover { color: #0d1117; }
.site-mobile-toggle { color: #374151; }
.site-mobile-toggle:hover { background: rgba(15, 23, 42, .06); }

/* Light (glass) — the safe default; works over any page */
.site-header[data-variant="light"] {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #eef0f3;
}

/* Dark */
.site-header[data-variant="dark"] {
  background: #0d1117;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header[data-variant="dark"] .site-brand { color: #fff; }
.site-header[data-variant="dark"] .site-nav-link { color: rgba(255, 255, 255, .8); }
.site-header[data-variant="dark"] .site-nav-link:hover { color: #fff; }
.site-header[data-variant="dark"] .site-mobile-toggle { color: #fff; }
.site-header[data-variant="dark"] .site-mobile-toggle:hover { background: rgba(255, 255, 255, .1); }

/* Transparent (overlays the hero) — the header floats over the page so
   the hero section bleeds underneath. We keep sticky positioning (so it
   solidifies on scroll) but pull the following content up by the header
   height with a negative margin so nothing is pushed down. */
/* Overlay offset is coupled to the header widget bar height (h-20 = 5rem) —
   change both together (widgets/header/_global/default.twig). */
.site-header[data-variant="transparent"] { margin-bottom: -5rem; }
.site-header[data-variant="transparent"] .site-brand { color: #fff; }
.site-header[data-variant="transparent"] .site-nav-link { color: rgba(255, 255, 255, .82); }
.site-header[data-variant="transparent"] .site-nav-link:hover { color: #fff; }
.site-header[data-variant="transparent"] .site-mobile-toggle { color: #fff; }
.site-header[data-variant="transparent"] .site-mobile-toggle:hover { background: rgba(255, 255, 255, .12); }
.site-header[data-variant="transparent"][data-scrolled] {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #eef0f3;
  box-shadow: 0 1px 24px rgba(13, 17, 23, .06);
}
.site-header[data-variant="transparent"][data-scrolled] .site-brand { color: #0d1117; }
.site-header[data-variant="transparent"][data-scrolled] .site-nav-link { color: #4b5563; }
.site-header[data-variant="transparent"][data-scrolled] .site-nav-link:hover { color: #0d1117; }
.site-header[data-variant="transparent"][data-scrolled] .site-mobile-toggle { color: #374151; }

/* Search input — adapts to variant */
.site-search-input {
  background: rgba(15, 23, 42, .06);
  border-color: transparent;
  color: #374151;
}
.site-search-input::placeholder { color: #9ca3af; }
.site-header[data-variant="dark"] .site-search-input,
.site-header[data-variant="transparent"] .site-search-input {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.site-header[data-variant="dark"] .site-search-input::placeholder,
.site-header[data-variant="transparent"] .site-search-input::placeholder { color: rgba(255, 255, 255, .5); }
.site-header[data-variant="transparent"][data-scrolled] .site-search-input {
  background: rgba(15, 23, 42, .06);
  color: #374151;
}
.site-header[data-variant="transparent"][data-scrolled] .site-search-input::placeholder { color: #9ca3af; }

/* Search icon in bar mode */
.site-search-icon { color: #9ca3af; }
.site-header[data-variant="dark"] .site-search-icon,
.site-header[data-variant="transparent"] .site-search-icon { color: rgba(255, 255, 255, .5); }
.site-header[data-variant="transparent"][data-scrolled] .site-search-icon { color: #9ca3af; }

/* ── Section rhythm helpers (used by widget templates in Phase C) ──────────── */
.at-section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .at-section { padding-top: 7rem; padding-bottom: 7rem; } }
/* NOTE: widget templates use the unprefixed class names (.eyebrow, .grid-bg,
   .hero-glow); keep these selectors matching what the markup actually uses. */
.eyebrow {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.at-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.at-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(13, 17, 23, .18); }

/* Subtle grid/dot background for hero + section bands */
.grid-bg {
  background-image: radial-gradient(rgba(13, 17, 23, .06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-glow {
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

/* ── Article prose niceties ───────────────────────────────────────────────── */
.prose :where(h2, h3) { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.prose :where(a) { color: var(--accent); }

/* ── Brand logo swap (header widget renders BOTH imgs when an inverse logo is
   set in Theme Config; these rules pick one per variant/scroll state) ─────── */
.site-logo-inverse { display: none; }
.site-header[data-variant="dark"] .site-logo-default,
.site-header[data-variant="transparent"]:not([data-scrolled]) .site-logo-default { display: none; }
.site-header[data-variant="dark"] .site-logo-inverse,
.site-header[data-variant="transparent"]:not([data-scrolled]) .site-logo-inverse { display: inline-block; }


/* s55-7 smooth text transitions */
.site-header .site-brand,
.site-header .site-nav-link,
.site-header .site-mobile-toggle { transition: color .5s ease, background-color .5s ease; }
.site-header .site-logo-img { transition: opacity .5s ease; }