/* =============================================================================
   Appolo Heating — responsive marketing site
   Merged + cleaned from the two Stitch mockups into ONE mobile-first,
   hand-authored stylesheet (no Tailwind CDN). Every value traces to the
   mockups' design tokens so this maps cleanly onto a WordPress block theme.

   Sections:
     1. Design tokens (:root custom properties)
     2. Reset & base
     3. Typography
     4. Layout helpers (container, section, eyebrow)
     5. Buttons
     6. Utility bar
     7. Header + navigation (desktop nav, hamburger, off-canvas drawer)
     8. Lead form (shared by hero + lead-form blocks)
     9. Footer
    10. Accessibility & motion

   Block styles are co-located + conditionally loaded:
   blocks/{hero,service-areas,services,about,testimonials,lennox-banner}/style.css.
   Breakpoints (min-width, mobile-first): <=360 / 600 / 768 / 1024 / 1200.
   Two distinct lines: page LAYOUT (hero two-up, grids) switches at 1024px,
   while the NAVIGATION drawer <-> inline-bar switch is 1200px, so the long nav
   labels never wrap. main.js uses the same 1200px matchMedia value.
   This also fixes the md/lg dead zone in mockup 2.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette (from the mockup Tailwind configs) */
  --color-appolo-blue: #00629b;   /* primary brand / CTAs            */
  --color-primary: #004976;       /* headings / strong text          */
  --color-navy: #0a1b2f;          /* dark sections, header contrast  */
  --color-gold: #f2b824;          /* trust accent / primary CTA      */
  --color-on-gold: #0b1c30;       /* readable text on gold           */
  --color-emergency: #d32f2f;     /* emergency only                  */

  --color-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f2f3f9;   /* subtle card / section tint      */
  --color-on-surface: #004976;
  --color-on-surface-variant: #414750;
  --color-on-primary: #ffffff;
  --color-outline: #c0c7d1;       /* hairline borders                */

  /* Translucent helpers */
  --glass: rgba(255, 255, 255, 0.9);
  --scrim: rgba(10, 27, 47, 0.55); /* image overlay for legibility   */

  /* Typography */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) so text scales smoothly
     between phones and desktops with no extra breakpoints. */
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 3rem);   /* 36 → 48 */
  --fs-h1: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);       /* 28 → 40 */
  --fs-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);        /* 24 → 32 */
  --fs-h3: 1.5rem;                                        /* 24 */
  --fs-body-lg: 1.125rem;                                 /* 18 */
  --fs-body: 1rem;                                        /* 16 */
  --fs-label: 0.75rem;                                    /* 12, uppercase */

  /* Spacing rhythm */
  --gutter: 1.5rem;
  --container-max: 1280px;
  --section-pad: 2rem;            /* mobile; bumped at >=768           */
  --stack-sm: 0.5rem;
  --stack-md: 1rem;
  --stack-lg: 2rem;

  /* Radius */
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Elevation — soft, large-radius, low opacity (Flat-Plus) */
  --shadow-sm: 0 1px 2px rgba(10, 27, 47, 0.06), 0 1px 3px rgba(10, 27, 47, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 73, 118, 0.10);
  --shadow-lg: 0 18px 40px rgba(10, 27, 47, 0.22);

  --header-h: 4.25rem;            /* used for sticky offset + scroll-margin */
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    /* 5rem read as too airy on desktop once every section carried it on both
       sides (plus the root block gap) — 184px between sections' content. */
    --section-pad: 4rem;
  }
}

/* ---------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Root-level clip: with clip only on <body>, the value propagates to the
     viewport and stops applying to the body box, and iOS Safari still lets
     too-wide content widen the layout viewport at load (page renders
     zoomed-out with a gutter down the right edge). Declaring it on the root
     keeps body's clip below on the body box itself — two real clipping
     layers, neither of which creates a scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-on-surface);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) contains the off-canvas drawer's horizontal overflow
     without turning <body> into a scroll container, which would break the
     sticky header. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

/* The reset above is for nav/footer/component lists. Editor-authored content
   lists (core list block) opt markers back in via Gutenberg's .wp-block-list
   class, which only appears inside post content. */
