/* WoBooks Theme Starter — Customize everything below */

:root {
  --bg: #ffffff;
  --surface: #f8f9fa;
  --surface-2: #e9ecef;
  --text: #1a1a2e;
  --muted: #6c757d;
  --line: #dee2e6;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --radius: 8px;
}

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

body {
  font-family: var(--font-sans, system-ui, -apple-system, 'Segoe UI', sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ──────────────────────── */
.header {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav__brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
}
.nav__links {
  display: flex;
  list-style: none;
  gap: 24px;
}
.nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--text); }

/* ── Sections ────────────────────── */
.section {
  padding: 80px 0;
}
.section:nth-child(even) {
  background: var(--surface);
}
.section h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

/* ── Cards / Grid ────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: box-shadow 0.2s;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.card img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* ── Buttons ─────────────────────── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--background, #fff);
  padding: 12px 24px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}
.btn:hover { background: var(--accent-hover); }

/* ── Prose ────────────────────────── */
.prose { max-width: 65ch; line-height: 1.8; color: var(--muted); }

/* ── Footer ──────────────────────── */
.footer {
  padding: 40px 0;
  background: var(--text);
  color: var(--surface);
  text-align: center;
  font-size: 14px;
}

/* ── Responsive ──────────────────── */
@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .section h2 { font-size: 24px; }
  .nav__links { display: none; }
}
/* ── motion pack: refined (P2.1 — vibe-driven reveal) ───────────────────────
   Resting state is fully visible; the hidden `from` is gated behind @supports
   AND prefers-reduced-motion. transform/opacity only. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: wb-reveal-refined .8s cubic-bezier(.19,1,.22,1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
      .reveal:nth-child(2) { animation-range: entry 9% cover 44%; }
      .reveal:nth-child(3) { animation-range: entry 18% cover 53%; }
      .reveal:nth-child(4) { animation-range: entry 27% cover 62%; }
      .reveal:nth-child(5) { animation-range: entry 36% cover 71%; }
      .reveal:nth-child(6) { animation-range: entry 45% cover 80%; }

    @keyframes wb-reveal-refined {
      from { opacity: 0; transform: translateY(26px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Reduced-motion + no-support safety net: content is always visible. */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}
/* ── surface finish (P2.2) — hero-scoped, token-driven, pointer-transparent ── */
[data-section="hero"] { position: relative; isolation: isolate; }
[data-section="hero"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
/* ── imagery treatment (P2.3) — per-team token, editorial images only ────────
   Product, menu and logo images are intentionally excluded: their colour is
   information, not decoration. */
[data-section="hero"] img,
[data-section="about"] img {
  filter: var(--img-filter, none);
}

/* __wobooks-defensive__ — appended by HtmlZipThemeConverterV2.
   Hide images whose src resolves to empty (e.g. data-src-field bindings
   for Items / categories the owner hasn't uploaded a photo for yet).
   Without this rule, the browser shows the alt-text fallback —
   that's the bug behind the literal word 'image' showing in avatar
   slots and About images on the production Braise theme. */
img[src=""], img:not([src]) { display: none !important; }

/* Grid-collapse fix: [data-list] is the WoBooks repeater wrapper. When the
   grid/flex layout lives on the PARENT, the wrapper would otherwise become
   a single grid/flex item and collapse every [data-item] row into one cell.
   display:contents makes the wrapper layout-transparent so each row
   participates in the parent track. Mirrors TemplateSkeletonGenerator so
   converted themes match skeleton/AI-generated themes. (Convention: never
   put the grid/flex container ON the [data-list] element itself.) */
[data-list] { display: contents; }