/* ==========================================================================
   Header v3 — clean rebuild 2026-07 (aaa_projects/project_1/NOTES.md)
   Mobile-first. 5 tiers: base <550, 550–1024, 1025–1299, 1300–1499, ≥1500.
   All key sizes are CSS variables — tune here, per breakpoint.
   Namespace: swx3-  (old header.css stays enqueued; nothing here collides)
   ========================================================================== */

:root {
    --swx3-blue: #4D99EA;
    --swx3-nav-bg: #f0f8ff;
    --swx3-ink: #024F6F;
    --swx3-accent: #70b657;
    --swx3-white: #fff;

    /* heights per tier (topbar / nav row). Nav row is 0 on mobile (panel). */
    --swx3-topbar-h: 128px;   /* base: two stacked rows */
    --swx3-nav-h: 0px;

    /* element sizes — base (smallest screens) */
    --swx3-logo-w: 92px;
    --swx3-quote-w: 190px;
    --swx3-phone-icon-w: 36px;
    --swx3-chat-w: 33px;
    --swx3-account-icon-w: 22px;
}

/* --------------------------------------------------------------------------
   Shell: fixed, constant height, NO load animation, NO shrink-on-scroll
   -------------------------------------------------------------------------- */
.swx3-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    font-family: "Open Sans", sans-serif;
}
body.admin-bar .swx3-header {
    top: 32px;
}

/* Push page content below the fixed header (overrides old header.css rule
   because this file loads after it). */
body {
    padding-top: calc(var(--swx3-topbar-h) + var(--swx3-nav-h));
}
body.admin-bar {
    padding-top: calc(var(--swx3-topbar-h) + var(--swx3-nav-h) + 32px);
}

/* --------------------------------------------------------------------------
   Top bar (blue)
   -------------------------------------------------------------------------- */
.swx3-topbar {
    background-color: var(--swx3-blue);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
    height: var(--swx3-topbar-h);
    /* lift above the nav row so the shadow falls ON it (nav is a later
       sibling and would otherwise paint over the shadow) */
    position: relative;
    z-index: 2;
}
.swx3-topbar-inner {
    max-width: 1500px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    align-items: center;
    /* base = two rows (matches img_5):
       row 1: logo · account · burger
       row 2: phone-icon · quote · chat            */
    /* row 1: logo left, utilities (account+burger) grouped right
       row 2: phone · quote · chat as a balanced, centered band */
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
        "logo   .  account burger"
        "phone  .  .       chat";
    row-gap: 8px;
    column-gap: 14px;
}

.swx3-logo { grid-area: logo; display: block; line-height: 0; }
.swx3-logo img { width: var(--swx3-logo-w); height: auto; }

.swx3-tagline { display: none; line-height: 0; } /* desktop-only */

.swx3-contact { display: contents; } /* children place themselves in the grid */
.swx3-phone-icon { grid-area: phone; line-height: 0; justify-self: left; align-self: center; }
.swx3-phone-icon img { width: var(--swx3-phone-icon-w); height: auto; }
.swx3-phone-number { display: none; line-height: 0; } /* ≥550 only */
.swx3-chat { grid-area: chat; line-height: 0; justify-self: center; align-self: center; }
.swx3-chat img { width: var(--swx3-chat-w); height: auto; }

.swx3-account { grid-area: account; justify-self: end; align-self: center; line-height: 0; display: flex; align-items: center; gap: 8px; }
.swx3-account-icon { width: var(--swx3-account-icon-w); height: auto; }
.swx3-account-text { display: none; width: 150px; height: auto; } /* desktop-only */

