/* ============================================================
   COLOR SOURCE OF TRUTH (manual sync — edit BOTH):
     Astra Customizer > Global > Colors  (palette slots below)
     Elementor Site Settings > Global Colors
   This file DEFINES no hue — only references Astra global vars
   and color-mix() alpha derivations of them.
   Astra slot map: 0=accent 2=ink 4=background 5=surface 6=error
   ============================================================ */

/* ============================================================
   De Baar Trucks — WordPress/Astra INTEGRATION layer
   (Phase 2b visual integration; trimmed to residue 2026-07-23,
   plan Tasks 13/14 — see per-section notes below)

   PURPOSE: the WordPress override layer. design-system.css is the
   base; the four blocks ship their own scoped CSS. This file ONLY
   resolves the CSS specificity / inheritance fights where Astra
   (theme) and Elementor (kit/widgets) defaults win over our blocks.

   LOAD ORDER: enqueued by functions.php AFTER design-system.css
   (dependency chain), filemtime-versioned, so it wins the cascade.

   Palette: De Baar Trucks (design/astra-kit-palette.json + brief §5,
   Valentina 2026-11-12). Values live ONLY in the Astra palette and the
   Elementor kit; the hex below is documentation:
     --bg #161412 charcoal  --surface #211E1B  --ink #F5F2ED
     --accent #F4992D De Baar orange (charcoal on orange 8.26:1)
     Light surfaces: --e-global-color-rvblockbg #EFECE7, rvsteel #D6D3CE,
     rvaccentdeep #8F4300 (deep orange on light), rvmutedlight #46413B.
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL DARK THEME (trimmed to residue 2026-07-23)
   The old !important background belts and the "kill white flashes"
   transparent guard were REMOVED — verified redundant against the
   live rendered cascade:
     - body itself carries Astra's `.ast-page-builder-template` class,
       which natively sets `background-color:var(--ast-global-color-4)`
       (and `.ast-separate-container{background-color:#0a0c12}` covers
       the boxed layout too) — no belt needed.
     - none of .ast-container / .elementor / .e-con ever receive a
       competing non-transparent background from Astra or Elementor's
       CSS on this site (checked astra-theme-css-inline-css,
       elementor-frontend-inline-css and the uploaded elementor
       base-desktop.css); .elementor-section / .entry-content /
       .ast-article-single don't even exist in the DOM here (this site
       uses Elementor's flex `e-con` containers, not legacy sections,
       and the Elementor Canvas template doesn't render an
       entry-content/article wrapper) — those 3 selectors matched
       nothing to begin with.
   Astra's OWN base rule sets `body,h1..h6{color:var(--ast-global-color-3)}`
   (an unused slate, NOT the ink token — Astra's "Text Color" setting is
   intentionally left unset). A LATER Astra rule re-targets h1..h6 (but
   not body) to color-2, so headings are fine, but body's own color has
   no other native source. This rule is therefore the SOLE source of ink
   body text — KEEP.
   ------------------------------------------------------------ */
body {
  color: var(--ast-global-color-2);
}

/* ::selection kept once, in design-system.css (identical values); the
   duplicate that used to live here was removed. */

/* ------------------------------------------------------------
   2. FULL-BLEED (removed 2026-07-23 — verified native)
   Astra emits `.ast-page-builder-template .site-content > .ast-container
   {max-width:100%;padding:0}` for these pages (body carries
   .ast-page-builder-template on all 5 pages; .ast-container is
   confirmed a direct child of #content.site-content in the rendered
   DOM). That selector's specificity (2 classes) already beats the
   generic `.ast-container{max-width:1240px}` (1 class, @922px+)
   regardless of source order, and it zeroes padding on all 4 sides
   (a superset of the old belt, which only zeroed left/right). The old
   `!important` rule below was fully redundant even before today —
   removed rather than kept-for-safety.
   ------------------------------------------------------------ */

/* The afgeleverd + contact NATIVE sections keep their sensible
   boxed width (Elementor 1140 container), now on the dark bg. */

