/* ==========================================================================
   Shared components (always enqueued).
   Utility bar · eyebrows · section headings · page hero · breadcrumbs ·
   service cards · CTA band · service area · watermark motif · footer.
   ========================================================================== */

/* --- Utility bar (bcb_before_navbar) --- */

#sr-utility-bar {
    font-size: .8125rem;
    letter-spacing: .5px;
}
#sr-utility-bar .container {
    min-height: 40px;
}
#sr-utility-bar,
#sr-utility-bar a {
    color: var(--sr-cream);
}
.sr-utility-note {
    opacity: .85;
}
.sr-utility-phone {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 0;
    font-weight: 500;
    text-decoration: none;
}
.sr-utility-phone:hover,
.sr-utility-phone:focus {
    color: #fff;
}

/* --- Navbar (child override: template-parts/navbar/navbar-nav.php) --- */

.sr-navbar {
    background: #fff;
    border-bottom: 1px solid rgba(21, 34, 24, .08);
    padding: .625rem 0;
}
#nav-header.sticky-top {
    z-index: 1030;
}
.sr-navbar-brand {
    margin-right: 1.5rem;
}
.sr-navbar-brand img {
    display: block;
    max-height: 84px;
    width: auto;
}
.sr-navbar-brand-text {
    font-family: var(--sr-font-header);
    font-size: 1.375rem;
    color: var(--sr-forest);
}

/* Top-level links */
.sr-navbar .navbar-nav {
    gap: .25rem;
}
.sr-navbar .nav-link {
    position: relative;
    color: var(--sr-forest);
    font-weight: 500;
    font-size: .9375rem;
    letter-spacing: .5px;
    padding: .625rem .875rem;
    transition: color .2s ease;
}
.sr-navbar .nav-link:hover,
.sr-navbar .nav-link:focus {
    color: var(--sr-olive);
}
.sr-navbar .nav-link:focus-visible {
    outline: 2px solid var(--sr-sage);
    outline-offset: 2px;
}

/* Underline grow on hover / current page.
   Uses ::before — ::after belongs to the parent theme's dropdown caret
   (#nav-header .dropdown-toggle::after), and sharing it garbles both. */
.sr-navbar .navbar-nav > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    left: .875rem;
    right: .875rem;
    bottom: .3rem;
    height: 2px;
    background: var(--sr-olive);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.sr-navbar .navbar-nav > .nav-item > .nav-link:hover::before,
.sr-navbar .navbar-nav > .nav-item > .nav-link:focus::before,
.sr-navbar .navbar-nav > .current-menu-item > .nav-link::before,
.sr-navbar .navbar-nav > .current_page_item > .nav-link::before,
.sr-navbar .navbar-nav > .current-menu-ancestor > .nav-link::before,
.sr-navbar .navbar-nav > .current-menu-parent > .nav-link::before {
    transform: scaleX(1);
}
.sr-navbar .navbar-nav > .current-menu-item > .nav-link,
.sr-navbar .navbar-nav > .current_page_item > .nav-link,
.sr-navbar .navbar-nav > .current-menu-ancestor > .nav-link,
.sr-navbar .navbar-nav > .current-menu-parent > .nav-link {
    color: var(--sr-olive);
}

/* Dropdown caret */
.sr-navbar .dropdown-toggle::after {
    vertical-align: .2em;
    opacity: .55;
}

/* Dropdown panel (desktop: parent JS opens on hover) */
.sr-navbar .dropdown-menu {
    margin-top: 0;
    min-width: 250px;
    padding: .5rem 0;
    border: 1px solid rgba(21, 34, 24, .1);
    border-top: 3px solid var(--sr-olive);
    border-radius: 0;
    box-shadow: 0 16px 32px rgba(21, 34, 24, .1);
}
.sr-navbar .dropdown-menu .nav-item {
    width: 100%;
}
/* #nav-header prefix needed to outrank the parent theme's ID-based rule */
#nav-header .sr-navbar .dropdown-menu .nav-link {
    display: block;
    padding: .55rem 1.5rem;
    color: var(--sr-forest);
    font-size: .9375rem;
    letter-spacing: .25px;
}
#nav-header .sr-navbar .dropdown-menu .nav-link:hover,
#nav-header .sr-navbar .dropdown-menu .nav-link:focus {
    background: var(--sr-cream);
    color: var(--sr-forest);
}

