/* Custom styles for Services page - Left-aligned content with proper spacing */

/* 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;
}

/* Left align all service section text content */
#comp-maqndljt .wixui-rich-text__text,
#comp-maqmh7k0 .wixui-rich-text__text,
#comp-maqmefep ~ * .wixui-rich-text__text,
.wixui-rich-text p.font_7 {
    text-align: left !important;
}

/* Left align headings in service sections */
#comp-maqndlk3 .wixui-rich-text__text,
#comp-m9tyn7qs1 .wixui-rich-text__text,
h1.font_0 {
    text-align: left !important;
}

/* Change page heading "OUR SERVICES" to gold color #c69503 */
h1, h1.font_0, h1 .wixui-rich-text__text {
    color: #c69503 !important;
}

/* Change ALL service headings and sub-headings to gold color #c69503 */
.font_0, .font_2, .font_3, .font_4, .font_5, .font_6,
h1.font_0, h2.font_2, h3.font_3, h4.font_4, h5.font_5, h6.font_6,
.wixui-rich-text h1.font_0,
.wixui-rich-text h2.font_2, 
.wixui-rich-text h3.font_3, 
.wixui-rich-text h4.font_4, 
.wixui-rich-text h5.font_5, 
.wixui-rich-text h6.font_6 {
    color: #c69503 !important;
    font-size: 16px !important;
}

/* Change service names (bold text) to gold color #c69503 */
.wixui-rich-text strong {
    color: #c69503 !important;
}

/* Change all buttons to gold color #c69503 */
button, .button, [data-testid="buttonElement"], 
a[role="button"], input[type="submit"], input[type="button"],
[class*="button"], [class*="Button"] {
    background-color: #c69503 !important;
    border-color: #c69503 !important;
}

/* Add consistent spacing between service items */
.wixui-rich-text p.font_7 {
    margin-bottom: 25px !important;
}

/* Ensure proper spacing between sections */
.comp-maqndljt,
.comp-maqmh7k0,
.comp-ltygmnb2,
.comp-maqn3bxl,
.comp-maqnhkck,
.comp-maqnj2fg {
    margin-bottom: 40px !important;
}

