/*
Theme Name: LaTulipe Child
Theme URI: https://matchthemes.com/premium/latulipe-elegant-restaurant-theme/
Description: Child theme for the LaTulipe theme 
Author: MatchThemes
Author URI:
Version: 1.0
Template: latulipe
*/

/* -------------------------------------------------
De structuur::
A) Style.css → voor alle vaste styling
Dit is 90% van jouw design en blijft netjes georganiseerd.
B) Additional CSS → voor 1 ding dat Elementor anders overschrijft

(Alleen wat écht niet anders kan.)
✔ Contact Form 7 (luxe velden + gele button)
✔ Testimonials (wit + zwart, geen yellow bleed)
✔ Accordion menu (premium hover + luxe open state)
✔ De 3 gele blokken (premium hover, schaduw, ronde hoeken)
✔ Alles in LaTulipe Child → style.css en één mini-stukje in Additional CSS waar het écht nodig is

PLAATS DIT IN: LaTulipe Child → style.css (helemaal onderaan)

Pink: #CF9889 ; lichtpaars = #FAEDE5
Yellow: #CF9889 ; lichtgeel = #FAEDE5
   ------------------------------------------------- */

/* ======================================================
   LUMILA PURPLE EDITION – COMPLETE PREMIUM STYLE PACK
   HOOFDKLEUR: #CF9889  (Pink)
   ====================================================== */


/* ------------------------------------------------------
   CONTACT FORM 7 – Luxe gele invoervelden & button
   ------------------------------------------------------ */

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

.wpcf7 ::placeholder {
    color: #444444 !important;
    opacity: 1;
}

/* Focus Glow Purple */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: #CF9889 !important;
    box-shadow: 0 0 10px rgba(167,108,255,0.25);
    outline: none;
}