/* Contact CTA button (class added via sr_nav_cta_class in inc/setup.php) */
.sr-navbar .navbar-nav > .sr-nav-cta > .nav-link {
    margin-left: .75rem;
    padding: .7rem 1.5rem;
    background: var(--sr-olive);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background-color .25s ease;
}
.sr-navbar .navbar-nav > .sr-nav-cta > .nav-link:hover,
.sr-navbar .navbar-nav > .sr-nav-cta > .nav-link:focus {
    background: var(--sr-forest);
    color: var(--sr-cream);
}
.sr-navbar .navbar-nav > .sr-nav-cta > .nav-link::before {
    display: none;
}

/* Custom hamburger (animates to X while open) */
.sr-navbar-toggler {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    box-shadow: none !important;
}
.sr-toggler-bar {
    width: 24px;
    height: 2px;
    background: var(--sr-forest);
    transition: transform .25s ease, opacity .2s ease;
}
#toggler:not(.collapsed) .sr-toggler-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#toggler:not(.collapsed) .sr-toggler-bar:nth-child(2) {
    opacity: 0;
}
#toggler:not(.collapsed) .sr-toggler-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Collapsed (mobile + tablet) menu */
@media (max-width: 991.98px) {
    .sr-navbar {
        padding: .5rem 0;
    }
    .sr-navbar-brand img {
        max-height: 60px;
    }
    .sr-navbar .navbar-collapse {
        padding: .5rem 0 1.25rem;
    }
    .sr-navbar .navbar-nav {
        gap: 0;
    }
    .sr-navbar .navbar-nav > .nav-item {
        border-bottom: 1px solid rgba(21, 34, 24, .08);
    }
    .sr-navbar .navbar-nav > .nav-item:last-child,
    .sr-navbar .navbar-nav > .sr-nav-cta {
        border-bottom: 0;
    }
    .sr-navbar .nav-link {
        padding: .875rem .25rem;
        font-size: 1.0625rem;
    }
    .sr-navbar .navbar-nav > .nav-item > .nav-link::before {
        display: none;
    }
    /* Sub-menu always expanded as an indented group (no hover on touch) */
    .sr-navbar .dropdown-menu {
        display: block !important;
        position: static;
        margin: 0 0 .75rem .5rem;
        padding: 0 0 0 .875rem;
        border: 0;
        border-left: 2px solid rgba(99, 108, 63, .35);
        box-shadow: none;
        background: transparent;
    }
    #nav-header .sr-navbar .dropdown-menu .nav-link {
        padding: .75rem .25rem;
        font-size: .9375rem;
        white-space: normal;
    }
    .sr-navbar .dropdown-toggle::after {
        display: none;
    }
    /* CTA becomes a full-width button at the end of the menu */
    .sr-navbar .navbar-nav > .sr-nav-cta > .nav-link {
        display: block;
        margin: .875rem 0 0;
        padding: .875rem 1rem;
        text-align: center;
    }
}

/* --- Eyebrow labels (echo the logo's rule-flanked lockup) --- */

.sr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    font-family: var(--sr-font);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--sr-olive);
}
.sr-eyebrow::before,
.sr-eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--sr-sage);
}
.sr-eyebrow--light {
    color: var(--sr-sage);
}
.sr-eyebrow--start::before {
    display: none;
}

/* --- Section headings --- */

.sr-section-heading {
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    margin-bottom: 1rem;
}
.sr-section-lead {
    max-width: 640px;
    color: #4b544e;
    font-size: 1.0625rem;
    margin-bottom: 1.5rem;
}

/* --- Page hero band --- */

.sr-page-hero {
    position: relative;
    background-color: var(--sr-forest);
}
.sr-page-hero--image {
    background-size: cover;
    background-position: center;
}
.sr-page-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(21, 34, 24, .85), rgba(21, 34, 24, .55));
}
.sr-page-hero-title {
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin-bottom: .5rem;
}
.sr-page-hero-subtitle {
    color: var(--sr-cream);
    opacity: .92;
    max-width: 640px;
    font-size: 1.0625rem;
    margin-bottom: 0;
}

/* --- Breadcrumbs --- */

