/* ============================================================
   De Baar Trucks: design layer on top of the child theme (debaar-child)
   Valentina, P2b 2026-11-12. Tommaso applies at P3.

   WHERE IT GOES: a new file in the child theme
   wp-content/themes/debaar-child/assets/css/debaar.css, enqueued AFTER integration.css (add it to the
   same dependency chain in functions.php, filemtime-versioned). Do NOT
   paste it into Customizer > Additional CSS.

   NO HEX IN THIS FILE except where a comment says why. Every colour is
   an Astra slot or an Elementor kit global, so the palette stays in
   two stores (design/astra-kit-palette.json) and nowhere else.

   SCOPING: every rule is scoped to a component class the child theme
   already owns (#masthead, .rv-*, .wpcf7, .site-footer) or to an
   element id. No bare element selector site-wide.

   The overlay header on this site is the child theme's own fixed
   #masthead (integration.css s5), NOT Astra's transparent header:
   body has no .ast-theme-transparent-header class (read from the real
   <body class> on debaar.vin, 2026-11-12). Every page opens on a
   charcoal section, so the header never sits on a light band at rest
   and needs no scrim (there is no photo hero).

   Fonts used below: Montserrat 500/600/700 + 600/700 italic, Inter
   400. All are in document.fonts on debaar.vin (measured 2026-11-12).
   No other weight is set anywhere in this file.
   ============================================================ */

/* ---------- 1. HEADER: scrolled state solid, no blur (hard limit: no blur/glass) ----------
   integration.css s5 gives #masthead.rv-scrolled a 70% background + backdrop-filter blur(16px).
   Replace with a solid charcoal bar: nav ink 72% on slot 4 = 8.90:1. */
#masthead.rv-scrolled {
  background: var(--ast-global-color-4) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-0) 55%, transparent);  /* thin orange line, the band in miniature */
}

/* ---------- 2. HEADER: logo size (horizontal wordmark, 10:1) ----------
   The previous max-height (56px) was for a stacked logo. Astra's logo width keys carry the
   size (astra-kit-palette.json -> astra.ast-header-responsive-logo-width = 280/240/210);
   this replaces the 56px cap with 40px: the 280px wordmark renders 29px tall, and a
   wrong file in the logo slot can never blow up the header height (measured: an
   uncapped stacked logo made #masthead 166px). */
#masthead .custom-logo-link img { max-height: 40px; height: auto; }
@media (max-width: 921px) { #masthead .custom-logo-link img { max-height: 32px; } }

/* ---------- 3. NAV: type floor 14px (was 12px), ink 72% (8.90:1) ----------
   Same selectors as integration.css s5 so these win by source order (both !important). */
#masthead .ast-nav-menu > .menu-item > a,
#masthead .main-header-menu .menu-link,
#masthead .ast-nav-menu .menu-link {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--ast-global-color-2) 72%, transparent) !important;
}
#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;
}
/* current page: orange underline, not colour alone (WCAG 1.4.1) */
#masthead .ast-nav-menu > .menu-item.current-menu-item > a {
  text-decoration: underline;
  text-decoration-color: var(--ast-global-color-0);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* ---------- 4. SUBMENUS (desktop): none today, but the menu may gain one (e.g. Export > ...) ----------
   Without this an Astra submenu is white with 72%-ink links = invisible. Surface slot 5 + full ink = 14.85:1. */
#masthead .main-header-menu .sub-menu {
  background: var(--ast-global-color-5) !important;
  border-top: 2px solid var(--ast-global-color-0);
  box-shadow: none;
}
#masthead .main-header-menu .sub-menu .menu-link {
  color: var(--ast-global-color-2) !important;
  letter-spacing: 0.06em;
  text-transform: none;
}
#masthead .main-header-menu .sub-menu .menu-link:hover,
#masthead .main-header-menu .sub-menu .current-menu-item > .menu-link {
  color: var(--ast-global-color-0) !important;   /* orange on surface 7.46:1 */
}