/* ------------------------------------------------------------
   3. HEADING / TEXT COLORS inside the custom blocks
   The blocks set color on their CONTAINER and expect headings to
   inherit; but Astra's direct h1/h2/h3 element rules beat inherited
   color (a direct match always wins over inheritance). Re-assert the
   palette with container-scoped selectors (0,2,1)+ so we beat Astra
   without !important. Accent <em> words + eyebrows already carry
   explicit color in the block CSS; reinforced here for safety.
   ------------------------------------------------------------ */
/* Hero */
.rv-hero .rv-hero-content h1,
.rv-hero .rv-p-cap h2 {
  color: var(--ast-global-color-2);
}
.rv-hero .rv-hero-content h1 em,
.rv-hero .rv-hero-content .rv-eyebrow,
.rv-hero .rv-p-cap .rv-eyebrow {
  color: var(--ast-global-color-0);
}
.rv-hero .rv-hero-content p.rv-sub {
  color: color-mix(in srgb, var(--ast-global-color-2) 85%, transparent);
}

/* ------------------------------------------------------------
   4. NATIVE Elementor sections (afgeleverd + contact) — residue removed
   2026-07-23. Heading colors (.rv-display/.rv-label) now come from the
   per-widget Elementor global-color bindings set in Phase 2 (3-class
   specificity on `.elementor-heading-title`), which already beat the
   1-class belt-and-braces rule that used to live here — that rule was
   redundant and has been removed.
   The muted lead color has no Elementor global-color slot to bind to
   (a color-mix() alpha derivation isn't expressible as a widget color
   swatch), so it remains genuine Free-tier residue — kept in
   design-system.css (`.rv-lead, .rv-lead p`), not duplicated here.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   4b. CONTACT FORM 7 — dark ".cform" styling (spec §7)
   The CF7 widget renders default (white) inputs + a blue submit,
   which breaks the dark theme. Re-skin to the mockup's .cform:
   dark inputs #10131c, hairline border, accent focus + submit.
   Labels in the CF7 template carry the .rv-field class.
   ------------------------------------------------------------ */
.wpcf7 .rv-field {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ast-global-color-2) 55%, transparent);
  margin-bottom: 18px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 500;
}
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }

.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
  width: 100%;
  background: var(--ast-global-color-5);
  border: 1px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
  border-radius: 3px;
  padding: 13px 14px;
  color: var(--ast-global-color-2);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 300;
  transition: border-color 0.3s;
}
.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--ast-global-color-0);
}
.wpcf7-form textarea.wpcf7-form-control { resize: vertical; min-height: 120px; }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: color-mix(in srgb, var(--ast-global-color-2) 40%, transparent); }

.wpcf7-form input.wpcf7-submit {
  margin-top: 6px;
  width: auto;
  padding: 15px 32px;
  border: 1px solid var(--ast-global-color-0);
  background: color-mix(in srgb, var(--ast-global-color-0) 12%, transparent);
  color: var(--ast-global-color-2);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.35s, letter-spacing 0.35s;
}
.wpcf7-form input.wpcf7-submit:hover {
  background: color-mix(in srgb, var(--ast-global-color-0) 22%, transparent);
  letter-spacing: 0.28em;
}

/* Validation + response messages readable on dark */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { border-color: var(--ast-global-color-6); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--ast-global-color-6); font-size: 12px; margin-top: 6px; }
.wpcf7 .wpcf7-response-output {
  color: var(--ast-global-color-2);
  border-color: color-mix(in srgb, var(--ast-global-color-2) 20%, transparent) !important;
  font-size: 14px;
  border-radius: 3px;
}

/* ------------------------------------------------------------
   5. TRANSPARENT OVERLAY HEADER (Astra)
   Header is position:relative (in flow) with transparent bars over
   a white body -> reads as a white bar above the hero. Float it as a
   fixed transparent overlay so the hero video sits under the nav.
   Light nav + light brand; on scroll it gains a translucent dark bg
   (via .rv-scrolled toggled by integration.js — nice-to-have).
   ------------------------------------------------------------ */
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99;
  background: transparent !important;
  transition: background 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease;
}
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #masthead { top: 46px; }
}

