/* ─── Dark section (class-scoped; only activates via .hzo-section--dark) ── */
/* Sections stack flush: cancel WordPress's default block-gap margin between
   stacked top-level sections. Each .hzo-section owns its vertical rhythm via
   padding, so sections must meet with NO gap; without this the 24px block-gap
   inserts a margin and the page background shows through as a seam between
   sections. Specificity (0,2,0) beats WP's `.is-layout-flow > * + *` (0,1,0),
   so it wins regardless of stylesheet order. */
:is(.is-layout-flow, .is-layout-constrained) > .hzo-section { margin-block-start: 0; }

.hzo-section--dark { background: var(--bg-dark-section); color: #fff; }
.hzo-section--dark h1, .hzo-section--dark h2, .hzo-section--dark h3, .hzo-section--dark h4, .hzo-section--dark h5, .hzo-section--dark h6 { color: var(--heading-color-on-dark, #fff); }
.hzo-section--dark p { color: rgba(255,255,255,0.85); }
.hzo-section--dark a { color: #fff; }
.hzo-section--dark .hzo-eyebrow,
.hzo-section--dark h1.hzo-eyebrow,
.hzo-section--dark h2.hzo-eyebrow,
.hzo-section--dark h3.hzo-eyebrow,
.hzo-section--dark h4.hzo-eyebrow { color: var(--accent) !important; }

/* ─── Dark-surface button auto-treatment (token remap) ──────────────────
   BARE .hzo-btn--outline / --ghost / --secondary on a brand-colored dark field
   render brand-on-brand and effectively vanish (~1:1): the base rules resolve
   --btn-outline-color / --btn-ghost-color / --btn-secondary-bg to var(--brand),
   which equals the section's own --bg-dark-section. A correct fix already
   exists as the opt-in `.hzo-btn--on-dark.*` rules (buttons.css:171-195), but
   authors must remember the class and shipped patterns (rate-menu, contact-
   split, Fluent Forms prev/upload, WooCommerce) don't.
   Remapping the *component tokens* here makes those base rules resolve to the
   on-dark values with NO .hzo-btn--on-dark needed — text/border go white,
   secondary flips to a white fill with brand text, hovers stay readable.
   Values read the SAME --btn-on-dark-* family the explicit on-dark rules use,
   so the bare and opt-in paths share one source of truth and can't visually
   diverge (a client theming --btn-on-dark-* themes both).
   Scope note (specificity/order): single class (0,1,0) is deliberate. Custom
   properties inherit from the nearest ancestor, so this surface-level
   declaration shadows any :root / tokens.overrides token for its whole subtree
   — no specificity boost is needed for it to win inside dark surfaces, and
   keeping it low lets a client still re-theme by targeting the surface.
   Folded onto :is(.hzo-section--dark, .hzo-surface--dark) so the opt-in
   surface-dark utility (surface-dark.css remaps text tokens but not these) is
   fixed at the same time. Only outline/ghost/secondary read these tokens —
   primary (accent/green) stays green, and danger/link are untouched. */
:is(.hzo-section--dark, .hzo-surface--dark) {
    --btn-outline-color:   var(--btn-on-dark-accent, #fff);          /* outline: white text + white border (rest); white fill on hover */
    --btn-ghost-color:     var(--btn-on-dark-accent, #fff);          /* ghost: white text (rest + hover) */
    --btn-ghost-hover:     rgba(255, 255, 255, 0.2);                 /* ghost hover: translucent white wash (matches on-dark ghost hover) */
    --btn-secondary-bg:    var(--btn-on-dark-bg, #fff);              /* secondary: white fill + white border */
    --btn-secondary-text:  var(--btn-on-dark-text, var(--brand));    /* secondary + outline-hover text: brand on white */
    --btn-secondary-hover: color-mix(in srgb, var(--btn-on-dark-bg, #fff) 75%, var(--btn-on-dark-text, var(--brand))); /* secondary hover: light brand tint (matches on-dark) */
}