/* Custom styles for Home page */

/* Rounded gallery edges */
.IcC9C7,
.custom-gallery,
#comp-ltvvpv3s,
#comp-mffd2v76 {
    border-radius: 15px !important;
    overflow: hidden !important;
}

.IcC9C7 .APAK8c,
.IcC9C7 .Y0jxJY,
.IcC9C7 .wixui-gallery__item {
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* ==========================================================
   MOBILE RESPONSIVENESS FIX FOR STATIC WIX THUNDERBOLT SITE
   Forces mobile optimization without JavaScript
   ========================================================== */

/* Force mobile-optimized styles on small screens */
@media (max-width: 768px) {
    /* Simulate device-mobile-optimized class behavior */
    body {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
    }
    
    body #SITE_CONTAINER {
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: visible !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    body > * {
        max-width: 100% !important;
    }
    
    body #site-root {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        min-width: 100% !important;
    }
    
    /* Remove min-width constraints on all sections */
    body [class*="wixui-section"],
    body section[id^="comp-"],
    body .Oqnisf {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Master page adjustments */
    body #masterPage {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* Override inline min-width on sections */
    #comp-ltvvmpwr, #comp-mawmkaf2, #comp-ltvxnbbe, 
    #comp-m9csg1hc, #comp-m9cn6xby, #comp-ltya29qf, 
    #comp-lt8qfxth2, #comp-partners-section {
        min-width: 100% !important;
    }
    
    /* Site background */
    .BmZ5pC {
        min-width: 100% !important;
    }
}

/* ================================
   HAMBURGER MENU - PURE CSS
   ================================ */

/* Hamburger toggle checkbox (hidden) */
#hamburger-toggle {
    display: none;
}

/* Hamburger button styling */
.hamburger-btn {
    display: none; /* Hidden by default on desktop */
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10001;
    width: 45px;
    height: 45px;
    background: #AA9157;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when open */
#hamburger-toggle:checked + .hamburger-btn span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

#hamburger-toggle:checked + .hamburger-btn span:nth-child(2) {
    opacity: 0;
}

#hamburger-toggle:checked + .hamburger-btn span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    display: none;
}

@media (max-width: 768px) {
    /* Show hamburger button */
    .hamburger-btn {
        display: flex !important;
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    #hamburger-toggle:checked ~ .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
    }
    
    /* Mobile menu links container */
    .mobile-menu-links {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 90%;
    }
    
    .mobile-menu-links a {
        display: block;
        color: #fff;
        font-family: 'bodoni-moda', 'bodoni moda', serif;
        font-size: 22px;
        text-decoration: none;
        padding: 18px 20px;
        margin: 8px 0;
        letter-spacing: 2px;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(170, 145, 87, 0.3);
    }
    
    .mobile-menu-links a:hover,
    .mobile-menu-links a:active {
        color: #AA9157;
        background: rgba(170, 145, 87, 0.1);
    }
    
    /* Hide original desktop navigation */
    #comp-j78y5mpw {
        display: none !important;
    }
    
    /* Close button styling */
    .mobile-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        background: transparent;
        border: 2px solid #AA9157;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-menu-close::before,
    .mobile-menu-close::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 2px;
        background: #AA9157;
    }
    
    .mobile-menu-close::before {
        transform: rotate(45deg);
    }
    
    .mobile-menu-close::after {
        transform: rotate(-45deg);
    }
}

/* ================================
   HEADER ADJUSTMENTS FOR MOBILE
   ================================ */

@media (max-width: 768px) {
    /* Header container */
    #SITE_HEADER {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .xU8fqS .G5K6X8,
    .xU8fqS .U4Bvut,
    .xU8fqS .CJF7A2 {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Center header content */
    [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px !important;
    }
}

/* ================================
   END MOBILE RESPONSIVENESS FIX
   ================================ */

/* Larger logo in header */
#comp-ltvv0gxs {
    width: 750px !important;
    height: auto !important;
    max-width: 750px !important;
}

#comp-ltvv0gxs img,
#img_comp-ltvv0gxs {
    width: 750px !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Adjust header logo positioning */
