/* ==========================================================================
   Autohandel Zuid-Holland: scoped design CSS (Valentina, P2b, 2026-10-16). APPROVED AT G2 2026-10-16; Tommaso applies at P3.
   Goes into the new child theme as zuid-child/assets/css/zuid.css (enqueued after Astra + Elementor), replacing
   the previous child theme's design-system.css + integration.css. Port NOTHING else from those two files:
     - no @import of fonts.googleapis.com (AVG); fonts come from Elementor local fonts
     - no fixed transparent #masthead, no .rv-scrolled, no backdrop-filter, no dark mobile menu, no serif display face
   Every rule is scoped: #masthead / #colophon / .wpcf7 / an Elementor class set on the container (css_classes,
   gotchas §1) or widget (_css_classes). No bare element selector styles the site.
   Proven in design/proto/first-screen.html (1440 / 768 / 390, measured).
   ========================================================================== */

/* §0 Tokens: production values point at the Astra slots / Elementor kit so the Customizer stays the source.
   Hex fallbacks = the approved palette (palette.json). */
:root {
  --zh-royal: var(--ast-global-color-0, #0044C3);
  --zh-navy: var(--ast-global-color-1, #01225B);
  --zh-ink: var(--ast-global-color-2, #1B2125);
  --zh-pale: var(--ast-global-color-4, #EFF1F4);
  --zh-white: var(--ast-global-color-5, #FFFFFF);
  --zh-steel: var(--ast-global-color-6, #727987);
  --zh-night: var(--ast-global-color-7, #011D52);
  --zh-signal: var(--ast-global-color-8, #005DF8);
  --zh-silver: var(--e-global-color-rvsilver, #ABABAD);
  --zh-muted: var(--e-global-color-rvmuted, #5E646F);
  --zh-muted-dark: var(--e-global-color-rvmuteddark, #9EABCB);
  --zh-link-dark: var(--e-global-color-rvlinkdark, #7BADFF);
  --zh-error: var(--e-global-color-rverror, #B42318);
  --zh-font-display: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --zh-font-text: 'Inter', Arial, sans-serif;
  --zh-slant: 12deg;
  --zh-radius: 2px;
}

/* §1 Header: solid white, in the flow, sticky from 922 px (Astra free has no sticky header) ---------------- */
@media (min-width: 922px) {
  #masthead { position: sticky; top: 0; z-index: 99; }
  .admin-bar #masthead { top: 32px; }
}
#masthead .ast-primary-header-bar { border-bottom: 1px solid #E1E4EA; }          /* hairline, decorative */
#masthead .custom-logo-link img { width: auto; height: auto; max-height: 57px; }  /* 200 x 57 */
@media (max-width: 921px) { #masthead .custom-logo-link img { max-height: 46px; } }  /* 160 x 46 */
/* menu: Saira 600 caps +0.06em (the "ZUID-HOLLAND" voice); colours come from the Astra keys in design-ops.json */
#masthead .main-header-menu > .menu-item > .menu-link {
  font-family: var(--zh-font-display); font-weight: 600; font-style: normal;
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em; position: relative;
}
/* active item: a 3 px royal bar under it, skewed on the logo's slant (desktop only) */
.ast-desktop #masthead .main-header-menu > .current-menu-item > .menu-link::after {
  content: ''; position: absolute; left: 1em; right: 1em; bottom: 18px; height: 3px;
  background: var(--zh-royal); transform: skewX(calc(var(--zh-slant) * -1));
}
#masthead .ast-header-button-1 .ast-custom-button {
  font-family: var(--zh-font-display); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .06em;
}
/* mobile menu: white dropdown, charcoal links, steel dividers (colours themselves = Astra keys) */
@media (max-width: 921px) {
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-item { border-bottom: 1px solid #D5D9E0; }
  #masthead .ast-mobile-header-wrap .main-header-menu .menu-link {
    font-family: var(--zh-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  }
}

/* §2 Home hero: night panel | photo column cut on the logo's 12deg slant -------------------------------------
   Build: container .zh-hero (row, background_color = global rvnight, min-height 560 / height calc(100vh - 88px) /
   max 760, full width) > container .zh-hero-panel (48%, content: H1 + text + 2 buttons + proof line)
   + container .zh-hero-photo (52%, padding 0) holding ONE Image widget (the LCP image, eager). */
.e-con.zh-hero-photo { overflow: hidden; padding: 0; margin-left: -80px;               /* half the cut slides under the panel;
   zuid-site.css K widens this column by the same 80 px so the photo still reaches the right edge (829 px at 1440, P4 v1) */
  clip-path: polygon(162px 0, 100% 0, 100% 100%, 0 100%); }                        /* tan(12deg) x 760px = 162px */
.e-con.zh-hero-photo .elementor-widget-image,
.e-con.zh-hero-photo .elementor-widget-container { height: 100%; width: 100%; }
.e-con.zh-hero-photo img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: 60% 70%; }
/* P4: the hero stacks at <= 1024 (Elementor's tablet breakpoint, where width_tablet = 100% applies), not <= 921 */
@media (max-width: 1024px) {
  .e-con.zh-hero { flex-direction: column; height: auto; max-height: none; }
  .e-con.zh-hero-photo { order: -1; height: 300px; margin-left: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); }
  .e-con.zh-hero-photo img { object-position: 55% 75%; }
}
@media (max-width: 767px) { .e-con.zh-hero-photo { height: 260px; } }

/* §3 Signature: the "Bel of app" stripe band ------------------------------------------------------------------
   Build: one saved container template .zh-stripe (background_color = global rvsignal, boxed 1240) with
   HTML widget (.zh-bars markup below) | heading widget (header_size div, link tel:+31622445313) for the number +
   text-editor (label + hours) | 2 button widgets (Bel direct = white/navy, WhatsApp = outline white).
   HTML widget: <span class="zh-bars" aria-hidden="true"><i></i><i></i><i></i></span> */
.zh-bars { display: inline-flex; gap: 8px; }
.zh-bars i { display: block; height: 22px; transform: skewX(calc(var(--zh-slant) * -1)); }
.zh-bars i:nth-child(1) { width: 18px; background: var(--zh-silver); }
.zh-bars i:nth-child(2) { width: 24px; background: #DCE6FF; }
.zh-bars i:nth-child(3) { width: 64px; background: #FFFFFF; }
.e-con.zh-stripe .elementor-widget.zh-number .elementor-heading-title { white-space: nowrap; }
.e-con.zh-stripe .elementor-widget-text-editor b { font-family: var(--zh-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-right: 10px; }
@media (max-width: 921px) {
  .e-con.zh-stripe .elementor-widget-text-editor b { display: block; margin: 0 0 6px; }
}

/* §4 The bar mark before a section H2 (max ONE per page, replaces the .rv-label eyebrows). Widget _css_classes zh-mark */
.elementor-widget.zh-mark .elementor-heading-title::before {
  content: ''; display: block; width: 74px; height: 12px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--zh-silver) 0 14px, transparent 14px 20px, var(--zh-steel) 20px 38px, transparent 38px 44px, var(--zh-royal) 44px 74px);
  transform: skewX(calc(var(--zh-slant) * -1));
}
.e-con.zh-on-night .elementor-widget.zh-mark .elementor-heading-title::before {
  background: linear-gradient(90deg, var(--zh-silver) 0 14px, transparent 14px 20px, var(--zh-muted-dark) 20px 38px, transparent 38px 44px, var(--zh-link-dark) 44px 74px);
}

/* §5 Text on night bands (export band, Over ons history): containers with css_classes zh-on-night.
   Royal is never used on night (2.01:1); links/accents switch to link-dark (7.13:1). */
.e-con.zh-on-night .elementor-widget-text-editor a,
.e-con.zh-on-night .elementor-widget-heading a { color: var(--zh-link-dark); }
.e-con.zh-on-night .elementor-widget-text-editor a:hover { color: #FFFFFF; }

/* §6 Page-header photo bands (css_classes zh-band): phone overlay runs top -> bottom.
   Only needed if Elementor's gradient angle is not responsive on this version. VERIFY on the built container that
   the overlay is the container's ::before before relying on this; then measure the brightest pixel under the H1. */
@media (max-width: 767px) {
  .e-con.zh-band::before { background-image: linear-gradient(180deg, rgba(1,29,82,.60) 0%, rgba(1,29,82,.92) 100%) !important; opacity: 1 !important; }
}

/* §7 Contact Form 7, light version (replaces the previous dark .cform) ------------------------------------- */
.wpcf7 .rv-field, .wpcf7 label {
  display: block; font-family: var(--zh-font-display); font-weight: 600; font-size: 14px;   /* P4: 13 -> 14 (one label size) */
  text-transform: uppercase; letter-spacing: .06em; color: var(--zh-ink); margin-bottom: 18px;
}
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]):not([type=file]),
.wpcf7-form select.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
  width: 100%; background: #FFFFFF; color: var(--zh-ink); border: 1px solid var(--zh-steel);   /* 4.37 white / 3.87 pale */
  border-radius: var(--zh-radius); padding: 13px 14px; font: 400 16px/1.4 var(--zh-font-text);
  text-transform: none; letter-spacing: 0;
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--zh-muted); opacity: 1; }   /* 5.95:1 */
.wpcf7-form .wpcf7-form-control:focus { outline: 2px solid var(--zh-signal); outline-offset: 2px; border-color: var(--zh-steel); }
.wpcf7-form input.wpcf7-submit {
  width: auto; margin-top: 6px; padding: 17px 28px; border: 0; border-radius: var(--zh-radius); cursor: pointer;
  background: var(--zh-royal); color: #FFFFFF;                                        /* 8.03:1 */
  font: 600 15px/1 var(--zh-font-display); text-transform: uppercase; letter-spacing: .06em;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--zh-navy); }               /* 15.20:1 */
.wpcf7-form .wpcf7-not-valid { border-color: var(--zh-error); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--zh-error); font: 400 14px/1.4 var(--zh-font-text); text-transform: none; letter-spacing: 0; margin-top: 6px; }
.wpcf7 .wpcf7-response-output { color: var(--zh-ink); border-color: var(--zh-steel) !important; border-radius: var(--zh-radius); font-size: 14px; }
.wpcf7 .wpcf7-list-item-label { font: 400 14px/1.5 var(--zh-font-text); text-transform: none; letter-spacing: 0; }

/* §8 Footer: night navy, a designed close (address, phone, hours, one CTA). Markup lives in
   astra-settings[footer-copyright-editor] as .zh-foot (structure in design-ops.json). */
#colophon, #colophon .site-primary-footer-wrap, #colophon .site-below-footer-wrap { background-color: var(--zh-night); }
#colophon { color: #FFFFFF; }
#colophon .zh-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; text-align: left; padding: 72px 0 32px; }
#colophon .zh-foot img.zh-foot-logo { width: 200px; height: auto; display: block; margin-bottom: 16px; }
#colophon .zh-foot h2 { font: 600 14px/1.2 var(--zh-font-display); text-transform: uppercase; letter-spacing: .06em; color: #FFFFFF; margin: 0 0 12px; }
#colophon .zh-foot p, #colophon .zh-foot li { font: 400 14px/1.6 var(--zh-font-text); color: #FFFFFF; margin: 0; }   /* P4: 15 -> 14 */
#colophon .zh-foot .zh-meta, #colophon .zh-legal { color: var(--zh-muted-dark); font-size: 14px; }            /* 7.04:1 */
#colophon a { color: var(--zh-link-dark); }                                                                    /* 7.13:1 */
#colophon a:hover { color: #FFFFFF; }
#colophon .zh-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 20px 0 28px; border-top: 1px solid rgba(255,255,255,.18); }
#colophon .zh-legal .zh-credit img { height: 18px; width: auto; vertical-align: middle; }  /* "Powered by Vinacles": alt="Vinacles" */
@media (max-width: 921px) {
  #colophon .zh-foot { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 24px; }
}

/* §9 Floating phone + WhatsApp on phones only (the .rv-float pattern, minus mail + route) */
@media (max-width: 921px) {
  .rv-float a { width: 50px; height: 50px; border-radius: 50%; color: #FFFFFF; }
  .rv-float a.rv-float-tel { background: var(--zh-royal); }                /* white glyph 8.03:1 */
  .rv-float a.rv-float-wa { background: #1A7F45; }                         /* WhatsApp green darkened: white 5.04:1 (brand #25D366 is 1.98:1) */
}

/* §10 One visible focus ring, site content only */
#page a:focus-visible, #page button:focus-visible, #page .elementor-button:focus-visible { outline: 2px solid var(--zh-signal); outline-offset: 3px; }
#page .e-con.zh-on-night a:focus-visible, #page .e-con.zh-stripe a:focus-visible,
#page .e-con.zh-hero a:focus-visible, #colophon a:focus-visible { outline-color: #FFFFFF; }

/* §11 P4 critique fixes (Valentina, critique-v1.md, 2026-10-16) -------------------------------------------------- */
/* Footer gutter + the 1160 page grid (content left = 140 / 40 / 24 / 16 at 1440 / 1024 / 768 / 390, measured) */
#colophon .site-below-footer-wrap { padding-left: 40px; padding-right: 40px; }
#colophon .site-below-footer-wrap .site-below-footer-inner-wrap { max-width: 1160px; }
@media (max-width: 921px) { #colophon .site-below-footer-wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 544px) { #colophon .site-below-footer-wrap { padding-left: 16px; padding-right: 16px; } }
/* Reading measure: must out-rank Elementor's `.e-con.e-con > .e-con-inner > .elementor-widget{max-width:100%}` (0,4,0) */
.e-con.e-con > .e-con-inner > .elementor-widget.zh-measure,
.elementor.elementor .e-con > .elementor-widget.zh-measure { max-width: 34em; }   /* P4 v2: 62ch ran ~85 chars in Inter; 34em = ~70 */
.e-con.e-con.zh-hero-panel .elementor-widget.elementor-widget-text-editor { max-width: 34em; }
/* vinacles-cookies: on-system shape and type (colours are its settings; plugin CSS uses !important, so do we) */
body div.vinacles-cookies-consent h2 { font-family: 'Saira', Arial, sans-serif !important; font-style: normal !important; }   /* weight 600 = loaded */
body div.vinacles-cookies-layout > div.buttons a { border-radius: 2px !important; font-family: 'Saira', Arial, sans-serif !important;
  font-size: 14px !important; text-transform: uppercase; letter-spacing: .06em; }
body div.vinacles-cookies-layout p { font-size: 14px !important; }
/* the plugin's reopen button (fixed bottom-right, 50x50) would cover the floating WhatsApp button: lift the stack */
/* (moved to section 13 in P4 v3, with the safe-area inset) */

/* §12 P4 v2 (critique-v2.md) ---------------------------------------------------------------------------------------- */
/* Every button carries a 2 px border (transparent on solid ones), so solid and outline buttons are the same height (53 px) */
.elementor-widget-button .elementor-button { border: 2px solid transparent; }
/* Stripe band (template 189): the number/label column takes the free width, the buttons only what they need,
   so "Bellen of WhatsAppen · ma-za ... · zo ..." stays on one line from 1100 px up */
.e-con.e-con.zh-stripe .e-con.elementor-element-4bc4316 { flex: 1 1 auto; --width: auto; width: auto; }
.e-con.e-con.zh-stripe .e-con.elementor-element-d6b9727 { flex: 0 0 auto; --width: auto; width: auto; }

/* §13 P4 v3 (Marta p4-gate-v2: O1 floating rail, S2 breadcrumb) --------------------------------------------------- */
/* Floating phone/WhatsApp rail, <= 921 px. Behaviour (assets/js/zuid.js section 3 adds html.zh-float-js and toggles .is-on):
   OFF while any of these is on screen: the page's first section (Home hero / photo band / pale page header / 404 block /
   search header), a stripe band (.zh-stripe: own Bel/App buttons), a Contact Form 7 form, the footer (#colophon: phone +
   WhatsApp). OFF while a button is in the rail's zone (bottom 150 px of the screen), while a form field has focus
   (on-screen keyboard) and while the focused element lies under the rail (WCAG 2.2 SC 2.4.11). ON otherwise; plain text
   may scroll under it. Hidden = visibility:hidden, so its links leave the tab order and the accessibility tree.
   Position: 16 px from the right/bottom edge plus the iOS safe-area inset; 84 px up when the vinacles-cookies reopen
   button exists (fixed bottom-right 12/20 px, 50 x 50), so the two never touch.
   No JavaScript / no IntersectionObserver: the rail stays on (as before) and the footer gets a bottom safe area so the
   credit line can always scroll clear of it. */
@media (max-width: 921px) {
  body .rv-float { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body:has(.cookie-reopen-button) .rv-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html.zh-float-js body .rv-float { opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
  html.zh-float-js body .rv-float.is-on { opacity: 1; visibility: visible; transform: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s; }
  html:not(.zh-float-js) #colophon .site-below-footer-wrap { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  html.zh-float-js body .rv-float, html.zh-float-js body .rv-float.is-on { transition: none; transform: none; }
}
/* Search-page breadcrumb (Astra .ast-breadcrumbs): underlined like every other inline link (Marta V1 / S2, WCAG 1.4.1);
   colour alone was 2.02:1 against the charcoal crumb text. Same underline as zuid-site.css K. */
.ast-breadcrumbs-wrapper .ast-breadcrumbs .trail-items a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ast-breadcrumbs-wrapper .ast-breadcrumbs .trail-items a:hover { color: var(--zh-navy); }

/* §14 P4 v3b: Home hero buttons stack where the panel is too narrow for both on one line (content width 404-450 px at
   1025-1120 px made each wrap to 2 lines, 68 px). From ~1140 px they fit side by side (209 + 229 px). Measured stacked:
   both 53 px, natural width, no overflow. Element 7af347b = the hero button row on page 20. */
@media (min-width: 1025px) and (max-width: 1139px) {
  .e-con.e-con.zh-hero-panel .e-con.elementor-element-7af347b { --flex-direction: column; --align-items: flex-start; flex-direction: column; align-items: flex-start; }
}

/* §15 P4 v4 (Marta p4-gate-v3: F2 header wrap, F1 focus under the sticky header, F3 scroll-to-top) ----------------- */
/* F2: one-row desktop header at 922-1059 px. The row needs ~1005 px of content (logo 198 + 5 menu links 566 + phone
   button 179 + gaps); 923 px leaves 883. Here only: nav 14 px / +0.04em / 9 px side padding, phone button 14 px with
   16 px side padding, logo 50 px tall (174 px wide). Frees ~160 px, so CONTACT stays on the first row from 922 px.
   The header keeps its 88 px bar (Astra hb-header-height), so it is the same height at every desktop width. */
@media (min-width: 922px) and (max-width: 1059px) {
  #masthead .main-header-menu > .menu-item > .menu-link { font-size: 14px; letter-spacing: .04em; padding-left: 9px; padding-right: 9px; }
  .ast-desktop #masthead .main-header-menu > .current-menu-item > .menu-link::after { left: 9px; right: 9px; }
  #masthead .ast-header-button-1 .ast-custom-button { font-size: 14px; letter-spacing: .04em; padding-left: 16px; padding-right: 16px; }
  #masthead .custom-logo-link img { max-height: 50px; }
}
/* F1: keyboard focus and #anchors never land under the sticky header (WCAG 2.2 SC 2.4.11). Header = 88-92 px from 922 px
   up (92 from 1060); 16 px breathing room. Logged-in admin bar adds 32 px. Needs Astra enable-scroll-to-id = false
   (design-ops-p4v4.json): Astra's own anchor scroll ignores scroll-padding and re-scrolls 750 ms after load. */
@media (min-width: 922px) {
  html { scroll-padding-top: 108px; }
  html:has(body.admin-bar) { scroll-padding-top: 140px; }
}
/* F3: Astra's scroll-to-top (31 x 31, fixed) lives in the page gutter, never over the 1160 px content column: 20 px
   from the content edge, or 30 px from the window edge when the gutter is wider. Hidden where the gutter cannot hold
   it (< 1260 px); below 922 px Tommaso already hides it (the rail takes that corner). */
#ast-scroll-top { right: min(30px, calc((100vw - 1160px) / 2 - 51px)); }
@media (max-width: 1259px) { #ast-scroll-top { display: none !important; } }