/* =============================================================
 * auto-fixes.css — BS5 Desktop Visual Reconciliation
 * Generated from computed-style comparison at 1400px
 * Prod vs Sandbox: header/navbar/social/font matching
 * ============================================================= */

/* Fix 1: Social icon circles — match production 42px diameter (ALL widths) */
a.social-icon-circle {
    width: 42px !important;
    height: 42px !important;
    margin: 0 4px !important;
    line-height: 42px !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix 2: Desktop navbar container height — match production 40px */
@media (min-width: 1200px) {
    nav.navbar.navbar-default {
        height: 40px !important;
        min-height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Fix 3: Nav link styling — match production spacing & sizing */
@media (min-width: 1200px) {
    .navbar-default .navbar-nav > li > a {
        padding: 10px 15px !important;
        font-size: 12px !important;
        line-height: 20px !important;
    }
}

/* Fix 4: Section heading (GET A PRICE ON YOUR NEW GUTTERDOME) — reduce size */
@media (min-width: 1200px) {
    h2 {
        font-size: 30px !important;
    }
}

/* Fix 5: Phone number color — match production gold #c8963e */
@media (min-width: 1200px) {
    a[href^="tel:"] {
        color: #c8963e !important;
        font-weight: 700 !important;
    }
}

/* Fix 6: Section heading top margins — match production 10px top margin */
/* Broad h4 rule applies to all, then sidebar cards get margin-top: 0 override */
@media (min-width: 1200px) {
    h4 {
        margin-top: 10px !important;
    }
    /* Sidebar card headings (Specials/Financing inside list items) — keep at 0 */
    li h4,
    .caption-text h4 {
        margin-top: 0 !important;
    }
}

/* Fix 7: "Professional Installations" footer heading margin — match production 10px vertical */
@media (min-width: 1200px) {
    .site-footer h4,
    footer h4,
    .footer-bottom h4 {
        margin: 10px 0 !important;
    }
}

/* ── Aug 5, 2026: Testimonials text cut off on tablet landscape ──
   phase4-landscape.css forces `p { width: 668px !important }` globally at
   992-1199px, which clips testimonial paragraphs inside the ~387px swiper
   slides (overflow:hidden). Scope testimonial paragraphs back to their
   slide width. Main content paragraph width (668px) untouched. */
.swiper-testimonials p {
    width: auto !important;
}

/* ── Aug 5, 2026: Subpage hero banner h2 too small at desktop ──
   Fix 4 above (h2{font-size:30px!important} @ >=1200px) clobbers the
   #page-slider banner h2, which must stay 60px to match production
   (#page-slider h2{3.75rem} in style.css). Restore it at desktop only. */
@media (min-width: 1200px) {
    #page-slider h2 {
        font-size: 60px !important;
    }
}

/* ── Aug 5, 2026: Contact page testimonials-swiper overflows viewport ──
   phase4-landscape.css sets `div.swiper { width:auto !important }`, which in
   the flex `aside.trust-panel` makes .testimonials-swiper size to its content
   and blow up to 2150px+ (runs off the right edge; slide text parked off-screen).
   Constrain the swiper to its container. */
.testimonials-swiper {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Aug 5, 2026: Issue 1 — testimonial slide paragraph overflow (contact page) ──
   phase4-landscape.css `p{width:668px!important}` forces slide paragraphs outside
   their ~378px slide (clipped by swiper overflow:hidden). Override inside the
   testimonials swiper. (Replaces the non-matching .swiper-testimonials p rule.) */
.testimonials-swiper p,
.testimonial-card p {
    width: auto !important;
}

/* Let testimonials swiper fill the trust-panel at tablet widths (match prod ~426px) */
@media (max-width: 991.98px) {
    .testimonials-swiper {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ── Aug 5, 2026: Issue 2 — two-col grid / form-card responsive widths ──
   Scoped to contact page (page-id-315) so other pages are untouched.
   Part A: override phase4's forced 910px entry-content at 992-1199px.
   Part B: let entry-content grow with viewport at 1200px+ (match prod BS3).
   Part C: flex the two-col first column (form-card) to fill remaining space. */
@media (min-width: 992px) and (max-width: 1199px) {
    body.page-id-315 .entry-content {
        width: auto !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 1200px) {
    body.page-id-315 .entry-content {
        max-width: 1170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
.two-col {
    grid-template-columns: 1fr 380px !important;
}
@media (max-width: 991.98px) {
    .two-col {
        grid-template-columns: 1fr !important;
    }
    .two-col > * {
        grid-column: auto !important;
    }
}

/* R3.8 — Get a Price captcha cut off. The Wufoo embed iframe is hardcoded
   height="460", which clips the reCAPTCHA ("I'm not a robot") at the bottom.
   Match the contact page's form iframe height (600px) so the captcha shows. */
iframe[title="Get a Price Form"],
iframe[src*="z1meuq8i0zvk84l"] {
    height: 600px !important;
}

/* R3.5 — AI Chat (Tawk.to) popup circle: reduce 20%. Tawk hard-codes the
   bubble size inside its iframe, so we scale the widget down via CSS.
   transform: scale(0.8) on the tawk iframe/container shrinks the bubble
   (20% smaller) while keeping it anchored bottom-right. Verified selector
   from the tawk embed structure; harmless if the widget doesn't expose it. */
#tawkchat-iframe-container iframe,
#tawk-bubble,
.tawk-min-container,
iframe[title="chat widget"] {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important;
}

@media (min-width: 1400px) {
  nav.navbar { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 1400px) {
  #menu-item-dropdown-1611 { text-align: right; /* BS5-CONV v2 prod:right sand:start */ }
}

@media (min-width: 1400px) {
  a.nav-link { text-align: right; /* BS5-CONV v2 prod:right sand:start */ }
}

@media (min-width: 1400px) {
  #menu-item-dropdown-1611 { white-space: normal; /* BS5-CONV v2 prod:normal sand:nowrap */ }
}

@media (min-width: 1400px) {
  #menu-item-dropdown-377 { white-space: normal; /* BS5-CONV v2 prod:normal sand:nowrap */ }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  a.nav-link { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  a.dropdown-item { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #menu-item-dropdown-377 { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #menu-item-dropdown-377 { text-align: right; /* BS5-CONV v2 prod:right sand:start */ }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #menu-item-dropdown-1611 { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 1400px) {
  h2.entry-title { line-height: 28.6px; /* BS5-CONV v2 prod:28.6px sand:36px */ }
}

/* BS5-CONV v2 form-control sizing — match production (BS3) form fields (scoped to form containers) */
.wufoo-wrapper .form-control,
#form3369 .form-control, #form1965 .form-control, #form2001 .form-control {
  font-size: 14px !important;
  height: 34px !important;
  border-radius: 4px !important;
}

/* BS5-CONV v2 dma-landing H1 typography — match production (scoped to page-id-1284) */
body.page-id-1284 .entry-content h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 28.6px !important;
  margin-top: 17.42px !important;
  margin-bottom: 17.42px !important;
}

/* BS5-CONV v2 blog post-title typography — match production */
.blog .entry-title {
  font-size: 26px !important;
  line-height: 28.6px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

/* BS5-CONV v2 footer + top-bar + form-label + social typography — match production */
footer a {
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
}
.top a[href^='tel:'] {
  font-size: 18px !important;
  line-height: 27px !important;
  text-align: right !important;
  text-decoration: none !important;
}
.wufoo-wrapper label,
#form3369 label, #form1965 label, #form2001 label {
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}
a.social-icon-circle { font-weight: 400 !important; }

/* BS5-CONV v2 social-icon font-weight — match production 400 (scoped to beat .top a 800) */
.top a.social-icon-circle { font-weight: 400 !important; }

/* BS5-CONV v2 social-icon font-weight — match production 400.
   Winner was .navbar-static-top .top a {font-weight:800!important} (0,3,1).
   This ties it (0,3,1) and comes later in cascade. */
.navbar-static-top .top a.social-icon-circle { font-weight: 400 !important; }

/* BS5-CONV v2 blog full-width — neutralize v176 70/30 cap on blog page only, match production */
body.blog .site-content.container,
body.blog #primary,
body.blog #secondary {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  div.cta1 { text-align: center; /* BS5-CONV v2 prod:center sand:left */ }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  div.cta2 { text-align: center; /* BS5-CONV v2 prod:center sand:left */ }
}

@media (min-width: 1400px) {
  #Field14 { color: rgb(85, 85, 85); /* BS5-CONV v2 prod:rgb(85, 85, 85) sand:rgb(33, 37, 41) */ }
}

@media (min-width: 1400px) {
  #Field14 { line-height: normal; /* BS5-CONV v2 prod:normal sand:21px */ }
}

@media (min-width: 1400px) {
  .entry-content h1 { color: rgb(16, 41, 97); /* BS5-CONV v2 prod:rgb(16, 41, 97) sand:rgb(64, 64, 64) */ }
}

/* BS5-CONV v2 header topbar heights — match prod 125px so hero clears the nav (not cut by menu) */
.navbar-static-top > .container-fluid:first-of-type > .col-sm-3,
.navbar-static-top .top .col-sm-3 {
  min-height: 85px !important;
}
.navbar-static-top > .container-fluid:first-of-type > .col-sm-9,
.navbar-static-top .top .col-sm-9 {
  min-height: 55px !important;
}

/* BS5-CONV v2 contact hero — block row + 20px offset so hero clears nav (match prod) */
body.page-id-315 #page-slider,
body.page-id-315 .page-hero,
body.page-id-315 .hero {
  margin-top: 20px !important;
}

/* BS5-CONV v2 footer — locations column full-width below 992 (prod uses col-xs-12) */
@media (max-width: 991.98px) {
  footer .col-12.col-md-6.order-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  footer .locations-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* BS5-CONV v2 footer — "More Information and Articles" link font (prod 13px) */
footer .col-md-6.padding a {
  font-size: 13px !important;
  line-height: 19.5px !important;
}

/* BS5-FIX 20260825 — RETIRED Step 5 (t_3a8bf831): this stopgap restored .content-area.col-sm-9
   at ≤640 because the OLD v177 had a bare .col-sm-9{display:none} that nuked the main content
   column. v177 was reworked to scope that to .navbar-static-top .col-sm-9, so the content
   column is no longer hidden. Re-verified: subpage content col stays full-width ≤640 without it. */

/* BS5-FIX 20260825 — residual 390px overflow (+10px): the reworked v177 forces
   #homeheader>div>:nth-child(2){display:block!important;width:100%!important} (spec 1,0,2)
   which out-specificities the .captionDesktop{display:none!important} (0,1,0) when the desktop
   hero caption column IS the nth-child(2). Scoped override (1,1,0) wins and hides it on mobile,
   clearing the +10px overflow. */
@media (max-width: 640px) {
  #homeheader .captionDesktop {
    display: none !important;
  }
}

/* =============================================================
 * Desktop punchlist (Aug 27) — social icons: official brand containers
 * + glyph centering. The inline SVGs ARE the current official marks; the
 * flat solid-color CIRCLE container flattened Instagram's gradient and
 * forced LinkedIn (rounded-square) and YouTube (rounded-rectangle) into
 * circles. Also fixes the glyphs sitting 4px low — style.css sets
 * .social-icon-circle svg{position:relative;top:4px}.
 * Selectors key on the rendered aria-label (exact case: Instagram,
 * LinkedIn, YouTube). FB + X keep their circles.
 * ============================================================= */
/* Center the glyph vertically in the circle (kill the top:4px offset) */
.social-icon-circle svg { top: 0 !important; }
/* Instagram — official multicolor gradient background, not flat pink */
a.social-icon-circle[aria-label="Instagram"] {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  background-color: transparent !important;
}
/* LinkedIn — official mark is "in" on a blue rounded SQUARE */
a.social-icon-circle[aria-label="LinkedIn"] { border-radius: 6px !important; }
/* YouTube — official mark is a red rounded RECTANGLE */
a.social-icon-circle[aria-label="YouTube"] { border-radius: 10px !important; }

/* =============================================================
 * Header geometry — match PRODUCTION (Bill's desktop/landscape lane,
 * Aug 27). Sandbox header was 125px with the nav wrapped ~30px below
 * the logo (migration flex-wrap), leaving a dead band between the
 * social icons and the menu bar. Prod = 95px, nav sits at 55 right
 * below the icons. Measured prod@1280: header 95, nav 55-95. Verified
 * this override reproduces prod exactly (nav_top=55, header=95).
 * Coupled: sticky-form top restored to 95px (was 125 for the old
 * 125px header) in header.php.
 * Scoped to >=992px (desktop + landscape tablet) — mobile (<992) keeps
 * its own stacked header layout; forcing 95px there would clip the menu.
 * ============================================================= */
@media (min-width: 992px) {
  .navbar-static-top { height: 95px !important; }
  .navbar-static-top .col-sm-12.col-md-9 { margin-top: -30px !important; }
}

/* =============================================================
 * Homepage hero — kill the dead band below the nav at landscape/
 * tablet (Bill's lane, Aug 27). `.navbar-static-top` is only
 * position:fixed at >=1200px; below that it's static (in-flow), so
 * BS5-MIG v175's #homeheader{padding-top:95px} (meant to clear a
 * fixed header) double-offsets and leaves a ~95px gap between the
 * menu bar and the hero slider at 768-1199px. Prod has no such
 * padding; the hero sits right below the in-flow header. This removes
 * the padding only where the header is in-flow (<1200px). Desktop
 * (>=1200, header fixed) keeps the padding — unchanged.
 * Verified by injection: hero 190->95 at 768/992/1067 (= nav bottom),
 * 1280 unchanged.
 * ============================================================= */
@media (max-width: 1199.98px) {
  body #homeheader { padding-top: 0 !important; }
}

/* =============================================================
 * Subpage header (contact + all subpages) — SPECIALS/FINANCING box
 * width at landscape (Bill's lane, Aug 27). `#page-slider` is
 * col-lg-10 col-sm-8 and `#cta-internal` is col-sm-4 col-md-4 col-lg-2.
 * BS5 activates col-lg at >=992 while BS3 waits for >=1200, so at
 * 992-1199px the sandbox jumped to the lg ratio (hero 83% / box 17%)
 * that prod only uses at >=1200. Prod at 992-1199 = hero 66% / box 33%.
 * Verified vs prod: this override reproduces prod exactly (box 356px,
 * hero 711px at 1067). Desktop >=1200 untouched.
 * ============================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #page-slider { flex: 0 0 66.6667% !important; max-width: 66.6667% !important; }
  #cta-internal { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}


/* =============================================================
 * R8 (Aug 31) — Jeffrey mobile-lane punch list follow-ups.
 * Items cross both lanes but all land on BS5 sandbox.
 * ============================================================= */

/* R8.1 — Item 2: LOCATIONS link was underlined while the phone number
   (a[href^="tel:"]) is not (auto-fixes sets it text-decoration:none).
   Make LOCATIONS match the phone — no underline, same top-bar treatment. */
.navbar-static-top .top .topLeft a,
.navbar-static-top .top .topLeft a[href],
.navbar-static-top .top a[href*="locations"],
.navbar-static-top .top a[href^="http"] {
    text-decoration: none !important;
}

/* R8.2 — Item 4: social icon shape must be CIRCLES for all five brands.
   The Aug 27 official-logo pass gave LinkedIn a 6px rounded square and
   YouTube a 10px rounded rect to mimic their brand marks, but Jeffrey
   wants all five as circles. Force 50% on LinkedIn + YouTube (FB/X/IG
   already circles). Colors stay (Jeffrey confirmed colors match logos). */
a.social-icon-circle[aria-label="LinkedIn"] { border-radius: 50% !important; }
a.social-icon-circle[aria-label="YouTube"] { border-radius: 50% !important; }

/* R8.3 — Item 7: desktop hero slide-heading must match mobile = WHITE.
   The base .slide-heading rule (header.php) sets color:#404040 (dark gray),
   which reads "funky" over the hero photos at desktop. Mobile is white via
   mobile-fixes.css. Bring desktop to white + bolder so it matches mobile. */
.hero-slider-desktop .slide-heading {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9) !important;
}
.hero-slider-desktop .slide-overlay p {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
}