/* ==========================================================================
   Miranda Gerber — custom.css (Optimized)
   ========================================================================== */

:root {
    /* Change this ONE line to update the font across the entire nav menu,
       including both the top-level links and the Gallery submenu. */
    --nav-font: 'Montserrat', sans-serif;
}

/* Typography Utility Classes */
.font-handwriting {
    font-family: 'Caveat', cursive, sans-serif;
}
.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}
.tracking-wide {
    letter-spacing: 0.15em;
}

/* Accordion Custom Styling */
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #212529;
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}

/* Global Button & Header Utilities */
.btn-hover-custom {
    background-color: #111111 !important;
    color: #ffffff !important; 
    border: none;
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
.btn-hover-custom:hover,
.btn-hover-custom:focus {
    background-color: #444444 !important; 
    color: #ffffff !important; 
}
.align-btn-text {
    margin-bottom: 2px !important;
}
.navbar-brand-custom {
    letter-spacing: 0.05em;
    color: #111111;
    line-height: 1;
}
.nav-list-font {
    font-size: 0.8rem;
}
.nav-btn-text-size {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}
.custom-pink-hover:hover, 
.custom-pink-hover:focus {
    background-color: #f3cfc6 !important;
    border-color: #f3cfc6 !important;
    color: #212529 !important;
    transition: all 0.25s ease-in-out;
}

/* Global Navbar Desktop Base */
.navbar {
    height: 70px !important; 
}
.navbar-brand img,
.navbar-brand-custom img {
    height: 80px !important;  
    width: auto !important;    
    max-height: none !important;
    position: relative;
    top: 10px; 
    z-index: 1050; 
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   Navigation Links — Core Shared Styles
   ========================================================================== */
.nav-link-custom {
    font-family: var(--nav-font) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;    
    text-decoration: none;
    transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

/* Stripping Link Shadows Globally */
.navbar-nav .nav-item,
.navbar-nav .nav-link,
.navbar-nav a,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.dropdown-toggle,
.gallery-dropdown-item {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
}

/* ==========================================================================
   Desktop-Specific Navigation (992px and up)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Ensure the main list container spans full width and aligns all items to the right */
    ul.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    /* 1b. Pink underline on hover/focus for nav tabs (desktop only) */
    .nav-link-custom:not(.whatsapp-nav-icon) {
        border-bottom: 2px solid transparent !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out !important;
    }
    .nav-link-custom:not(.whatsapp-nav-icon):hover,
    .nav-link-custom:not(.whatsapp-nav-icon):focus,
    .nav-link-custom:not(.whatsapp-nav-icon).show {
        border-bottom: 2px solid #e9ecef !important;
    }
    .nav-link-custom:not(.whatsapp-nav-icon).active {
        border-bottom: 2px solid #f3cfc6 !important;
    }

    /* 2. Style the individual WhatsApp list item wrapper */
    li.whatsapp-nav-icon-container {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 14px !important; /* Matches the uniform spacing gap between your menu items */
        padding: 0 !important;
    }

    /* 3. Keep the inner anchor link layout clean, visible, and square */
    li.whatsapp-nav-icon-container .whatsapp-nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        background-color: transparent !important;
        border: none !important;
    }

    /* 4. Enforce clean scaling for the Bootstrap icon */
    li.whatsapp-nav-icon-container .bi-whatsapp {
        font-size: 1.3rem !important;
        vertical-align: middle !important;
    }
}

/* ==========================================================================
   Mobile Responsive Adjustments (991px and down)
   ========================================================================== */
@media (max-width: 991px) {
    .navbar {
        height: 60px !important; 
    }
    .navbar-brand img,
    .navbar-brand-custom img {
        height: 62px !important;  
        width: auto !important;   
        position: relative;
        top: 2px;
        z-index: 1050;
    }

    /* Consolidated Toggler Frame */
    .navbar-toggler {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1060;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
        padding: 6px 6px !important;
        transition: transform 0.2s ease-in-out;
    }
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Toggler Icons States */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23444444' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        transition: background-image 0.25s ease-in-out;
    }
    .navbar-toggler:hover .navbar-toggler-icon,
    .navbar-toggler:focus .navbar-toggler-icon,
    .navbar-toggler:active .navbar-toggler-icon,
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d68a96' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Mobile Menu Items (Tab Blocks) */
    .nav-link-custom {
        display: block !important;           
        text-align: center !important;       
        margin: 6px 0 !important;                    
        padding: 10px 14px !important;               
        border: 1px solid #f3cfc6 !important;        
        border-radius: 4px !important;              
        background-color: #ffffff !important;        
        color: #1a1a1a !important;
    }
    .nav-link-custom:hover,
    .nav-link-custom:focus,
    .nav-link-custom.active,
    .nav-link-custom.active:visited {
        background-color: #f3cfc6 !important;        
        color: #000000 !important;
        border-color: #f3cfc6 !important;
    }

    /* Mobile WhatsApp Tab Box Sync */
    .whatsapp-nav-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        padding: 10px 14px !important;
        margin: 4px 0 !important;
        border: 1px solid #f3cfc6 !important;
        border-radius: 4px !important;
        background-color: #ffffff !important;
    }
    .whatsapp-nav-icon span {
        display: inline !important;
        color: #1a1a1a !important;
    }
    .whatsapp-nav-icon:hover,
    .whatsapp-nav-icon:focus {
        background-color: #f3cfc6 !important;
        border-color: #f3cfc6 !important;
    }
    .whatsapp-nav-icon:hover span,
    .whatsapp-nav-icon:focus span {
        color: #000000 !important;
    }
    .whatsapp-nav-icon:hover .bi-whatsapp,
    .whatsapp-nav-icon:focus .bi-whatsapp {
        color: #000000 !important;
    }
}