#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .site-primary-header-wrap,
#masthead .ast-mobile-header-wrap,
#masthead .main-header-bar-wrap {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Scrolled state: translucent dark, hairline, blur (matches mockup). */
#masthead.rv-scrolled {
  background: color-mix(in srgb, var(--ast-global-color-4) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
}

/* Nav links: light, uppercase, letter-spaced, accent underline on hover. */
#masthead .ast-nav-menu > .menu-item > a,
#masthead .main-header-menu .menu-link,
#masthead .ast-nav-menu .menu-link {
  color: color-mix(in srgb, var(--ast-global-color-2) 62%, transparent) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 500;
}
#masthead .ast-nav-menu > .menu-item > a:hover,
#masthead .ast-nav-menu > .menu-item.current-menu-item > a,
#masthead .ast-nav-menu > .menu-item:hover > a {
  color: var(--ast-global-color-2) !important;
}

/* ------------------------------------------------------------
   6. BRAND — the header shows the logo image (custom_logo). The text
   site-title rules below only apply if the logo is ever removed.
   ------------------------------------------------------------ */
#masthead .custom-logo-link img{ height:auto; max-height:56px; width:auto; }
@media (max-width: 921px){ #masthead .custom-logo-link img{ max-height:44px; } }
#masthead .site-title {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  margin: 0;
}
#masthead .site-title a {
  color: var(--ast-global-color-2) !important;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}
#masthead .site-title a:hover { color: var(--ast-global-color-2) !important; }
#masthead .site-title .rv-brand-accent { color: var(--ast-global-color-0); }

/* ------------------------------------------------------------
   7. (removed 2026-07-23) — was a safety override on the hero CTA
   hover tint, in case a cached/base copy still carried the old stray
   gold rgba(200,169,106,.1). The color has been fixed at source in
   design-system.css since Phase 2b, and native button hover styling
   now owns this state entirely (Task 10) — no longer needed.
   ------------------------------------------------------------ */

/* NOTE: the former Section 8 (#svm-canvas Details/pager overrides) was removed
   in Phase 3 — the UCC voorraad widget is now fully themed by
   assets/css/plugin-stocklist.css (loaded AFTER this file), which supersedes
   those rules; the block <style> they fought no longer exists. */

/* ------------------------------------------------------------
   8. MOBILE
   Astra mobile menu on the dark, transparent header: dark dropdown,
   legible light links, visible hamburger. Breakpoint ~921px (Astra
   default mobile-header trigger).
   ------------------------------------------------------------ */
