/* ==========================================================================
   BS5 Mobile Fixes — GRACIE'S FILE (≤575px portrait)
   ==========================================================================
   Lane: gracie-mobile. Keep ALL mobile rules here, never in header.php.
   Scoped rules only. Backup before editing; claim via website-lock.sh.

   FIX 1 (Aug 5, 2026): .mobile-getaprice — "Get A Price" heading + gold
   "Get a Free Quote" button were leaning LEFT on BS5 mobile. Base style.css
   sets text-align:center on the parent but it isn't being honored, so we
   force centering on every child. Button keeps its overlay (margin-bottom).
   ========================================================================== */

@media (max-width: 575.98px) {

    .mobile-getaprice,
    .mobile-getaprice .container,
    .mobile-getaprice > div {
        text-align: center !important;
    }

    .mobile-getaprice h5 {
        text-align: center !important;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-getaprice .btn,
    .mobile-getaprice a.btn,
    .mobile-getaprice .btn.btn-primary {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: -10px;
        width: 40% !important;
        float: none !important;
    }

    /* Neutralize any inherited floats that push things left */
    .mobile-getaprice * {
        float: none !important;
    }

}

/* ==========================================================================
   R2.1 — reduce white space above the awards (Pulse of the City etc.)
   The .trust-logos has padding-top:45px; tighten it on mobile so the
   awards sit closer to the CTA paragraph above them.
   ========================================================================== */
@media (max-width: 767.98px) {
    .trust-logos {
        padding-top: 8px !important;
        margin-top: -15px !important;
    }
}

/* ==========================================================================
   R2.5 — social-proof 2x2 grid: make it symmetrical. Give EVERY item the
   transparent underline (border-bottom) so the right column (PATENTED,
   UNITED STATES) matches the left (30-YEAR, 10,000+), and center all cells.
   Base rule removes border-bottom on :nth-child(2) and :last-child; restore.
   Keep Bootstrap col-6 widths (equal 50% columns) — do NOT override row flex.
   ========================================================================== */
@media (max-width: 767.98px) {
    .social-proof-bar .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .social-proof-bar .sp-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        text-align: center !important;
    }
    .social-proof-bar .sp-item:last-child,
    .social-proof-bar .sp-item:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .social-proof-bar .sp-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   R2.6 — Brochure Download pop-out tab: shrink the TAB by 50% (84x200 -> 42x100)
   but KEEP the form (#brochureContent) at full size.
   ========================================================================== */
#brochureBtn {
    width: 42px !important;
    height: 100px !important;
}
@media (max-width: 575.98px) {
    #brochureBtn {
        width: 42px !important;
        height: 100px !important;
        background-size: 42px 100px !important;
    }
}

/* ==========================================================================
   R2.7 — hero caption readability: white bold headline + white subhead with
   a dark text-shadow so captions are readable on any hero photo.
   ========================================================================== */
.hero-slider-mobile .slide-overlay {
    text-align: left !important;
}
.hero-slider-mobile .slide-overlay .slide-heading {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9) !important;
    margin: 0 0 6px 0 !important;
}
.hero-slider-mobile .slide-overlay p {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
    margin: 0 !important;
}

/* ==========================================================================
   R3.1 — "Pulse of the City" award: lower it so it fits in its box with even
   spacing. Base style.css (.trust-logos img @ ≤992px) sets margin-top/bottom
   -25px, which yanks every award 25px ABOVE its box (Pulse overlaps the CTA
   text above it) and overlaps the next badge. Reset to 0 so each award sits
   inside its own box; let the column grow to the image height so spacing is
   even between all six badges.
   ========================================================================== */
