/*
 Theme Name:   Zealous Starter
 Theme URI:    https://zealousgrowth.com
 Description:  Standalone WordPress theme for Zealous Growth. ACF Blocks, oklch tokens, modular CSS.
 Author:       Zealous Growth
 Author URI:   https://zealousgrowth.com
 Version:      5.8.9
 License:      GNU General Public License v2 or later
 Text Domain:  zealous-starter
 Requires at least: 6.4
 Requires PHP: 8.1
*/

/* ============================================
   DESIGN TOKENS
   All visual values flow from these variables.
   brand-tokens.php overrides at runtime.
   Child themes override by redefining :root vars.
   ============================================ */

:root {
  /* ── Brand Colors (neutral fallbacks, hue 250 slate) ── */
  --zs-primary: oklch(35% 0.04 250);
  --zs-primary-dark: oklch(50% 0.04 250);
  --zs-primary-light: oklch(63% 0.015 250);
  --zs-primary-muted: oklch(73% 0.008 250);
  --zs-secondary: oklch(55% 0.06 75);
  --zs-secondary-light: oklch(80% 0.02 75);
  --zs-accent: oklch(35% 0.04 250);
  --zs-dark-bg: oklch(18% 0.01 250);
  --zs-light-bg: oklch(97% 0.003 80);

  /* ── Semantic Colors ── */
  --zs-bg: oklch(100% 0 0);
  --zs-bg-alt: oklch(97% 0.003 80);
  --zs-text: oklch(20% 0.02 250);
  --zs-text-secondary: oklch(40% 0.02 250);
  --zs-text-muted: oklch(55% 0.01 250);
  --zs-heading: oklch(35% 0.04 250);
  --zs-link: oklch(35% 0.04 250);

  /* ── Border Colors ── */
  --zs-border: oklch(88% 0.005 250);
  --zs-border-light: oklch(94% 0.003 250);
  --zs-border-width: 1px;
  --zs-border-width-thick: 2px;

  /* ── Card Tokens ── */
  --zs-card-bg: oklch(100% 0 0);
  --zs-card-shadow: 0 1px 4px oklch(0% 0 0 / 0.05);
  --zs-card-shadow-hover: 0 4px 20px oklch(0% 0 0 / 0.07);

  /* ── Selection ── */
  --zs-selection-bg: oklch(73% 0.008 250);
  --zs-quote-border: oklch(35% 0.04 250);

  /* ── Typography ── */
  --zs-font-heading: 'Inter', system-ui, sans-serif;
  --zs-font-body: 'Inter', system-ui, sans-serif;

  --zs-text-xs: 0.72rem;
  --zs-text-sm: 0.82rem;
  --zs-text-base: 0.95rem;
  --zs-text-md: 1rem;
  --zs-text-lg: 1.15rem;
  --zs-text-xl: 1.5rem;
  --zs-text-2xl: clamp(1.7rem, 3.5vw, 2.5rem);
  --zs-text-3xl: clamp(2.2rem, 5vw, 3.6rem);

  --zs-font-weight-normal: 400;
  --zs-font-weight-medium: 500;
  --zs-font-weight-semibold: 600;
  --zs-font-weight-bold: 700;
  --zs-font-weight-black: 900;

  --zs-leading-tight: 1.08;
  --zs-leading-snug: 1.15;
  --zs-leading-normal: 1.7;
  --zs-leading-relaxed: 1.75;

  --zs-tracking-tight: -0.03em;
  --zs-tracking-normal: 0;
  --zs-tracking-wide: 0.06em;
  --zs-tracking-wider: 0.1em;

  /* ── Spacing Scale ── */
  --zs-space-xs: 0.25rem;
  --zs-space-sm: 0.5rem;
  --zs-space-md: 1rem;
  --zs-space-lg: 1.5rem;
  --zs-space-xl: 2rem;
  --zs-space-2xl: 3rem;
  --zs-space-3xl: 4rem;
  --zs-space-section: 4rem;
  --zs-container: 1200px;
  --zs-container-padding: clamp(20px, 4vw, 40px);
  --zs-section-padding: var(--zs-space-section) var(--zs-container-padding);

  /* ── Border Radius ── */
  --zs-radius: 8px;
  --zs-radius-lg: 12px;
  --zs-btn-radius: 8px;
  --zs-nav-radius: 12px;
  --zs-pill: 100px;

  /* ── Shadows ── */
  --zs-shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.05);
  --zs-shadow-md: 0 4px 20px oklch(0% 0 0 / 0.07);
  --zs-shadow-lg: 0 8px 30px oklch(0% 0 0 / 0.1);
  --zs-shadow-xl: 0 20px 60px oklch(0% 0 0 / 0.12);

  /* ── Transitions ── */
  --zs-transition-fast: 0.15s ease;
  --zs-transition-base: 0.25s ease;
  --zs-transition-slow: 0.4s ease;
  --zs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-Index Scale ── */
  --zs-z-dropdown: 100;
  --zs-z-sticky: 500;
  --zs-z-header: 999;
  --zs-z-overlay: 10000;
  --zs-z-drawer: 10001;

  /* ── Overlay ── */
  --zs-overlay-light: oklch(0% 0 0 / 0.3);
  --zs-overlay-medium: oklch(0% 0 0 / 0.5);
  --zs-overlay-heavy: oklch(0% 0 0 / 0.7);
}