ul.wp-block-list { padding-left: 1.25rem; list-style: disc; }
ol.wp-block-list { padding-left: 1.25rem; list-style: decimal; }
.wp-block-list li { margin-bottom: 0.35rem; }

:where(h1, h2, h3, h4, p) { margin: 0; }

/* Lock scrolling while the mobile drawer is open. */
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.2; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.lead { font-size: var(--fs-body-lg); line-height: 1.6; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-appolo-blue);
}

/* ---------------------------------------------------------------------------
   4. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--navy { background: var(--color-navy); color: var(--color-on-primary); }
.section--alt { background: var(--color-surface-alt); }

/* Page sections butt up against each other: core's root block gap otherwise
   leaves a ~24px white sliver between full-bleed colored sections (and adds
   to the perceived space between all of them). Section padding owns the
   vertical rhythm instead. */
.entry-content > section { margin-block: 0; }

.section-head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: var(--stack-lg); }
.section-head .lead { color: var(--color-on-surface-variant); margin-top: var(--stack-sm); }
.section--navy .section-head .lead { color: rgba(255, 255, 255, 0.8); }
/* Headings on navy sections must be light — theme.json colors headings with the
   dark brand blue by default, which is illegible on navy. */
.section--navy .h2 { color: var(--color-white); }

/* Material Symbols sizing/alignment */
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle; line-height: 1; }
.icon-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  text-align: center;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold { background: var(--color-gold); color: var(--color-on-gold); box-shadow: var(--shadow-sm); }
.btn--gold:hover { box-shadow: var(--shadow-md); }

.btn--navy { background: var(--color-appolo-blue); color: var(--color-on-primary); }
.btn--navy:hover { filter: brightness(1.08); }

.btn--outline { background: transparent; border-color: currentColor; color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.btn--block { width: 100%; }
.btn--lg { padding: 1rem 2rem; font-size: var(--fs-h3); }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-appolo-blue);
}
.link-arrow .material-symbols-outlined { font-size: 1rem; transition: transform 150ms ease; }
.link-arrow:hover .material-symbols-outlined { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   6. Utility bar — stays visible on every screen size. The phone number is
   the #1 conversion path for an HVAC site, so it never disappears on mobile.
   ------------------------------------------------------------------------- */
.utility-bar { background: var(--color-navy); color: var(--color-on-primary); }
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-md);
  padding-block: 0.5rem;
  flex-wrap: wrap;
}
.utility-bar__emergency {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.utility-bar__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-gold); }
.utility-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-gold);
}
.utility-bar__phone:hover { filter: brightness(1.1); }
/* Emergency label + phone are grouped so it's clear the number is the
   after-hours/response line (no more space-between pushing them apart). */
.utility-bar__lead { display: inline-flex; align-items: center; gap: var(--stack-md); flex-wrap: wrap; }

/* Hide the emergency label text on the narrowest screens; keep the icon+phone. */
@media (max-width: 360px) { .utility-bar__emergency span:last-child { display: none; } }

/* ---------------------------------------------------------------------------
   7. Header + navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-outline);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  min-height: var(--header-h);
  padding-block: 0.75rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--color-appolo-blue);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
/* Brand wordmark image (navy on the light glass header + white drawer). Sized
   by height to fit the header row; width follows the ~4.14:1 aspect. Falls back
   to the styled text above if the asset ever fails to load. */
.brand__logo {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 100%;
}

/* The brand wordmark and the Book Service CTA are both nowrap, so their
   combined min-content width sets the page's minimum width (~389px) — on
   375/360/320-class phones that overflows the viewport. Tighten the row and
   scale the wordmark fluidly below 480px; the 12vw slope reaches the full
   1.375rem right around 390px, so wider phones see no change. */