@media (max-width: 921px) {
  /* Mobile dropdown / off-canvas surface. Astra's mobile menu here is
     .ast-mobile-header-wrap > .site-navigation > ul.main-header-menu.ast-nav-menu
     (verified against live markup); cover the drawer variant too. */
  #masthead .main-header-bar-navigation,
  #masthead .ast-mobile-header-wrap .site-navigation,
  #masthead .ast-mobile-header-wrap .main-header-menu,
  #masthead .ast-mobile-header-wrap .ast-nav-menu,
  #masthead .ast-mobile-header-wrap .main-navigation,
  #masthead .ast-mobile-header-wrap nav,
  #masthead .ast-mobile-header-wrap ul.menu,
  .ast-mobile-popup-drawer .ast-mobile-popup-content,
  #masthead .ast-mobile-header-content {
    background: color-mix(in srgb, var(--ast-global-color-4) 98%, transparent) !important;
  }
  /* Menu links + item borders legible on dark */
  #masthead .ast-mobile-header-wrap .menu-link,
  #masthead .ast-mobile-header-wrap .ast-nav-menu a,
  #masthead .main-header-menu .menu-link,
  .ast-mobile-popup-drawer .menu-link {
    color: var(--ast-global-color-2) !important;
    letter-spacing: 0.1em;
  }
  #masthead .ast-mobile-header-wrap .ast-nav-menu .menu-item {
    border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 10%, transparent) !important;
  }
  /* Sub-menu toggle arrows */
  #masthead .ast-mobile-header-wrap .ast-menu-toggle { color: var(--ast-global-color-2) !important; }
  /* Hamburger trigger legible on dark */
  #masthead .ast-mobile-menu-trigger-minimal,
  #masthead .ast-mobile-menu-trigger-fill,
  #masthead .menu-toggle,
  #masthead .main-header-menu-toggle,
  #masthead .ast-button-wrap .menu-toggle {
    color: var(--ast-global-color-2) !important;
  }
  #masthead .ast-mobile-menu-trigger-minimal svg,
  #masthead .main-header-menu-toggle svg { fill: var(--ast-global-color-2) !important; }
  #masthead .ast-mobile-menu-trigger-fill {
    background: transparent !important;
  }
  /* Close (X) icon */
  .ast-mobile-popup-drawer .menu-toggle-close,
  .ast-mobile-popup-drawer .ast-mobile-popup-close { color: var(--ast-global-color-2) !important; }
}

/* ------------------------------------------------------------
   9. FOOTER (Astra footer-builder copyright)
   Replaces the default "Copyright © … | Powered by Astra" with the
   mockup's brand + address line. Copyright HTML is set in the
   astra-settings[footer-copyright-editor] option (brand span +
   address span). Style it dark, centered, hairline top border.
   ------------------------------------------------------------ */