/* ── Dark Mode Token Overrides ──
   v5.8.0 - #40: scoped to html[data-theme="dark"] (specificity 0,1,1) so these
   overrides beat child-theme `:root { --zs-card-bg: ... }` rules (specificity
   0,1,0) even when the child CSS loads after the parent. Previously, child
   themes that set light-only token overrides at :root left the dark-mode
   token corrupted, so cards (and any other token-driven backgrounds) stayed
   light against dark sections. */
html[data-theme="dark"] {
  --zs-bg: oklch(18% 0.01 250);
  --zs-bg-alt: oklch(22% 0.01 250);
  --zs-text: oklch(88% 0.01 250);
  --zs-text-secondary: oklch(70% 0.02 250);
  --zs-text-muted: oklch(50% 0.01 250);
  --zs-heading: oklch(80% 0.03 250);
  --zs-link: oklch(70% 0.04 250);
  --zs-accent: oklch(70% 0.04 250);
  --zs-border: oklch(25% 0.02 250);
  --zs-border-light: oklch(20% 0.01 250);
  --zs-card-bg: oklch(22% 0.01 250);
  --zs-card-shadow: 0 1px 4px oklch(0% 0 0 / 0.3);
  --zs-card-shadow-hover: 0 8px 30px oklch(0% 0 0 / 0.4);
  --zs-shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.3);
  --zs-shadow-md: 0 4px 20px oklch(0% 0 0 / 0.35);
  --zs-shadow-lg: 0 8px 30px oklch(0% 0 0 / 0.5);
  --zs-shadow-xl: 0 20px 60px oklch(0% 0 0 / 0.4);
  --zs-selection-bg: oklch(40% 0.03 250);
  --zs-quote-border: oklch(70% 0.04 250);
  --zs-secondary: oklch(65% 0.04 75);
  --zs-overlay-light: oklch(0% 0 0 / 0.4);
  --zs-overlay-medium: oklch(0% 0 0 / 0.6);
  --zs-overlay-heavy: oklch(0% 0 0 / 0.8);
}


/* ============================================
   BASE STYLES
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* v5.8.0 - #44: global overflow-x protection. Any block that accidentally
   overflows its container (common with editorial hero image columns, full-bleed
   sections, stats overlays at narrow viewports) creates a horizontal scroll bar
   on the whole page. Clamp at html + body level. Individual blocks can still
   use `overflow-x: visible` on themselves when they need to bleed deliberately
   (e.g., fixed-scrim hero overflows, sticky side rails). */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--zs-font-body);
  font-size: var(--zs-text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--zs-text);
  background: var(--zs-bg);
  line-height: var(--zs-leading-normal);
  margin: 0;
  transition: background var(--zs-transition-base), color var(--zs-transition-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--zs-font-heading);
  font-weight: var(--zs-font-weight-bold);
  line-height: var(--zs-leading-snug);
  letter-spacing: var(--zs-tracking-tight);
  color: var(--zs-heading);
  margin: 0 0 var(--zs-space-sm);
}

