/* ============================================================
   BLUE RIDGE BUILDING SERVICES — MAIN STYLESHEET

   TABLE OF CONTENTS
   01. Theme colors and global styles
   02. Shared header and desktop navigation
   03. Homepage intro and service showcase
   04. Customer reviews
   05. Estimate calculator and modal
   06. Interior page introductions
   07. Shared footer
   08. Tablet and mobile navigation (900px and below)
   09. Small-screen refinements (600px and below)
   10. Reduced-motion preferences

   Edit colors in :root. Edit the appropriate component section
   for desktop/base styles; mobile overrides are near the bottom.
   ============================================================ */


/* ========================================================
   01. THEME COLORS AND GLOBAL STYLES
   ======================================================== */

:root {
    --primary: #173b57;
    /* Main navy */
    --primary-hover: #245879;
    /* Navy hover */
    --accent: #147d92;
    /* Teal links / labels */
    --cta: #e9a825;
    /* Gold buttons / stars */
    --cta-hover: #d99a18;
    /* Gold hover */
    --cta-text: #17212b;
    /* Text on gold buttons */

    --page-bg: #f2f2f2;
    --surface: #ffffff;
    --text: #1f2933;
    --heading-secondary: #243b53;
    --body-secondary: #334e68;
    --muted: #52606d;
    --border: #e5e7eb;
    --hover-bg: #f0f3f5;
    --calculator-bg: #f4f6f7;
    --input-border: #cbd2d9;
    --black: #000000;
    --shadow-rgb: 0, 0, 0;

    /* Mobile menu colors can be changed separately. */
    --menu-bg: var(--primary);
    --menu-text: var(--surface);
    --menu-muted: #c5d8e7;
    --menu-divider: #47627a;
    --menu-close-hover: #31536d;
    --menu-overlay: rgba(var(--shadow-rgb), 0.55);
}

/* ========================================
   GLOBAL
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background-color: var(--page-bg);
}

a {
    color: inherit;
}

/* ========================================================
   02. SHARED HEADER AND DESKTOP NAVIGATION
   ======================================================== */

/* The component loader inserts .site-header inside #site-header.
   Sticky positioning belongs on the outer wrapper so the header
   can stay visible for the full length of the page. */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}


/* ========================================
   LOGO
   ======================================== */

.logo {
    display: block;
    text-decoration: none;
    color: var(--primary);
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.logo span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo:hover {
    color: var(--accent);
}


/* ========================================
   NAVIGATION
   ======================================== */

.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.main-nav a {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--heading-secondary);
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
}

.main-nav a:hover {
    background-color: var(--hover-bg);
    color: var(--accent);
}


/* ========================================
   FREE ESTIMATE BUTTON
   ======================================== */

.estimate-button {
    display: inline-block;
    margin-left: 12px;
    padding: 13px 22px;
    background-color: var(--cta);
    color: var(--cta-text);
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.estimate-button:hover {
    background-color: var(--cta-hover);
}


/* ========================================
   HEADER PHONE NUMBER
   ======================================== */

.header-phone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.phone-label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.phone-number {
    display: block;
    color: var(--primary);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
}

.header-phone:hover .phone-number {
    color: var(--accent);
}

/* ========================================================
   03. HOMEPAGE INTRO AND SERVICE SHOWCASE
   ======================================================== */

.home-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 35px;
}

.section-label {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-intro h1 {
    margin: 0 0 15px;
    color: var(--primary);
    font-size: 40px;
}

.home-intro>p:last-child {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}


/* ========================================
   SERVICE SHOWCASE
   ======================================== */

.services-showcase {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px 80px;
}

.service-block {
    margin-bottom: 35px;
}

.service-block h2 {
    margin: 0 0 14px;
    color: var(--heading-secondary);
    font-size: 25px;
}


/* ========================================
   SERVICE ROW
   ======================================== */

.service-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 260px;
    background-color: var(--surface);
    border-radius: 6px;
    overflow: hidden;
}


/* ========================================
   SERVICE IMAGE
   ======================================== */

.service-image {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}


/* ========================================
   SERVICE INFORMATION
   ======================================== */

.service-information {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 28px 35px;
}

.service-information h3 {
    margin-top: 0;
    margin-bottom: 14px;
    color: var(--cta-text);
    font-size: 18px;
}

.service-description ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
}

.service-options p {
    margin: 0 0 12px;
    font-size: 16px;
}

.service-options a {
    display: inline-block;
    margin-top: 8px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.service-options a:hover {
    text-decoration: underline;
}

/* ========================================================
   04. CUSTOMER REVIEWS
   ======================================================== */

.reviews-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 24px 90px;
}

.reviews-heading {
    margin-bottom: 35px;
}

.reviews-heading h2 {
    margin: 0 0 12px;
    color: var(--primary);
    font-size: 34px;
}

