/* 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; }
}

/* __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; }