/*
Theme Name: Preview Base
Theme URI: https://example.com/preview-base
Author: wp-preview-farm
Description: Lightweight multi-page block theme for AI-generated business preview sites. Niche accent color is driven by the --pf-accent CSS variable set per subsite by the companion plugin.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: preview-base
*/

:root {
  --pf-accent: #2563eb;
  --pf-accent-ink: #ffffff;
  --pf-ink: #16181d;
  --pf-muted: #5b6472;
  --pf-line: #e6e8ee;
  --pf-bg-soft: #f6f8fb;
  --pf-radius: 16px;
  --pf-shadow: 0 10px 30px rgba(20, 24, 31, 0.08);
}

body { color: var(--pf-ink); }
a { color: var(--pf-accent); }

/* ---------- Header / Footer ---------- */
.pf-site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--pf-line); position: sticky; top: 0;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); z-index: 50;
}
.pf-brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; color: var(--pf-ink); flex-shrink: 0; }

/* Navigation (Page List block) — horizontal, no bullets */
.pf-site-header .wp-block-page-list,
.pf-site-header .wp-block-page-list ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem;
}
.pf-site-header .wp-block-page-list li { margin: 0; }
.pf-site-header .wp-block-page-list a { text-decoration: none; color: var(--pf-ink); font-weight: 600; }
.pf-site-header .wp-block-page-list a:hover { color: var(--pf-accent); }
/* The nav + CTA wrapper: keep on one row, wrap gracefully, never overflow */
.pf-site-header > .wp-block-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; min-width: 0; }
.pf-site-header .pf-btn { flex-shrink: 0; white-space: nowrap; }

.pf-site-footer { background: var(--pf-bg-soft); border-top: 1px solid var(--pf-line); padding: 2.5rem clamp(1rem, 4vw, 3rem); color: var(--pf-muted); }

/* ---------- Buttons ---------- */
.pf-btn, .wp-block-button.is-style-pf-accent .wp-block-button__link {
  display: inline-block; background: var(--pf-accent); color: var(--pf-accent-ink) !important;
  padding: 0.8rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none;
  box-shadow: var(--pf-shadow);
}
.pf-btn.is-ghost { background: transparent; color: var(--pf-accent) !important; box-shadow: none; border: 1.5px solid var(--pf-accent); }

/* ---------- Hero ---------- */
.pf-hero { padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem); background:
  radial-gradient(1200px 400px at 10% -10%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent),
  var(--pf-bg-soft); }
.pf-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 1rem; }
.pf-hero .pf-lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--pf-muted); max-width: 46ch; }
.pf-badge { display: inline-block; background: color-mix(in srgb, var(--pf-accent) 15%, white); color: var(--pf-accent);
  padding: 0.35rem 0.8rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; margin-bottom: 1rem; }

/* ---------- Cards / grids ---------- */
.pf-section { padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem); }
.pf-section--soft { background: var(--pf-bg-soft); }
.pf-kicker { color: var(--pf-accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.pf-card { background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 1.5rem; box-shadow: var(--pf-shadow); }
.pf-card h3 { margin-top: 0; }
.pf-stars { color: #f5a623; letter-spacing: 2px; }

/* gallery */
.pf-gallery img { border-radius: var(--pf-radius); object-fit: cover; width: 100%; height: 100%; }

/* contact */
.pf-contact-item { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 0; }