/**
 * Uncode Theme Overrides
 * 
 * Überschreibt globale Uncode Parent Theme Styles
 * 
 * WICHTIG: 
 * - Diese Datei wird mit höchster Priorität geladen (NACH Uncode)
 * - Nutzt globale CSS-Variablen (--mm-*)
 * - Alle Overrides sollten hier dokumentiert werden
 * 
 * @package Belle_Maison
 * @version 1.0.0
 */

/* ==========================================================================
   Global Overrides
   ========================================================================== */

/* Body Background Pattern */
body {
    background-image: url('../img/patterns/bg-image.png');
    background-repeat: repeat;
    background-attachment: fixed;
    overflow-x: hidden; /* Prevent horizontal scroll from decorative elements */
}

/* White Header Background Strip with Dotted Border */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background-color: rgba(var(--mm-color-white), 1);
    background-image: radial-gradient(
        circle,
        rgba(var(--mm-color-divider), 1) 4px,
        transparent 4px
    );
    background-position: 0 100%;
    background-size: 30px 9px;
    background-repeat: repeat-x;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   Typography Overrides
   ========================================================================== */

/* Headings: Petit Formal Script (matches logo typography) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-text > h1,
.heading-text > h2,
.heading-text > h3,
.heading-text > h4,
.heading-text > h5,
.heading-text > h6,
.heading-text > div:first-child h1,
.heading-text > div:first-child h2,
.heading-text > div:first-child h3,
.heading-text > div:first-child h4,
.heading-text > div:first-child h5,
.heading-text > div:first-child h6,
.belle-maison-heading--with-heart h1,
.belle-maison-heading--with-heart h2,
.belle-maison-heading--with-heart h3,
.belle-maison-heading--with-heart h4,
.belle-maison-heading--with-heart h5,
.belle-maison-heading--with-heart h6,
.belle-maison-heading--with-heart .h1,
.belle-maison-heading--with-heart .h2,
.belle-maison-heading--with-heart .h3,
.belle-maison-heading--with-heart .h4,
.belle-maison-heading--with-heart .h5,
.belle-maison-heading--with-heart .h6 {
    font-family: var(--mm-font-script) !important;
}

/* ==========================================================================
   Component Overrides
   ========================================================================== */

/* MediaElement.js Play Button - Black with White Icon (Tablet & Mobile only) */

.mejs-overlay-button {
    background-color: #000000bd !important;
    border-color: rgba(var(--mm-color-white), 1) !important;
    color: rgba(var(--mm-color-white), 1) !important;
}

/* Dotted HR Separator - Custom Dot Style */
.divider-wrapper .dotted {
    border: none !important;
    height: 5px !important;
    background-image: radial-gradient(
        circle,
        rgba(var(--mm-color-divider), 1) 2.5px,
        transparent 2.5px
    ) !important;
    background-size: 20px 5px !important;
    background-repeat: repeat-x !important;
    background-position: 0 center !important;
}


/* Heading with Heart Decoration */
.belle-maison-heading--with-heart {
    position: relative;
    display: inline-block;
    z-index: 0;
    overflow: visible !important;
}

.belle-maison-heading--with-heart::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-image: url('../img/patterns/headline-heart.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}

.belle-maison-heading--with-heart * {
    position: relative;
    z-index: 1;
}
.belle-maison-heading--with-heart .text-lead {
    margin-top: 0px !important;
}
.belle-maison-heading--with-heart .text-lead p {
    margin-top: 0px !important;
    font-size: clamp(1.369rem, 1.282rem + 0.45vw, 1.681rem);
    font-family: var(--mm-font-script) !important;
}

/* Responsive adjustments – heart decoration */
@media (max-width: 959px) {
    .belle-maison-heading--with-heart::before {
        left: calc(var(--mm-spacing-base) * -2.8125); /* -45px */
        width: calc(var(--mm-spacing-base) * 5.625);  /* 90px – 2× previous mobile size */
        height: calc(var(--mm-spacing-base) * 5.625);
    }
}

/* ==========================================================================
   Mobile Header – colorful variant (tablet & mobile)
   ========================================================================== */

@media (max-width: 959px) {
    /* Pink header background instead of plain white */
    .main-header .style-light-bg,
    .menu-wrapper .style-light-bg {
        background-color: rgba(var(--mm-bg-mobile-header), 1) !important;
    }

    /* Hide desktop white header strip – lets body pattern show in keyvisual gap */
    body::before {
        display: none;
    }

    /* Logo on white badge for contrast */
    #main-logo .navbar-brand img {
        background-color: rgba(var(--mm-color-white), 1);
        padding: calc(var(--mm-spacing-base) * 0.3125); /* 5px */
    }

    /* Compact header padding */
    .col-lg-0 {
        padding: calc(var(--mm-spacing-base) * 1.0625) calc(var(--mm-spacing-base) * 2.25) !important; /* 17px 36px */
    }

    /* Burger icon: larger + white on pink background */
    .mobile-menu-button-light .lines:not(.lines-dropdown),
    .mobile-menu-button-light .lines:not(.lines-dropdown)::before,
    .mobile-menu-button-light .lines:not(.lines-dropdown)::after,
    .mobile-menu-button-light .lines:not(.lines-dropdown) > span {
        background-color: rgba(var(--mm-color-white), 1) !important;
    }

    .lines-button .lines,
    .lines-button .lines::before,
    .lines-button .lines::after,
    .lines-button .lines > span {
        width: calc(var(--mm-spacing-base) * 1.875);  /* 30px */
        height: calc(var(--mm-spacing-base) * 0.1875); /* 3px */
    }

    .lines-button .lines::before,
    .lines-button .lines::after,
    .lines-button .lines > span {
        transform-origin: calc(var(--mm-spacing-base) * 0.9375) center; /* 15px – half of 30px */
    }
}

