/* assets/css/base.css — Global styles and Pico.css overrides */

/* ── CSS Custom Properties ─────────────────────── */
:root {
  /* Force light color scheme until dark mode is properly designed.
     Overrides prefers-color-scheme from Pico.css / user agent. */
  color-scheme: light only;

  /* Brand — All Round Sound faithful clone: original Elementor kit + #eff8ff header */
  --color-forest: #54595f;
  --color-forest-light: #3d4450;
  --color-forest-dark: #1e293b;
  --color-ink: #333333;
  --color-carbon: #777777;
  --color-smoke: #777777;
  --color-fog: #999999;
  --color-mist: #e2e8f0;
  --color-paper: #ffffff;
  --color-snow: #eff8ff;
  --color-warm: #eff8ff;
  --color-gold: #61CE70;
  --color-gold-light: #4fbf5e;
  --font-script: 'Great Vibes', cursive;
  --font-display: 'Roboto', 'Open Sans', sans-serif;
  --font-sans: 'Open Sans', 'Inter', sans-serif;
  --page-max: 1170px;
  --section-gap: 80px;

  /* Pico.css override */
  --brand-primary: var(--color-forest);
  --brand-primary-hover: var(--color-forest-light);
  --brand-accent: var(--color-gold);

  /* Back-compat aliases — template once used charcoal/silver/steel/cool/gradient names */
  --color-charcoal: var(--color-forest);
  --color-charcoal-light: var(--color-forest-light);
  --color-charcoal-dark: var(--color-forest-dark);
  --color-silver: var(--color-gold);
  --color-silver-light: var(--color-gold-light);
  --color-steel: var(--color-gold);
  --color-steel-light: var(--color-gold-light);
  --color-cool: var(--color-warm);
  --color-accent: var(--color-gold);
  --color-accent-soft: #f0fdf4;
  --gradient-chrome: var(--color-forest-dark);
  --gradient-chrome-action: var(--color-gold);
  --gradient-warm: linear-gradient(135deg, #61CE70 0%, #4fbf5e 100%);
  --gradient-warm-soft: #f0fdf4;
  --gradient-mesh: none;
}

/* ── Base reset ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-carbon);
  background: var(--color-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Remove default list markers site-wide.
   Pico.css applies `ul li { list-style: square }` directly on <li>, which
   overrides the inherited `list-style: none` from parent <ul>. This same
   selector (loaded after Pico) ensures no default markers appear next to
   our custom `li::before` markers. */
ul, ol { list-style: none; padding: 0; }
ul li, ol li { list-style: none; }

/* ── Typography ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* ── Site header (legacy, kept for compatibility) ─ */
.site-header {
  padding-top: var(--pico-spacing);
  padding-bottom: var(--pico-spacing);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.site-logo {
  text-decoration: none;
}

/* ── Navigation ────────────────────────────────── */
.nav-links a[aria-current="page"] {
  font-weight: bold;
  border-bottom: 2px solid currentColor;
}

/* ── Breadcrumbs ───────────────────────────────── */
.breadcrumbs {
  padding: var(--pico-spacing) 0;
  font-size: 0.875rem;
}

/* ── Error pages ───────────────────────────────── */
.page-error main {
  text-align: center;
  padding: var(--pico-block-spacing-vertical) 0;
}

.page-error h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  margin-bottom: var(--pico-spacing);
}

/* ── Placeholder for gallery images ────────────── */
.placeholder-img {
  background: var(--pico-muted-border-color);
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--pico-border-radius);
}

/* ── Address styling ───────────────────────────── */
address {
  font-style: normal;
}

/* ── Utility: table overflow on mobile ────────── */
.overflow-auto {
  overflow-x: auto;
}

/* ── Utility: container for constrained content ─ */
.container-constrained {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px;
}