[data-mesh-id=SITE_HEADERinlineContent-gridContainer] > [id="comp-ltvv0gxs"] {
    margin: 35px 0px 15px 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Change footer headings to gold color #c69503 */
#SITE_FOOTER h1, #SITE_FOOTER h2, #SITE_FOOTER h3, 
#SITE_FOOTER h4, #SITE_FOOTER h5, #SITE_FOOTER h6,
#SITE_FOOTER .font_0, #SITE_FOOTER .font_2, 
#SITE_FOOTER .font_3, #SITE_FOOTER .font_4, 
#SITE_FOOTER .font_5, #SITE_FOOTER .font_6,
footer h1, footer h2, footer h3, 
footer h4, footer h5, footer h6,
footer .font_0, footer .font_2, 
footer .font_3, footer .font_4, 
footer .font_5, footer .font_6 {
    color: #c69503 !important;
}

/* Add two line spaces after the copyright text in the footer */
.footer-bottom {
    margin-bottom: 2em !important;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Header adjustments */
    #comp-ltvv0gxs {
        width: 250px !important;
        max-width: 70% !important;
    }

    #comp-ltvv0gxs img,
    #img_comp-ltvv0gxs {
        width: 100% !important;
        height: auto !important;
    }

    [data-mesh-id=SITE_HEADERinlineContent-gridContainer] > [id="comp-ltvv0gxs"] {
        margin: 15px 0px 10px 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Make buttons touch-friendly */
    .StylableButton2545352419__root,
    button, .button, [data-testid="buttonElement"], 
    a[role="button"], input[type="submit"], input[type="button"] {
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        touch-action: manipulation !important;
    }

    /* Adjust font sizes for readability on mobile */
    .font_6 { font-size: 24px !important; }
    .font_7 { font-size: 16px !important; }

    /* Rich text containers */
    .wixui-rich-text {
        padding: 0 15px !important;
    }

    /* Ensure images scale properly */
    .wixui-image img,
    .MazNVa img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Image containers - make full width */
    #comp-ltx03glq,
    #comp-ltxb6svv,
    #comp-m9csg1ho,
    #comp-m9csg1i0,
    #comp-ltyab0p4,
    #comp-ltyabop1,
    #comp-ltyaaf2l,
    #comp-ltyacb7w {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Stack grid containers vertically */
    [data-mesh-id$="inlineContent-gridContainer"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    
    /* Section content padding */
    .Oqnisf [data-testid="inline-content"] {
        padding: 0 8px !important;
    }

    /* Gallery and slideshow adjustments */
    .IcC9C7,
    .custom-gallery,
    .slideshow-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ===== GOOGLE REVIEWS SECTION - COMPACT SPACING ===== */
    
    /* Google Reviews section - reduce padding */
    #comp-partners-section {
        padding: 0 0 8px 0 !important;
    }
    
    /* Google Reviews grid container - reduce gap */
    [data-mesh-id="comp-partners-sectioninlineContent-gridContainer"] {
        gap: 8px !important;
    }
    
    /* Google Reviews heading - reduce margins */
    #comp-partners-heading {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        padding: 0 8px !important;
    }
    
    /* Review slider mobile */
    .reviews-slider-container {
        padding: 8px !important;
        margin: 4px auto !important;
    }

    .review-card {
        padding: 10px 8px !important;
    }

    .review-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Footer adjustments */
    #SITE_FOOTER {
        min-width: 100% !important;
        width: 100% !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        font-size: 12px !important;
    }

    /* Text centering adjustments */
    #comp-ltxb8k7p,
    #comp-maual93n {
        margin-left: 0 !important;
    }

    /* Video container */
    video {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* ===== INSTAGRAM SECTION - COMPACT SPACING ===== */
    
    /* Instagram section - reduce padding */
    #comp-lt8qfxth2 {
        padding: 0 0 8px 0 !important;
    }
    
    /* Instagram grid container - reduce gap */
    [data-mesh-id="comp-lt8qfxth2inlineContent-gridContainer"] {
        gap: 8px !important;
    }
    
    /* Instagram title - reduce margins */
    #comp-j7a85t4o {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        padding: 0 8px !important;
    }
    
    /* Instagram images - full width stacked with minimal spacing */
    #comp-ltwubsgz,
    #comp-ltwucvdx {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    
    /* Instagram button - reduce margins */
    #comp-mav8mnsl {
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }
    
    /* Hide desktop decorative elements if needed */
    .wixui-horizontal-line {
        width: 90% !important;
        margin: 8px auto !important;
    }
    
    /* ===== FIX EXTRA WHITESPACE AFTER GALLERY ===== */
    
    /* Main hero gallery section - reduce fixed height */
    #comp-ltvvpv3s {
        height: auto !important;
        max-height: 400px !important;
    }
    
    /* Section containing the hero gallery */
    #comp-ltvvmpwr {
        min-width: 100% !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* "Our luxury salon" text section - remove top spacing */
    #comp-mawmkaf2 {
        min-width: 100% !important;
        padding-top: 5px !important;
        margin-top: 0 !important;
    }
    
    /* CN colour/style gallery section - reduce gap */
    #comp-m9cn6xby {
        min-width: 100% !important;
        padding-top: 5px !important;
        margin-top: 0 !important;
    }
    
    /* CN colour/style gallery - reduce fixed height */
    #comp-mffd2v76 {
        height: auto !important;
        max-height: 350px !important;
    }
    
    /* Remove excessive margins on grid containers */
    [data-mesh-id*="inlineContent-gridContainer"] > [id^="comp-"] {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    
    /* Reduce section wrapper padding */
    .Oqnisf {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    /* ===== REORDER CN COLOR / CN STYLE SECTION ===== */
    /* Make text appear above corresponding image on mobile */
    [data-mesh-id="comp-ltvxnbbeinlineContent-gridContainer"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* CN COLOR text - show first */
    #comp-ltxb8k7p {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }
    
    /* First image (Color) - show second */
    #comp-ltx03glq {
        order: 2 !important;
        margin-bottom: 10px !important;
    }
    
    /* CN STYLE text - show third */
    #comp-maual93n {
        order: 3 !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }
    
    /* Second image (Style) - show fourth */
    #comp-ltxb6svv {
        order: 4 !important;
    }
}