@media (max-width: 767.98px) {
    .trust-logos img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
    }
    .trust-logos > [class*="col"] {
        height: auto !important;
        min-height: auto !important;
    }
    /* R4.4 — reduce the gap between the stacked awards by ~50%. The image
       canvases are 300x250 but each badge logo sits in a small center band,
       so the flush boxes read as wide gaps. Pull each award up with a negative
       bottom margin (keeps top margin 0 so the Pulse badge stays in its box). */
    .trust-logos > [class*="col"] {
        margin-bottom: -90px !important;
    }
    .trust-logos > [class*="col"]:last-child {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   R3.2 / R4.7 / R5.3 / R6.3 — top social media icons + LOCATIONS/phone in
   the top bar. The icons were leaking into the mobile top bar (header.php
   .top .col-sm-12>* forces display:inline-flex over the d-none wrapper) and
   overflowing — FB at x=-57, IG clipped. R3 shrank the row (34->27px, 12px
   text); R4.7 matched text height (24px + 14px); R5.3 bumped LOCATIONS/phone
   to 15px with 20px icons; R6.3 drops icons to 15px to MATCH the text size
   and centers them vertically on the text midpoint (was riding 7px high).
   ========================================================================== */
@media (max-width: 575.98px) {
    .navbar-static-top .top a.social-icon-circle,
    .navbar-static-top .top .social-icon-circle {
        width: 20px !important;
        height: 20px !important;
        margin: 0 2px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        vertical-align: middle !important;
    }
    .navbar-static-top .top a.social-icon-circle svg,
    .navbar-static-top .top .social-icon-circle svg {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }
    .navbar-static-top .top .topLeft,
    .navbar-static-top .top .topLeft a {
        font-size: 15px !important;
        line-height: 20px !important;
    }
    .navbar-static-top .top .divi {
        padding: 0 4px !important;
        line-height: 20px !important;
    }
    .navbar-static-top .top .col-sm-12 {
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .navbar-static-top .top .col-sm-12 > * {
        align-items: center !important;
    }
    /* R6-3 v2: the icon wrapper span (d-none d-sm-block) defaults to
       flex-start (header.php forces display:inline-flex on children, which
       beats align-items:center on the bar). Force it to center so the icons
       sit on the same vertical centerline as the LOCATIONS/phone text. */
    .navbar-static-top .top .col-sm-12 > .d-none.d-sm-block,
    .navbar-static-top .top .col-sm-12 > span.d-none.d-sm-block {
        align-self: center !important;
    }
}

/* ==========================================================================
   R3.7 / R4.2 — Testimonials: homeowner name left-hand justified. TWO
   locations use different markup:
   (a) Homepage testimonials carousel wraps the name in a col-sm-10
       text-center container -> the <small> name must be left-aligned.
   (b) Testimonials PAGE (post-313) renders each quote + name inline in a
       single <p> ("…quote…" <strong><em>Name – State</em></strong>); the name
       is inline so it floats at the quote's wrap point (centered-ish x=154-234).
       Force it onto its own left-justified line.
   ========================================================================== */
@media (max-width: 767.98px) {
    .swiper-testimonials .swiper-slide small {
        text-align: left !important;
        display: block !important;
    }
}
.page-id-313 .entry-content p,
body.page-id-313 .entry-content p {
    text-align: left !important;
}
.page-id-313 .entry-content p strong,
body.page-id-313 .entry-content p strong,
.page-id-313 .entry-content p strong > em,
body.page-id-313 .entry-content p strong > em {
    display: block !important;
    text-align: left !important;
    margin-top: 2px !important;
}
/* R7 — some testimonial names render as <em><strong>Name</strong></em>
   (em OUTSIDE strong — Craig B., Julie B., L. Schultz) vs the more common
   <strong><em>Name</em></strong>. The wrapper <em> stayed inline, so those
   names floated at the end of the quote instead of on their own line. */
.page-id-313 .entry-content p em:has(> strong),
body.page-id-313 .entry-content p em:has(> strong) {
    display: block !important;
    text-align: left !important;
    margin-top: 2px !important;
}

/* R5.2 — Testimonials page states list: force 2 columns on mobile like
   production. BS5 dropped the BS3 .col-xs-6 class, so the state cells
   (col-sm-3 col-xs-6) render at 1/3 width instead of 2-up. */
@media (max-width: 767.98px) {
    .page-id-313 .entry-content .row .col-sm-3,
    body.page-id-313 .entry-content .row .col-sm-3,
    .page-id-313 .entry-content .row .col-xs-6,
    body.page-id-313 .entry-content .row .col-xs-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ==========================================================================
   R8.1 — Mobile menu (mmenu): bold + consistent navy/white theme.
   Jeffrey (iPhone): top-level menu font is blue; dropdown renders black-on-white
   (inconsistent). Force the whole mobile menu to the site brand navy #102961
   with bold white links — top-level AND dropdown submenus — matching the
   LOCATIONS/phone look. Overrides mmenu's default light-gray theme.
   ========================================================================== */
#mobile-menu.mm-menu,
#mobile-menu.mm-menu .mm-panels > .mm-panel,
#mobile-menu.mm-menu .mm-panels > .mm-panel.mm-hasnavbar {
    background: #102961 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.15) !important;
}
#mobile-menu.mm-menu .mm-panel,
#mobile-menu.mm-menu .mm-panel a,
#mobile-menu.mm-menu .mm-panel li,
#mobile-menu.mm-menu .mm-panel span {
    color: #ffffff !important;
}
#mobile-menu.mm-menu .mm-listview > li > a,
#mobile-menu.mm-menu .mm-listview > li > span,
#mobile-menu.mm-menu .mm-navbar .mm-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}
/* Dropdown / submenu items — same navy bg, white bold text */
#mobile-menu.mm-menu .mm-listview > li.mm-opened > .mm-panel,
#mobile-menu.mm-menu .mm-listview .mm-panel,
#mobile-menu.mm-menu .mm-panel .dropdown-menu,
#mobile-menu.mm-menu .mm-panel .dropdown-menu a,
#mobile-menu.mm-menu .mm-panel .sub-menu,
#mobile-menu.mm-menu .mm-panel .sub-menu a {
    background: #102961 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
/* menu icon arrows on navy */
#mobile-menu.mm-menu .mm-btn:after,
#mobile-menu.mm-menu .mm-btn:before,
#mobile-menu.mm-menu .mm-arrow:after,
#mobile-menu.mm-menu .mm-next:after {
    border-color: #ffffff !important;
}