/* Purple Button */
.wpcf7 .wpcf7-submit {
    background-color: #CF9889 !important;
    color: #ffffff !important;
    padding: 12px 25px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.wpcf7 .wpcf7-submit:hover {
    background-color: #B37E6E !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

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

/* ------------------------------------------------------
   TESTIMONIALS – Witte achtergrond + zwarte tekst
   ------------------------------------------------------ */

.testimonial-holder {
    background-color: var(--lumina-site-bg) !important;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.testimonial-desc,
.testimonial-desc *,
.testimonial-client,
.testimonial-client * {
    color: #6F5248 !important;
}



/* ------------------------------------------------------
   ACCORDION MENU – Purple Luxe Styling
   ------------------------------------------------------ */

.menu-title-accordion {
    transition: 0.25s ease !important;
    border-radius: 12px;
    background-color: #ffffff;
    color: #6F5248;
    padding: 20px;
}

/* Hover – purple gradient + lift */
.menu-title-accordion:hover {
    background: linear-gradient(135deg, #CF9889, #E2AC9D) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}

.menu-title-accordion.active,
.menu-title-accordion.is-active,
.menu-title-accordion.open {
    background-color: #ffffff !important;
    color: #6F5248 !important;
    transform: none;
    box-shadow: none !important;
}

.menu-accordion-content .menu-desc,
.menu-accordion-content .menu-desc *,
.menu-accordion-content .menu-price,
.menu-accordion-content .menu-price * {
    color: #6F5248 !important;
}



/* ------------------------------------------------------
   Gele BLOKKEN
   ------------------------------------------------------ */

.lumila-yellow-text {
    background-color: #CF9889 !important;
    color: #ffffff !important;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    transition: all 0.30s ease !important;
}

.lumila-yellow-text * {
    color: #ffffff !important;
}

.lumila-yellow-text:hover {
    background: linear-gradient(135deg, #E2AC9D, #CF9889) !important;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}


/* =====================================================
   FOOD MENU ACCORDION — OM EN OM ACHTERGRONDKLEUREN
   Voor: <ul class="food-menu food-menu-accordion menu-1col">
   ===================================================== */

/* ONEVEN regels (1,3,5...) zacht lichtgeel */
.food-menu-accordion.menu-1col > li:nth-child(odd),
.food-menu-accordion.menu-1col > li:nth-child(odd) * {
    background-color: #FAEDE5 !important;
}

/* EVEN regels (2,4,6...) wit */
.food-menu-accordion.menu-1col > li:nth-child(even),
.food-menu-accordion.menu-1col > li:nth-child(even) * {
    background-color: #FFFFFF !important;
}

/* Titel zelf transparant zodat hover werkt */
.food-menu-accordion.menu-1col > li .menu-title-accordion,
.food-menu-accordion.menu-1col > li .menu-title-accordion * {
    background-color: transparent !important;
}

/* =====================================
   Lumina – Instelbare website achtergrond
   ===================================== */
:root{
  --lumina-site-bg: #FAEDE5;   /* lichtgeel */
  /* --lumina-site-bg: #FAEDE5; */ /* lichtpaars (activeer deze voor paars) */
}

/* Body + page wrapper background */
html, body,
#page,
.site,
.site-content,
.elementor-section-wrap {
  background-color: var(--lumina-site-bg) !important;
}

/* =====================================
   Lumina – Accordion meeverven met site
   ===================================== */

/* Hele accordion items */
.short-food-menu-accordion ul.food-menu.food-menu-accordion.menu-1col > li,
.short-food-menu-accordion ul.food-menu.food-menu-accordion.menu-1col > li * {
    background-color: var(--lumina-site-bg) !important;
}

/* Titel transparant houden (hover blijft werken) */
.short-food-menu-accordion .menu-title-accordion,
.short-food-menu-accordion .menu-title-accordion * {
    background-color: transparent !important;
}

/* =====================================================
   Lumina – Subtiele Cards (Accordion + Testimonials)
   ===================================================== */

/* Algemene card-stijl */
.lumina-card,
.short-food-menu-accordion ul.food-menu.food-menu-accordion.menu-1col > li,
.testimonial-holder {
    background-color: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Extra spacing zodat cards loskomen van achtergrond */
.short-food-menu-accordion ul.food-menu.food-menu-accordion.menu-1col > li {
    margin-bottom: 14px;
    padding: 18px 20px;
}

/* Accordion titel transparant houden (hover blijft werken) */
.short-food-menu-accordion .menu-title-accordion,
.short-food-menu-accordion .menu-title-accordion * {
    background-color: transparent !important;
}

/* Testimonial spacing */
.testimonial-holder {
    padding: 28px 32px;
    margin-bottom: 20px;
}

/* Tekst altijd goed leesbaar */
.menu-desc,
.menu-desc *,
.menu-price,
.menu-price *,
.testimonial-desc,
.testimonial-desc *,
.testimonial-client,
.testimonial-client * {
    color: #6F5248 !important;
}

/* =====================================
   Lumina – Forceer normale tekst (geen ALL CAPS)
   ===================================== */

/* Algemeen: paragrafen & content */
p,
span,
li,
.menu-desc,
.testimonial-desc,
.testimonial-client {
    text-transform: none !important;
}

/* Elementor specifieke tekstwidgets */
.elementor-widget-text-editor,
.elementor-widget-text-editor * {
    text-transform: none !important;
}

/* Accordion teksten */
.menu-title-accordion,
.menu-desc,
.menu-desc * {
    text-transform: none !important;
}

/* Testimonials */
.testimonial-holder,
.testimonial-holder * {
    text-transform: none !important;
}

/* Formulieren */
.wpcf7,
.wpcf7 * {
    text-transform: none !important;
}

/* =====================================
   Lumina – Accordion content: geen hoofdletters
   (alleen uitgeklapte tekst)
   ===================================== */

/* Beschrijving, prijs en overige content in accordion */
.short-food-menu-accordion .menu-accordion-content,
.short-food-menu-accordion .menu-accordion-content *,
.short-food-menu-accordion .menu-desc,
.short-food-menu-accordion .menu-desc *,
.short-food-menu-accordion .menu-price,
.short-food-menu-accordion .menu-price * {
    text-transform: none !important;
}


/* ======================================
   Vivian Beauty - Header menu
   ====================================== */

/* Normale link */
.nav-menu li a{
    color: var(--theme-text) !important;
    transition: all .25s ease;
}

/* Hover */
.nav-menu li a:hover{
    color: var(--theme-primary) !important;
}

/* Actieve pagina */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a,
.nav-menu > li.current-menu-ancestor > a{
    color: var(--theme-primary) !important;
}

/* Goudkleurig lijntje onder menu */
.nav-menu > li > a:after{
    background: var(--theme-primary) !important;
}

/* ===========================================
   Vivian Beauty - Menu Hover
   =========================================== */

.menu-nav > li > a{
    color: var(--theme-text) !important;
    transition: color .25s ease, border-color .25s ease;
}

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

/* ==========================================
   Vivian Beauty - Header Logo
   ========================================== */

.logo img.img-fluid {
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
}

/* ==========================================
   Vivian Beauty - Header Logo
   ========================================== */

.logo.logo-1 {
    width: 220px !important;
}

.logo.logo-1 a {
    display: block !important;
}

.logo.logo-1 img.img-fluid {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}