/*
Theme Name: Gele Vaccinatieboekje (gelevb)
Theme URI: https://hetgelevaccinatieboekje.nl
Author: BouwArchitectbaas (build) for Stef / YOXLO
Description: Clean-rebuild block theme for hetgelevaccinatieboekje.nl. Single-product Dutch WooCommerce funnel. Mobile-first, token-driven (Designbaas Build-Spec v2), no page builder. Typography/colour roles live in theme.json; layout CSS lives in @layer components so theme.json stays the single source for type/colour. See DECISIONS.md (clean-rebuild ADRs D-25+).
Version: 0.1.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.3
Text Domain: gelevb
License: GPL-2.0-or-later
*/

/*
  IMPORTANT — the colour HEX values in theme.json are PLACEHOLDERS / ROLES.
  Yellow (surface-brand), CTA fill, focus ring etc. are Stef's visual call
  (Build-Spec §5/§12, hex sampled later in the render-loop). The current
  #D9D639 etc. are provisional so the page RENDERS; they are swappable roles,
  not pinned brand values. KeurBaas verifies contrast once hex is sampled.

  This file (style.css) holds ONLY the cascade-LAYER DECLARATION and the few
  unlayered base resets that must beat block defaults (box-sizing, media
  max-width, focus-visible, tap targets). All hero/section LAYOUT lives in
  @layer components inside assets/css/layout.css. theme.json owns typography
  and colour and stays UNLAYERED → it wins over @layer'd CSS by construction.
*/

/* ---------------------------------------------------------------------------
 * CASCADE LAYER ORDER — declared ONCE, here, before any layered rule exists.
 * Winner = layer order, not specificity. theme.json output stays unlayered and
 * therefore beats every one of these layers for the properties it sets
 * (typography, colour). Our own CSS only ever does LAYOUT, inside `components`.
 *
 *   base         — resets / a11y floors that may live in a layer
 *   wp-overrides — reserved: any deliberate override of a core block default
 *   components   — gelevb section layout (hero grid, cards, sticky bars …)
 *   utilities    — reserved: last-word single-purpose helpers
 *
 * ROOT-CAUSE NOTE (why this exists): the previous build let THREE sources claim
 * the hero-H1 size (theme.json elements.heading, wp-block-library defaults, and a
 * `.gelevb-hero__h1{font-size}` rule in CSS). Every fix shifted the winner → the
 * H1 bug kept returning. Here typography has exactly ONE source (theme.json
 * styles.elements.h1) and the layout CSS is confined to a layer that CANNOT win
 * a typography fight. There is NO font-size rule on any hero-H1 class anywhere.
 * ------------------------------------------------------------------------- */
@layer base, wp-overrides, components, utilities;

/* ---------------------------------------------------------------------------
 * UNLAYERED base resets — intentionally NOT in a layer so they reliably beat
 * block defaults. These set NO typographic size/family and NO brand colour, so
 * they never compete with theme.json's typography/colour ownership.
 * ------------------------------------------------------------------------- */

/* Nothing may exceed the viewport, ever (no horizontal scroll at 390px). */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, input, select, textarea, table { max-width: 100%; }

/* Dutch compound words are long — wrap on whitespace, NEVER auto-hyphenate.
 *
 * ROOT-CAUSE of the recurring desktop "vaccina-/tieboekje" hyphen bug: this
 * reset previously set `hyphens: auto`, UNLAYERED. The hero-H1's `hyphens: none`
 * lives in `@layer components` (layout.css) and an unlayered rule ALWAYS beats a
 * layered one regardless of specificity — so `auto` won and the browser inserted
 * a soft hyphen mid-word. We remove `hyphens` here entirely: the CSS initial
 * value is `manual` (verified against MDN CSS `hyphens`), i.e. the browser only
 * breaks at explicit U+2010/U+00AD opportunities, of which our copy has none, so
 * no word is auto-hyphenated anywhere. `overflow-wrap: break-word` is kept so a
 * single word longer than its container wraps (as a last resort) instead of
 * overflowing — it never inserts a hyphen, so it cannot reintroduce the bug. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Visible keyboard focus everywhere (a11y floor C9). */
:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--focus-ring);
  outline-offset: var(--wp--custom--focus--offset);
}

/* Minimum tap target for interactive controls (a11y C10). */
.wp-element-button, .wp-block-button__link, button, [role="button"], input[type="submit"] {
  min-height: var(--wp--custom--target--min);
}

/* ---------------------------------------------------------------------------
 * HERO WIDTH — owned by WP's own layout CSS, NOT by a hand-rolled hack.
 *
 * The homepage renders from templates/front-page.html (NOT a saved DB page —
 * verified against the live rendered DOM 2026-06-05: the page contains the
 * gelevb/hero pattern markup and zero wp-block-post-content blocks; the
 * `page-id-10` body class is only the static-front-page pointer, its content is
 * never executed). So our pattern markup IS the source of truth and block-layout
 * attributes take effect.
 *
 * Width therefore comes from the standard block-layout mechanism, not CSS:
 *   - templates/front-page.html: <main> is `constrained` (children cap at
 *     contentSize = 720px unless aligned).
 *   - patterns/hero.php: the hero <section> carries `align:wide`, so WP's
 *     UNLAYERED constrained-layout rule gives it `max-width = wideSize = 1440px`
 *     and centres it. With useRootPaddingAwareAlignments=true the band sits
 *     inside the root-padding gutters, so it never exceeds the viewport → no
 *     horizontal scroll at 390px.
 *   - the section is `default` (flow) layout so it does NOT re-cap its child back
 *     to 720px; the inner `.gelevb-hero` grid then fills the full 1440px band.
 *
 * Result: the previous desktop bug (hero starved to the 720px column, the 72px
 * word "vaccinatieboekje" breaking mid-word) is fixed structurally, by using the
 * wide band, with NO viewport-unit width hack and NO `!important` margins here.
 * `.gelevb-hero` now carries grid LAYOUT only (in @layer components/layout.css);
 * it sets no width, so it inherits the section's 1440px wide measure cleanly.
 * ------------------------------------------------------------------------- */