/* ==========================================================================
   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.
   ========================================================================== */
@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;
}


/* ==========================================================================
   CHUCK-FIXES — 2026-09-10 (design punchlist #6 + #5, staging)
   #6  Touch targets: MENU / phone / LOCATIONS measured 20-24px tall on
       phones (WCAG 2.5.5 minimum is 44px). Expand the HIT AREA with a
       transparent ::after overlay instead of padding, so the header keeps
       its exact current layout and visual size — only the tappable region
       grows to >=44px.
   #5  Product comparison table: 6 columns squeezed to 57px/col at 390px.
       Below 768px let the table scroll inside its own box at natural
       column widths instead of crushing the cells.
   ========================================================================== */

/* ---- #6 tap targets (phones + small tablets) ---- */
@media (max-width: 767.98px) {
  .mobile-header-item > a,
  .top .topLeft a {
    position: relative;
  }
  .mobile-header-item > a::after,
  .top .topLeft a::after {
    content: "";
    position: absolute;
    top: -13px; bottom: -13px; left: -8px; right: -8px;
    min-height: 44px;
  }
}

/* ---- #5 comparison / wide tables scroll instead of crushing ---- */
@media (max-width: 767.98px) {
  .entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content table th,
  .entry-content table td {
    white-space: nowrap;
  }
}

/* ============================================================
   PERF — MOBILE HERO PAINTS BEFORE SWIPER BOOTS (2026-09-21)
   Source: Dagny, weekly CWV report 2026-09-21, item 1 (staging only).
   On phones the LCP element is the FIRST .hero-slider-mobile slide
   (inline-style background gallery1.webp). auto-fixes.css v167 hides
   every slide until Swiper adds .swiper-initialized, so the hero cannot
   paint until that script lands — mobile-homepage LCP 12.8s.
   Fix: slide 1 (and its overlay) stays visible pre-init; the rest stay
   hidden exactly as before. Height is already explicit
   (style.css: .hero-slider-mobile { height:300px }), so nothing shifts.
   DESKTOP UNTOUCHED — the .hero-slider-desktop half of v167 is left alone
   (desktop LCP is already 1.6s; this is a phone-only fix).
   REVERT = delete this block.
   ============================================================ */
.hero-slider-mobile:not(.swiper-initialized) .swiper-slide:first-child,
.hero-slider-mobile:not(.swiper-initialized) .swiper-slide:first-child .slide-overlay { display:block !important }
.hero-slider-mobile:not(.swiper-initialized) .swiper-slide:not(:first-child),
.hero-slider-mobile:not(.swiper-initialized) .swiper-slide:not(:first-child) .slide-overlay { display:none !important }