/* ==========================================================================
   R8.2 — Testimonials carousel arrows: match the photo carousel style.
   The homepage photo (gallery) carousel uses gold arrows on navy circles
   (.gallery-swiper rules in footer.php); the testimonials swiper has no
   override so it renders Swiper's default blue arrows. Mirror the gallery
   style onto .swiper-testimonials so both are consistent.
   ========================================================================== */
.swiper-testimonials .swiper-button-next,
.swiper-testimonials .swiper-button-prev {
    color: #C8963E !important;
    z-index: 20 !important;
    width: 48px !important;
    height: 48px !important;
    margin-top: -24px !important;
    background: rgba(16,41,97,0.7);
    border-radius: 50%;
    transition: background 0.2s;
}
.swiper-testimonials .swiper-button-next:hover,
.swiper-testimonials .swiper-button-prev:hover {
    background: rgba(16,41,97,0.9);
}
.swiper-testimonials .swiper-button-next:after,
.swiper-testimonials .swiper-button-prev:after {
    font-size: 28px !important;
    font-weight: bold;
}

/* ==========================================================================
   R8.2 (Aug 31 follow-up) — MENU word in the mobile header should be BOLD
   so Jeffrey can review it aesthetically. The .mobile-phone link is already
   800; the "MENU" trigger (mobile-header-item link to #mobile-menu) has no
   weight (400). Bold it to match the phone's visual weight.
   ========================================================================== */
.mobile-header-item a[href="#mobile-menu"],
.mobile-header-item a[href*="mobile-menu"] {
    font-weight: 800 !important;
}

/* ==========================================================================
   R8.2 (Aug 31 follow-up) — Item 3: 2nd-level dropdown lines must be fully
   WHITE, no blue on the far-left. Headless already renders white-on-navy, but
   Jeffrey's iPhone shows blue on the left of each line. Harden the rule to
   also cover .dropdown-item (Bootstrap default is a blue link color) and the
   mm-prev back button + arrows, so every element in the submenu panel is white.
   ========================================================================== */
#mobile-menu.mm-menu .mm-panel .dropdown-item,
#mobile-menu.mm-menu .mm-panel .dropdown-menu .dropdown-item,
#mobile-menu.mm-menu .mm-panel .mm-listview > li > a.dropdown-item {
    color: #ffffff !important;
    font-weight: 700 !important;
}
/* mm-prev back button + navbar title in submenu — white */
#mobile-menu.mm-menu .mm-panel .mm-navbar .mm-btn,
#mobile-menu.mm-menu .mm-panel .mm-navbar .mm-title {
    color: #ffffff !important;
}
/* any left-positioned arrow/chevron in submenu — white */
#mobile-menu.mm-menu .mm-panel .mm-btn:after,
#mobile-menu.mm-menu .mm-panel .mm-btn:before,
#mobile-menu.mm-menu .mm-panel .mm-arrow:after,
#mobile-menu.mm-menu .mm-panel .mm-next:after {
    border-color: #ffffff !important;
}