/* =============================================================
   Mobile fixes overlay (drop-in)
   -------------------------------------------------------------
   Loaded after styles.css and any per-page CSS; fixes mobile
   layout problems that recur across most brochure-site
   conversions:
     1. Phone number wrapping in a multi-item util bar
     2. CTA button text wrapping in the nav
     3. Missing mobile nav menu (hamburger drawer)
     4. Decorative element halos against contrasting backgrounds
     5. Modals cut off by mobile browser address bar (vh vs dvh)

   Customize:
   - Change @media breakpoints (default: 720px / 840px) to match
     your source CSS's existing breakpoints.
   - If your util bar item ordering is different, adjust the
     :nth-child selectors below.
   - If your decorative element is named differently, change
     the .hero-seal selector to your equivalent.
   ============================================================= */

/* === 1. UTIL BAR: keep phone tidy, drop redundant items =============
   Source CSS (styles.css line 132+) only hides the LAST util-left
   item, leaving phone + email both visible. On a 360px screen the
   phone number wraps to "(817) / 501- / 5975". Hide email and
   location below 720px and lock phone to one line.
   ==================================================================== */
@media (max-width: 720px) {
    .util-left .util-item:nth-child(2),
    .util-left .util-item:nth-child(3) {
        display: none;
    }
    .util-left .util-item:first-child {
        white-space: nowrap;
    }
    .util-inner {
        gap: 12px;
    }
}

/* === 2 + 3. HAMBURGER NAV =========================================== */

/* Toggle button: hidden on desktop, visible on mobile */
.nav-toggle {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px;
    margin-right: -10px; /* visual flush with edge */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink, #0a0a0a);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Drawer: rendered always (so JS hooks survive page mode changes),
   visually hidden on desktop, slide-down panel on mobile */
.nav-drawer {
    display: none;
}

@media (max-width: 840px) {
    /* Make room: the source CSS already hides .nav-menu at 840px.
       Hide the inline .nav-cta too and show the hamburger. */
    .nav-cta {
        display: none;
    }
    .nav-toggle {
        display: flex;
    }

    /* Drawer becomes a slide-down panel anchored under the nav */
    .nav-drawer {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--paper, #fff);
        border-top: 1px solid var(--line, rgba(0, 0, 0, 0.08));
        border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
        padding: 8px 0 14px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
        z-index: 49;
    }
    .nav.nav--open .nav-drawer {
        max-height: 80vh;
        opacity: 1;
        pointer-events: auto;
        padding: 14px 0 18px;
    }

    .nav-drawer-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .nav-drawer-menu li + li {
        border-top: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    }
    .nav-drawer-menu a {
        display: block;
        padding: 16px var(--gutter-x, 24px);
        font-size: 16px;
        font-weight: 500;
        color: var(--ink, #0a0a0a);
        text-decoration: none;
        transition: color 0.15s, background 0.15s;
    }
    .nav-drawer-menu a:hover,
    .nav-drawer-menu a:focus {
        background: rgba(0, 0, 0, 0.03);
        color: var(--red, #c81d23);
    }
    .nav-drawer-menu a.active {
        color: var(--red, #c81d23);
        font-weight: 600;
    }

    .nav-drawer-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 14px var(--gutter-x, 24px) 0;
        background: var(--ink, #0a0a0a);
        color: var(--paper, #fff);
        padding: 16px 22px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.3px;
        text-decoration: none;
        transition: background 0.15s;
    }
    .nav-drawer-cta:hover {
        background: var(--red, #c81d23);
    }
    .nav-drawer-cta svg {
        width: 14px;
        height: 14px;
    }
}

/* When drawer is open, lock body scroll */
body.nav-drawer-open {
    overflow: hidden;
}

/* === 4. HERO SEAL: hide on mobile (duplicates the nav logo) =========
   Source CSS keeps the seal as a static centered circle on mobile,
   which paints a white halo against the red hero behind the brand
   mark. Hidden entirely on small screens; the nav logo is enough.
   ==================================================================== */
@media (max-width: 720px) {
    .hero-seal {
        display: none;
    }
    .hero-photos {
        margin-bottom: 0;
    }
}

/* === 5. MODAL: use dynamic viewport height so the submit button =====
   isn't clipped by the mobile browser address bar / nav bar. iOS
   Safari and Chrome on Android shrink the visible viewport when
   the address bar is shown; 100vh stays at the full browser height
   and the modal becomes taller than the visible area, hiding its
   bottom. 100dvh tracks the actual usable area.
   ==================================================================== */
.modal-dialog {
    /* Replace styles.css's calc(100vh - 96px) with the dynamic version */
    max-height: calc(100dvh - 32px);
}
@media (max-width: 600px) {
    .modal {
        padding: 12px;
    }
    .modal-dialog {
        max-height: calc(100dvh - 24px);
    }
    /* Tighten the modal form padding so more content is visible */
    .modal .form-card {
        padding: 28px 22px;
    }
    .modal .form-sub {
        font-size: 22px;
        margin-bottom: 22px;
    }
    /* The corner accent looks oversized inside the modal at small widths */
    .modal .form-card-accent {
        width: 48px;
        height: 48px;
        top: -8px;
        left: -8px;
    }
}

/* === SAFETY: clean up util-bar layout if all 3 items still flex ====
   Even on widths above 720px, prevent phone from wrapping and let
   the row scroll horizontally before it breaks visually. =========== */
.util-item {
    flex-shrink: 0;
}
.util-left .util-item:first-child {
    white-space: nowrap;
}