/* ============================================================
   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
   ============================================================ */

/* ============================================================
   Autobedrijf Rietvelden — 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 (strict — spec §4):
     --bg #0a0c12  --ink #f3f0ea  --muted rgba(243,240,234,.55)
     --line rgba(243,240,234,.14)  --accent #8278d0
   ============================================================ */

/* ------------------------------------------------------------
   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: 'Inter', system-ui, -apple-system, sans-serif;
}
.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: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.24em;
  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.2em;
  font-size: 12.5px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
}
#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 WORDMARK  "Riet[velden]"
   PHP filter (functions.php) wraps "velden" in .rv-brand-accent.
   Serif, uppercase, letter-spaced; "velden" in accent.
   ------------------------------------------------------------ */
#masthead .site-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', 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 {
    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,
.ast-builder-grid-row {
  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;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', 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. WHATSAPP FLOAT — removed 2026-08-03 with the button itself
   (rietvelden_child_whatsapp_button() dropped from functions.php).
   Number kept unused to avoid renumbering §13 in the docs. */

/* ------------------------------------------------------------
   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.

   WHY THE ELEMENTOR GLOBAL AND NOT ASTRA SLOT 8: §9 documents
   `--ast-global-color-8` as #E7E5DF, but that is only true on LocalWP.
   On riet.vinacles-website.com slot 8 is still Astra's default #111111
   (VERIFIED 2026-08-03) — the Astra palette lives in wp_options, which
   per §13 only migrates via Duplicator, and it never was. Referencing
   the Astra slot therefore mixed dark into near-black (measured
   rgb(12,14,18) instead of #515154). The Elementor kit global DOES hold
   #E7E5DF on that host, and it is the same store that paints the
   container background, so it is the honest source here. If Astra slot 8
   is ever synced on riet, the two become interchangeable.

   Measured contrast on this cream:
     ink  var(--ast-global-color-4)          15.5:1  PASS
     muted 68% mix                            6.3:1  PASS
     accent mixed 70% toward bg               5.0:1  PASS
     RAW accent #8278d0                       3.0:1  FAILS normal text
     ink #f3f0ea (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:color-mix(in srgb,var(--ast-global-color-0) 70%,var(--ast-global-color-4));}
.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:color-mix(in srgb,var(--ast-global-color-0) 70%,var(--ast-global-color-4));}
.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:color-mix(in srgb,var(--ast-global-color-0) 70%,var(--ast-global-color-4));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:color-mix(in srgb,var(--ast-global-color-0) 70%,var(--ast-global-color-4));}
.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);}