/* ---------- 5. MOBILE MENU: active item in orange (8.26:1 on slot 4) ----------
   integration.css s8 already sets every mobile link to ink on a 98% slot-4 drawer (16.45:1). */
@media (max-width: 921px) {
  #masthead .ast-mobile-header-wrap .ast-nav-menu .current-menu-item > .menu-link,
  .ast-mobile-popup-drawer .current-menu-item > .menu-link {
    color: var(--ast-global-color-0) !important;
  }
  #masthead .ast-mobile-header-wrap .menu-link { font-size: 16px; }
}

/* ---------- 6. TYPE FLOOR: labels, buttons and text links never below 14px ----------
   Elementor writes the 11.5px / 12px per widget at (0,4,0); "body .elementor" lifts
   these to (0,4,1)+ so they win without !important on every page. */
body .elementor .elementor-widget.rv-label .elementor-heading-title {
  font-size: 14px;
  letter-spacing: 0.2em;
}
body .elementor .elementor-widget.rv-cta .elementor-button {
  font-size: 14px;
  letter-spacing: 0.14em;
}
body .elementor .elementor-widget.rv-cta .elementor-button:hover { letter-spacing: 0.14em; }  /* no tracking animation */
.rv-cta .elementor-button:hover { letter-spacing: 0.14em; }                                   /* overrides integration s11 */
.rv-linkline a.rv-textlink { font-size: 14px; letter-spacing: 0.12em; }

/* ---------- 7. HEADINGS + PARAGRAPHS: balanced wrap, no one-word last lines ---------- */
.elementor-widget.rv-display .elementor-heading-title { text-wrap: balance; }
.elementor-widget.rv-lead p { text-wrap: pretty; }
/* body line-height 1.6 (design-system.css had 1.9; Inter 400 needs less air than Inter 300) */
.rv-lead { line-height: 1.6; }

/* ---------- 8. HERO (Home 61f5cd5): Dakar photo under a flat 0.82 charcoal overlay (r2) ----------
   Contrast comes from the overlay, not from shadows: measured against the brightest pixel behind the
   text (pure white sky) the overlay gives #403E3D, and ink = 9.52:1, lead ink 80% = 6.78:1, orange
   label = 4.78:1, nav ink 72% = 5.85:1. The previous text-shadows would only add a glow (a template tell). */
.rv-hero-static .elementor-heading-title,
.rv-hero-static .rv-lead,
.rv-hero-static .rv-lead p { text-shadow: none; }
.rv-hero-static .rv-lead,
.rv-hero-static .rv-lead p { color: color-mix(in srgb, var(--ast-global-color-2) 80%, transparent); }
/* the signature: the hero ends on the orange band (807ebb8). */

/* ---------- 9. ORANGE USP BAND (Home 807ebb8) ----------
   No CSS: the colours are Elementor widget settings (design-ops binds icon, title and description of
   3c80359 / 5db15c1 / d144988 / 81f4a96 to rvbg = charcoal on orange 8.26:1 and drops their
   rv-on-light class). Elementor's per-widget rule (0,4,0)+ outranks anything this file could say,
   so a CSS copy here would be dead code. Measured in the prototype: Elementor's value wins. */

/* ---------- 9b. MAP CONSENT PLACEHOLDER (HTML widgets e12f6de / 6df9ef2): 14px floor ----------
   Its own <style> sets 12px / 12.5px. Colours already follow the kit (var(--e-global-color-rvaccentdeep)). */
.ab-map button.ab-map__btn { font-size: 14px; letter-spacing: 0.14em; }
.ab-map button.ab-map__btn:hover,
.ab-map button.ab-map__btn:focus-visible { letter-spacing: 0.14em; }
.ab-map a.ab-map__link { font-size: 14px; letter-spacing: 0.12em; }

/* ---------- 10. RDW BADGE CARD (Home 33f2f60): badge left, line right ---------- */
.elementor-element-33f2f60 .elementor-widget.rv-af-img img { max-height: 120px; width: auto; }

