/* ==========================================================================
   Header: top bar + nav row
   Mobile-first. Loaded after styles.css (see load_styles() in functions.php),
   so it overrides the legacy nav rules there without editing that file.
   ========================================================================== */

:root {
    --sp-green: #5c9739;
    --sp-green-dark: #4b7d2c;  /* nav row: white text passes AA at 4.9:1 */
    --sp-charcoal: #333438;
    --sp-tint: #f2f4f1;        /* awards strip background */
    --sp-white: #fff;
    --sp-font-body: "Poppins", sans-serif;
    --sp-font-display: "BebasNeue-Regular", Arial, sans-serif;
}

.sp-header a:focus-visible,
.sp-header button:focus-visible {
    outline: 2px solid var(--sp-white);
    outline-offset: 2px;
}

/* Top bar
   ========================================================================== */

.sp-topbar {
    background: var(--sp-charcoal);
    color: var(--sp-white);
    font-family: var(--sp-font-body);
}

.sp-topbar a {
    color: var(--sp-white);
    text-decoration: none;
}

.sp-topbar a:hover {
    color: var(--sp-white);
    text-decoration: underline;
}

.sp-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.sp-topbar__links {
    display: flex;
    align-items: center;
}

.sp-topbar__links a {
    display: none;
    font-size: 14px;
}

.sp-topbar__links .sp-topbar__areas {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
}

.sp-topbar__call {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.sp-topbar__label {
    display: none;
    font-size: 14px;
}

.sp-topbar__phone {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-family: var(--sp-font-display);
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1;
}

@media (min-width: 768px) {
    .sp-topbar__inner {
        justify-content: space-between;
    }

    .sp-topbar__links a,
    .sp-topbar__links .sp-topbar__areas {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .sp-topbar__links a + a::before {
        content: "";
        width: 4px;
        height: 4px;
        margin: 0 12px;
        border-radius: 50%;
        background: currentColor;
    }

    .sp-topbar__label {
        display: inline;
    }

    .sp-topbar__phone {
        min-height: 44px;
        font-family: var(--sp-font-body);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
    }
}

@media (min-width: 992px) {
    .sp-topbar__links a,
    .sp-topbar__links .sp-topbar__areas,
    .sp-topbar__phone {
        min-height: 36px;
    }
}

/* Nav row
   ========================================================================== */

.sp-navrow {
    background: var(--sp-green-dark);
    font-family: var(--sp-font-body);
}

.sp-navrow__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
}

.sp-logo {
    display: block;
    flex-shrink: 0;
}

.sp-logo img {
    display: block;
    width: auto;
    height: 52px;
}

/* Desktop menu: hidden until xl, where Bootstrap expands #navbarNavDropdown. */
.sp-nav {
    display: none;
}

.sp-navrow__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.sp-navrow__bbb {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.sp-navrow__bbb img {
    display: block;
    width: auto;
    height: 36px;
}

.sp-btn-contact {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid var(--sp-charcoal);
    border-radius: 4px;
    background: var(--sp-charcoal);
    color: var(--sp-white);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.sp-btn-contact:hover {
    background: var(--sp-white);
    color: var(--sp-charcoal);
    text-decoration: none;
}

.sp-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--sp-white);
    cursor: pointer;
}

.sp-menu-toggle__close,
.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__open {
    display: none;
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__close {
    display: block;
}

@media (min-width: 769px) {
    .sp-navrow__bbb img {
        height: 40px;
    }

    .sp-btn-contact {
        display: inline-flex;
    }
}

@media (min-width: 1200px) {
    /* Bootstrap's 1140px container leaves 715px for a menu that needs 823px,
       so the header widens to the theme's 1480px+ container width. */
    .sp-header .container,
    .sp-hero .container,
    .sp-reviews .container,
    .sp-awards .container {
        max-width: 1440px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .sp-navrow__inner {
        min-height: 90px;
    }

    .sp-logo img {
        height: 60px;
    }

    .sp-nav {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-self: stretch;
        padding: 0;
    }

    .sp-nav .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 7px;
        color: var(--sp-white);
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
    }

    .sp-nav .navbar-nav .nav-link:hover,
    .sp-nav .navbar-nav .show > .nav-link,
    .sp-nav .navbar-nav .active > .nav-link {
        color: var(--sp-white);
        box-shadow: inset 0 -4px 0 var(--sp-white);
    }

    .sp-nav .navbar-nav .nav-link:focus-visible {
        outline-offset: -4px;
    }

    .sp-nav #navbarNavDropdown,
    .sp-nav #navbarNavDropdown .navbar-nav,
    .sp-nav #navbarNavDropdown .nav-item {
        height: 100%;
    }

    .sp-nav #navbarNavDropdown {
        justify-content: center;
    }

    .sp-nav #navbarNavDropdown .dropdown-menu {
        top: 100%;
        margin-top: 0;
        padding: 8px 0;
        border: 0;
        border-radius: 0 0 4px 4px;
        background: var(--sp-charcoal);
    }

    .sp-nav .dropdown-item {
        padding: 10px 20px;
        color: var(--sp-white);
        font-size: 15px;
    }

    .sp-nav .dropdown-item:hover,
    .sp-nav .dropdown-item:focus {
        background: var(--sp-green-dark);
        color: var(--sp-white);
    }

    .sp-menu-toggle {
        display: none;
    }
}

