/*
Theme Name: V Dream Day Child
Theme URI: https://v-dream-day.test
Template: hello-elementor
Author: DOOZY digital
Description: Child Theme fuer V Dream Day (Uferstueble Scheer + Catering/Food-Trailer). Bundelt lokale Webfonts, Brand-CSS und responsive Overrides.
Version: 1.0.19
License: GPL v2 or later
Text Domain: vdreamday-child
*/

/* === Base === */
:root {
    --vdd-cream-50:  #FBF7EE;
    --vdd-cream-100: #F4ECDC;
    --vdd-sand-200:  #E8DCC2;
    --vdd-sand-300:  #D7C29C;
    --vdd-forest-900:#1B2E22;
    --vdd-forest-700:#2F4F3A;
    --vdd-forest-500:#5A7A5F;
    --vdd-terracotta-500:#C25A3A;
    --vdd-terracotta-700:#9A4327;
    --vdd-ink-900:   #1F1A17;
    --vdd-brown-800: #3A2A1F;
    --vdd-mute-500:  #7A6E60;
    --vdd-line-200:  #E4D9C2;
    --vdd-line-700:  #2A3F30;
    --vdd-on-dark:   #F6EFDD;
}

body {
    font-family: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
    color: var(--vdd-brown-800);
    background: var(--vdd-cream-50);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* === Buttons === */
.elementor-button {
    font-family: 'Manrope', sans-serif;
    transition: background-color 220ms cubic-bezier(0.2,0.7,0.2,1), color 220ms, transform 100ms;
}
.elementor-button:active { transform: translateY(1px); }

/* === Eyebrow Helper Class === */
.vdd-eyebrow .elementor-heading-title,
.vdd-eyebrow {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}

/* === Italic Words in Headings (utility class) === */
.vdd-italic em,
.elementor-widget-heading h1 em,
.elementor-widget-heading h2 em,
.elementor-widget-heading h3 em {
    font-style: italic;
    font-weight: inherit;
}

/* === Hero Watermark Logo === */
.vdd-hero-watermark img { opacity: 0.32; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); }

/* === FAB Buttons (sticky CTA) === */
.vdd-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 12px;
}
.vdd-fab__btn {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--vdd-terracotta-500);
    color: var(--vdd-cream-50);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(40,30,20,0.25);
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}
.vdd-fab__btn:hover { transform: scale(1.06); background: var(--vdd-terracotta-700); }
.vdd-fab__btn--phone { background: var(--vdd-forest-700); }
.vdd-fab__btn--phone:hover { background: var(--vdd-forest-900); }
.vdd-fab__btn svg { width: 24px; height: 24px; }

/* === Responsive Overrides === */
@media (max-width: 1024px) {
    .e-con:not(.e-child) { --padding-top: 64px; --padding-bottom: 64px; }
}
@media (max-width: 767px) {
    .e-con:not(.e-child) {
        --padding-top: 48px;
        --padding-bottom: 48px;
        --padding-left: 16px;
        --padding-right: 16px;
    }
    .elementor-widget-heading h1 { font-size: clamp(32px, 8vw, 44px) !important; }
    .elementor-widget-heading h2 { font-size: clamp(26px, 6vw, 32px) !important; }
    .vdd-fab { bottom: 16px; right: 16px; }
}
@media (max-width: 480px) {
    .elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
}

/* === Pro Theme Builder Header/Footer === */
[data-elementor-type="header"] .elementor-nav-menu a::after,
[data-elementor-type="header"] .elementor-nav-menu a::before {
    display: none !important;
    content: none !important;
}

/* Header: sticky on scroll */
[data-elementor-type="header"] > .vdd-header,
[data-elementor-type="header"] > .e-con.vdd-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* === Color-Contrast Overrides fuer dunkle Sektionen === */
/* Elementor's body_color (brown-800) erbt auf icon-list/text/heading-Widgets in
   dunklen Containern und macht den Text unsichtbar. Container/Section mit
   .vdd-on-dark Klasse (set automatically by vdd_section for dark hex BGs)
   bekommen cream-Color. */