/* ---------- 11. FOCUS STATES (keyboard) ----------
   Orange ring on dark (8.26:1), charcoal ring inside light bands/cards (15.59:1 / 12.31:1). */
.elementor a:focus-visible,
.elementor .elementor-button:focus-visible,
#masthead a:focus-visible,
.site-footer a:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
  outline: 2px solid var(--ast-global-color-0);
  outline-offset: 3px;
}
.rv-light a:focus-visible,
.rv-light .elementor-button:focus-visible,
.elementor-widget.rv-on-light a:focus-visible,
.rv-contact-card a:focus-visible,
.rv-contact-card button:focus-visible {
  outline-color: var(--ast-global-color-4);
}

/* ---------- 12. CONTACT FORM 7 on dark ----------
   Labels 14px at ink 70% (8.41:1). Input border ink 40% = 3.56:1 against slot 4 (WCAG 1.4.11;
   the previous 14% was 1.68:1). Input text Inter 400 (was 300). */
.wpcf7 .rv-field {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--ast-global-color-2) 70%, transparent);
}
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control {
  border-color: color-mix(in srgb, var(--ast-global-color-2) 40%, transparent);
  font-weight: 400;
  font-size: 16px;            /* 16px stops iOS zooming into the field */
}
.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus { border-color: var(--ast-global-color-0); }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: color-mix(in srgb, var(--ast-global-color-2) 55%, transparent); }  /* 5.42:1 on slot 5 */
/* submit = the primary button: orange fill, charcoal text 8.26:1; hover ink 16.45:1 */
.wpcf7-form input.wpcf7-submit {
  background: var(--ast-global-color-0);
  border-color: var(--ast-global-color-0);
  color: var(--ast-global-color-4);
  font-size: 14px;
  letter-spacing: 0.14em;
}
.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:focus-visible {
  background: var(--ast-global-color-2);
  border-color: var(--ast-global-color-2);
  letter-spacing: 0.14em;
}
/* messages: sent = orange rule, error = slot 6 (7.15:1 on slot 4) */
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ast-global-color-0) !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--ast-global-color-6) !important; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 14px; }
.wpcf7 .rv-form-note,
.wpcf7 .rv-field.rv-consent { font-size: 14px; }

/* ---------- 12b. CF7 FOCUS + INVALID STATES (P4 round 1 fix, Tommaso 2026-11-12) ----------
   Astra prints an inline rule `.wpcf7 input.wpcf7-form-control:not([type=submit]):focus` (specificity 0,4,1)
   that sets the typed text to --ast-form-input-focus-text (#475569, 2.19:1 on slot 5), a blue #046BD2
   border and outline:none - it beat s11/s12 above. Fixed at source two ways: Astra's own form variables
   point at the palette, and the rules below are one class more specific (0,5,1) than Astra's.
   Typed text = ink on surface 14.85:1; focus border = orange vs slot 4 8.26:1 (1px, as the resting border);
   keyboard focus also gets the s11 ring (2px orange, offset 3px); invalid = slot 6 #E08A8A 7.15:1. */
.wpcf7 {
  --ast-form-input-text: var(--ast-global-color-2);
  --ast-form-input-focus-text: var(--ast-global-color-2);
}
.wpcf7 .wpcf7-form input.wpcf7-form-control:not([type=submit]):focus,
.wpcf7 .wpcf7-form textarea.wpcf7-form-control:focus,
.wpcf7 .wpcf7-form select.wpcf7-form-control:focus {
  color: var(--ast-global-color-2);
  border-style: solid;
  border-width: 1px;
  border-color: var(--ast-global-color-0);
}
.wpcf7 .wpcf7-form input.wpcf7-form-control:not([type=submit]):focus-visible,
.wpcf7 .wpcf7-form textarea.wpcf7-form-control:focus-visible,
.wpcf7 .wpcf7-form select.wpcf7-form-control:focus-visible {
  outline: 2px solid var(--ast-global-color-0);
  outline-offset: 3px;
}
.wpcf7 .wpcf7-form input.wpcf7-form-control.wpcf7-not-valid:not([type=submit]),
.wpcf7 .wpcf7-form textarea.wpcf7-form-control.wpcf7-not-valid,
.wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-not-valid,
.wpcf7 .wpcf7-form input.wpcf7-form-control.wpcf7-not-valid:not([type=submit]):focus,
.wpcf7 .wpcf7-form textarea.wpcf7-form-control.wpcf7-not-valid:focus,
.wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-not-valid:focus {
  border-color: var(--ast-global-color-6);
}