p { margin: 0 0 var(--zs-space-md); }
a { color: var(--zs-link); text-decoration: none; }
a:hover { opacity: 0.85; }
img { max-width: 100%; height: auto; display: block; }

::selection {
  background: var(--zs-selection-bg);
  color: var(--zs-heading);
}

a:focus-visible,
button:focus-visible,
.zs-btn:focus-visible {
  outline: 2px solid var(--zs-accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ============================================
   LAYOUT
   ============================================ */

.zs-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  opacity: 0;
  animation: zs-page-in 0.3s ease forwards;
}

@keyframes zs-page-in { to { opacity: 1; } }

.zs-site-content { flex: 1; }

.zs-container {
  max-width: var(--zs-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--zs-container-padding);
  padding-right: var(--zs-container-padding);
}

.zs-section { padding: var(--zs-section-padding); }

.zs-section-alt {
  padding: var(--zs-section-padding);
  background: var(--zs-bg-alt);
}

.zs-on-dark { color: #fff; }

.zs-site-content > * + * { margin-top: 0; }


/* ============================================
   BUTTONS (global)
   ============================================ */

.zs-btn {
  font-family: var(--zs-font-body);
  font-weight: var(--zs-font-weight-bold);
  font-size: var(--zs-text-sm);
  letter-spacing: 0.02em;
  border-radius: var(--zs-btn-radius);
  padding: 0.85rem 2.2rem;
  transition: all var(--zs-transition-base);
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
  cursor: pointer;
  border: var(--zs-border-width-thick) solid transparent;
}

.zs-btn-primary {
  background: var(--zs-dark-bg);
  color: #fff;
  border-color: var(--zs-dark-bg);
}

.zs-btn-primary:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  color: #fff;
}

.zs-btn-outline {
  background: transparent;
  color: var(--zs-heading);
  border-color: var(--zs-heading);
}

.zs-btn-outline:hover {
  background: var(--zs-heading);
  color: #fff;
  transform: translateY(-1px);
}

.zs-on-dark .zs-btn-primary {
  background: #fff;
  color: var(--zs-dark-bg);
  border-color: #fff;
}

.zs-on-dark .zs-btn-outline {
  color: #fff;
  border-color: oklch(100% 0 0 / 0.4);
}

.zs-on-dark .zs-btn-outline:hover {
  background: oklch(100% 0 0 / 0.12);
  border-color: #fff;
  color: #fff;
}

.zs-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}

[data-theme="dark"] .zs-btn-primary {
  background: var(--zs-accent);
  color: var(--zs-dark-bg);
  border-color: var(--zs-accent);
}

[data-theme="dark"] .zs-btn-outline {
  color: var(--zs-accent);
  border-color: var(--zs-accent);
}

[data-theme="dark"] .zs-btn-outline:hover {
  background: var(--zs-accent);
  color: var(--zs-dark-bg);
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  word-wrap: normal;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--zs-dark-bg);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--zs-radius) var(--zs-radius);
  z-index: 100000;
  font-size: var(--zs-text-sm);
  font-weight: var(--zs-font-weight-semibold);
  text-decoration: none;
}

.skip-link:focus { top: 0; }


/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .zs-site-header, .zs-footer, .zs-mobile-cta, .zs-back-to-top,
  .zs-drawer-backdrop, .zs-mega-overlay, .zs-theme-toggle,
  .zs-menu-toggle, .zs-nav-cta, .zs-announce { display: none !important; }

  body, .zs-site { background: #fff !important; color: #000 !important; }

  .zs-hero { background: #f5f5f5 !important; min-height: auto !important; padding: 2rem !important; }
  .zs-hero__heading, .zs-hero__badge, .zs-hero__subheading { color: #000 !important; }
  .zs-hero__overlay, .zs-hero::after { display: none !important; }

  .zs-cta--banner, .zs-stats-bar { background: #f5f5f5 !important; color: #000 !important; }
  .zs-cta__heading, .zs-stat__value { color: #000 !important; }

  * { box-shadow: none !important; text-shadow: none !important; }

  .zs-section, .zs-section-alt, .zs-cta, .zs-stats-bar { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
}