/* Shared Global WhatsApp Resets */
.whatsapp-nav-icon,
.whatsapp-nav-icon:hover,
.whatsapp-nav-icon:focus {
    border: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
}
.whatsapp-nav-icon .bi-whatsapp {
    color: #25D366 !important;
}
/* Hide the in-menu WhatsApp icon below 992px — the floating button replaces it on mobile */
/* (placed after the rule below on purpose — same specificity, source order decides the winner) */
/* WhatsApp Alignment — Native flex layout with your HTML 'ms-auto' class */
    li.whatsapp-nav-icon-container {
        display: flex !important;
        align-items: center !important;
    }
@media (max-width: 991px) {
    li.whatsapp-nav-icon-container {
        display: none !important;
    }
}
    
    /* FIX: Targets the icon specifically to override the 0.75rem navbar font compression */
    li.whatsapp-nav-icon-container .bi-whatsapp {
        font-size: 1.2rem !important; /* Standard, crisp default presentation size */
        vertical-align: middle;
    }
    
    /* Hides the text label on desktops, showing only the clean icon */
    .whatsapp-nav-icon span {
        display: none !important;
    }

/* ==========================================================================
   Submenu & Dropdown Custom Layouts
   ========================================================================== */
/* ==========================================================================
   Submenu & Dropdown Custom Layouts (Adjusted for Delicate Borders)
   ========================================================================== */