/* ==========================================================================
   Keyvisual – spacing to nav (tablet & mobile)
   Row uses no-top-padding in VC; restore 36px gap + stop frame bleed
   ========================================================================== */

@media (max-width: 1039px) {
    .main-container .row-container.keyvisual-wrapper > .row,
    .main-container .row-container:has(.belle-maison-keyvisual) > .row {
        padding-top: calc(var(--mm-spacing-base) * 2.25) !important; /* 36px */
    }

    .main-container .row-container.keyvisual-wrapper > .row,
    .main-container .row-container:has(.belle-maison-keyvisual) > .row,
    .main-container .row-container.keyvisual-wrapper .single-bottom-padding,
    .main-container .row-container:has(.belle-maison-keyvisual) .single-bottom-padding {
        padding-bottom: 0 !important;
    }

    .belle-maison-keyvisual__frame-svg {
        top: 0; /* was -10px – frame must not overlap nav gap */
    }
}

/* ==========================================================================
   Page Body Decorations (Background Hearts)
   ========================================================================== */

.page-body {
    position: relative;
}

/* Linkes Herz - höher positioniert */
.page-body::before {
    content: '';
    position: absolute;
    left: -384px;
    top: 15%;
    width: 320px;
    height: 320px;
    background-image: url('../img/patterns/bg-heart-left.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

/* Rechtes Herz - tiefer positioniert */
.page-body::after {
    content: '';
    position: absolute;
    right: -384px;
    top: 40%;
    width: 320px;
    height: 320px;
    background-image: url('../img/patterns/bg-heart-right.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   WPML Language Switcher
   ========================================================================== */

/* WPML Language Switcher - Larger Flags */
.wpml-ls-flag {
    width: 28px !important;
    height: auto !important;
}

#menu-language-select .wpml-ls-flag {
    width: 28px !important;
    height: auto !important;
}

/* Desktop Menu Layout: Centered main nav + right-aligned WPML */
@media (min-width: 1040px) {
    /* Reduced WPML spacing */
    .hmenu-center :not(.menu-mini).menu-smart > li.wpml-ls-menu-item > a {
        padding: 0px 5px 0px 5px !important;
    }
    
    /* Grid layout for perfect centering */
    .menu-horizontal-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    
    /* Main nav in center column */
    .navbar-nav-first {
        grid-column: 2;
        justify-self: center;
    }
    
    /* WPML in right column */
    .navbar-nav-last {
        grid-column: 3;
        justify-self: end;
    }
}

/* Tablet & Mobile: Reset grid layout */
@media (max-width: 1039px) {
    /* Reset grid on smaller screens */
    .menu-horizontal-inner {
        display: block !important;
    }
    
    .navbar-nav-first,
    .navbar-nav-last {
        grid-column: auto;
        justify-self: auto;
    }
    
    /* WPML flags: horizontal alignment on tablet/mobile */
    #menu-language-select {
        display: flex;
        gap: 8px;
    }
}

/* ==========================================================================
   Responsive Overrides
   ========================================================================== */

/* Tablet & Mobile (< 960px) */
@media (max-width: 959px) {
    .page-body::before {
        left: -240px;
        width: 200px;
        height: 200px;
    }
    
    .page-body::after {
        right: -240px;
        width: 200px;
        height: 200px;
    }
}

/* Mobile (< 570px) */
@media (max-width: 569px) {
    .page-body::before,
    .page-body::after {
        display: none;
    }
}

/* ==========================================================================
   Ninja Forms Overrides
   ========================================================================== */
.nf-form-fields-required{
    display: none !important;
}

nf-field-label .nf-label-span, .nf-field-label label {
    font-weight: 400;
    font-size: 14px;
}
#ninja_forms_required_items, .nf-field-container {
    margin-bottom: 16px !important;
}

.ninja-forms-field.nf-element,
input.ninja-forms-field,
select.ninja-forms-field,
textarea.ninja-forms-field {
    border-color: rgba(var(--mm-color-divider), 1) !important;
}


/* ==========================================================================
   Footer Overrides
   ========================================================================== */

   footer .footer-last .uncell {
    padding-top: 0px;
}