.vdd-on-dark,
.vdd-on-dark p,
.vdd-on-dark li,
.vdd-on-dark span,
.vdd-on-dark .elementor-icon-list-text,
.vdd-on-dark .elementor-icon-list-item,
.vdd-on-dark .elementor-icon-list-item span,
.vdd-on-dark .elementor-heading-title:not([style*="color"]) {
    color: rgba(246,239,221,0.92);
}
.vdd-on-dark .elementor-icon-list-icon i,
.vdd-on-dark .elementor-icon-list-icon svg {
    color: #D7C29C;
    fill: #D7C29C;
}
.vdd-on-dark a:not(.elementor-button) {
    color: #D7C29C;
}
.vdd-on-dark a:not(.elementor-button):hover {
    color: #FBF7EE;
}

/* Hero (background-image mit dunklem Overlay) — Spezialfall fuer info-strip */
.vdd-hero .elementor-icon-list-text,
.vdd-hero .elementor-icon-list-item {
    color: rgba(251,247,238,0.92);
}
.vdd-hero .elementor-icon-list-icon i,
.vdd-hero .elementor-icon-list-icon svg {
    color: #D7C29C;
    fill: #D7C29C;
}

/* === Header Tablet + Mobile Layout === */
/* Tablet & Mobile (≤ 1024px): 3-Spalten-Grid fuer exakte Mitte */
@media (max-width: 1024px) {
    /* Inner-Container (.e-con direct child of .vdd-header) → Grid 3 cols, vertikal zentriert */
    [data-elementor-type="header"] .vdd-header > .e-con {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-rows: 1fr !important;
        align-items: center !important;
        align-content: center !important;
        gap: 16px !important;
        min-height: 80px;
    }
    [data-elementor-type="header"] .vdd-header {
        min-height: 80px;
    }

    /* Widget-Platzierung: ALLE auf grid-row 1 zwingen, sonst placen sie auf row 2/3 */
    [data-elementor-type="header"] .vdd-header > .e-con > .elementor-widget-image    { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; }
    [data-elementor-type="header"] .vdd-header > .e-con > .elementor-widget-button   { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; }
    [data-elementor-type="header"] .vdd-header > .e-con > .elementor-widget-nav-menu { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }

    /* Nav-Menu Widget shrinkt auf Toggle-Breite — Dropdown wird position:absolute */
    [data-elementor-type="header"] .vdd-header > .e-con > .elementor-widget-nav-menu {
        width: 44px !important;
        flex: 0 0 auto !important;
        position: relative;
    }
    /* Dropdown raus aus Flow, wird unter dem Header positioniert */
    [data-elementor-type="header"] .elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-right: -16px;
    }

    /* Burger-Icon: Brand-Color (forest-700) + groesser + transparent BG */
    [data-elementor-type="header"] .elementor-menu-toggle {
        color: #2F4F3A !important;
        background: transparent !important;
        font-size: 30px !important;
        padding: 6px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        cursor: pointer;
    }
    [data-elementor-type="header"] .elementor-menu-toggle:hover {
        color: #C25A3A !important;
    }
    [data-elementor-type="header"] .elementor-menu-toggle__icon--open,
    [data-elementor-type="header"] .elementor-menu-toggle__icon--close {
        font-size: 30px !important;
    }

    /* Nav-Menu-Container selbst: ohne extra Padding/Margin */
    [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-widget-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Tablet (768-1024): Standard-Logo-Groesse, Header sticky */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Logo behaelt 68px */
    [data-elementor-type="header"] .elementor-widget-image img {
        max-width: 68px !important;
        height: auto !important;
    }
}

/* Mobile (<768): CTA-Button ausblenden, Grid auf 2 Spalten */
@media (max-width: 767px) {
    [data-elementor-type="header"] .elementor-widget-button {
        display: none !important;
    }
    /* Mobile: Logo links, Burger rechts (2 Spalten) */
    [data-elementor-type="header"] .vdd-header > .e-con {
        grid-template-columns: auto 1fr !important;
    }
    [data-elementor-type="header"] .vdd-header > .e-con > .elementor-widget-image    { grid-column: 1; justify-self: start; }
    [data-elementor-type="header"] .vdd-header > .e-con > .elementor-widget-nav-menu { grid-column: 2; justify-self: end; }

    [data-elementor-type="header"] .elementor-widget-image img {
        max-width: 52px !important;
        height: auto !important;
    }
    [data-elementor-type="header"] .vdd-header > .e-con {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 18px !important;
        padding-right: 12px !important;
    }
}