/* ---------- 13. FOOTER: 14px floor, logo, orange top rule ---------- */
#colophon { border-top: 4px solid var(--ast-global-color-0); }
.ast-footer-copyright p,
.site-footer p,
.rv-footer-line { font-size: 14px; letter-spacing: 0.02em; }
.rv-footer-brand img { width: 160px; height: auto; }

/* ---------- 14. STOCK MODULE prices (integration s24 already uses slot 4) ----------
   Nothing to add while the provider is open (status item 10). If the client stays on the
   autodealers.nl iframe, its colours are set at autodealers.nl, not here: ask for orange #8F4300
   (white text 7.07:1) as the module accent. */

/* ---------- 15. P4 round 1 fixes (Valentina, critique-v1, 2026-11-12) ---------- */

/* 15a. Astra scroll-to-top (desktop only): white arrow on orange = 2.22:1, under the 3:1 non-text minimum
   (WCAG 1.4.11). Charcoal arrow on the same orange = 8.26:1; hover inverts to orange on charcoal 8.26:1. */
#ast-scroll-top { color: var(--ast-global-color-4) !important; background-color: var(--ast-global-color-0) !important; }
#ast-scroll-top svg, #ast-scroll-top .ast-icon svg { fill: currentColor !important; }
#ast-scroll-top:hover, #ast-scroll-top:focus-visible { color: var(--ast-global-color-0) !important; background-color: var(--ast-global-color-4) !important; box-shadow: 0 0 0 2px var(--ast-global-color-0); }

/* 15b. Footer on phones: the copyright lines ran edge to edge at 360-390 px and the mail address was
   clipped at the right. 16 px gutter, and long addresses may break. */
@media (max-width: 767px) {
  .site-footer .ast-footer-copyright { padding-left: 16px; padding-right: 16px; }
  /* the WhatsApp disc (50 px, bottom 16 px, the only float on phones) sits over the end of the footer lines when
     the page is scrolled to the end: 82 px of room below the last line lets it clear them */
  #colophon { padding-bottom: 82px; }
}
.rv-footer-line a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 15c. Home Welkom photo captions (c6c2a06 / 2f943e9): Giulia's sub-line is inline 11px uppercase at 0.3em,
   under the 14px floor. Colour stays (deep orange on the band 6.00:1). Inline style -> !important needed. */
.elementor-widget.rv-af-cap div[style*="font-size:11px"] {
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
}

/* 15d. Cookie re-open button (vinacles-cookies, fixed bottom-left): fill #8F4300 vs page charcoal = 2.60:1.
   Its glyph (7.07:1 on the fill) already identifies it, so 1.4.11 is met; this 2px orange ring makes the
   button's edge 8.26:1 on charcoal as well (on the light bands the fill itself is 6.00:1). */
/* P4 round 2 (Tommaso): the plugin's own sheet (vinacles-cookies assets/css/style.css) sets
   `.cookie-reopen-button { box-shadow: 0 10px 22px rgba(0,0,0,.22) !important }` (0,1,0), so a normal rule can
   never win: !important is required here, and the extra type selector (0,1,1) makes it beat the plugin's.
   The plugin's drop shadow is kept as the second shadow. */
button.cookie-reopen-button,
button.cookie-reopen-button:hover,
button.cookie-reopen-button:focus,
button.cookie-reopen-button:focus-visible {
  box-shadow: 0 0 0 2px var(--ast-global-color-0), 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}