/* ============================================================
   OLU HVAC site-wide overrides.
   Loaded last in <head>, after every page's inline <style> blocks,
   so it wins specificity ties without needing !important on
   everything. Where existing per-page rules use !important, we
   match it.
   ============================================================ */

/* ── 1. HEADER NAV — scoped to .site-nav (added by apply-site-edits.py)
       Footer / in-page navs are NOT touched. */

body > nav.site-nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
}

body > nav.site-nav > .logo { justify-self: start; }
body > nav.site-nav > .nav-links { justify-self: center; display: flex; gap: 2px; }
body > nav.site-nav > .nav-cta { justify-self: end; }

/* Logo: tightly-cropped asset (no dome backdrop) renders cleanly on a
   white header with no visible artifacts. Size bumped a notch so the
   brand mark reads from across the room without bloating the header.
   Header itself stays at 110 px desktop. */
body > nav.site-nav .logo img.site-logo {
  height: 80px !important;
  max-height: 88px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 768px) {
  body > nav.site-nav .logo img.site-logo {
    height: 60px !important;
    max-width: 220px !important;
  }
}

/* The hamburger sits visually outside the centered grid on mobile;
   keep it absolutely positioned at the right edge so the centered
   nav-links column doesn't shift when it appears/disappears. */
@media (max-width: 768px) {
  body > nav.site-nav { position: sticky; top: 0; }
  body > nav.site-nav > .hamburger {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* ── 2. SERVICES DROPDOWN (desktop)
       Markup is injected by site.js; styles live here. */

.nav-services-dd { position: relative; }

.nav-services-dd > a { display: inline-flex; align-items: center; gap: 4px; }

.nav-services-dd::after {
  content: "";
  /* Visible chevron next to "Services". Drawn via inline-svg in site.js
     instead of a pseudo-element to keep this rule simple. */
}

.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* hover bridge: padding-top on the panel container means the cursor
     never crosses a non-hoverable gap between the trigger and panel */
  padding-top: 10px;
  display: none;
  z-index: 1000;
  pointer-events: none;
}
.nav-services-dd.is-open .nav-dropdown-panel,
.nav-services-dd:hover .nav-dropdown-panel {
  display: block;
  pointer-events: auto;
}

.nav-dropdown-inner {
  background: #ffffff;
  border: 1px solid var(--border, #d8dee7);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(10, 37, 64, 0.16);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 22px 32px;
  min-width: 720px;
  max-width: 90vw;
}

.nav-dd-group h4 {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.nav-dd-group ul { list-style: none; margin: 0; padding: 0; }
.nav-dd-group li { margin: 0; }
.nav-dd-group a {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--blue, #0a2540) !important;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-dd-group a:hover { background: var(--off, #f7f9fb); }

@media (max-width: 900px) {
  .nav-dropdown-inner { grid-template-columns: repeat(2, minmax(160px, 1fr)); min-width: 480px; }
}
@media (max-width: 768px) {
  /* Desktop dropdown is hidden on mobile; mobile uses the accordion below. */
  .nav-dropdown-panel { display: none !important; }
}

/* ── 3. MOBILE MENU — make the whole menu scrollable so the new
       category accordions never trap content off-screen.
       The base inline rule on every page is:
         .mobile-menu { position: fixed; top: 110px; ... }
       with NO bottom/max-height/overflow, so once content exceeds the
       viewport it becomes unreachable while body has overflow:hidden.
       Pin it to the bottom and scroll internally instead. */

@media (max-width: 768px) {
  .mobile-menu.open {
    bottom: 0 !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 28px !important;
  }
}

/* ── 3b. MOBILE SERVICES — top-level row + nested category accordions.
       Tapping the chevron opens the Services group. Inside, each
       category (Heating, Cooling, …) is its own collapsible row. */

.mobile-services-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Separator line between this row and the next mobile-menu item
     (e.g., Services -> Maintenance). Matches the border style on
     sibling .mobile-menu a items so the menu reads as one list. */
  border-bottom: 1px solid var(--border, #d8dee7);
}
.mobile-services-row > a {
  flex: 1;
  text-align: left;
  /* Cancel the inline-rule .mobile-menu a's bottom border on the inner
     anchor — the border is owned by the wrapper row instead, so it
     spans the full row width including the chevron toggle. */
  border-bottom: 0 !important;
}
.mobile-services-toggle {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  margin: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  transition: transform .18s ease;
}
.mobile-services-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.mobile-services-list {
  display: none;
  flex-direction: column;
  padding: 4px 0 6px 0;
  margin-left: 0;
  margin-bottom: 4px;
}
.mobile-services-list.is-open { display: flex; }

.mobile-services-cat {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border, #d8dee7);
}
.mobile-services-cat:last-child { border-bottom: 0; }

.mobile-services-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 4px 12px 14px;
  margin: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark, #1f2937);
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.mobile-services-cat-btn .chev {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease;
  color: var(--muted, #4b5563);
}
.mobile-services-cat-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.mobile-services-sublist {
  display: none;
  flex-direction: column;
  padding: 0 0 8px 14px;
  margin: 0 0 4px 0;
}
.mobile-services-sublist.is-open { display: flex; }
.mobile-services-sublist a {
  display: block !important;
  font-size: 14px !important;
  padding: 10px 10px !important;
  color: var(--blue, #0a2540) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
  border-left: 2px solid var(--blue-bg, #e6f7f4);
  margin-left: 4px;
}
.mobile-services-sublist a:hover { color: var(--blue-dark, #07182d) !important; }

/* ── 4. SERVICE LISTING CARDS — drop the big photo, keep card icon. */

.svc-card .svc-card-img { display: none !important; }

.svc-card {
  padding: 18px 18px 16px !important;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.svc-card .svc-card-body { padding: 0 !important; flex: 1; display: flex; flex-direction: column; }
.svc-card .svc-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.svc-card .svc-card-top .svc-ico {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 9px;
  background: var(--blue-bg, #e6f7f4);
  color: var(--blue, #0a2540);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-card .svc-card-top .svc-ico svg { width: 18px !important; height: 18px !important; }
.svc-card .svc-card-top h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark, #1f2937);
  letter-spacing: -0.01em;
  margin: 0;
}
.svc-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body, #4b5563);
  margin: 0 0 10px 0;
}
.svc-card .svc-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto;
}

/* ── 5. SERVICE CATEGORY TABS — mobile 3-up wrap, no horizontal scroll */

@media (max-width: 768px) {
  .tabs-wrap { padding: 8px 0 !important; overflow: visible !important; }
  .tabs {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  /* Cancel the desktop margin-left/right:auto on first/last tab — those
     auto margins fight wrap-mode and push the row off-screen. */
  .tabs > .tab:first-child { margin-left: 0 !important; }
  .tabs > .tab:last-child  { margin-right: 0 !important; }
  .tab {
    flex: 0 0 calc(50% - 4px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    border-bottom: 0 !important;
    background: var(--off, #f7f9fb) !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 11px 8px !important;
  }
  .tab.active {
    background: var(--blue, #0a2540) !important;
    color: #fff !important;
    border-bottom: 0 !important;
  }
  .tab.active svg { color: #fff !important; stroke: #fff !important; }
}

/* ── 6. AREAS WE SERVE — single shared layout */

/* The page-level inline styles use display:flex with justify-content:center
   on mobile (see olu-areas-mobile rules). We override with a real grid.
   .olu-location-links is intentionally NOT included (it carries service
   links on location pages, not area links). */

@media (max-width: 768px) {
  .areas-grid,
  .service-areas,
  .location-grid,
  .areas-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    flex-wrap: initial !important;
    justify-content: stretch !important;
    text-align: center !important;
  }
  .areas-grid > a,
  .service-areas > a,
  .location-grid > a,
  .areas-wrap > a,
  .areas-grid .area-tag,
  .areas-grid .area-link,
  .service-areas .area-tag,
  .service-areas .area-link {
    display: block !important;
    text-align: center !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    width: auto !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 480px) {
  .areas-grid,
  .service-areas,
  .location-grid,
  .areas-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Some pages put the area tags inside .areas-city-grid (a different
   class). Standardize that too on mobile. */
@media (max-width: 768px) {
  .areas-city-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .areas-city-grid > a {
    display: block !important;
    padding: 10px 6px !important;
    width: auto !important;
    min-width: 0 !important;
  }
}
@media (max-width: 480px) {
  .areas-city-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 7. RELATED HVAC SERVICES — mobile 2-col grid */

@media (max-width: 600px) {
  .olu-related-services > div > div,
  .olu-location-links > div > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }
  .olu-related-services a,
  .olu-location-links a {
    display: block !important;
    text-align: center !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    line-height: 1.25 !important;
  }
}

/* ── 8. CHECKMARKS — bigger, stronger green, every variant we found */

.check-list .check-item svg,
.check-list svg,
.check-row .check-icon svg,
.check-icon svg,
ul.check-list li svg,
ul li > .check-icon svg,
.feature-check svg,
.svc-tile-check svg {
  width: 22px !important;
  height: 22px !important;
  color: #16a34a !important;
  stroke: #16a34a !important;
  fill: none !important;
  stroke-width: 2.75 !important;
  flex-shrink: 0 !important;
}

/* The .svc-tile-check on the maintenance page sits inside a green
   checkbox-style chip — keep its white stroke so the chip stays
   readable. (The rule above would have made it green-on-green.) */
.svc-tile.selected .svc-tile-check svg,
.svc-tile-check svg[stroke="#fff"] {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Flatten any leftover .check-icon wrapper (already done per-page in
   service templates; do it once here for any page that missed it). */
.check-icon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
.check-item, .check-row {
  align-items: center !important;
  gap: 12px !important;
}

/* ── 9. STICKY MOBILE CTA → compact navy "Call Us" pill */

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex !important;
    position: fixed !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    z-index: 100;
  }
  .mobile-sticky-cta .mobile-sticky-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 28px !important;
    background: var(--blue, #0a2540) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 28px rgba(10, 37, 64, 0.35) !important;
    text-decoration: none !important;
    border-right: 0 !important;
  }
  .mobile-sticky-cta .mobile-sticky-btn:active {
    background: var(--blue-dark, #07182d) !important;
  }
  /* Per-page rules pad the body to clear the old full-width bar. The
     pill floats above content, so we don't need that padding. Keep a
     small bottom buffer so the pill never sits on top of content. */
  body { padding-bottom: 0 !important; }
  body::after {
    content: "";
    display: block;
    height: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ── 10. MAINTENANCE INFO BOX — text-only after icon removal.
       The original SVG has a left margin gap that becomes awkward
       once the SVG is gone; collapse it. */

.selector-note {
  justify-content: center !important;
  gap: 0 !important;
}

/* ── 11. MAP / VISIT-US SECTION — mobile redesign.
       Two patterns share the same goal:
         A. Location pages: .map-sec > .map-inner > .map-left + iframe-wrap
         B. services.html : .visit-us-grid > info-col + iframe-wrap
       Existing per-page rules force text-align:center on .map-left,
       wrap the iframe in 16-28px gutters (so the map reads narrow),
       and hide the icons. We left-align everything, widen the map to
       roughly 92% of the viewport, and rebuild the contact rows as a
       clean stack with a Request Service CTA + clickable phone +
       address link. The Request Service CTA + tel/maps wrappers are
       injected by site.js so the markup stays per-page. */

.visit-us-cta {
  display: none;  /* desktop default — no extra CTA needed */
}

@media (max-width: 768px) {
  /* Universal map rule on mobile: any embedded Google Maps iframe spans
     90vw, centered, with a clean rounded frame. The iframe also breaks
     out of any constraining parent padding via the centered-vw trick
     below. Section containers that wrap a map iframe lose their own
     left/right padding so nothing fights the 90vw target. */
  section:has(iframe[src*="google.com/maps"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* For the standalone map block (index.html-style), the section's
     immediate inner div carries inline 56px horizontal padding. Strip
     it on mobile so the iframe can sit at 90vw, and remove the wrapper
     border/shadow so the iframe's own border is the only visible frame. */
  section:has(iframe[src*="google.com/maps"]) > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  section:has(iframe[src*="google.com/maps"]) > div > div > div {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  .map-inner {
    padding: 24px 0 !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .map-inner > .map-left, .map-inner > .map-right { padding: 0 5vw !important; }
  .map-inner > .map-right,
  .map-inner > div:last-child {
    margin: 0 !important;
    padding: 0 !important;
  }
  iframe[src*="google.com/maps"] {
    display: block !important;
    width: 90vw !important;
    max-width: 90vw !important;
    height: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid var(--border, #d8dee7) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  .visit-us-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .visit-us-grid > div:first-child {
    text-align: left !important;
    align-items: flex-start !important;
    padding: 0 5vw !important;
  }
  .visit-us-grid > div:last-child {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Left-align the .map-left column on mobile (cancels the existing
     olu-visit-us-mobile rule that centers everything). */
  .map-left,
  .map-left > h2,
  .map-left > p {
    text-align: left !important;
  }
  .map-ci, .visit-us-grid > div:first-child > div:last-child {
    align-items: stretch !important;
    gap: 6px !important;
  }
  .map-ci-item,
  .visit-us-grid .map-ci-item {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 12px !important;
    background: var(--off, #f7f9fb) !important;
    border: 1px solid var(--border, #d8dee7) !important;
    border-radius: 10px !important;
    transition: background .15s, border-color .15s;
  }
  .map-ci-item a, .visit-us-grid .map-ci-item a {
    color: inherit !important;
    text-decoration: none !important;
    display: block;
    width: 100%;
  }
  .map-ci-item:hover, .visit-us-grid .map-ci-item:hover {
    border-color: var(--blue, #0a2540) !important;
  }
  /* Re-show map-ci icons as a small chip on the left of each row,
     overriding the existing olu-hide-visit-icons display:none. */
  .map-ci-icon,
  .visit-us-grid > div:first-child > div > div > div:first-child {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: var(--blue-bg, #e6f7f4) !important;
    border-radius: 8px !important;
    color: var(--blue, #0a2540) !important;
    margin-right: 12px !important;
  }

  .map-left h2, .visit-us-grid h2 { font-size: 22px !important; }
  .map-left p,  .visit-us-grid p  { margin-bottom: 8px !important; }

  /* Injected Request Service CTA at the top of the column. */
  .visit-us-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--blue, #0a2540) !important;
    color: #fff !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin: 4px 0 14px 0 !important;
  }
  .visit-us-cta:active { background: var(--blue-dark, #07182d) !important; }
}

/* Center hero CTA button group. Service pages use .hero-buttons (no
   justify-content set inline); location pages and newer service pages
   use .hero-btns and are already centered. This unifies both. */
.hero-buttons,
.hero-btns {
  justify-content: center;
}