@media (max-width: 479px) {
  .site-header__inner { gap: var(--stack-sm); }
  .brand { font-size: clamp(0.875rem, 12vw - 1.5rem, 1.375rem); }
  .brand__logo { height: 2rem; }
  .header-actions .header-cta-mobile { padding-inline: 0.875rem; }
}

/* --- One menu, two presentations -------------------------------------------
   Mobile-first, the nav IS the off-canvas drawer (fixed, slides in from the
   left to align with the hamburger). At >=1200px the SAME element re-flows
   into an inline horizontal bar.
   No duplicated markup. Closed-drawer state uses visibility:hidden so its
   links stay out of the tab order until opened. */
.primary-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  height: 100dvh;
  width: min(88vw, 360px);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 240ms ease, visibility 240ms ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.primary-nav.is-open { transform: translateX(0); visibility: visible; }

/* Suppress the slide/fade while the window is actively resizing, so crossing
   the 1200px breakpoint doesn't animate the drawer into view for a frame. JS
   adds .nav-resizing during resize and removes it shortly after it stops. */
.nav-resizing .primary-nav,
.nav-resizing .nav-backdrop { transition: none !important; }

.primary-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--stack-md) var(--gutter);
  border-bottom: 1px solid var(--color-outline);
}
.primary-nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--stack-md) var(--gutter);
}
.primary-nav__link {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--color-primary);
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--color-outline);
  transition: color 150ms ease, border-color 150ms ease;
}
.primary-nav__link:hover { color: var(--color-appolo-blue); }

/* --- Submenu (one level) ----------------------------------------------------
   Parent items render as a <button> + nested list. In the drawer the sub-list
   is an accordion under the parent row; on desktop it becomes a dropdown
   panel. nav.js toggles .is-open / aria-expanded in both presentations. */
.primary-nav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.primary-nav__chevron {
  font-size: 1.375rem;
  transition: transform 200ms ease;
}
.primary-nav__item--parent.is-open .primary-nav__chevron { transform: rotate(180deg); }
.primary-nav__sub { display: none; }
.primary-nav__item--parent.is-open .primary-nav__sub { display: block; }
.primary-nav__sublink {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-primary);
  padding: 0.625rem 0 0.625rem 1rem;
  border-bottom: 1px solid var(--color-outline);
  transition: color 150ms ease;
}
.primary-nav__sublink:hover { color: var(--color-appolo-blue); }

.primary-nav__cta {
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  padding: var(--stack-lg) var(--gutter);
  margin-top: auto;
}

/* Header right-side cluster.
   Mobile: hamburger (far left, own element) + Book Service CTA on the right;
   the phone icon and the desktop Contact CTA are hidden until >=1200px. */
.header-actions { display: flex; align-items: center; gap: var(--stack-sm); }
.header-actions .header-cta-desktop { display: none; }
.header-actions .header-cta-mobile { display: inline-flex; }
.header-actions .icon-btn--phone { display: none; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--color-appolo-blue);
  border-radius: var(--radius-lg);
}
.icon-btn .material-symbols-outlined { font-size: 1.75rem; }
.icon-btn:active { transform: scale(0.95); }

/* Hamburger — visible until the inline nav takes over at 1200px */
.nav-toggle { display: inline-flex; }

/* Backdrop scrim behind the off-canvas menu.
   z-index sits BELOW the header (50): the nav drawer is a child of the header
   and therefore lives inside the header's stacking context, so the backdrop
   must stay under that whole context or it would paint over the open drawer.
   It still covers the page content (z 0) below. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 27, 47, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* --- Inline nav (>=1200px): the same element becomes a horizontal bar ------
   The switch waits until 1200px so all seven items sit on one line without
   wrapping ("New Construction" / "Service Areas" are wide). Below this the
   hamburger + drawer handle navigation. This is independent of the 1024px
   *layout* breakpoint used by the hero / grids further down. */