.reviews-heading>p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}


/* ========================================
   REVIEW CARD GRID
   ======================================== */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* ========================================
   INDIVIDUAL REVIEW CARDS
   ======================================== */

.review-card {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 28px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--cta);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.04);
    transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.09);
}


/* ========================================
   STAR RATINGS
   ======================================== */

.review-stars {
    color: var(--cta);
    font-size: 25px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}


/* ========================================
   REVIEW CONTENT
   ======================================== */

.review-text {
    margin: 0 0 30px;
    color: var(--body-secondary);
    font-size: 16px;
    line-height: 1.7;
    flex-grow: 1;
}


/* ========================================
   REVIEW FOOTER
   ======================================== */

.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.review-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.review-author strong {
    color: var(--primary);
    font-size: 15px;
}

.review-author span {
    color: var(--muted);
    font-size: 13px;
}

.review-link {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.review-link:hover {
    text-decoration: underline;
}


/* ========================================
   VIEW ALL REVIEWS BUTTON
   ======================================== */

.reviews-bottom {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.all-reviews-button {
    display: inline-block;
    padding: 14px 26px;
    background-color: var(--primary);
    color: var(--surface);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.all-reviews-button:hover {
    background-color: var(--primary-hover);
}

/* ========================================================
   05. ESTIMATE CALCULATOR AND MODAL
   ======================================================== */

[hidden] { display: none !important; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 24px;
    background: rgba(var(--shadow-rgb), 0.6);
}

.modal-content {
    position: relative;
    width: min(100%, 560px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.2);
}

.calculator-section { padding: 32px; }
.calculator-section h2 {
    margin: 0 40px 10px 0;
    color: var(--primary);
    font-size: clamp(24px, 4vw, 30px);
}

#calculatorDescription {
    margin: 0 0 24px;
    color: var(--muted);
    line-height: 1.55;
}

.calculator-field { margin-bottom: 24px; }
.calculator-field > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--heading-secondary);
}
.calculator-input-group { display: flex; align-items: center; gap: 12px; }
#projectSize {
    width: min(100%, 220px);
    padding: 12px 14px;
    font: inherit;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--surface);
}
#projectSize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.input-unit { color: var(--muted); }

.calculator-services {
    min-width: 0;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}
.calculator-services legend {
    margin-bottom: 12px;
    padding: 0;
    font-weight: 700;
    color: var(--heading-secondary);
}
#calculatorServiceOptions { display: grid; gap: 10px; }
.calculator-service-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--calculator-bg);
    cursor: pointer;
    line-height: 1.4;
}
.calculator-service-option:hover { border-color: var(--accent); }
.calculator-service-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}
.calculator-service-option span { flex: 1; }
.calculator-result {
    margin-top: 20px;
    padding: 20px;
    background: var(--calculator-bg);
    border-radius: 8px;
}
.calculator-result h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--heading-secondary);
}
#estimate {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: var(--primary);
}
.close-button {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 30px;
    cursor: pointer;
}
.close-button:hover { background: var(--hover-bg); color: var(--primary); }