/* Quote button — image based, hover image cross-fades on desktop */
.swx3-quote {
    /* span the whole row and self-center → true viewport center,
       independent of the asymmetric side columns */
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    position: relative;
    display: inline-block;
    /* fluid: full size when there's room, shrinks on the narrowest phones
       so it never covers the phone/chat icons in the side rails */
    width: min(var(--swx3-quote-w), calc(100vw - 150px));
    line-height: 0;
    cursor: pointer;
    justify-self: center;
}
.swx3-quote img { width: 100%; height: auto; display: block; }
/* Optical nudge per Gerald (2026-07-05): reads better 10px right on small
   mobile. NOTE: math-center was exact — if it looks off-center ON A REAL
   PHONE after deploy, delete this rule (DevTools scrollbar was the offset). */
@media (max-width: 549px) {
    .swx3-quote { margin-left: 10px; }
    /* nudge on the phone icon, per Gerald's DevTools session (10px → 5px) */
    .swx3-phone-icon { margin-left: 5px; }
}
.swx3-quote-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.swx3-quote:hover .swx3-quote-hover { opacity: 1; }
.swx3-quote:hover .swx3-quote-default { opacity: 0; }
/* mobile art kept as an option but unused — desktop art scales cleanly.
   NOTE: must out-rank `.swx3-quote img` (display:block) above. */
.swx3-quote img.swx3-quote-mobile { display: none; }

/* Burger */
.swx3-burger {
    grid-area: burger;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;
}
.swx3-burger-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #000;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.swx3-open .swx3-burger .swx3-burger-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.swx3-open .swx3-burger .swx3-burger-bar:nth-child(2) { opacity: 0; }
.swx3-open .swx3-burger .swx3-burger-bar:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* --------------------------------------------------------------------------
   Nav — MOBILE: slide-down panel under the top bar
   -------------------------------------------------------------------------- */
.swx3-nav {
    position: fixed;
    top: var(--swx3-topbar-h);
    left: 0;
    right: 0;
    display: none;
    background: var(--swx3-white);
    max-height: calc(100vh - var(--swx3-topbar-h));
    max-height: calc(100dvh - var(--swx3-topbar-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
body.admin-bar .swx3-nav { top: calc(var(--swx3-topbar-h) + 32px); }
.swx3-open .swx3-nav { display: block; }

/* Freeze the page while the panel is open (iOS-proof: position fixed) */
body.swx3-locked {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overscroll-behavior: none;
}

.swx3-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 40px;
}
.swx3-item {
    border-bottom: 1px solid #ccc;
}
.swx3-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    color: var(--swx3-ink);
    font-size: 20px;
    text-decoration: none;
}
.swx3-link-icon { width: 26px; height: auto; }
.swx3-chevron { transition: transform 0.25s ease; flex: 0 0 auto; }
.swx3-item.swx3-sub-open > .swx3-link .swx3-chevron { transform: rotate(180deg); }

/* Item 2 = icon-only circle link: hidden on mobile (same as old header) */
.swx3-item-2 { display: none; }

/* Submenus (mobile: accordions, closed by default) */
.swx3-sub { display: none; }
.swx3-item.swx3-sub-open > .swx3-sub { display: block; }

/* Mega (Services) — mobile: stacked category accordions */
.swx3-mega-cols { display: block; }
.swx3-mega-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px 6px;
    border-bottom: 1px solid var(--swx3-accent); /* was 2px; Gerald: 50% smaller */
}
.swx3-mega-heading a {
    color: #14743c;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
}
.swx3-col-toggle {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #14743c;
    line-height: 0;
}
.swx3-col-toggle .swx3-chevron { transition: transform 0.25s ease; }
.swx3-mega-col.swx3-col-open .swx3-col-toggle .swx3-chevron { transform: rotate(180deg); }

.swx3-mega-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: none; /* mobile: closed until category tapped */
}
.swx3-mega-col.swx3-col-open .swx3-mega-list { display: block; }
.swx3-mega-list a,
.swx3-areas-list a {
    display: block;
    padding: 10px 16px;
    color: var(--swx3-ink);
    font-size: 19px;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
}
.swx3-mega-list a:hover,
.swx3-areas-list a:hover,
.swx3-link:hover { color: var(--swx3-accent); }

.swx3-areas-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