/* Add padding to section containers for better readability */
[data-mesh-id$="inlineContent-gridContainer"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Maintain spacing consistency for all paragraphs in rich text */
.wixui-rich-text p {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* Service titles (strong tags) - left aligned with minimal spacing */
.wixui-rich-text strong {
    display: block;
    text-align: left !important;
    margin-bottom: 0px !important;
    line-height: 1.3em !important;
}

/* Reduce spacing between title and description */
.wixui-rich-text strong + br {
    display: none !important;
}

.wixui-rich-text strong + br + span {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: block !important;
    line-height: 1.6em !important;
}

/* Service descriptions - left aligned with proper line spacing */
.wixui-rich-text span[style*="line-height:1.6em"],
.wixui-rich-text span[style*="line-height:1.8em"] {
    text-align: left !important;
    display: block;
}

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

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* CRITICAL: Override --site-width variable */
    :root {
        --site-width: 100% !important;
    }

    /* ========================================
       ADDITIONAL SERVICES (Mobile)
       - Reduce vertical spacing between items
       - Left-align the “Don't see the service…” line
       ======================================== */
    #comp-maqnrdto .wixui-rich-text p.font_7,
    #comp-maqnrdto .wixui-rich-text p.wixui-rich-text__text {
        margin-top: 2px !important;
        margin-bottom: 0 !important;
    }

    #comp-maqnrdto .wixui-rich-text p.font_7:first-of-type,
    #comp-maqnrdto .wixui-rich-text p.wixui-rich-text__text:first-of-type {
        margin-top: 8px !important;
    }

    #comp-maqnrdto .wixui-rich-text p.font_7:last-child,
    #comp-maqnrdto .wixui-rich-text p.wixui-rich-text__text:last-of-type {
        text-align: center !important;
        margin-top: 20px !important;
        margin-bottom: 15px !important;
        padding: 0 15px !important;
        line-height: 1.6em !important;
    }

    #comp-maqnrdto .wixui-rich-text p.font_7:last-child span,
    #comp-maqnrdto .wixui-rich-text p.wixui-rich-text__text:last-of-type span,
    #comp-maqnrdto .wixui-rich-text p.wixui-rich-text__text:last-of-type span span {
        text-align: center !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Style email link in mobile to match text */
    #comp-maqnrdto .wixui-rich-text p.font_7:last-child a,
    #comp-maqnrdto .wixui-rich-text p.wixui-rich-text__text:last-of-type a {
        font-style: italic !important;
        font-size: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
    }
    
    /* ========================================
       HEADER
       ======================================== */
    #comp-ltvv0gxs {
        width: 180px !important;
        max-width: 50% !important;
    }

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

    [data-mesh-id=SITE_HEADERinlineContent-gridContainer] > [id="comp-ltvv0gxs"] {
        margin: 10px auto !important;
        left: auto !important;
        transform: none !important;
        position: relative !important;
    }

    /* Hide desktop navigation */
    #comp-j78y5mpw {
        display: none !important;
    }

    /* ========================================
       PAGE HEADINGS - Centered on all devices
       ======================================== */
    h1, h2, h3, h4, h5, h6,
    .font_0, .font_2, .font_3,
    .wixui-rich-text h1,
    .wixui-rich-text h2,
    .wixui-rich-text h3 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 8px auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    
    /* Main page title "OUR SERVICES" */
    #comp-ltwytoor,
    #comp-ltwytoor h1,
    #comp-ltwytoor .font_0 {
        font-size: 28px !important;
        letter-spacing: 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        left: 0 !important;
        right: 0 !important;
        margin: 20px auto !important;
        padding: 0 10px !important;
        transform: none !important;
        position: relative !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    
    /* Fix grid container positioning for OUR SERVICES */
    [data-mesh-id="comp-ltwy71xninlineContent-gridContainer"] > #comp-ltwytoor,
    [data-mesh-id="comp-ltwy71xninlineContent-gridContainer"] > [id="comp-ltwytoor"] {
        margin: 10px auto !important;
        left: 0 !important;
        justify-self: center !important;
        width: 100% !important;
    }
    
    /* Section headings like "HAIRCUT & STYLING", "BRIDAL & EVENT" */
    .font_2,
    #comp-maqndlk3,
    #comp-maqndlk3 h1,
    #comp-maqndlk3 .font_0,
    #comp-maqndlk3 span {
        font-size: 17px !important;
        letter-spacing: 0.5px !important;
        color: #c69503 !important;
        margin: 10px auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix grid positioning for section headings */
    [data-mesh-id$="-gridContainer"] > #comp-maqndlk3 {
        justify-self: center !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 5px auto !important;
        padding: 0 15px !important;
    }
    
    /* COLOR SERVICES heading - center with equal margins */
    #comp-m9tyn7qs1,
    #comp-m9tyn7qs1 h1,
    #comp-m9tyn7qs1 .font_0,
    #comp-m9tyn7qs1 span {
        font-size: 24px !important;
        
        letter-spacing: 0.5px !important;
        color: #c69503 !important;
        margin: 10px auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix grid positioning for COLOR SERVICES heading */
    [data-mesh-id$="-gridContainer"] > #comp-m9tyn7qs1 {
        justify-self: center !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 5px auto !important;
        padding: 0 15px !important;
    }
    
    /* Hide empty spacer elements */
    #comp-m9tymnqe1 {
        display: none !important;
    }
    
    /* Sub-headings */
    .font_3, .font_4 {
        font-size: 20px !important;
    }
    
    /* Service names (bold) */
    .wixui-rich-text strong {
        font-size: 16px !important;
        display: block !important;
        margin-bottom: 5px !important;
        color: #c69503 !important;
    }

    /* ========================================
       BODY TEXT
       ======================================== */
    .font_5, .font_6 { font-size: 15px !important; }
    .font_7, .font_8 { font-size: 14px !important; line-height: 1.6 !important; }
    .font_9, .font_10 { font-size: 13px !important; }
    
    .wixui-rich-text:not(#comp-footer-address-text):not(#comp-footer-contact-text):not(#comp-footer-hours-text):not(#SITE_FOOTER *),
    .wixui-rich-text__text:not(#SITE_FOOTER *) {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    /* Service descriptions - left align body text only */
    .wixui-rich-text:not(#SITE_FOOTER *) p.font_7,
    .wixui-rich-text:not(#SITE_FOOTER *) p.font_8 {
        text-align: left !important;
    }
    
    .wixui-rich-text:not(#SITE_FOOTER *) p {
        margin: 4px 0 !important;
        line-height: 1.5 !important;
    }

    /* ========================================
       IMAGES
       ======================================== */
    img,
    .wixui-image,
    .MazNVa,
    .MazNVa img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }
    
    .MazNVa,
    [id^="comp-"][class*="wixui-image"] {
        width: 90% !important;
        max-width: 350px !important;
        margin: 8px auto !important;
    }

    /* ========================================
       SECTIONS & LAYOUT
       ======================================== */
    #comp-ltwy71xn,
    #comp-ltwymizv,
    #comp-ltygmnb2,
    #comp-ltyh1ara,
    #comp-maqslegd,
    #comp-ltywyz6d,
    #comp-maqydgjn,
    #comp-m9cpap2d,
    #comp-m9u3aawd,
    #comp-maqtvca5,
    .Oqnisf {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 5px 0 !important;
    }

    /* Grid containers - vertical stack (exclude footer for left alignment) */
    [data-mesh-id$="inlineContent-gridContainer"]:not([data-mesh-id*="footer"]),
    [data-mesh-id$="-gridContainer"]:not([data-mesh-id*="footer"]) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 10px !important;
        gap: 8px !important;
    }
    
    /* Footer grid containers - left aligned without extra padding */
    [data-mesh-id*="footer"][data-mesh-id$="inlineContent-gridContainer"],
    [data-mesh-id*="footer"][data-mesh-id$="-gridContainer"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 8px !important;
    }
    
    /* Grid children - ensure true centering */
    [data-mesh-id$="inlineContent-gridContainer"] > *,
    [data-mesh-id$="-gridContainer"] > * {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }
    
    /* Text container widths */
    [id^="comp-"][class*="wixui-rich-text"],
    [data-testid="richTextElement"],
    .HcOXKn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ========================================
       BUTTONS
       ======================================== */
    button, .button, [data-testid="buttonElement"], 
    a[role="button"], input[type="submit"], input[type="button"],
    .StylableButton2545352419__root {
        min-height: 50px !important;
        padding: 14px 30px !important;
        font-size: 15px !important;
        width: 80% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
        display: block !important;
        border-radius: 4px !important;
        text-align: center !important;
    }

    /* ========================================
       DECORATIVE LINES
       ======================================== */
    .wixui-horizontal-line,
    [class*="horizontal-line"] {
        width: 60% !important;
        margin: 8px auto !important;
    }

    /* Footer is now handled centrally in mobile-responsive.css */
    
    /* Contact info styling */
    a[href^="tel:"],
    a[href^="mailto:"] {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 15px !important;
    }
    
    /* ========================================
       TEXT ALIGNMENT FIX FOR WRAPPED PARAGRAPHS
       Override inline text-align:center
       ======================================== */
    
    /* "Don't see the service..." paragraph - all elements */
    #comp-maqnrdto [data-testid="richTextElement"] p[style*="text-align:center"]:last-of-type,
    #comp-maqnrdto [data-testid="richTextElement"] p[style*="text-align:center"]:last-of-type span,
    #comp-maqnrdto [data-testid="richTextElement"] p[style*="text-align:center"]:last-of-type span span {
        text-align: left !important;
    }
    
    /* "At Christopher Noland Salon..." and "Note:" paragraphs */
    #comp-maqprfdn [data-testid="richTextElement"] p[style*="text-align:center"],
    #comp-maqprfdn [data-testid="richTextElement"] p[style*="text-align:center"] span,
    #comp-maqprfdn [data-testid="richTextElement"] p[style*="text-align:center"] span span {
        text-align: left !important;
    }
    
    /* Note: Pricing section mobile styles consolidated in mobile-responsive.css */
    
    /* Reduce spacing on Additional Services section */
    #comp-maqnrdto,
    #comp-maqnrdto.SPY_vo,
    div[id="comp-maqnrdto"] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Target parent containers of Additional Services */
    [data-mesh-id="comp-maqnrdtoinlineContent"],
    [data-mesh-id="comp-maqnrdtoinlineContent-gridContainer"] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}