@media (min-width: 1200px) {
  .primary-nav {
    position: static;
    height: auto;
    width: auto;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
    flex-direction: row;
  }
  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
  }
  .primary-nav__link {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-body);
    padding-block: 0.25rem;
    border-bottom: 0;
    white-space: nowrap;
    /* Underline indicator: a 2px line drawn with a background gradient that
       grows from the centre outward on hover/focus, and stays full-width for
       the current page. Animating background-size avoids any layout shift. */
    background-image: linear-gradient(var(--color-appolo-blue), var(--color-appolo-blue));
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 0% 2px;
    transition: background-size 200ms ease, color 150ms ease;
  }
  .primary-nav__link:hover,
  .primary-nav__link:focus-visible { background-size: 100% 2px; }
  .primary-nav__link[aria-current="page"] {
    color: var(--color-appolo-blue);
    background-size: 100% 2px;
  }
  /* Submenu becomes a dropdown panel anchored to the parent item. Hover /
     focus-within open it alongside the JS click toggle (.is-open), so mouse,
     keyboard, and touch all work. */
  .primary-nav__item--parent { position: relative; }
  .primary-nav__toggle { width: auto; }
  .primary-nav__sub {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 14rem;
    padding: 0.5rem 0;
    background: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  /* Invisible hover bridge so the pointer can cross the gap to the panel. */
  .primary-nav__sub::before {
    content: '';
    position: absolute;
    top: -0.8rem;
    left: 0;
    right: 0;
    height: 0.8rem;
  }
  .primary-nav__item--parent:hover .primary-nav__sub,
  .primary-nav__item--parent:focus-within .primary-nav__sub { display: block; }
  .primary-nav__item--parent:hover .primary-nav__chevron,
  .primary-nav__item--parent:focus-within .primary-nav__chevron { transform: rotate(180deg); }
  .primary-nav__sublink {
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-bottom: 0;
    white-space: nowrap;
  }
  .primary-nav__sublink[aria-current="page"] { color: var(--color-appolo-blue); }
  /* Drawer-only chrome and the hamburger/backdrop never show on desktop. */
  .primary-nav__head,
  .primary-nav__cta,
  .nav-toggle,
  .nav-backdrop { display: none; }
  /* Desktop: show the phone icon + Contact CTA, drop the mobile Book Service CTA. */
  .header-actions .header-cta-desktop { display: inline-flex; }
  .header-actions .header-cta-mobile { display: none; }
  .header-actions .icon-btn--phone { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   8. Lead form (shared — hero block AND standalone lead-form block use this)
   ------------------------------------------------------------------------- */
/* Lead form — ALWAYS visible (mockup 2 hid it on mobile; fixed here) */
.lead-form {
  background: var(--color-appolo-blue);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  color: var(--color-on-primary);
}
.lead-form__title { color: var(--color-white); margin-bottom: var(--stack-sm); }
.lead-form__desc { color: rgba(255, 255, 255, 0.9); margin-bottom: var(--stack-md); font-size: var(--fs-body); }
.lead-form form { display: flex; flex-direction: column; gap: var(--stack-md); }
.lead-form input,
.lead-form select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-navy);
  font: inherit;
}
.lead-form input::placeholder { color: var(--color-on-surface-variant); }
.lead-form input:focus,
.lead-form select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(242, 184, 36, 0.35); }
.lead-form__reassure {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: var(--stack-md); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-navy); color: var(--color-on-primary); border-top: 4px solid var(--color-gold); }
.footer-grid { display: grid; gap: var(--stack-lg); grid-template-columns: 1fr; padding-block: var(--section-pad); }
.footer-brand__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--color-white); margin-bottom: var(--stack-md); display: block; }
.footer-brand__text { color: rgba(255, 255, 255, 0.7); max-width: 22rem; margin-bottom: var(--stack-md); }
.footer-social { display: flex; gap: var(--stack-md); }
.footer-social a {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color 150ms ease;
}
.footer-social a:hover { background: var(--color-appolo-blue); }
.footer-col__title { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--stack-md); }
.footer-col ul { display: grid; gap: 0.9rem; }
/* Same underline indicator as the nav, in gold for the navy footer. The links
   are inline, so the line spans just the text; it grows from the left (natural
   for left-aligned list links) by animating background-size — no layout shift. */