/* Not enough room for the badge beside the full menu (in Poppins) until 1320px. */
@media (min-width: 1200px) and (max-width: 1319px) {
    .sp-navrow__bbb {
        display: none;
    }
}

/* Mobile menu panel (below xl)
   ========================================================================== */

/* Keeps the .navbar class so Bootstrap skips Popper and dropdowns open in place. */
.sp-mobile-nav.navbar {
    display: block;
    padding: 0;
    background: var(--sp-charcoal);
}

.sp-mobile-nav .navbar-nav {
    flex-direction: column;
    padding: 8px 0 16px;
}

.sp-mobile-nav #navbarNavDropdown2 li {
    margin-right: 0;
}

.sp-mobile-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--sp-white);
    font-size: 17px;
    font-weight: 700;
}

.sp-mobile-nav .nav-link:hover {
    color: var(--sp-white);
}

.sp-mobile-nav .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    padding: 4px 0 8px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sp-mobile-nav #navbarNavDropdown2 .dropdown-menu {
    margin-top: 0 !important;
}

.sp-mobile-nav .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    color: var(--sp-white);
    font-size: 16px;
    white-space: normal;
}

.sp-mobile-nav .dropdown-item:hover,
.sp-mobile-nav .dropdown-item:focus {
    background: transparent;
    color: var(--sp-white);
    text-decoration: underline;
}

@media (min-width: 1200px) {
    .sp-mobile-nav.navbar {
        display: none;
    }
}

/* Hero (front page)
   Mobile: text on a solid charcoal panel, then the photo, then full-width buttons.
   769px+: photo fills the band behind a left-hand scrim with the text on top.
   ========================================================================== */

.sp-hero {
    display: flex;
    flex-direction: column;
    background: var(--sp-charcoal);
    color: var(--sp-white);
    font-family: var(--sp-font-body);
}

/* Lets the photo sit between the text and the buttons on mobile without duplicate markup. */
.sp-hero__inner {
    display: contents;
}

.sp-hero__content {
    order: 1;
    padding: 28px 15px 24px;
}

.sp-hero__media {
    order: 2;
    display: block;
    height: 220px;
}

.sp-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.sp-hero__actions {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 15px 28px;
}

.sp-hero__title {
    margin: 0 0 12px;
    color: var(--sp-white);
    font-family: var(--sp-font-display);
    font-size: 40px;
    font-weight: normal;
    line-height: 1.05;
    letter-spacing: 0.5px;
}

.sp-hero__sub {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
}

.sp-hero__checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-hero__checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.sp-hero__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--sp-green);
}