.site-footer,
#colophon,
.ast-small-footer,
.footer-sml-layout-1,
.ast-footer-copyright,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-below-footer-wrap,
.site-footer-primary-section-1,
.site-footer .ast-builder-grid-row {   /* scoped: the header uses .ast-builder-grid-row too */
  background-color: var(--ast-global-color-4) !important;
  color: color-mix(in srgb, var(--ast-global-color-2) 55%, transparent);
}
#colophon {
  border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
}
.ast-footer-copyright .ast-footer-copyright,
.ast-footer-copyright p,
.site-footer p {
  color: color-mix(in srgb, var(--ast-global-color-2) 55%, transparent);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.rv-footer-brand {
  display: block;
  line-height: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  font-size: 22px;
  color: var(--ast-global-color-2);
  margin-bottom: 14px;
}
.rv-footer-brand .rv-brand-accent { color: var(--ast-global-color-0); }
.rv-footer-line {
  display: block;
  color: color-mix(in srgb, var(--ast-global-color-2) 55%, transparent);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}
.site-footer a,
.ast-footer-copyright a { color: var(--ast-global-color-0); text-decoration: none; }

/* ------------------------------------------------------------
   11. "Bekijk de volledige voorraad" CTA (native Elementor button) — residue
   bg/border/text/padding/hover-bg now live on the button widget itself
   (Task 10, kit globals — verified 2026-07-23 against the rendered
   per-widget CSS: background rgba(130,120,208,.12), border/text bound
   to rvaccent/rvink, padding 15px 32px, hover background
   rgba(130,120,208,.22) — all matching this exactly, at higher
   specificity than the old wrapper-neutralize + button rules that used
   to live here, which have been removed).
   Elementor Free has no hover-state letter-spacing control (its own
   hover rule only touches background/color/border), so this one line
   is the only genuine Free-tier residue; the transition is still
   smooth via Elementor core's own `.elementor-button{transition:all
   .3s}` base rule. The `.rv-cta` class stays on the 3 button widgets
   purely as this hover hook.
   ------------------------------------------------------------ */
.rv-cta .elementor-button:hover{ letter-spacing:0.28em; }

/* 12. (unused) */

/* ------------------------------------------------------------
   13. FOOTER SOCIAL — social-media icon row in the copyright area
   Appended to the astra-settings[footer-copyright-editor] markup as
   <span class="rv-footer-social"> with one inline-SVG <a> per confirmed
   channel (Facebook, Instagram). Icons use fill:currentColor so the link
   color drives them; muted ink at rest, accent on hover. No hardcoded hue.
   ------------------------------------------------------------ */
.rv-footer-social{display:flex;gap:16px;justify-content:center;margin-top:14px;}
.rv-footer-social a{color:color-mix(in srgb,var(--ast-global-color-2) 55%,transparent);transition:color .25s;}
.rv-footer-social a:hover{color:var(--ast-global-color-0);}
.rv-footer-social svg{width:20px;height:20px;display:block;}

/* ------------------------------------------------------------
   14. LIGHT BLOCKS — cream section/card surface on the dark site
   Added 2026-08-03: the client found the site too dark, so selected
   components get the warm off-white as a background instead of
   flipping the whole theme. Applied via the `rv-light` CSS class on
   an Elementor container (Advanced -> CSS Classes).

   NO HUE IS DEFINED HERE (§5). The cream is `--e-global-color-rvblockbg`
   and every other value is a color-mix() on an existing global.

   The light surface is the Elementor kit global `rvblockbg` (#E4E8EC),
   the same store that paints the container background.

   Measured contrast on #E4E8EC:
     ink  var(--ast-global-color-4)          15.9:1  PASS
     muted 68% mix                            6.3:1  PASS
     rvaccentdeep #1F4E66                     7.3:1  PASS
     RAW accent #A9D6E9                       1.3:1  invisible — never on light
     ink #F1F3F5 (i.e. forgetting to invert)  1.1:1  invisible
   That last row is why every text descendant is re-asserted below:
   §1 `body{color:ink}` is the SOLE ink source (Astra `text-color` is
   deliberately unset, §3), so anything not overridden disappears.

   NOTE: heading widgets must ALSO be rebound to the `rvbg` global in
   Elementor. Elementor emits
   `.elementor-20 .elementor-element.elementor-element-X .elementor-heading-title`
   (0,4,0) which outranks the 0,2,0 rule here — the CSS below is only a
   safety net for headings, not the mechanism.
   ------------------------------------------------------------ */
.rv-light{background-color:var(--e-global-color-rvblockbg);color:var(--ast-global-color-4);}
.rv-light h1,.rv-light h2,.rv-light h3,.rv-light h4,.rv-light h5,.rv-light h6,
.rv-light .elementor-heading-title{color:var(--ast-global-color-4);}
.rv-light p,.rv-light li,.rv-light .rv-lead,.rv-light .rv-lead p,
.rv-light .elementor-widget-text-editor{color:color-mix(in srgb,var(--ast-global-color-4) 68%,var(--e-global-color-rvblockbg));}
.rv-light .rv-eyebrow,.rv-light a,.rv-light .rv-display em{color:var(--e-global-color-rvaccentdeep);}
.rv-light .elementor-divider-separator,.rv-light hr{border-color:color-mix(in srgb,var(--ast-global-color-4) 14%,transparent);}
.rv-light .elementor-button{color:var(--ast-global-color-4);border-color:var(--e-global-color-rvaccentdeep);}
.rv-light .elementor-button:hover{background-color:color-mix(in srgb,var(--ast-global-color-0) 24%,transparent);}
/* USP strip icons (Voorstel D) follow the link colour */
.rv-light .elementor-icon{color:var(--e-global-color-rvaccentdeep);fill:currentColor;}

/* --- 14b. WIDGET-LEVEL hook: `rv-on-light` -----------------------
   VERIFIED 2026-08-03 on this build (Elementor 4.2): a container's
   `_css_classes` written via REST is NOT rendered — 0 of the page's
   containers carry a custom class — while WIDGET `_css_classes` ARE
   (rv-label/rv-display/rv-lead/rv-cta all present in the DOM). So
   `.rv-light` cannot scope a section here; the cream background comes
   from the container's own Elementor `background_color`, and text that
   Elementor's per-widget controls cannot reach is fixed with this
   class ON THE WIDGET instead.

   Why per-widget `text_color` is not enough on its own: Elementor
   emits it on the widget WRAPPER (0,1,0), but design-system.css
   `.rv-lead p` (0,1,1) matches the inner <p> DIRECTLY, and a direct
   match beats inheritance at any specificity. Hence the `p`/`li`
   selectors below, lifted to (0,2,1) with `.elementor-widget` so they
   win regardless of source order.
   Ratios: body 6.3:1 · links 5.0:1 · headings 15.5:1 — all PASS.
   ------------------------------------------------------------ */
.elementor-widget.rv-on-light,
.elementor-widget.rv-on-light p,
.elementor-widget.rv-on-light li,
.elementor-widget.rv-on-light td{color:color-mix(in srgb,var(--ast-global-color-4) 68%,var(--e-global-color-rvblockbg));}
.elementor-widget.rv-on-light a{color:var(--e-global-color-rvaccentdeep);}
.elementor-widget.rv-on-light .elementor-icon-box-title,
.elementor-widget.rv-on-light .elementor-icon-box-title a{color:var(--ast-global-color-4);}
.elementor-widget.rv-on-light .elementor-icon-box-description{color:var(--e-global-color-rvmutedlight);}
.elementor-widget.rv-on-light .elementor-icon{color:var(--e-global-color-rvaccentdeep);fill:var(--e-global-color-rvaccentdeep);}
.elementor-widget.rv-on-light.rv-label .elementor-heading-title,
.elementor-widget.rv-on-light .rv-label{color:var(--e-global-color-rvaccentdeep);}
.elementor-widget.rv-on-light.rv-display .elementor-heading-title em{color:var(--e-global-color-rvaccentdeep);}
.elementor-widget.rv-on-light a:hover{color:var(--ast-global-color-4);}
.elementor-widget.rv-on-light .elementor-heading-title{color:var(--ast-global-color-4);}
.elementor-widget.rv-on-light strong{color:var(--ast-global-color-4);}

/* ------------------------------------------------------------
   15. STATIC HERO — photo hero (the source layout used a scroll-video block)
   (client: "no video, just image on header"). Native Elementor
   container with the premises photo + a dark gradient overlay; the
   shadows keep the type legible over the brightest sky pixels.
   ------------------------------------------------------------ */
.rv-hero-static .elementor-heading-title{
  text-shadow:0 2px 40px color-mix(in srgb,var(--ast-global-color-4) 75%,transparent);
}
.rv-hero-static .rv-lead,
.rv-hero-static .rv-lead p{
  color:color-mix(in srgb,var(--ast-global-color-2) 90%,transparent);
  text-shadow:0 2px 20px color-mix(in srgb,var(--ast-global-color-4) 80%,transparent);
  margin-left:auto; margin-right:auto;
}
.rv-hero-static .rv-lead{ font-size:17px; }
@media (max-width:767px){ .rv-hero-static .rv-lead{ font-size:15px; } }

/* ------------------------------------------------------------
   16. TEXT LINKS under the service cards ("Naar de werkplaats →")
   ------------------------------------------------------------ */
.rv-linkline{ margin-top:auto; }
.rv-linkline a.rv-textlink{
  color:var(--ast-global-color-0); text-decoration:none; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb,var(--ast-global-color-0) 45%,transparent); padding-bottom:4px;
  transition:color .25s, border-color .25s;
}
.rv-linkline a.rv-textlink:hover,
.rv-linkline a.rv-textlink:focus-visible{ color:var(--ast-global-color-2); border-color:var(--ast-global-color-2); }

