/* =========================================================
   RIVER AND RIDGE CLEANING FACILITY SERVICES
   MAIN WEBSITE STYLESHEET

   This file is organized by the visible area of the website.
   Each section below explains what part of the site it controls.
   ========================================================= */


/* =========================================================
   1. WEBSITE COLORS / GLOBAL SETTINGS

   These are the main colors used throughout the website.
   Changing a value here changes that color everywhere it is used.
   ========================================================= */

:root {

    /* Main dark text / footer color */
    --ink: #18333b;

    /* Main teal-blue from the logo */
    --green: #2f7f88;

    /* Darker teal used for hover effects */
    --green-dark: #225f66;

    /* Light aqua background */
    --mint: #e9f6f5;

    /* Main website background */
    --cream: #fbfcfa;

    /* White */
    --white: #ffffff;

    /* Secondary text */
    --muted: #667477;

    /* Borders */
    --line: #d7e7e5;

    /* Standard box shadow */
    --shadow: 0 20px 50px rgba(24, 51, 59, 0.12);
}


/* =========================================================
   2. BASIC WEBSITE SETTINGS

   Controls general page behavior, fonts, images and links.
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    /* Main website font */
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;

    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   3. MAIN PAGE WIDTH

   Controls how wide the website content can become.

   Increase 1120px to make the site wider.
   Decrease it to make the site narrower.
   ========================================================= */

.container {
    width: min(1120px, calc(100% - 36px));
    margin: auto;
}


/* =========================================================
   4. HEADER

   Controls the bar at the very top of the website.
   The header remains visible while scrolling.
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;

    /* Pure white to blend with the logo background */
    background: #ffffff;

    /* Thin line separating header from website */
    border-bottom: 1px solid var(--line);
}


/* =========================================================
   5. HEADER / LOGO AREA

   Controls the River and Ridge logo.

   LOGO SIZE:
   Change "height: 100px" below to make the logo larger/smaller.

   HEADER HEIGHT:
   Change "min-height: 110px" below if more room is needed.
   ========================================================= */

.nav-wrap {
    min-height: 110px;

    display: flex;
    align-items: center;

    gap: 28px;
}


/* Original text-brand styling.
   This remains here in case text branding is ever used again. */

.brand {
    font-weight: 850;
    font-size: 1.15rem;

    text-decoration: none;
    letter-spacing: -0.02em;
}


/* Logo link */

.brand-logo {
    display: flex;
    align-items: center;

    text-decoration: none;
}


/* ACTUAL LOGO SIZE */

.brand-logo img {
    display: block;

    width: auto;

    /* Increase this number to make the logo taller */
    height: 100px;

    /* Maximum logo width */
    max-width: 440px;

    object-fit: contain;
}


/* =========================================================
   6. TOP NAVIGATION MENU

   Controls:
   Services
   About
   Reviews
   Get a Quote
   Contact
   ========================================================= */

.nav {
    display: flex;

    gap: 24px;

    margin-left: auto;
}

.nav a {
    text-decoration: none;

    font-weight: 650;
    font-size: 0.95rem;
}

.nav a:hover {
    color: var(--green);
}


/* Mobile hamburger menu button */

.nav-toggle {
    display: none;

    background: none;
    border: 0;

    font-size: 1.6rem;
}


/* =========================================================
   7. WEBSITE BUTTONS

   Controls most green rounded buttons throughout the site.
   ========================================================= */

.btn {
    display: inline-flex;

    justify-content: center;
    align-items: center;

    background: var(--green);
    color: white;

    text-decoration: none;

    border: 0;
    border-radius: 999px;

    padding: 14px 22px;

    font-weight: 800;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(47, 117, 101, 0.2);
}

.btn:hover {
    background: var(--green-dark);
}


/* =========================================================
   8. HEADER PHONE BUTTON

   Controls the "Call XXX-XXX-XXXX" button in the header.
   ========================================================= */

.btn-small {
    padding: 10px 17px;

    font-size: 0.9rem;
}


/* =========================================================
   9. SECONDARY BUTTONS

   Controls outlined buttons such as "Call Now".
   ========================================================= */

.btn-secondary {
    background: transparent;

    color: var(--green);

    border: 1px solid var(--green);

    box-shadow: none;
}

.btn-secondary:hover {
    color: white;
}


/* =========================================================
   10. HOME / HERO SECTION

   This is the large opening area at the top of the homepage.

   Controls:
   - Main heading
   - Intro text
   - Quote button
   - Call button
   - Right-hand information card
   ========================================================= */