/* Non-binding ballpark estimate notice */
.calculator-estimate-notice {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* Detailed estimate disclaimer */
.calculator-disclaimer {
    margin-top: 20px;
    padding: 16px;
    background: var(--calculator-bg);
    border-left: 3px solid var(--accent);
    border-radius: 5px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.calculator-disclaimer p {
    margin: 0 0 10px;
}

.calculator-disclaimer p:last-child {
    margin-bottom: 0;
}

.calculator-disclaimer strong {
    color: var(--heading-secondary);
}

/* Link to request a formal quote */
.calculator-quote-link {
    display: block;
    margin-top: 20px;
    padding: 14px 20px;
    background: var(--primary);
    color: var(--surface);
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
    transition: background 0.2s ease;
}

.calculator-quote-link:hover {
    background: var(--primary-hover);
}

/* ========================================================
   06. INTERIOR PAGE INTRODUCTIONS
   ======================================================== */

.page-intro { padding: 60px 24px 70px; }
.page-container { max-width: 1200px; margin: 0 auto; }
.page-intro h1 {
    margin: 0 0 15px;
    color: var(--primary);
    font-size: clamp(32px, 4vw, 40px);
}
.page-description {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}

/* ========================================================
   07. SHARED FOOTER
   ======================================================== */

.site-footer { background: var(--primary); color: var(--surface); }
.footer-container {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 24px;
}
.footer-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    color: var(--surface);
    font-size: 25px;
    font-weight: 800;
    text-decoration: none;
}
.footer-logo span {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.footer-description, .footer-contact-description {
    max-width: 330px;
    color: var(--menu-muted);
    line-height: 1.65;
}
.footer-heading { margin: 0 0 18px; font-size: 18px; }
.footer-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer-links a, .footer-contact-details a, .footer-contact-link {
    color: var(--menu-muted);
    text-decoration: none;
}
.footer-links a:hover, .footer-contact-details a:hover, .footer-contact-link:hover {
    color: var(--surface);
    text-decoration: underline;
}
.footer-contact-details { display: grid; gap: 10px; margin: 15px 0; }
.footer-contact-link { display: inline-block; margin-top: 10px; font-weight: 700; }
.footer-bottom { border-top: 1px solid var(--menu-divider); }
.footer-bottom-container { max-width: 1200px; margin: 0 auto; padding: 18px 24px; }
.footer-copyright { margin: 0; color: var(--menu-muted); font-size: 13px; }

.reviews-empty { color: var(--muted); text-align: center; }

/* ========================================================
   08. TABLET AND MOBILE — 900PX AND BELOW
   ======================================================== */

/* Hidden on desktop; shown inside the mobile breakpoint. */
.mobile-menu-button,
.mobile-navigation,
.mobile-menu-overlay {
    display: none;
}

/* Intermediate desktop header spacing */
@media (max-width: 1250px) {
    .header-container {
        flex-wrap: wrap;
    }

    .main-nav {
        gap: 4px;
    }

    .main-nav a {
        padding: 10px 8px;
    }
}

/* Mobile navigation, menu overlay, and responsive layout */
@media (max-width: 900px) {
    .header-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
    }

    .main-nav,
    .header-container>.estimate-button,
    .header-phone {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 8px;
        border: 0;
        border-radius: 5px;
        background: transparent;
        cursor: pointer;
    }

    .mobile-menu-button span {
        display: block;
        width: 25px;
        height: 3px;
        background: var(--primary);
        border-radius: 2px;
    }

    .mobile-menu-button:hover {
        background: var(--hover-bg);
    }

    .mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: var(--menu-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-navigation {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(88vw, 410px);
        height: 100vh;
        height: 100dvh;
        z-index: 1100;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--menu-bg);
        color: var(--menu-text);
        box-shadow: -8px 0 24px rgba(var(--shadow-rgb), 0.12);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
    }

    .mobile-navigation.active {
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 24px 28px;
        border-bottom: 1px solid var(--menu-divider);
    }

    .mobile-panel-header .logo {
        color: var(--menu-text);
    }

    .mobile-panel-header .logo:hover {
        color: var(--menu-muted);
    }

    .mobile-close-button {
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 5px;
        color: var(--menu-text);
        font-size: 34px;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-close-button:hover {
        background: var(--menu-close-hover);
    }

    .mobile-panel-links {
        display: flex;
        flex-direction: column;
        padding: 22px 24px 10px;
    }

    .mobile-panel-links a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 58px;
        padding: 16px 2px;
        color: var(--menu-text);
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        text-decoration: none;
        border-bottom: 1px solid var(--menu-divider);
    }

    .mobile-panel-links a::after {
        content: "↗";
        color: var(--menu-muted);
        font-size: 18px;
        font-weight: 400;
    }

    .mobile-panel-links a:hover,
    .mobile-panel-links a:focus-visible {
        color: var(--menu-muted);
    }

    .mobile-panel-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 28px 24px 40px;
    }

    .mobile-estimate-button {
        width: 100%;
        min-height: 52px;
        padding: 14px 18px;
        border: none;
        border-radius: 5px;
        background: var(--cta);
        color: var(--cta-text);
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-estimate-button:hover {
        background: var(--cta-hover);
    }

    .mobile-call-button {
        display: block;
        padding: 14px 8px;
        color: var(--menu-text);
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
    }

    .mobile-call-button:hover {
        color: var(--menu-muted);
    }

    body.menu-open {
        overflow: hidden;
    }

    /* Existing page layout */
    .service-row {
        grid-template-columns: 1fr;
    }

    .service-image {
        height: 300px;
    }

    .service-information {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-container { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ========================================================
   09. SMALL-SCREEN REFINEMENTS — 600PX AND BELOW
   ======================================================== */

@media (max-width: 600px) {
    .home-intro {
        padding-top: 40px;
    }

    .home-intro h1 {
        font-size: 32px;
    }

    .service-image {
        height: 235px;
        min-height: 0;
    }

    .service-information {
        padding: 24px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .reviews-heading h2 {
        font-size: 28px;
    }

    .review-card {
        min-height: 0;
    }

    .review-footer {
        flex-wrap: wrap;
    }

    .modal { padding: 12px; }
    .modal-content { max-height: calc(100dvh - 24px); }
    .calculator-section { padding: 24px 18px; }
    .footer-container { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px; }
}

/* ========================================================
   10. REDUCED-MOTION PREFERENCES
   ======================================================== */

@media (prefers-reduced-motion: reduce) {

    .mobile-navigation,
    .mobile-menu-overlay,
    .review-card {
        transition: none;
    }
}