/* ------------------------------------------------------------
   17. BADGES (RDW erkend / SBB Erkend leerbedrijf) on white cards
   ------------------------------------------------------------ */
.rv-badge-card .elementor-widget-image img{ max-height:120px; width:auto; }
.rv-badge-card .rv-lead{ margin-top:14px; }
.rv-badge-card .elementor-widget.rv-on-light p{ color:var(--e-global-color-rvmutedlight); }

/* Headings inside light/steel blocks: the Elementor per-widget colour is
   bound to rvbg already; this keeps <em> accents on the deep token. */
.rv-light .rv-display em,
.rv-light .elementor-heading-title em{ color:var(--e-global-color-rvaccentdeep); }
.rv-light .elementor-widget.rv-on-light p,
.rv-light .elementor-widget.rv-on-light li{ color:var(--e-global-color-rvmutedlight); }

/* ------------------------------------------------------------
   18. FLOATING QUICK CONTACT (functions.php debaar_child_contact_float)
   Ice-blue discs with dark glyphs (12.6:1); WhatsApp in its brand green
   with a dark glyph. The 2px dark ring keeps each disc visible (>3:1)
   on the light bands too, where ice blue alone would be 1.3:1.
   ------------------------------------------------------------ */
.rv-float{ position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:98; display:flex; flex-direction:column; gap:12px; }
.rv-float-btn{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ast-global-color-0); color:var(--ast-global-color-4) !important;
  box-shadow:0 0 0 2px var(--ast-global-color-4), 0 6px 18px color-mix(in srgb,var(--ast-global-color-4) 45%,transparent);
  transition:transform .2s ease, background-color .2s ease; }
