/* =============================================================
   Goldeneye mobile fixes
   -------------------------------------------------------------
   Loaded after styles.css and home.css; fixes mobile layout
   problems Tyler flagged in field testing:
     1. Phone number wrapping in the red util bar
     2. "Request An Estimate" CTA wrapping in the nav
     3. Missing mobile nav menu (hamburger)
     4. White halo around the brand seal on mobile (it duplicates
        the nav logo and the seal background paints over the hero)
     5. Estimate modal "Send" button cut off on short mobile chrome
   ============================================================= */

/* === 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 stays visible on mobile. Sized down by home.css's
       960px+down media query so it doesn't crowd the photos. */
    .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;
}