.sr-breadcrumbs {
    margin-bottom: 1.25rem;
    font-size: .8125rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sr-breadcrumbs a {
    color: var(--sr-sage);
    text-decoration: none;
}
.sr-breadcrumbs a:hover,
.sr-breadcrumbs a:focus {
    color: #fff;
}
.sr-crumb-sep {
    margin: 0 .5rem;
    color: rgba(246, 238, 236, .4);
}
.sr-crumb-current {
    color: var(--sr-cream);
}

/* --- Service cards --- */

.sr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(21, 34, 24, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sr-card:hover,
.sr-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(21, 34, 24, .12);
}
.sr-card-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sr-cream);
}
.sr-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.sr-card:hover .sr-card-media img,
.sr-card:focus-within .sr-card-media img {
    transform: scale(1.05);
}
.sr-card-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--sr-sage);
    font-size: 3rem;
}
.sr-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: .5rem;
    padding: 1.5rem;
}
.sr-card-title {
    font-size: 1.3125rem;
    margin: 0;
}
.sr-card-title a {
    color: var(--sr-forest);
    text-decoration: none;
}
.sr-card-summary {
    flex-grow: 1;
    margin: 0;
    color: #4b544e;
    font-size: .9375rem;
}
.sr-card-link {
    color: var(--sr-olive);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.sr-card-link i {
    display: inline-block;
    transition: transform .25s ease;
}
.sr-card:hover .sr-card-link i,
.sr-card:focus-within .sr-card-link i {
    transform: translateX(4px);
}
.sr-card--featured {
    border-top: 3px solid var(--sr-olive);
}
.sr-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: .35rem .75rem;
    background: var(--sr-forest);
    color: var(--sr-cream);
    font-size: .6875rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* --- CTA band --- */

.sr-cta {
    position: relative;
    overflow: hidden;
}
.sr-cta-title {
    color: #fff;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: .75rem;
}
.sr-cta-text {
    max-width: 620px;
    margin-bottom: 1.75rem;
    color: var(--sr-cream);
    opacity: .9;
}

/* --- Brand watermark motif --- */

/* Any section using the watermark must position and clip it itself,
   or the rotated mark bleeds past the viewport (horizontal overflow). */
section:has(> .sr-watermark) {
    position: relative;
    overflow: hidden;
}
.sr-watermark {
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 380px;
    height: 380px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .07;
    transform: rotate(-8deg);
    pointer-events: none;
}
.sr-watermark--cream {
    background-image: url("../../assets/img/sr-icon-forest.svg");
}
.sr-watermark--forest {
    background-image: url("../../assets/img/sr-icon-cream.svg");
}

/* --- Service area --- */

.sr-service-area {
    position: relative;
    overflow: hidden;
}
.sr-town-list {
    max-width: 720px;
    margin: 0 auto 1rem;
    gap: .5rem;
}
.sr-town-pill {
    padding: .45rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(21, 34, 24, .12);
    color: var(--sr-forest);
    font-size: .875rem;
    letter-spacing: .5px;
    transition: border-color .25s ease, background-color .25s ease;
}
.sr-town-pill:hover {
    border-color: rgba(99, 108, 63, .5);
    background: var(--sr-cream);
}
.sr-service-area-note {
    color: #4b544e;
    font-size: .9375rem;
}

/* --- Footer --- */

#footer-widgets {
    background-color: var(--sr-forest);
    color: var(--sr-cream);
}
/* Align footer content with the site's .container grid */
#footer-widgets .container-fluid {
    max-width: 1320px;
    margin-inline: auto;
}
/* Four equal columns; 2-up on tablet, stacked on phones */
#footer-widgets .col {
    flex: 0 0 25%;
    max-width: 25%;
}
@media (max-width: 991.98px) {
    #footer-widgets .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 575.98px) {
    #footer-widgets .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
#footer-widgets .widget-title,
#footer-widgets h2, #footer-widgets h3, #footer-widgets h4 {
    color: #fff;
    font-size: 1.0625rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
#footer-widgets a {
    color: var(--sr-cream);
    text-decoration: none;
}
#footer-widgets a:hover,
#footer-widgets a:focus {
    color: #fff;
    text-decoration: underline;
}
#footer-widgets ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
#footer-widgets li {
    margin-bottom: .5rem;
}
.sr-footer-logo {
    max-width: 220px;
    height: auto;
}
footer.sr-bg-forest,
footer.sr-bg-forest a {
    color: rgba(246, 238, 236, .75);
}
footer.sr-bg-forest {
    border-top: 1px solid rgba(246, 238, 236, .12);
    font-size: .875rem;
}
footer.sr-bg-forest a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
footer.sr-bg-forest a:hover,
footer.sr-bg-forest a:focus {
    color: #fff;
}

/* --- Scroll reveal --- */

/* Hiding is gated behind html.sr-anim (inline head script, inc/setup.php):
   without JS + IntersectionObserver + motion allowed, nothing is hidden. */
html.sr-anim .sr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--sr-reveal-delay, 0ms);
}
html.sr-anim .sr-reveal.sr-in {
    opacity: 1;
    transform: none;
}

/* --- Motion safety --- */

@media (prefers-reduced-motion: reduce) {
    .sr-card,
    .sr-card:hover,
    .sr-card:focus-within,
    .btn,
    .sr-card-media img,
    .sr-card-link i,
    .sr-town-pill {
        transition: none;
        transform: none;
    }
    /* Covers the OS setting flipping after the head gate already ran. */
    html.sr-anim .sr-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}