.hero {
    padding: 92px 0 80px;

    background:
        radial-gradient(
            circle at 88% 18%,
            #d8eee5 0,
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0,
            var(--cream) 100%
        );
}


/* Controls the two-column hero layout */

.hero-grid {
    display: grid;

    grid-template-columns: 1.18fr 0.82fr;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   11. SMALL GREEN SECTION HEADINGS

   Controls text such as:
   "Reliable • Friendly • Detail-focused"
   "What we do"
   "Why choose us"
   "Customer feedback"
   "Free estimate"
   ========================================================= */

.eyebrow {
    text-transform: uppercase;

    letter-spacing: 0.16em;

    font-size: 0.78rem;
    font-weight: 850;

    color: var(--green);
}


/* =========================================================
   12. MAIN WEBSITE HEADINGS

   Controls H1, H2 and H3 headings throughout the site.
   ========================================================= */

h1,
h2,
h3 {
    line-height: 1.1;

    margin-top: 0;
}


/* MAIN HOMEPAGE HEADING
   "A cleaner home. A cleaner workplace." */

h1 {
    font-size: clamp(3.2rem, 7vw, 6.5rem);

    letter-spacing: -0.055em;

    margin: 16px 0 22px;

    max-width: 780px;
}


/* Section titles */

h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);

    letter-spacing: -0.035em;

    margin: 12px 0 18px;
}


/* Card titles */

h3 {
    font-size: 1.25rem;

    margin-bottom: 10px;
}


/* =========================================================
   13. HERO INTRO TEXT

   Controls the paragraph underneath the main heading.
   ========================================================= */

.lead {
    font-size: 1.2rem;

    color: var(--muted);

    max-width: 660px;
}


/* =========================================================
   14. HERO BUTTONS

   Controls the spacing around:
   Get a Free Quote
   Call Now
   ========================================================= */

.hero-actions {
    display: flex;

    gap: 12px;

    margin: 28px 0;
}


/* =========================================================
   15. HERO TRUST POINTS

   Controls:
   ✓ Flexible scheduling
   ✓ Free estimates
   ✓ Local service
   ========================================================= */

.trust-row {
    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    font-size: 0.92rem;
    font-weight: 700;

    color: var(--green-dark);
}


/* =========================================================
   16. HERO RIGHT-HAND INFORMATION BOX

   Controls:
   "Cleaning that fits your life and business"
   ========================================================= */

.hero-card {
    background: var(--ink);

    color: white;

    padding: 38px;

    border-radius: 30px;

    box-shadow: var(--shadow);

    transform: rotate(1deg);
}

.hero-card p,
.hero-card li {
    color: #d9e6e2;
}

.hero-card ul {
    padding-left: 20px;
}


/* Decorative sparkle icon */

.sparkle {
    font-size: 2.2rem;

    margin-bottom: 12px;
}


/* =========================================================
   17. GENERAL WEBSITE SECTIONS

   Controls vertical spacing between major sections.
   ========================================================= */

.section {
    padding: 88px 0;
}


/* Light green section background */

.section-soft {
    background: var(--mint);
}


/* =========================================================
   18. SECTION TITLES

   Controls the heading and description above areas
   such as Services and Reviews.
   ========================================================= */

.section-heading {
    max-width: 720px;

    margin-bottom: 42px;
}

.section-heading p,
.section p {
    color: var(--muted);
}


/* =========================================================
   19. SERVICES SECTION

   Controls the grid containing:
   Residential Cleaning
   Deep Cleaning
   Move-In / Move-Out
   Commercial & Office Cleaning
   One-Time Cleaning
   Recurring Service
   ========================================================= */

