/*
Theme Name: Maison Dental Premium Boutique
Theme URI: https://www.maison-dental.de/
Description: A premium, warm editorial boutique WordPress theme for Maison Dental, featuring a mobile-responsive layout and beautiful alternating backgrounds.
Version: 1.0.0
Author: Sofor
Author URI: https://maison-dental.de/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maison-dental
*/

/* Custom global styles overrides */
body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #111111;
}
h1, h2, h3, h4, .serif {
    font-family: 'Playfair Display', serif;
    color: #ab7272;
}
/* Ensure all inline style colors matching the light charcoal color are forced to readable black */
[style*="color: #55554a"], [style*="color:#55554a"], [style*="color: #55554a !important"], [style*="color:#55554a!important"] {
    color: #111111 !important;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-open .accordion-content {
    max-height: 500px;
}
.accordion-open .chevron-icon {
    transform: rotate(180deg);
}

/* --- Robust Vanilla CSS Header & Navigation Styling --- */
.main-header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #f3f4f6;
    height: 4.5rem; /* 72px on mobile */
    display: flex;
    align-items: center;
    transition: height 0.3s ease;
}
@media (min-width: 1024px) {
    .main-header {
        height: 6rem; /* 96px on desktop */
    }
}
.header-nav {
    max-width: 80rem; /* 7xl */
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem; /* px-6 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hide desktop menu container on mobile by default */
.primary-menu-container {
    display: none !important;
}

/* Display desktop menu horizontally on screen widths 1024px and above */
@media (min-width: 1024px) {
    .primary-menu-container {
        display: flex !important;
        align-items: center;
        gap: 2.5rem;
    }
}

.primary-menu-container ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 2.5rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-menu-container li {
    position: relative;
}
.primary-menu-container a {
    font-size: 15px;
    font-weight: 500;
    color: #374151; /* gray-700 */
    transition: color 0.2s;
    text-decoration: none;
}
.primary-menu-container a:hover {
    color: #dca7a7; /* primary */
}

/* Mobile Toggle Hamburger Button styling */
.mobile-menu-btn {
    display: block !important;
    background: none;
    border: none;
    cursor: pointer;
    color: #dca7a7;
}
@media (min-width: 1024px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* Hero Slider Animations */
.hero-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}
.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* --- Dropdown Menu Styling --- */
.menu-item-has-children {
    position: relative;
}
.primary-menu-container ul.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    padding: 0.75rem 0;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 100;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}
.primary-menu-container ul.dropdown-menu li {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.menu-item-has-children:hover > ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4b5563 !important; /* gray-600 */
    transition: background-color 0.2s, color 0.2s;
    text-align: left;
    white-space: nowrap;
}
.dropdown-menu a:hover {
    background-color: #fef2f0 !important;
    color: #dca7a7 !important;
}

/* Mobile Menu Slide-down unroll trigger */
#mobile-menu.open {
    transform: scaleY(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --- Hide Scrollbar Utility for Carousels --- */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Mobile Typography & Readability (Thicker font-weight & higher contrast) --- */
@media (max-width: 768px) {
    body {
        font-weight: 500 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    p, span, li, a, div {
        -webkit-font-smoothing: antialiased;
    }
    p {
        font-weight: 500 !important;
        color: #111111 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
    .text-sm {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
    }
    .text-xs {
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }
    .font-normal {
        font-weight: 500 !important;
    }
    /* Make headers crisper on small screens */
    h1, h2, h3, h4 {
        font-weight: 700 !important;
    }
    /* Ensure team member, services, and accordion text are clear and readable */
    #team p, #faq p, #leistungen p {
        font-weight: 500 !important;
        color: #111111 !important;
    }
}

/* Line clamp utility for compact cards */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .md\:line-clamp-none {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
}