/* ============================================
   UTILITIES - DARK MODE REFINEMENTS
   Extra overrides for [data-theme="dark"] that
   go beyond the token swaps in :root.

   All values reference :root --zs-* tokens.
   ============================================ */


/* ── Stronger Card Borders ── */

[data-theme="dark"] .zs-service-card,
[data-theme="dark"] .zs-testimonial-card,
[data-theme="dark"] .zs-pricing-card {
  border-color: oklch(100% 0 0 / 0.08);
}

[data-theme="dark"] .zs-portfolio-card {
  border-color: oklch(100% 0 0 / 0.06);
}


/* ── Dramatic Shadows ── */

[data-theme="dark"] .zs-service-card:hover,
[data-theme="dark"] .zs-testimonial-card:hover,
[data-theme="dark"] .zs-pricing-card:hover {
  box-shadow: var(--zs-shadow-lg);
}

[data-theme="dark"] .zs-portfolio-card:hover {
  box-shadow: var(--zs-shadow-xl);
}


/* ── Hero Overlay ── */

[data-theme="dark"] .zs-hero .wp-block-cover__background {
  opacity: 0.75;
}

[data-theme="dark"] .zs-hero::after {
  opacity: 0.06;
}


/* ── CTA Borders ── */

[data-theme="dark"] .zs-cta {
  border-top: var(--zs-border-width) solid oklch(100% 0 0 / 0.06);
  border-bottom: var(--zs-border-width) solid oklch(100% 0 0 / 0.06);
}


/* ── Section-Alt Borders ── */

[data-theme="dark"] .zs-section-alt {
  border-top: var(--zs-border-width) solid var(--zs-border-light);
  border-bottom: var(--zs-border-width) solid var(--zs-border-light);
}


/* ── Two-Col Dark Mode ── */

[data-theme="dark"] .zs-two-col img {
  box-shadow: 0 16px 50px oklch(0% 0 0 / 0.3);
}


/* ── FAQ Boxed Background ── */

[data-theme="dark"] .zs-faq-section details {
  border-bottom-color: oklch(100% 0 0 / 0.06);
}

[data-theme="dark"] .zs-faq-section details[open] {
  background: oklch(100% 0 0 / 0.03);
}

[data-theme="dark"] .zs-faq-section details summary::after {
  color: oklch(100% 0 0 / 0.3);
}


/* ── Stats Bar Dark ── */

[data-theme="dark"] .zs-stats-bar {
  background: var(--zs-dark-bg);
}

[data-theme="dark"] .zs-stats-bar .zs-stat + .zs-stat::before {
  background: oklch(100% 0 0 / 0.1);
}


/* ── Logo Grayscale Inversion ──
   v5.8.0 - #24: opt-in rather than forced. `brightness(0) invert(1)` destroys
   any color in the logo - red schoolhouse marks, multi-color wordmarks,
   photographic logos all turn solid white. Child themes with dark-bg-compatible
   logo files (light SVGs, monochrome PNGs) should NOT apply this filter.

   The filter now applies only when the child theme opts in by setting the
   `zs-logo-invert-dark` body class. For site-specific overrides, a single
   logo can opt in with the `.zs-logo--invert-dark` class on its wrapper. */

body.zs-logo-invert-dark[data-theme="dark"] .zs-logo img,
[data-theme="dark"] .zs-logo.zs-logo--invert-dark img {
  filter: brightness(0) invert(1);
}

body.zs-logo-invert-dark[data-theme="dark"] .zs-footer-brand__logo img,
[data-theme="dark"] .zs-footer-brand__logo.zs-logo--invert-dark img {
  filter: brightness(0) invert(1);
}


/* ── Announcement Bar Dark ── */

[data-theme="dark"] .zs-announce {
  background: oklch(100% 0 0 / 0.05);
  border-bottom-color: oklch(100% 0 0 / 0.08);
  color: var(--zs-text-secondary);
}


/* ── Gravity Forms Dark Inputs ── */