.dropdown-menu.gallery-dropdown-menu {
    border: 1px solid #f3cfc6 !important;  /* Reduced from 5px down to a crisp 1px lines */
    border-radius: 4px !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

.gallery-dropdown-menu li {
    border: none !important;
    background: none !important;
}

.dropdown-item.gallery-dropdown-item {
    font-family: var(--nav-font) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    padding: 10px 20px !important;
    background-color: transparent !important;
    border: none !important;
    
    /* Matches the 1px delicate footprint of the outer bounding card box */
    border-bottom: 1px solid #f3cfc6 !important; 
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.gallery-dropdown-menu li:last-child .gallery-dropdown-item {
    border-bottom: none !important; /* Prevents the last item from looking double-lined */
}

.dropdown-item.gallery-dropdown-item:hover,
.dropdown-item.gallery-dropdown-item:focus {
    background-color: #f3cfc6 !important;
    color: #000000 !important;
}

/* ==========================================================================
   Hero & Structural Sections
   ========================================================================== */
.hero-watercolor-bg {
    background-color: #ffffff !important; 
    background-image: none !important;
}
@media (max-width: 991px) {
    .hero-watercolor-bg {
        padding-top: 1rem !important;
    }
    .hero-watercolor-bg > .container {
        margin-top: 0.5rem !important;
    }
    .hero-watercolor-bg .order-1 {
        margin-bottom: 2rem;
    }
}

.et_pb_image_20 {
    display: block;
    width: 100%;
    height: auto;
    max-width: 450px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    animation: floatImage 6s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes floatImage {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    50% {
        transform: translateY(-10px) rotate(0.5deg);
        box-shadow: 0 25px 40px rgba(0,0,0,0.15);
    }
}

.image-window-wrapper {
    position: relative;
    padding: 2rem;
}
.image-window-wrapper::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 75%;
    height: 75%;
    background: #f2efe9;
    border-radius: 8px;
    z-index: 1;
    transform: rotate(-3deg);
}
.hero-intro-text {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
}
.hero-accent-img {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 160px;
    height: 160px;
    max-width: 38%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 6px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    transform: rotate(-6deg);
    z-index: 2;
    transition: opacity 0.2s ease-in-out;
}
.image-window-wrapper img#heroMainImg {
    transition: opacity 0.2s ease-in-out;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.hero-swap-badge {
    position: absolute;
    bottom: 2.2rem;
    left: 32%;
    width: 38px;
    height: 38px;
    background-color: #e4a199;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 3;
    animation: heroSwapPulse 2.5s ease-in-out infinite;
}
@keyframes heroSwapPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@media (max-width: 991px) {
    .hero-swap-badge {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        bottom: 1.6rem;
        left: 26%;
    }
}
@media (max-width: 991px) {
    .hero-accent-img {
        width: 110px;
        height: 110px;
        max-width: 30%;
        bottom: -1rem;
        left: -0.75rem;
    }
}

/* ==========================================================================
   UI Decorative Features & Badges
   ========================================================================== */
.concept-icon-box {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}
.why-us-section .concept-icon-box {
    background-color: #ffffff;
    border: 1px solid #f3cfc6;
    color: #f3cfc6;
    transition: all 0.3s ease-in-out;
    animation: iconBob 4s ease-in-out infinite;
}
.why-us-section .concept-icon-box:hover {
    background-color: #f3cfc6;
    color: #ffffff;
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 10px 20px rgba(243, 207, 198, 0.5);
}
.why-us-section .col-md-6:nth-child(1) .concept-icon-box { animation-delay: 0s; }
.why-us-section .col-md-6:nth-child(2) .concept-icon-box { animation-delay: 0.6s; }
.why-us-section .col-md-6:nth-child(3) .concept-icon-box { animation-delay: 1.2s; }
.why-us-section .col-md-6:nth-child(4) .concept-icon-box { animation-delay: 1.8s; }

@keyframes iconBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.course-item-img {
    border-radius: 50%;
    border: 6px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.course-item-img:hover {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.12));
}

.container-narrow { max-width: 800px; }
.container-narrow-sm { max-width: 600px; }
.scroll-top-btn-position { bottom: 20px; right: 20px; }
.btnScrollToTop {
    width: 48px;
    height: 48px;
    background-color: #ffffff !important;
    border: 1px solid #f3cfc6 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #2c2b3c !important;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.btnScrollToTop:hover,
.btnScrollToTop:focus {
    background-color: #f3cfc6 !important;
    color: #2c2b3c !important;
    transform: scale(1.06);
}

/* Floating WhatsApp Button (mobile only — desktop keeps the nav bar icon) */
.whatsapp-float-btn {
    bottom: 84px;
    right: 20px;
    width: 52px;
    height: 52px;
    background-color: #25D366 !important;
    color: #ffffff !important;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 1055;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.whatsapp-float-btn:hover,
.whatsapp-float-btn:focus {
    background-color: #1ebe5b !important;
    color: #ffffff !important;
    transform: scale(1.06);
}

.star-badge-wrapper {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(30deg);
    z-index: 1051;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.star-badge-wrapper:hover {
    transform: translateY(-50%) rotate(15deg) scale(1.12);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.btn-badge-star {
    clip-path: polygon(
        50.0% 0.0%, 55.2% 10.3%, 62.9% 1.7%, 65.3% 13.0%,
        75.0% 6.7%, 74.4% 18.3%, 85.4% 14.6%, 81.7% 25.6%,
        93.3% 25.0%, 87.0% 34.7%, 98.3% 37.1%, 89.7% 44.8%,
        100.0% 50.0%, 89.7% 55.2%, 98.3% 62.9%, 87.0% 65.3%,
        93.3% 75.0%, 81.7% 74.4%, 85.4% 85.4%, 74.4% 81.7%,
        75.0% 93.3%, 65.3% 87.0%, 62.9% 98.3%, 55.2% 89.7%,
        50.0% 100.0%, 44.8% 89.7%, 37.1% 98.3%, 34.7% 87.0%,
        25.0% 93.3%, 25.6% 81.7%, 14.6% 85.4%, 18.3% 74.4%,
        6.7% 75.0%, 13.0% 65.3%, 1.7% 62.9%, 10.3% 55.2%,
        0.0% 50.0%, 10.3% 44.8%, 1.7% 37.1%, 13.0% 34.7%,
        6.7% 25.0%, 18.3% 25.6%, 14.6% 14.6%, 25.6% 18.3%,
        25.0% 6.7%, 34.7% 13.0%, 37.1% 1.7%, 44.8% 10.3%
    );
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    background-color: #f3cfc6 !important;
    color: #212529 !important;
    font-size: 0.65rem;
    line-height: 1.1;
    border: none;
}

.status-sold {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}
.status-sold::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #d9383a;
    border-radius: 50%;
    margin-left: 6px;
}