/* ===============================
   VAN BGI – Theme Tokens (fallbacks)
   Theme files (theme_*.css) should override these.
   =============================== */
:root{
  --theme-bg: var(--theme-bg, #ffffff);
  --theme-surface: var(--theme-surface, #ffffff);
  --theme-text: var(--theme-text, #111111);
  --theme-muted: var(--theme-muted, #444444);

  --theme-primary: var(--theme-primary, #0b3d91);
  --theme-primary-hover: var(--theme-primary-hover, #7fb5ff);

  --theme-on-primary: var(--theme-on-primary, #ffffff);
  --theme-on-primary-hover: var(--theme-on-primary-hover, #000000);
}


/*
Theme Name: LaTulipe Child – Base Style
Description: Kleur-onafhankelijke basis styling (alle kleuren via CSS variables)
Author: Van BGI
*/

/* =====================================================
   THEME VARIABLES (worden geleverd door theme_light*.css)
   ===================================================== */

/*
Verwacht:
--theme-primary
--theme-primary-hover
--theme-primary-soft
--theme-light-bg
--theme-text
--theme-text-on-primary
--theme-card-bg
--theme-shadow
--theme-shadow-strong
--theme-border
--theme-focus-shadow
*/

/* =====================================================
   CONTACT FORM 7
   ===================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background-color: var(--theme-surface, #ffffff);
    font-size: 15px;
    color: var(--theme-text) !important;
    transition: all 0.25s ease;
}

.wpcf7 ::placeholder {
    color: var(--theme-muted, #444);
    opacity: 1;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: var(--theme-focus-shadow);
    outline: none;
}

.wpcf7 .wpcf7-submit {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-on-primary) !important;
    padding: 12px 25px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.wpcf7 .wpcf7-submit:hover {
    background-color: var(--theme-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow);
}

.wpcf7-form p {
    margin-bottom: 18px;
}


/* =====================================================
   ACCORDION MENU — FIX (LaTulipe)
   ===================================================== */

.menu-title-accordion{
  border-radius: 12px;
  padding: 20px;
  transition: 0.25s ease !important;

  /* Default state */
  background-color: var(--theme-surface, #ffffff);
  color: var(--theme-text, #111) !important;
}

/* Zorg dat links binnenin dezelfde kleur krijgen */
.menu-title-accordion a{
  color: var(--theme-text, #111) !important;
}

/* Hover */
.menu-title-accordion:hover{
  background: linear-gradient(
    135deg,
    var(--theme-primary),
    var(--theme-primary-soft)
  ) !important;

  color: var(--theme-text-on-primary, #fff) !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--theme-shadow-strong);
}

/* Hover ook toepassen op de <a> binnenin */
.menu-title-accordion:hover a{
  color: var(--theme-text-on-primary, #fff) !important;
}

/* Active/open (hier ging het mis: jij zet hem weer wit) */
.menu-title-accordion.active,
.menu-title-accordion.open,
.menu-title-accordion[aria-expanded="true"]{
  background: linear-gradient(
    135deg,
    var(--theme-primary),
    var(--theme-primary-soft)
  ) !important;

  color: var(--theme-text-on-primary, #fff) !important;
  box-shadow: var(--theme-shadow-strong);
}

/* Active/open ook voor link */
.menu-title-accordion.active a,
.menu-title-accordion.open a,
.menu-title-accordion[aria-expanded="true"] a{
  color: var(--theme-text-on-primary, #fff) !important;
}

/* =====================================================
   PRIMARY / HIGHLIGHT BLOCKS
   ===================================================== */

.vanbgi-text {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-on-primary) !important;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: var(--theme-shadow);
    transition: all 0.3s ease !important;
}

.vanbgi-text * {
    color: var(--theme-text-on-primary) !important;
}

.vanbgi-text:hover {
    background: linear-gradient(
        135deg,
        var(--theme-primary-soft),
        var(--theme-primary)
    ) !important;
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--theme-shadow-strong);
}

/* =====================================================
   CARDS / TESTIMONIALS
   ===================================================== */

.lumina-card,
.testimonial-holder {
    background-color: var(--theme-card-bg) !important;
    backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

.testimonial-desc,
.testimonial-desc *,
.testimonial-client,
.testimonial-client * {
    color: var(--theme-text) !important;
}

/* =====================================================
   MENU TABS (CATEGORIES)
   ===================================================== */

ul.menu-tabs > li > a {
    color: var(--theme-text) !important;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.25s ease;
}

ul.menu-tabs > li > a:hover,
ul.menu-tabs > li > a.active {
    color: var(--theme-primary) !important;
}

ul.menu-tabs > li > a * {
    color: inherit !important;
}

/* =====================================================
   HEADINGS & TITLES
   ===================================================== */

.elementor-heading-title,
.menu-title {
    color: var(--theme-text) !important;
    font-weight: 700 !important;
}

.vanbgi-text .elementor-heading-title,
.vanbgi-text .menu-title {
    color: var(--theme-text-on-primary) !important;
}

/* =====================================================
   MAIN NAVIGATION
   ===================================================== */

.main-header .menu-nav > .menu-item > a {
    color: var(--theme-text) !important;
    font-weight: 700;
    transition: color 0.25s ease;
}

.main-header .menu-nav > .menu-item > a:hover,
.main-header .menu-nav > .menu-item.current-menu-item > a {
    color: var(--theme-primary) !important;
}

.main-header .menu-nav > .menu-item > a * {
    color: inherit !important;
}

/* =====================================================
   BUTTONS (Elementor)
   ===================================================== */

.elementor-button {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.elementor-button-text {
    color: var(--theme-text-on-primary) !important;
    font-weight: 600;
}

.elementor-button:hover {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

/* =====================================================
   ELEMENTOR BUTTON – HOVER = SOFT COLOR + BLACK TEXT
   ===================================================== */

/* Normaal */
.elementor-button {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.elementor-button .elementor-button-text {
    color: var(--theme-text-on-primary) !important;
    transition: color 0.25s ease;
}

/* Hover */
.elementor-button:hover {
    background-color: var(--theme-primary-soft) !important;
    border-color: var(--theme-primary-soft) !important;
}

.elementor-button:hover .elementor-button-text {
    color: var(--theme-text) !important;
}

/* Pseudo-element veiligheid (Elementor gebruikt soms :after) */
.elementor-button:after,
.elementor-button:hover:after {
    background: transparent !important;
}

/* =====================================================
   NORMAL TEXT – FORCE READABLE BLACK
   (paragraphs / text-editor / page content)
   ===================================================== */

body,
p,
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.entry-content,
.entry-content p,
.site-content,
.site-content p {
  color: var(--theme-text) !important;
}

/* Soms zet LaTulipe hero/intro tekst extra licht */
.top-single-bkg,
.top-single-bkg *,
.page-title-holder,
.page-title-holder * {
  color: var(--theme-text) !important;
}

/* Uitzondering: primary blokken blijven wit (zoals eerder) */
.vanbgi-text,
.vanbgi-text * {
  color: var(--theme-text-on-primary) !important;
}

/* =====================================================
   LOGO TEXT – FORCE BLACK
   ===================================================== */

.logo-txt a,
.logo-txt a:visited {
    color: var(--theme-text) !important;
    font-weight: 700;
}

/* Hover mag subtiel primary kleur krijgen */
.logo-txt a:hover {
    color: var(--theme-primary) !important;
}

/* =========================
   Van BGI – Shared variables (fallbacks)
   ========================= */
:root{
  --vbg-accent: #2b6cff;
  --vbg-accent-contrast: #ffffff;
  --vbg-text: #111111;
}

/* =====================================================
   Van BGI – CONSISTENT Accent States (Accordion + Buttons)
   Uses:
   --theme-primary
   --theme-primary-hover
   --theme-text-on-primary
   --theme-text-on-primary-hover
   ===================================================== */

/* ---------- Accordion title ---------- */
.menu-title-accordion{
  /* default state */
  background: var(--theme-primary) !important;
  color: var(--theme-text-on-primary) !important;
  border-radius: 12px;
  padding: 20px;
  transition: 0.25s ease !important;
}

.menu-title-accordion a{
  color: var(--theme-text-on-primary) !important;
}

/* hover */
.menu-title-accordion:hover,
.menu-title-accordion:hover a{
  background: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

/* active/open */
.menu-title-accordion.active,
.menu-title-accordion.open,
.menu-title-accordion[aria-expanded="true"],
.menu-title-accordion.active a,
.menu-title-accordion.open a,
.menu-title-accordion[aria-expanded="true"] a{
  background: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

/* ---------- Buttons (Elementor + submit) ---------- */
/* default (zodat je ook zonder hover de juiste kleur hebt) */
.elementor .elementor-button,
button[type="submit"],
input[type="submit"]{
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-text-on-primary) !important;
}

.elementor .elementor-button .elementor-button-text{
  color: var(--theme-text-on-primary) !important;
}

/* hover */
.elementor .elementor-button:hover,
.elementor .elementor-button:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus{
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

.elementor .elementor-button:hover .elementor-button-text,
.elementor .elementor-button:focus .elementor-button-text{
  color: var(--theme-text-on-primary-hover) !important;
}

/* =====================================================
   FORCE OVERRIDE — Send Message button hover (LaTulipe)
   ===================================================== */

/* Elementor buttons: pak ook de wrapper context mee */
.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-button,
.elementor .elementor-button{
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-text-on-primary) !important;
}

.elementor-widget-button .elementor-button .elementor-button-text,
.elementor-widget-form .elementor-button .elementor-button-text,
.elementor .elementor-button .elementor-button-text{
  color: var(--theme-text-on-primary) !important;
}

/* Hover/focus */
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus,
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form .elementor-button:focus,
.elementor .elementor-button:hover,
.elementor .elementor-button:focus{
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

.elementor-widget-button .elementor-button:hover .elementor-button-text,
.elementor-widget-button .elementor-button:focus .elementor-button-text,
.elementor-widget-form .elementor-button:hover .elementor-button-text,
.elementor-widget-form .elementor-button:focus .elementor-button-text,
.elementor .elementor-button:hover .elementor-button-text,
.elementor .elementor-button:focus .elementor-button-text{
  color: var(--theme-text-on-primary-hover) !important;
}

/* Als LaTulipe een pseudo overlay gebruikt */
.elementor .elementor-button:before,
.elementor .elementor-button:after{
  background: transparent !important;
}

/* =====================================================
   FORCE OVERRIDE — Menu prices (LaTulipe)
   ===================================================== */

/* De prijs zelf (en alles binnenin) */
.menu-price,
.menu-price *,
.match_menu_item_price,
.match_menu_item_price *,
.mt-menu-price,
.mt-menu-price *{
  color: var(--theme-text) !important;
}

/* Als jij juist wilt dat prijs mee kleurt met accent (optioneel):
   vervang var(--theme-text) door var(--theme-primary) */

/* =====================================================
   FORCE OVERRIDE — Send Message button (LaTulipe/Elementor)
   Fixes: orange hover + orange dark mode
   ===================================================== */

/* 1) Pak Elementor buttons + algemene submit knoppen (CF7, WPForms, etc.) */
body .elementor .elementor-button,
body .elementor .elementor-button:visited,
body .elementor .elementor-button-link,
body .elementor-widget-button .elementor-button,
body .elementor-widget-form .elementor-button,
body button[type="submit"],
body input[type="submit"],
body .wpcf7-submit,
body .wpforms-submit,
body #commentform input#submit,
body .submit-button,
body .mt-button,
body .btn{
  /* Gebruik background (niet alleen background-color) */
  background: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;

  /* LaTulipe/Elementor zetten hover soms via background-image/gradient */
  background-image: none !important;

  border-color: var(--theme-primary) !important;
  color: var(--theme-text-on-primary) !important;
}

/* Tekst binnen Elementor buttons */
body .elementor .elementor-button .elementor-button-text,
body .elementor-widget-button .elementor-button .elementor-button-text,
body .elementor-widget-form .elementor-button .elementor-button-text{
  color: var(--theme-text-on-primary) !important;
}

/* 2) HOVER / FOCUS — super specifiek zodat we LaTulipe oranje hover winnen */
body .elementor .elementor-element .elementor-button:hover,
body .elementor .elementor-element .elementor-button:focus,
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus,
body .elementor-widget-form .elementor-button:hover,
body .elementor-widget-form .elementor-button:focus,
body button[type="submit"]:hover,
body button[type="submit"]:focus,
body input[type="submit"]:hover,
body input[type="submit"]:focus,
body .wpcf7-submit:hover,
body .wpcf7-submit:focus,
body .wpforms-submit:hover,
body .wpforms-submit:focus,
body .mt-button:hover,
body .mt-button:focus,
body .btn:hover,
body .btn:focus{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;

  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

/* Hover tekst */
body .elementor .elementor-element .elementor-button:hover .elementor-button-text,
body .elementor .elementor-element .elementor-button:focus .elementor-button-text,
body .elementor-widget-button .elementor-button:hover .elementor-button-text,
body .elementor-widget-form .elementor-button:hover .elementor-button-text{
  color: var(--theme-text-on-primary-hover) !important;
}

/* =====================================================
   FINAL OVERRIDE — Fix orange hover (pseudo-elements / wrapper)
   ===================================================== */

/* Elementor button wrapper(s) */
body .elementor .elementor-button,
body .elementor .elementor-button .elementor-button-content-wrapper,
body .elementor .elementor-button .elementor-button-text{
  transition: 0.25s ease !important;
}

/* HOVER: force everything that can carry color */
body .elementor .elementor-button:hover,
body .elementor .elementor-button:focus,
body .elementor .elementor-button:hover .elementor-button-content-wrapper,
body .elementor .elementor-button:focus .elementor-button-content-wrapper{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

/* Hover text */
body .elementor .elementor-button:hover .elementor-button-text,
body .elementor .elementor-button:focus .elementor-button-text{
  color: var(--theme-text-on-primary-hover) !important;
}

/* THIS is often the culprit: hover overlay on pseudo-elements */
body .elementor .elementor-button:before,
body .elementor .elementor-button:after{
  background: transparent !important;
  background-image: none !important;
}

/* And also on hover */
body .elementor .elementor-button:hover:before,
body .elementor .elementor-button:hover:after,
body .elementor .elementor-button:focus:before,
body .elementor .elementor-button:focus:after{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* =====================================================
   HARD OVERRIDE — Button hover (kills LaTulipe orange)
   ===================================================== */

/* Alle mogelijke button classnames die LaTulipe/Elementor/Forms gebruiken */
html body a.elementor-button:hover,
html body button.elementor-button:hover,
html body .elementor-button:hover,
html body .elementor a.button:hover,
html body a.button:hover,
html body button.button:hover,
html body input.button:hover,
html body .btn:hover,
html body .theme_button:hover,
html body .mt-button:hover,
html body .wpcf7-submit:hover,
html body .wpforms-submit:hover,
html body button[type="submit"]:hover,
html body input[type="submit"]:hover,
html body a.elementor-button:focus,
html body button.elementor-button:focus,
html body .elementor-button:focus,
html body .wpcf7-submit:focus,
html body button[type="submit"]:focus,
html body input[type="submit"]:focus{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;

  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

/* Tekst binnenin (Elementor) */
html body .elementor-button:hover .elementor-button-text,
html body .elementor-button:focus .elementor-button-text{
  color: var(--theme-text-on-primary-hover) !important;
}

/* Heel vaak is oranje een overlay op :before/:after */
html body a.elementor-button:hover:before,
html body a.elementor-button:hover:after,
html body .elementor-button:hover:before,
html body .elementor-button:hover:after,
html body a.button:hover:before,
html body a.button:hover:after,
html body .theme_button:hover:before,
html body .theme_button:hover:after{
  background: var(--theme-primary-hover) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* ===============================
   THEME TOKENS (shared)
   =============================== */
:root{
  /* fallback tokens (mocht theme file niet laden) */
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-text: #111111;

  --theme-primary: #0b3d91;
  --theme-primary-hover: #7fb5ff;

  --theme-on-primary: #ffffff;
  --theme-on-primary-hover: #000000;
}

/* Basiskleuren pagina */
body{
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* ===============================
   BUTTONS — consistent + kills orange hover
   =============================== */

/* Default button */
html body .elementor .elementor-button,
html body button[type="submit"],
html body input[type="submit"],
html body .wpcf7-submit{
  background: var(--theme-primary) !important;
  background-image: none !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;

  /* Elementor hover variables (cruciaal) */
  --e-btn-bg-color: var(--theme-primary) !important;
  --e-btn-border-color: var(--theme-primary) !important;
  --e-btn-color: var(--theme-on-primary) !important;

  --e-btn-hover-bg-color: var(--theme-primary-hover) !important;
  --e-btn-hover-border-color: var(--theme-primary-hover) !important;
  --e-btn-hover-color: var(--theme-on-primary-hover) !important;

  /* Elementor globals (soms gebruikt door templates) */
  --e-global-color-primary: var(--theme-primary) !important;
  --e-global-color-accent: var(--theme-primary-hover) !important;
  --e-global-color-text: var(--theme-text) !important;
}

/* Elementor button text */
html body .elementor .elementor-button .elementor-button-text{
  color: var(--theme-on-primary) !important;
}

/* Hover (force) */
html body .elementor .elementor-button:hover,
html body .elementor .elementor-button:focus,
html body button[type="submit"]:hover,
html body button[type="submit"]:focus,
html body input[type="submit"]:hover,
html body input[type="submit"]:focus,
html body .wpcf7-submit:hover,
html body .wpcf7-submit:focus{
  background: var(--theme-primary-hover) !important;
  background-image: none !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary-hover) !important;
}

/* Hover text */
html body .elementor .elementor-button:hover .elementor-button-text,
html body .elementor .elementor-button:focus .elementor-button-text{
  color: var(--theme-on-primary-hover) !important;
}

/* Kill hover overlays */
html body .elementor .elementor-button:before,
html body .elementor .elementor-button:after,
html body .elementor .elementor-button:hover:before,
html body .elementor .elementor-button:hover:after{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}


/* ===============================
   ACCORDION MENU (confirmed selector)
   =============================== */

.menu-title-accordion{
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

.menu-title-accordion a{
  color: var(--theme-on-primary) !important;
}

.menu-title-accordion:hover,
.menu-title-accordion:hover a,
.menu-title-accordion.active,
.menu-title-accordion.open,
.menu-title-accordion[aria-expanded="true"],
.menu-title-accordion.active a,
.menu-title-accordion.open a,
.menu-title-accordion[aria-expanded="true"] a{
  background: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary-hover) !important;
}

/* =====================================================
   FIX A — Elementor Form "Send Message" hover (orange)
   ===================================================== */

/* Koppel Elementor Form submit variabelen aan jouw theme */
html body .elementor-form{
  --e-form-submit-button-background-color: var(--theme-primary) !important;
  --e-form-submit-button-border-color: var(--theme-primary) !important;
  --e-form-submit-button-text-color: var(--theme-on-primary) !important;

  --e-form-submit-button-hover-background-color: var(--theme-primary-hover) !important;
  --e-form-submit-button-hover-border-color: var(--theme-primary-hover) !important;
  --e-form-submit-button-hover-text-color: var(--theme-on-primary-hover) !important;
}

/* Forceer ook met selectors (voor themes die variabelen negeren) */
html body .elementor-form .elementor-button[type="submit"],
html body .elementor-form button[type="submit"],
html body .elementor-form input[type="submit"]{
  background: var(--theme-primary) !important;
  background-image: none !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

html body .elementor-form .elementor-button[type="submit"]:hover,
html body .elementor-form .elementor-button[type="submit"]:focus,
html body .elementor-form button[type="submit"]:hover,
html body .elementor-form button[type="submit"]:focus,
html body .elementor-form input[type="submit"]:hover,
html body .elementor-form input[type="submit"]:focus{
  background: var(--theme-primary-hover) !important;
  background-image: none !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary-hover) !important;
}

/* Kill hover overlay (soms is oranje een :before / :after laag) */
html body .elementor-form .elementor-button[type="submit"]:hover:before,
html body .elementor-form .elementor-button[type="submit"]:hover:after{
  background: transparent !important;
  opacity: 0 !important;
}

/* =====================================================
   CF7 "Send Message" button — kill LaTulipe orange hover
   Markup: <p class="contact-btn"><button class="wpcf7-submit submit"><span>...</span></button>
   ===================================================== */

/* Default */
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit{
  background: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;
  background-image: none !important;

  border: 1px solid var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;

  color: var(--theme-on-primary) !important;
}

/* Text inside */
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit span{
  color: var(--theme-on-primary) !important;
}

/* Hover / Focus */
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:hover,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:focus,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:active{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;

  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary-hover) !important;
}

/* Hover text */
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:hover span,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:focus span,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:active span{
  color: var(--theme-on-primary-hover) !important;
}

/* If theme paints orange via pseudo-elements */
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:before,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:after,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:hover:before,
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:hover:after{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* CF7 "Send Message" button — kill LaTulipe orange hover */
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit{ ... }
html body p.contact-btn .wpcf7-form-control.wpcf7-submit.submit:hover{ ... }
/* etc. */

/* ---------------------------------
   EXTRA SAFETY NET (laatste regel)
   --------------------------------- */
html body p.contact-btn button:hover{
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary-hover) !important;
}

/* =====================================================
   BODY / BACKGROUND
   ===================================================== */
html, body,
#page,
.site,
.site-content,
.elementor-section-wrap {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text);
}

/* =====================================================
   Buttons — rounded corners (including hover overlays)
   ===================================================== */
:root{
  --theme-radius-btn: 12px;
}

/* Base */
html body .elementor-button,
html body button,
html body input[type="submit"],
html body .wpcf7-submit,
html body .wpcf7-form-control.wpcf7-submit,
html body p.contact-btn .wpcf7-submit{
  border-radius: var(--theme-radius-btn) !important;
  overflow: hidden; /* belangrijk: knipt hover/overlay binnen radius */
}

/* Hover / Focus / Active */
html body .elementor-button:hover,
html body .elementor-button:focus,
html body .elementor-button:active,
html body button:hover,
html body button:focus,
html body button:active,
html body input[type="submit"]:hover,
html body input[type="submit"]:focus,
html body input[type="submit"]:active,
html body .wpcf7-submit:hover,
html body .wpcf7-submit:focus,
html body .wpcf7-submit:active,
html body .wpcf7-form-control.wpcf7-submit:hover,
html body .wpcf7-form-control.wpcf7-submit:focus,
html body .wpcf7-form-control.wpcf7-submit:active{
  border-radius: var(--theme-radius-btn) !important;
}

/* Als theme een hover overlay via pseudo-elements gebruikt */
html body .elementor-button:before,
html body .elementor-button:after,
html body button:before,
html body button:after,
html body .wpcf7-submit:before,
html body .wpcf7-submit:after{
  border-radius: var(--theme-radius-btn) !important;
}

/* =====================================================
   Light mode — submenu visible (background + default text)
   ===================================================== */

/* Dropdown achtergrond */
html body .main-header .menu-nav .sub-menu{
  background: var(--theme-surface, #ffffff) !important;
}

/* Submenu items: altijd leesbaar */
html body .main-header .menu-nav .sub-menu a{
  color: var(--theme-text, #111111) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover blijft jouw gewenste kleur */
html body .main-header .menu-nav .sub-menu a:hover,
html body .main-header .menu-nav .sub-menu li.current-menu-item > a,
html body .main-header .menu-nav .sub-menu li.current_page_item > a{
  color: var(--theme-primary) !important;
}

/* =====================================================
   FIX: vanbgi-text hover must stay DARK (Light)
   ===================================================== */

.elementor-widget.vanbgi-text {
  background: var(--theme-bg) !important;
  background-color: var(--theme-bg) !important;
}

.elementor-widget.vanbgi-text:hover {
  background: var( --theme-primary-hover) !important;
  background-color: var( --theme-primary-hover) !important;
}

/* Tekst altijd correct op dit blok */
.elementor-widget.vanbgi-text,
.elementor-widget.vanbgi-text *  {
  color: var(--theme-text) !important; /* wit */
}

.elementor-widget.vanbgi-text:hover,
.elementor-widget.vanbgi-text:hover * {
  color: var(--theme-on-primary) !important; /* wit */
}

/* Kill eventuele overlays van theme/Elementor */
.elementor-widget.vanbgi-text:before,
.elementor-widget.vanbgi-text:after {
  background: transparent !important;
}

/* =====================================================
   LUMINA LOGO STYLE
   ===================================================== */

/* Hele heading in Great Vibes */
.elementor-heading-title{
  font-family: 'Great Vibes', cursive !important;
  text-transform: none !important;
}

/* Lumina */
.lumina-brand{
  color: var(--theme-primary) !important; /* donkergeel */
  font-size: 1.6em;
}

/* Beauty & Nails */
.lumina-sub{
  color: #444444 !important; /* donkergrijs */
  font-size: 1em;
}

/* Rest van heading blijft normaal */
.elementor-heading-title{
  font-family: inherit;
}

/* =====================================================
   MOBILE SAFETY – disable hover/lift on touch devices
   ===================================================== */
@media (max-width: 768px){
  /* Geen hover-schaal op mobiel (voorkomt springen) */
  .menu-title-accordion:hover,
  .elementor-widget-heading:hover,
  .elementor-button:hover,
  .elementor-widget.vanbgi-text:hover{
    transform: none !important;
  }

  /* Shadow wat rustiger (optioneel) */
  .menu-title-accordion,
  .elementor-widget-heading,
  .elementor-widget.vanbgi-text{
    box-shadow: none !important;
  }

  /* Padding iets compacter (optioneel) */
  .menu-title-accordion,
  .elementor-widget-heading,
  .elementor-widget.vanbgi-text{
    padding: 14px !important;
  }
}