.footer-col a {
  /* ~20% larger than the default body link for easier tapping/reading. */
  font-size: 1.2rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(var(--color-gold), var(--color-gold));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 0% 2px;
  transition: color 150ms ease, background-size 200ms ease;
}
.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--color-gold);
  background-size: 100% 2px;
}
/* Office NAP strip — visible name/address/phone on every page corroborates
   the HVACBusiness structured data (local SEO). */
.footer-offices { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: var(--stack-lg); }
.footer-offices__grid { display: grid; gap: var(--stack-md); grid-template-columns: 1fr; text-align: center; }
.footer-office__region { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.25rem; }
.footer-office__addr { font-style: normal; color: rgba(255, 255, 255, 0.7); }
.footer-office__phone { display: inline-block; margin-top: 0.25rem; font-weight: 700; color: var(--color-white); }
.footer-office__phone:hover { color: var(--color-gold); }
.footer-offices__emergency { margin-top: var(--stack-md); text-align: center; font-size: var(--fs-label); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }
.footer-offices__emergency a { font-weight: 700; color: var(--color-gold); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1.5rem; text-align: center; }
.footer-bottom p { font-size: var(--fs-label); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }

@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .footer-offices__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ---------------------------------------------------------------------------
   14. Accessibility & motion
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-lg);
  transition: top 150ms ease;
}
.skip-link:focus { top: 0.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Keep in-page anchor targets clear of the sticky header
   (header-h + its vertical padding + breathing room). */
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* ---------------------------------------------------------------------------
   Fluent Forms — site-gold submit button
   The live lead forms are built with Fluent Forms (not the theme's built-in
   form), so the plugin styles its submit button blue via `--fluentform-primary`
   with hardcoded white text. Override to the site gold with dark, readable text.
   !important is required to beat the plugin's own per-form rule regardless of
   stylesheet load order. Targets all Fluent Forms, not a single form id.
   ------------------------------------------------------------------------- */
.fluentform .ff-btn-submit:not(.ff_btn_no_style),
.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-on-gold) !important;
}
.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover,
.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
  filter: brightness(0.95);
}

/* ---------------------------------------------------------------------------
   Agent23 chat launcher — universal chat glyph
   The widget (WPCode footer snippet, agent23chat.superv1_7) renders its
   launcher as `#chat-circle.drop-img > img`, whose avatar is the Appolo bot
   logo configured in the Agent23 dashboard — customers didn't read it as
   chat. Hide the avatar (visibility keeps the 58px hit target) and paint a
   gold disc + Material Symbols "chat" glyph on ::after instead. The widget
   forces `background: transparent` inline on the circle, so the disc lives
   on the pseudo-element. Same launcher persists while the chat is open (the
   window has its own close button), so no open-state handling is needed.
   Harmless no-op if the widget markup ever changes.
   ------------------------------------------------------------------------- */
#chat-circle.drop-img img { visibility: hidden; }
#chat-circle.drop-img::after {
  content: 'chat';
  position: absolute;
  inset: 2px;
  display: grid;
  place-items: center;
  background: var(--color-gold);
  border-radius: 50%;
  font-family: 'Material Symbols Outlined';
  font-size: 30px;
  color: var(--color-on-gold);
  pointer-events: none;
}

