/*
    Theme Name: Serve Right Landscaping
    Author: Component Blox
    Author URI: https://componentblox.com
    Description: Child theme for Serve Right Landscaping (Nassau County, NY) built on Bootstrap Component Blox. Project prefix: sr.
    Version: 1.0.0
    Template: bootstrap-component-blox
    Text Domain: bcb-child
*/

/* ==========================================================================
   1. CSS Variables — Serve Right brand tokens (source: artifacts brand board)
   ========================================================================== */

:root {
    --sr-forest: #152218;   /* deep forest — dark surfaces, footer, utility bar, overlays */
    --sr-olive: #636c3f;    /* brand primary — buttons, links, accents */
    --sr-sage: #838657;     /* secondary accent — icons, hovers, large text on dark */
    --sr-cream: #f6eeec;    /* warm light — alternating section backgrounds */
    --sr-font: "Inter", sans-serif;
    --sr-font-header: "Playfair Display", serif;
}

/* ==========================================================================
   2. Typography — Heading font inheritance + font utility classes
   ========================================================================== */

body {
    font-family: var(--sr-font);
    color: #26302a;
}

h1, h2, h3, h4, h5,
.sr-font-header {
    font-family: var(--sr-font-header);
    color: var(--sr-forest);
}

.sr-font-body {
    font-family: var(--sr-font) !important;
    letter-spacing: 1px;
}

/* ==========================================================================
   3. Text & Background Color Classes
   ========================================================================== */

.sr-text-forest { color: var(--sr-forest); }
.sr-text-olive { color: var(--sr-olive); }
.sr-text-sage { color: var(--sr-sage); }
.sr-text-cream { color: var(--sr-cream); }

.sr-bg-forest { background-color: var(--sr-forest); }
.sr-bg-olive { background-color: var(--sr-olive); }
.sr-bg-sage { background-color: var(--sr-sage); }
.sr-bg-cream { background-color: var(--sr-cream); }

a { color: var(--sr-olive); }
a:hover { color: var(--sr-forest); }

/* ==========================================================================
   4. Button System — Base .btn sets shared properties.
   ========================================================================== */

.btn {
    font-weight: 500;
    border-radius: 0;
    padding: 12px 28px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .875rem;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                transform .2s ease, box-shadow .2s ease;
}

.sr-btn-primary {
    background-color: var(--sr-olive);
    color: #fff;
}
.sr-btn-primary:hover,
.sr-btn-primary:focus {
    background-color: var(--sr-forest);
    color: var(--sr-cream);
}

.sr-btn-dark {
    background-color: var(--sr-forest);
    color: var(--sr-cream);
}
.sr-btn-dark:hover,
.sr-btn-dark:focus {
    background-color: var(--sr-olive);
    color: #fff;
}

.sr-btn-light-outline {
    border: 1px solid rgba(255, 255, 255, .75);
    color: #fff;
}
.sr-btn-light-outline:hover,
.sr-btn-light-outline:focus {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}

.sr-btn-primary:hover, .sr-btn-primary:focus,
.sr-btn-dark:hover, .sr-btn-dark:focus,
.sr-btn-light-outline:hover, .sr-btn-light-outline:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(21, 34, 24, .18);
}

.btn:focus-visible {
    outline: 2px solid var(--sr-sage);
    outline-offset: 2px;
}

/* ==========================================================================
   5. Utility Classes — Shared across all pages
   ========================================================================== */

.fw-600 { font-weight: 600; }
.rounded-lg { border-radius: 20px; }
.z-front { z-index: 5; }
.z-back { z-index: 1; }