.cards {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* =========================================================
   20. INDIVIDUAL SERVICE CARDS

   Controls each individual service box.
   ========================================================= */

.card {
    background: white;

    border: 1px solid var(--line);

    border-radius: 22px;

    padding: 28px;

    box-shadow: 0 8px 24px rgba(24, 49, 43, 0.05);
}


/* Service icons */

.card .icon {
    font-size: 1.8rem;

    margin-bottom: 16px;
}

.card p {
    margin-bottom: 0;
}


/* =========================================================
   21. ABOUT / WHY CHOOSE US SECTION

   Controls the two-column section explaining
   trust, consistency and company benefits.
   ========================================================= */

.split {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   22. WHY CHOOSE US INFORMATION BOX

   Controls:
   Dependable
   Personal
   Simple
   ========================================================= */

.check-panel {
    background: white;

    border-radius: 26px;

    padding: 12px 28px;

    box-shadow: var(--shadow);
}

.check-panel div {
    display: grid;

    gap: 4px;

    padding: 22px 0;

    border-bottom: 1px solid var(--line);
}

.check-panel div:last-child {
    border-bottom: 0;
}

.check-panel strong {
    font-size: 1.08rem;
}

.check-panel span {
    color: var(--muted);
}


/* =========================================================
   23. REVIEWS SECTION

   Controls the customer testimonial layout.
   ========================================================= */

.reviews {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* Individual review boxes */

.reviews blockquote {
    margin: 0;

    background: white;

    border: 1px solid var(--line);

    padding: 28px;

    border-radius: 22px;

    font-size: 1.05rem;
}


/* Customer name */

.reviews cite {
    display: block;

    margin-top: 20px;

    color: var(--green);

    font-style: normal;
    font-weight: 750;
}


/* Sample review warning */

.sample-note {
    font-size: 0.85rem;

    margin-top: 18px;
}


/* =========================================================
   24. FREE QUOTE SECTION

   Controls the background and layout around the quote form.
   ========================================================= */

.quote-section {
    background: #f1f5f2;
}

.quote-grid {
    display: grid;

    grid-template-columns: 0.78fr 1.22fr;

    gap: 60px;

    align-items: start;
}


/* =========================================================
   25. CONTACT INFORMATION BESIDE QUOTE FORM

   Controls:
   Phone
   Email
   Service Area
   ========================================================= */

.contact-box {
    margin-top: 28px;

    border-left: 3px solid var(--green);

    padding-left: 22px;
}

.contact-box a {
    color: var(--green);

    font-weight: 700;
}


/* =========================================================
   26. QUOTE FORM BOX

   Controls the white quote request form.
   ========================================================= */

.quote-form {
    background: white;

    border-radius: 28px;

    padding: 32px;

    box-shadow: var(--shadow);
}


/* Two fields side-by-side */

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;
}


/* =========================================================
   27. QUOTE FORM LABELS

   Controls text such as:
   Full Name
   Phone
   Email
   Property Type
   Service
   ========================================================= */

label {
    display: grid;

    gap: 7px;

    font-weight: 750;
    font-size: 0.94rem;

    margin-bottom: 16px;
}


/* =========================================================
   28. QUOTE FORM INPUT BOXES

   Controls:
   Text fields
   Dropdown menus
   Message box
   ========================================================= */

input,
select,
textarea {
    width: 100%;

    border: 1px solid #cad8d2;

    border-radius: 12px;

    padding: 13px 14px;

    background: #ffffff;

    font: inherit;

    color: var(--ink);

    outline: none;
}


/* Input highlight when clicked */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green);

    box-shadow: 0 0 0 3px rgba(47, 117, 101, 0.12);
}


/* Message box resizing */

textarea {
    resize: vertical;
}


/* =========================================================
   29. QUOTE FORM SUBMIT BUTTON

   Controls "Request My Free Quote"
   ========================================================= */

.btn-full {
    width: 100%;

    font-size: 1rem;
}


/* Small text underneath quote button */

.form-note {
    font-size: 0.8rem;

    text-align: center;

    margin-bottom: 0;
}


/* =========================================================
   30. SPAM PROTECTION FIELD

   This is intentionally hidden.
   Do not remove unless changing the form spam protection.
   ========================================================= */

.hp {
    position: absolute !important;

    left: -9999px !important;
}


/* =========================================================
   31. BOTTOM CALL-TO-ACTION SECTION

   Controls:
   "Ready for a cleaner home or workplace?"
   ========================================================= */

.cta {
    padding: 54px 0;

    background: var(--green);

    color: white;
}

.cta-inner {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 24px;
}

.cta h2 {
    margin: 0 0 4px;
}

.cta p {
    margin: 0;

    color: #dceee8;
}


/* White quote button inside green section */

.btn-light {
    background: white;

    color: var(--green);

    box-shadow: none;
}

.btn-light:hover {
    background: #eef8f4;

    color: var(--green-dark);
}


/* =========================================================
   32. FOOTER

   Controls the dark section at the bottom containing:
   Business Name
   Contact
   Service Area
   Privacy Policy
   ========================================================= */

.footer {
    padding: 50px 0 24px;

    background: var(--ink);

    color: white;
}