.rv-float-btn svg{ width:24px; height:24px; display:block; }
.rv-float-btn:hover{ transform:scale(1.06); background:var(--ast-global-color-2); }
.rv-float-btn:focus-visible{ outline:2px solid var(--ast-global-color-2); outline-offset:3px; }
.rv-float-btn.rv-float-wa{ background:#25D366; }
.rv-float-btn.rv-float-wa:hover{ background:#3be07a; }
@media (max-width:767px){
  .rv-float{ top:auto; bottom:16px; transform:none; }
  .rv-float-btn{ width:50px; height:50px; }
  .rv-float-tel, .rv-float-mail, .rv-float-route{ display:none; }
}
/* reCAPTCHA v3 badge (CF7, bottom:14px inline) lifted clear of the WhatsApp button (mobile) and Astra's
   scroll-to-top (desktop; Astra shows it from 769px only, setting 'scroll-to-top-on-devices' = desktop).
   86px = Astra's 30px offset + 44px tap target + 12px gap. Left alone on short landscape screens
   (>=768px wide and <560px tall), where the desktop stack above needs the right edge. Live 2026-10-16. */
@media (max-width:767px), (min-height:560px){ .grecaptcha-badge{ bottom:86px !important; } }

/* ------------------------------------------------------------
   19. CF7 — group titles, two-column field grid, consent, file input
   (the inkoop form template carries these hooks; nothing styled them)
   ------------------------------------------------------------ */
.wpcf7 .rv-group-title{
  font-family:'Montserrat', system-ui, -apple-system, sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ast-global-color-0);
  margin:34px 0 18px; padding-top:22px;
  border-top:1px solid color-mix(in srgb,var(--ast-global-color-2) 14%,transparent);
}
.wpcf7 form > .rv-group-title:first-child,
.wpcf7 .rv-group-title:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.wpcf7 .rv-form-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
@media (max-width:767px){ .wpcf7 .rv-form-grid{ grid-template-columns:1fr; } }
.wpcf7 .rv-field.rv-consent{
  text-transform:none; letter-spacing:0; font-size:13.5px; line-height:1.6;
  color:color-mix(in srgb,var(--ast-global-color-2) 75%,transparent);
}
.wpcf7 .rv-consent .wpcf7-list-item{ margin:0; }
.wpcf7 .rv-consent input[type="checkbox"]{ width:18px; height:18px; margin-right:10px; vertical-align:-3px; accent-color:var(--ast-global-color-0); }
.wpcf7 .rv-form-note{ font-size:13.5px; line-height:1.6; color:color-mix(in srgb,var(--ast-global-color-2) 75%,transparent); }
.wpcf7-form input[type="file"].wpcf7-form-control{ padding:10px 12px; font-size:13px; }
.wpcf7-form input[type="file"]::file-selector-button{
  margin-right:12px; padding:8px 14px; border:1px solid var(--ast-global-color-0); border-radius:3px;
  background:color-mix(in srgb,var(--ast-global-color-0) 12%,transparent); color:var(--ast-global-color-2);
  font:inherit; letter-spacing:.08em; cursor:pointer;
}
.wpcf7 .rv-kenteken-status{ display:block; margin-top:6px; font-size:12.5px; letter-spacing:.02em; text-transform:none;
  color:color-mix(in srgb,var(--ast-global-color-2) 75%,transparent); }
.wpcf7 .rv-kenteken-status[data-state="error"]{ color:var(--ast-global-color-6); }
.wpcf7 .rv-kenteken-status[data-state="ok"]{ color:var(--ast-global-color-0); }
.wpcf7 input.rv-kenteken{ text-transform:uppercase; letter-spacing:.12em; }

/* ------------------------------------------------------------
   20. PHOTO CARDS — one aspect ratio, so mixed source photos line up
   ------------------------------------------------------------ */
.elementor-widget.rv-af-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ------------------------------------------------------------
   21. INLINE LINKS — underlined, so they are not told apart by colour
   alone (WCAG 1.4.1; Lighthouse link-in-text-block). Stand-alone
   links (buttons, .rv-textlink, nav, floating buttons) are excluded.
   ------------------------------------------------------------ */
.rv-lead a:not(.rv-textlink),
.rv-contact-meta a,
.ast-footer-copyright .rv-footer-line a,
.wpcf7 .rv-form-note a,
.wpcf7 .rv-consent a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.rv-lead a:not(.rv-textlink):hover,
.rv-contact-meta a:hover,
.ast-footer-copyright .rv-footer-line a:hover{ text-decoration-thickness:2px; }
.wpcf7-form input[type="file"].wpcf7-form-control{ color:color-mix(in srgb,var(--ast-global-color-2) 75%,transparent); }

/* ------------------------------------------------------------
   22. Fixes from the mobile review (2026-09-29)
   ------------------------------------------------------------ */
/* badges are logos, not photos: never crop them to the 4:3 photo ratio */
.rv-badge-card .elementor-widget.rv-af-img img{ aspect-ratio:auto; object-fit:contain; width:auto; max-width:100%; }
/* keep phone numbers on one line (they broke at the hyphen on narrow screens) */
a[href^="tel:"]{ white-space:nowrap; }
/* long button labels: tighter tracking on phones so they stay on one line */
@media (max-width:767px){
  .rv-cta .elementor-button{ letter-spacing:.14em !important; padding-left:18px !important; padding-right:18px !important; }
  .rv-cta .elementor-button:hover{ letter-spacing:.16em !important; }
}

/* ------------------------------------------------------------
   23. Typography = the logo: Montserrat (headings 600/700, italic accent
   word; tracked caps for labels/nav/buttons), Inter for body text. Spacing tuned for the heavier face.
   ------------------------------------------------------------ */
.rv-hero-static .elementor-widget.rv-label{ margin-bottom:16px; }
.elementor-widget.rv-list + .elementor-widget.rv-display{ margin-top:22px; }

/* ------------------------------------------------------------
   24. STOCKLIST (UCC module; unused since the autodealers.nl switch) — prices black instead of the
   accent ice blue, on the list and on the vehicle detail page
   (Matteo, 2026-10-06). The colour comes from the module's own CSS,
   which UCC injects after this file: ID-scoped + !important.
   ------------------------------------------------------------ */
#svm-canvas .price_with_currency{ color:var(--ast-global-color-4, #0a0c12) !important; }
/* closing line of the Over ons history ("sinds 2012 vertrouwd onderweg") */
.elementor-widget.rv-signoff{ margin-top:48px; }
@media (max-width:767px){ .elementor-widget.rv-signoff{ margin-top:28px; } }