[data-theme="dark"] .gform_wrapper input[type="text"],
[data-theme="dark"] .gform_wrapper input[type="email"],
[data-theme="dark"] .gform_wrapper input[type="tel"],
[data-theme="dark"] .gform_wrapper input[type="url"],
[data-theme="dark"] .gform_wrapper input[type="number"],
[data-theme="dark"] .gform_wrapper textarea,
[data-theme="dark"] .gform_wrapper select {
  background-color: var(--zs-bg-alt);
  border-color: oklch(100% 0 0 / 0.1);
  color: var(--zs-text);
}

[data-theme="dark"] .gform_wrapper input:focus,
[data-theme="dark"] .gform_wrapper textarea:focus,
[data-theme="dark"] .gform_wrapper select:focus {
  border-color: var(--zs-accent);
  box-shadow: 0 0 0 3px var(--zs-selection-bg);
}

[data-theme="dark"] .gform_wrapper .gform_button,
[data-theme="dark"] .gform_wrapper input[type="submit"] {
  background: var(--zs-accent);
  color: var(--zs-dark-bg);
}


/* ── Dark Body / Page BG ── */

[data-theme="dark"] .site-content,
[data-theme="dark"] #page {
  background: var(--zs-bg);
}

[data-theme="dark"] .zs-section {
  background: var(--zs-bg);
}


/* ── Dark Buttons ── */

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

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

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


/* ── Dark Nav CTA ── */


[data-theme="dark"] .zs-nav .zs-nav-list > li.zs-nav-cta-wrap > a {
  background: var(--zs-accent);
  color: var(--zs-dark-bg);
}


/* ── Dark Badge ── */

[data-theme="dark"] .zs-badge {
  background: oklch(100% 0 0 / 0.1);
  color: oklch(100% 0 0 / 0.9);
  border-color: oklch(100% 0 0 / 0.15);
}


/* ── Dark Separator ── */

[data-theme="dark"] .zs-separator {
  border-top-color: oklch(100% 0 0 / 0.1);
}


/* ── Dark Contact Section ── */

[data-theme="dark"] .zs-contact-section a {
  color: var(--zs-accent);
}


/* ── Dark Pricing Featured ── */

[data-theme="dark"] .zs-pricing-card.is-featured {
  border-color: var(--zs-accent);
}


/* ── Gravity Forms honeypot ── v5.8.0 - #15
   Gate J in the factory playbook requires GF honeypot fields to render
   CSS-hidden so bots fill them and humans never see them. GF v2.x emits the
   field with .gform_validation_container as the wrapper; some versions use
   .gfield_visibility_hidden. Belt-and-suspenders both. */
.gform_validation_container,
.gform_wrapper .gform_validation_container,
.gfield_visibility_hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}


/* ── Eyebrow contrast normalizer ── v5.8.1 - #31
   Every block-local eyebrow rule used `color: var(--zs-text-muted)` which
   resolves to ~#6e7278 on cream/white child themes - ~4.3:1 contrast, fails
   WCAG AA. Centralizing the fix here instead of patching 10+ block CSS files:
   bumps the base eyebrow color to --zs-text-secondary (guaranteed darker by
   token definition) which clears 4.5:1 on cream/white.

   Variant-specific overrides (e.g., `.zs-faq--centered-dark .zs-faq__eyebrow`
   at oklch(100% 0 0 / 0.6) for dark backgrounds) have higher specificity and
   continue to win for those contexts. */
.zs-content__eyebrow,
.zs-faq__eyebrow,
.zs-cta__eyebrow,
.zs-map__eyebrow,
.zs-pricing__eyebrow,
.zs-contact__eyebrow,
.zs-process__eyebrow,
.zs-logos__eyebrow,
.zs-testimonial__eyebrow,
.zs-card__eyebrow,
.zs-card-grid__eyebrow,
.zs-stats-bar__eyebrow {
  color: var(--zs-text-secondary);
}