/* Burger-Dropdown-Menue Items (forest-900 BG, pure white + bold fuer Lesbarkeit) */
[data-elementor-type="header"] .elementor-nav-menu--dropdown,
[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu {
    background: #1B2E22 !important;
}
[data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item {
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(254, 196, 62, 0.18);
    min-height: 50px;
    display: flex !important;
    align-items: center !important;
}
[data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item:hover,
[data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    color: #FBF7EE !important;
    background: #2F4F3A !important; /* forest-700 hover-state */
}

/* === Burger Tap-Animation (Strich → X) === */
[data-elementor-type="header"] .elementor-menu-toggle .elementor-menu-toggle__icon--open,
[data-elementor-type="header"] .elementor-menu-toggle .elementor-menu-toggle__icon--close {
    transition: opacity 200ms ease, transform 200ms ease;
}
[data-elementor-type="header"] .elementor-menu-toggle:active {
    transform: scale(0.92);
}
[data-elementor-type="header"] .elementor-menu-toggle[aria-expanded="true"] {
    color: #C25A3A !important;
}

/* === Mobile Hero-Hoehe + Headline + Atem oben === */
@media (max-width: 767px) {
    /* Hero: 80vh fuer ausreichend Top-Atem zur Header-Bar */
    .vdd-hero,
    .elementor-page .e-con.e-parent.vdd-hero {
        min-height: 80vh !important;
        padding-top: 110px !important; /* Header (80px) + 30px Atem */
    }
    /* Hero Headline kompakter */
    .vdd-hero h1.elementor-heading-title {
        font-size: 36px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.01em !important;
    }
    /* Hero Lead kompakter */
    .vdd-hero .elementor-widget-text-editor p {
        font-size: 16px !important;
    }
}

/* === Tablet Hero Top-Padding === */
@media (min-width: 768px) and (max-width: 1024px) {
    .vdd-hero,
    .elementor-page .e-con.e-parent.vdd-hero {
        padding-top: 130px !important; /* Header (96px) + 34px Atem */
    }
}

/* === Trust-Strip auf Mobile zentrieren (Regional/Flexibel/Klein/Persoenlich) === */
@media (max-width: 767px) {
    /* Icon-Box widgets in der Trust-Section center-aligned */
    .vdd-trust .elementor-widget-icon-box {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .vdd-trust .elementor-widget-icon-box .elementor-icon-box-wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .vdd-trust .elementor-widget-icon-box .elementor-icon-box-icon {
        width: 100% !important;
        margin: 0 auto 10px !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .vdd-trust .elementor-widget-icon-box .elementor-icon-box-content {
        width: 100% !important;
        text-align: center !important;
    }
    .vdd-trust .elementor-widget-icon-box .elementor-icon-box-title,
    .vdd-trust .elementor-widget-icon-box .elementor-icon-box-description {
        text-align: center !important;
        width: 100% !important;
    }
    /* Fallback: alle icon-box widgets auf Mobile zentriert */
    .e-con.e-parent .elementor-widget-icon-box {
        width: 100% !important;
    }
    .e-con.e-parent .elementor-widget-icon-box .elementor-icon-box-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .e-con.e-parent .elementor-widget-icon-box .elementor-icon-box-icon {
        margin: 0 auto 10px !important;
    }
    .e-con.e-parent .elementor-widget-icon-box .elementor-icon-box-title,
    .e-con.e-parent .elementor-widget-icon-box .elementor-icon-box-description {
        text-align: center !important;
    }
}

/* === Tablet PageHeader: Lead-Text kompakter === */
@media (max-width: 1024px) {
    .vdd-pageheader p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

/* === Touch-Targets 44px Min === */
.elementor-button,
.elementor-button-link,
a.elementor-icon-list-item,
.elementor-icon-list-item > a {
    min-height: 44px;
}
.elementor-widget-button .elementor-button-content-wrapper {
    align-items: center;
}

/* === Sticky Mobile Bottom-CTA === */
.vdd-mobile-cta {
    display: none;
}
@media (max-width: 767px) {
    .vdd-mobile-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
        display: flex;
        background: #FBF7EE;
        border-top: 1px solid #E4D9C2;
        box-shadow: 0 -4px 16px rgba(40,30,20,0.08);
        padding: 8px;
        gap: 8px;
    }
    .vdd-mobile-cta__btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        min-height: 48px;
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        border-radius: 8px;
        transition: background 200ms;
    }
    .vdd-mobile-cta__btn--phone,
    .vdd-mobile-cta__btn--phone:link,
    .vdd-mobile-cta__btn--phone:visited {
        background: #2F4F3A !important;
        color: #FBF7EE !important;
    }
    .vdd-mobile-cta__btn--phone:active { background: #1B2E22 !important; }
    .vdd-mobile-cta__btn--catering,
    .vdd-mobile-cta__btn--catering:link,
    .vdd-mobile-cta__btn--catering:visited {
        background: #C25A3A !important;
        color: #FBF7EE !important;
    }
    .vdd-mobile-cta__btn--catering:active { background: #9A4327 !important; }
    .vdd-mobile-cta__btn i,
    .vdd-mobile-cta__btn svg {
        font-size: 16px;
        color: inherit !important;
        fill: currentColor;
    }
    /* Body padding bottom on mobile so sticky bar doesn't cover footer content */
    body {
        padding-bottom: 70px;
    }
}

/* === Footer Mobile Accordion === */
@media (max-width: 767px) {
    /* Footer 4-Spalten Headings als Accordion-Trigger */
    [data-elementor-type="footer"] .e-con .e-con > .elementor-widget-heading {
        cursor: pointer;
        position: relative;
        padding-right: 28px;
        margin-bottom: 0 !important;
    }
    [data-elementor-type="footer"] .e-con .e-con > .elementor-widget-heading:not(.vdd-acc-open)::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #D7C29C;
        font-family: 'Manrope', sans-serif;
        font-weight: 400;
    }
    [data-elementor-type="footer"] .e-con .e-con > .elementor-widget-heading.vdd-acc-open::after {
        content: '−';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        color: #C25A3A;
        font-family: 'Manrope', sans-serif;
    }
    [data-elementor-type="footer"] .e-con .e-con > .elementor-widget-heading + .elementor-widget {
        max-height: 0;
        overflow: hidden;
        transition: max-height 300ms ease;
        margin-top: 0 !important;
    }
    [data-elementor-type="footer"] .e-con .e-con > .elementor-widget-heading.vdd-acc-open + .elementor-widget {
        max-height: 400px;
        margin-top: 14px !important;
    }
    /* Logo+Tagline-Spalte: nicht accordion */
    [data-elementor-type="footer"] .e-con .e-con:first-child > .elementor-widget-heading,
    [data-elementor-type="footer"] .e-con .e-con:first-child > .elementor-widget {
        max-height: none !important;
        cursor: default !important;
    }
    [data-elementor-type="footer"] .e-con .e-con:first-child > .elementor-widget-heading::after {
        content: none !important;
    }
}

/* Body offset for fixed header on Hero-less pages handled via Hero margin */

/* Hero hugs the top (no theme-builder header offset for hero pages) */
.elementor-page .elementor-element:first-child > section[style*="height:100vh"] {
    margin-top: -73px; /* match header height */
}

/* Hide Theme-Title on Elementor pages */
.elementor-page .entry-header { display: none; }

/* === Icon-Box Wrapper full-width fuer korrektes text-align center === */
/* Bug: Elementor icon-box-wrapper shrinkt auf intrinsic content width
   (~246px) statt Container-Breite. Bei position=top mit text_align=center
   sieht der Text damit nicht zentriert aus, weil der Wrapper selbst
   left-aligned in der Card sitzt. Fix: width 100% erzwingen. */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-content {
    width: 100%;
}

/* === Card-Image Helper Class === */
/* Verwendet von Speisekarten/Catering/Events Cards — fixe Hoehe + object-fit:cover.
   WICHTIG: KEIN height:100% auf Widget/Container (sonst nimmt das Image
   die ganze Card-Hoehe in flex-column und ueberlagert den Content). */
.elementor-widget.vdd-card-image,
.elementor-widget.vdd-card-image .elementor-widget-container,
.elementor-widget.vdd-card-image .elementor-image {
    width: 100%;
    line-height: 0; /* eliminate img-inline-baseline gap */
}
.elementor-widget.vdd-card-image img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.elementor-widget.vdd-card-image--tall img {
    height: 260px !important;
}
.elementor-widget.vdd-card-image--xl img {
    height: 320px !important;
}
.elementor-widget.vdd-card-image--auto img {
    height: auto !important;
    max-height: 480px;
}

/* === Equal Height Card Body === */
/* Card content padding-bottom auto-grow when card needs to match siblings */
.e-con.e-child > .e-con-inner > .elementor-widget.vdd-card-image:first-child + .e-con {
    flex: 1;
}