/* Footer columns */

.footer-grid {
    display: grid;

    grid-template-columns: 1.3fr 1fr 1fr;

    gap: 30px;
}


/* Footer text / links */

.footer p,
.footer a {
    color: #c7d6d1;
}


/* Copyright line */

.footer-bottom {
    border-top: 1px solid #345047;

    margin-top: 30px;

    padding-top: 20px;

    font-size: 0.85rem;

    color: #aebfba;
}


/* =========================================================
   33. MOBILE CALL BUTTON

   Hidden on desktop.
   Appears in bottom-right corner on smaller screens.
   ========================================================= */

.mobile-call {
    display: none;
}


/* =========================================================
   34. SIMPLE MESSAGE PAGES

   Used for success/error type pages.
   ========================================================= */

.simple-page {
    min-height: 100vh;

    display: grid;

    place-items: center;

    background: var(--mint);

    padding: 20px;
}

.simple-card {
    max-width: 620px;

    background: white;

    padding: 50px;

    text-align: center;

    border-radius: 30px;

    box-shadow: var(--shadow);
}

.big-check {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: var(--green);

    color: white;

    display: grid;

    place-items: center;

    font-size: 2rem;

    margin: 0 auto 20px;
}

.simple-card h1 {
    font-size: 3rem;
}


/* =========================================================
   35. PRIVACY / LEGAL PAGE

   Controls privacy.php and similar pages.
   ========================================================= */

.legal-page {
    background: white;
}

.legal {
    max-width: 780px;

    padding-top: 60px;
    padding-bottom: 80px;
}

.legal h1 {
    font-size: 3.2rem;
}

.legal a {
    color: var(--green);
}


/* =========================================================
   36. TABLET / SMALLER COMPUTER DISPLAY

   Activated when the screen is 900px wide or less.
   ========================================================= */

@media (max-width: 900px) {

    /* Hide desktop phone button */
    .desktop-call {
        display: none;
    }


    /* Show hamburger menu */
    .nav-toggle {
        display: block;

        margin-left: auto;
    }


    /* Mobile navigation menu */
    .nav {
        position: absolute;

        /* Header is taller now because of the logo */
        top: 110px;

        left: 18px;
        right: 18px;

        display: none;

        flex-direction: column;

        background: white;

        border: 1px solid var(--line);

        border-radius: 18px;

        padding: 20px;

        box-shadow: var(--shadow);
    }


    /* Opens mobile navigation */
    .nav.open {
        display: flex;
    }


    /* Reduce hero spacing */
    .hero {
        padding-top: 60px;
    }


    /* Change two-column sections to one column */
    .hero-grid,
    .split,
    .quote-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    /* Service cards and reviews become two columns */
    .cards,
    .reviews {
        grid-template-columns: 1fr 1fr;
    }


    /* Remove angle from hero card */
    .hero-card {
        transform: none;
    }


    /* Show floating Call Now button */
    .mobile-call {
        display: block;

        position: fixed;

        bottom: 16px;
        right: 16px;

        z-index: 55;

        background: var(--green);

        color: white;

        text-decoration: none;

        font-weight: 800;

        padding: 12px 18px;

        border-radius: 999px;

        box-shadow: var(--shadow);
    }
}


/* =========================================================
   37. MOBILE PHONE DISPLAY

   Activated on screens 620px wide or less.
   ========================================================= */

@media (max-width: 620px) {

    /* MOBILE LOGO SIZE */

    .nav-wrap {
        min-height: 82px;
    }

    .brand-logo img {

        /* Increase/decrease this to adjust logo on phones */
        height: 70px;

        max-width: 250px;
    }


    /* Move dropdown menu under shorter mobile header */
    .nav {
        top: 82px;
    }


    /* Main homepage heading */
    h1 {
        font-size: 3.5rem;
    }


    /* Reduce vertical space between sections */
    .section {
        padding: 66px 0;
    }


    /* Cards become one column */
    .cards,
    .reviews,
    .form-row,
    .footer-grid {
        grid-template-columns: 1fr;
    }


    /* Hero buttons stack vertically */
    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    /* Bottom CTA stacks vertically */
    .cta-inner {
        align-items: flex-start;

        flex-direction: column;
    }


    /* Quote form gets less padding */
    .quote-form {
        padding: 22px;
    }


    /* Simple message page */
    .simple-card {
        padding: 34px 22px;
    }

    .simple-card h1 {
        font-size: 2.4rem;
    }
}