/* Agent23 auto-greeting bubble (#defd701b): the "Hello 👋! How can I help
   you today?" popup 6s after load is gated by `displayFloatBubbleMsg: true`
   in the chatbot's SERVER config — the embed snippet has no client-side
   switch. Suppress it here (stylesheet !important beats the widget's inline
   display:flex) until the flag is turned off in the Agent23 dashboard.
   Launcher icon is a separate element and is unaffected. */
.toggle-messages { display: none !important; }

/* ---------------------------------------------------------------------------
   Blog — index cards (templates/home.html + index.html) and single posts
   (templates/single.html). Hooks are classNames set on core blocks in the
   templates, so the styles survive template edits in the Site Editor.
   ------------------------------------------------------------------------- */
/* The theme owns the card grid (one column on phones, two from 640px, three
   from 1024px — core's columnCount grid isn't responsive). min-width: 0 on
   the items is load-bearing: a grid item's automatic minimum is its
   min-content size, and the featured images' intrinsic widths (1300px+
   sideloaded originals) were blowing the 1fr track out to content width on
   phones — every card rendered ~1350px wide inside a 390px viewport. */
.blog-query .wp-block-post-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
}
.blog-query .wp-block-post-template > li { min-width: 0; }
@media (min-width: 640px) {
  .blog-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .blog-query .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-card {
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-card__image { margin: 0; }
.blog-card__image img { display: block; width: 100%; max-width: 100%; height: auto; }
/* The card owns its vertical rhythm via PADDING, not margins: these groups
   are WP flow layouts, whose layout CSS force-zeroes the first child's top
   margin and every child's bottom margin — margin-based spacing collapsed to
   nothing on image-less cards. Neutralize core's block-gap margins and let
   the date own the top spacing and the excerpt the bottom, so both card
   variants match while the featured image stays flush with the card edges. */
.blog-query .blog-card > * { margin-block: 0; }
.blog-card__date,
.blog-card__title,
.blog-card__excerpt { padding-inline: var(--gutter); }
.blog-card__date {
  padding-top: var(--gutter);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.blog-card__title { padding-top: 0.375rem; font-size: var(--fs-h3); }
.blog-card__title a { color: var(--color-primary); transition: color 150ms ease; }
.blog-card__title a:hover { color: var(--color-appolo-blue); }
.blog-card__excerpt { padding-block: 0.5rem var(--gutter); color: var(--color-on-surface-variant); }
.blog-card__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 0.375rem; font-weight: 700; color: var(--color-appolo-blue); }

.blog-pagination { margin-top: var(--stack-xl); font-weight: 700; }
.blog-pagination a { color: var(--color-appolo-blue); }
.blog-pagination .wp-block-query-pagination-numbers .current { color: var(--color-primary); }

.blog-single__meta {
  margin-block: var(--stack-sm) var(--stack-lg);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.blog-single__meta a { color: var(--color-appolo-blue); }
/* Author byline (#62739495): rendered by wp:post-author-name in single.html. */
.blog-single__author::before { content: "By "; }
.blog-single__hero { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--stack-lg); }
/* Imported posts carry raw <img> tags (no block wrappers), so cap them here. */
.blog-single .entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
/* Old-site content can carry inline runs that refuse to wrap on phones. */
.blog-single .entry-content { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* GoDaddy Managed WP neutralizer (live host only; inert elsewhere).
   The platform's godaddy-launch mu-plugin injects a "site designer contrast
   fallback" stylesheet whose high-specificity rules repaint text inputs and
   submit buttons with --wp--preset--color--base / --contrast / --accent-* —
   preset slugs this theme does not define. An undefined var() collapses
   background-color to transparent, which erased the form fields on the live
   site. Defining the slugs to brand colors makes those injected rules render
   the intended design instead of fighting them on specificity. */
:root {
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--contrast: #13293f;
  --wp--preset--color--accent-1: #004976;
  --wp--preset--color--accent-2: #f2b824;
  --wp--preset--color--accent-3: #0a1b2f;
  --wp--preset--color--accent-5: #f2f3f9;
}