/* ==========================================================================
   TIER 2 — 550px–1024px: one-row mobile bar
   logo · phone · quote · chat · account-icon · burger   (matches img_3)
   ========================================================================== */
@media (min-width: 550px) {
    :root {
        --swx3-topbar-h: 78px;
        --swx3-logo-w: 120px;
        --swx3-quote-w: 210px;
    }
    .swx3-topbar-inner {
        display: flex;
        justify-content: space-between;
        gap: 18px;
    }
    .swx3-contact { display: flex; align-items: center; gap: 12px; }
    .swx3-phone-number { display: block; }
    .swx3-phone-number img { width: 140px; height: auto; }
    .swx3-account { flex: 0 0 auto; }
    .swx3-quote { justify-self: unset; }
}

/* ==========================================================================
   TIER 3 — ≥1025px: DESKTOP. Burger gone, nav row appears (no tagline yet)
   ========================================================================== */
@media (min-width: 1025px) {
    :root {
        --swx3-topbar-h: 88px;
        --swx3-nav-h: 54px;
        --swx3-logo-w: 130px;
        --swx3-quote-w: 230px;
        --swx3-phone-icon-w: 40px;
    }
    .swx3-burger { display: none; }
    .swx3-account-text { display: inline-block; } /* "Account Sign In" text on desktop */

    /* Nav becomes an always-visible row */
    .swx3-nav {
        position: static;
        display: block;
        background: var(--swx3-nav-bg);
        max-height: none;
        overflow: visible;
        height: var(--swx3-nav-h);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    .swx3-menu {
        max-width: 1500px;
        height: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .swx3-item { border-bottom: none; position: relative; }
    .swx3-item-2 { display: block; }
    .swx3-link {
        padding: 6px 4px;
        font-size: 17px;
        white-space: nowrap;
    }
    .swx3-link-icon { width: 30px; }

    /* Dropdowns: pure CSS hover/focus */
    .swx3-sub {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--swx3-white);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
        z-index: 10001;
    }
    .swx3-item:hover > .swx3-sub,
    .swx3-item:focus-within > .swx3-sub,
    .swx3-item.swx3-sub-open > .swx3-sub { display: block; }

    /* Services mega: 3 columns, all lists visible (no accordions on desktop) */
    .swx3-mega { min-width: 900px; padding: 24px 32px 32px; }
    .swx3-mega-cols {
        display: flex;
        gap: 56px;
        align-items: flex-start;
    }
    .swx3-mega-col { min-width: 220px; }
    .swx3-mega-heading { justify-content: flex-start; padding: 0 0 6px; }
    .swx3-col-toggle { display: none; }        /* desktop: no accordion */
    .swx3-mega-list { display: block; padding: 12px 0 0; }
    .swx3-mega-list a { text-align: left; padding: 8px 4px; font-size: 18px; }

    /* Service Areas: single scrollable column */
    .swx3-areas { min-width: 300px; }
    .swx3-areas-list {
        max-height: 60vh;
        overflow-y: auto;
        padding: 10px 0;
    }
    .swx3-areas-list a { text-align: left; padding: 8px 24px; font-size: 18px; }

    /* keyboard/hover intent: keep menu open while cursor is inside */
    .swx3-sub { display: none; }
}

/* ==========================================================================
   TIER 4 — ≥1300px: tagline appears, roomier
   ========================================================================== */
@media (min-width: 1300px) {
    :root {
        --swx3-quote-w: 250px;
        --swx3-logo-w: 136px;
    }
    .swx3-tagline { display: block; }
    .swx3-tagline img { width: 300px; height: auto; }
    .swx3-link { font-size: 18px; }
}

/* ==========================================================================
   TIER 5 — ≥1500px: full-size desktop (matches img.png)
   ========================================================================== */
@media (min-width: 1500px) {
    :root {
        --swx3-quote-w: 260px;
    }
    .swx3-tagline img { width: 340px; }
    .swx3-topbar-inner, .swx3-menu { padding: 0 32px; }
    .swx3-link { font-size: 19px; }
}