.sp-hero__checks a {
    color: var(--sp-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-hero__checks a:hover {
    color: var(--sp-white);
    text-decoration: none;
}

.sp-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 2px solid var(--sp-white);
    border-radius: 4px;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.sp-hero__btn:hover {
    text-decoration: none;
}

.sp-hero__btn:focus-visible {
    outline: 2px solid var(--sp-white);
    outline-offset: 3px;
}

.sp-hero__btn--primary {
    border-color: var(--sp-green-dark);
    background: var(--sp-green-dark);
    color: var(--sp-white);
}

.sp-hero__btn--primary:hover {
    border-color: var(--sp-white);
    background: var(--sp-white);
    color: var(--sp-green-dark);
}

.sp-hero__btn--outline {
    background: transparent;
    color: var(--sp-white);
}

.sp-hero__btn--outline:hover {
    background: var(--sp-white);
    color: var(--sp-charcoal);
}

@media (min-width: 769px) {
    .sp-hero {
        position: relative;
        display: block;
        min-height: 380px;
    }

    .sp-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        /* Spec stops are 38% / 62%; the px floors keep the heavy part behind the 600px text column below ~1680px. */
        background: linear-gradient(90deg, rgba(20, 22, 24, 0.92) 0%, rgba(20, 22, 24, 0.85) max(38%, 640px), rgba(20, 22, 24, 0) max(62%, 880px));
    }

    .sp-hero__media {
        position: absolute;
        inset: 0;
        height: auto;
    }

    .sp-hero__inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height: 380px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .sp-hero__content {
        max-width: 600px;
        padding: 0;
    }

    .sp-hero__title {
        font-size: 48px;
    }

    .sp-hero__sub {
        font-size: 17px;
    }

    .sp-hero__checks {
        grid-template-columns: repeat(2, max-content);
    }

    .sp-hero__actions {
        flex-direction: row;
        margin-top: 24px;
        padding: 0;
    }
}

@media (min-width: 1280px) {
    .sp-hero,
    .sp-hero__inner {
        min-height: 450px;
    }
}

/* Review band (front page)
   ========================================================================== */

.sp-reviews {
    background: var(--sp-green-dark);
    color: var(--sp-white);
    font-family: var(--sp-font-body);
}

.sp-reviews__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.sp-reviews a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sp-white);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.sp-reviews a:hover {
    color: var(--sp-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-reviews a:focus-visible {
    outline: 2px solid var(--sp-white);
    outline-offset: 2px;
}

.sp-reviews__stars {
    display: inline-flex;
    gap: 2px;
    margin-right: 10px;
    color: #ffc000;  /* the theme's existing review-star yellow (styles.css) */
    font-size: 16px;
}

.sp-reviews .sp-reviews__bbb {
    display: none;
}

@media (min-width: 769px) {
    .sp-reviews__inner {
        justify-content: space-between;
    }

    .sp-reviews .sp-reviews__bbb {
        display: inline-flex;
    }
}

/* Awards strip (front page)
   ========================================================================== */

.sp-awards {
    padding: 16px 0 18px;
    border-bottom: 2px solid var(--sp-green);
    background: var(--sp-tint);
    font-family: var(--sp-font-body);
}

.sp-awards__title {
    margin: 0 0 12px;
    color: var(--sp-green-dark);
    font-family: var(--sp-font-display);
    font-size: 24px;  /* large text: #4b7d2c on the tint is 4.45:1, above the 3:1 AA bar */
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
}

.sp-awards__list {
    display: grid;
    justify-content: center;
    gap: 12px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.sp-awards__item {
    display: flex;
    align-items: center;
}

.sp-awards__tile {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    color: var(--sp-charcoal);
    text-decoration: none;
}

a.sp-awards__tile:hover {
    color: var(--sp-charcoal);
    text-decoration: none;
}

a.sp-awards__tile:hover .sp-awards__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.sp-awards__tile:focus-visible {
    outline: 2px solid var(--sp-charcoal);
    outline-offset: 4px;
}

.sp-awards__tile img {
    flex-shrink: 0;
    width: auto;
    height: 64px;
}

.sp-awards__tile .sp-awards__chip {
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--sp-green-dark);
}

.sp-awards__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sp-awards__label {
    font-size: 14px;
    font-weight: 600;
}

.sp-awards__sub {
    font-size: 13px;
}

@media (min-width: 769px) {
    .sp-awards__list {
        grid-template-columns: repeat(3, 1fr);
        justify-content: stretch;
        gap: 24px;
        max-width: 1200px;
    }

    .sp-awards__item {
        justify-content: center;
    }
}

/* PulseM chat: hide the auto-opening greeting bubble (avatar + "Text us here") but keep
   the launcher icon (.ContactBubble) and the chat panel it opens. */
.open-chat .Prompt {
    display: none !important;
}

/* PulseM's floating "17K Reviews" badge (footer.php embed) duplicates the review band here. */
.home review-widget {
    display: none !important;
}

/* Front page body: the old H1 became an H2 so the hero holds the page's only H1. */
#home-main .sp-h1-size {
    font-size: 3rem;
    font-weight: bold;
}