/* Final mobile readability layer: loaded after page-specific styles. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.site-nav .nav-profile { display: inline-flex; align-items: center; gap: 7px; margin-left: 0; }
.site-nav { font-size: .98rem; }

/* Desktop navigation: readable labels without breaking words into two lines. */
@media (min-width: 1021px) {
    .site-header { height: 82px; }
    .header-inner { gap: 18px; }
    .brand { flex: 0 0 auto; font-size: 1.58rem; }
    .brand i { width: 27px; height: 27px; }
    .site-nav { flex: 1 1 auto; justify-content: flex-end; gap: 22px; white-space: nowrap; font-size: .84rem; font-weight: 700; }
    .site-nav > a { flex: 0 0 auto; white-space: nowrap; }
    .site-nav > a:not(.btn) { padding-block: 27px 24px; }
    .site-nav .btn { min-height: 42px; padding-inline: 16px; border-radius: 2px; font-size: .82rem; }
    .site-nav .nav-action { margin-left: 0; }

}

@media (min-width: 1451px) {
    .site-nav .nav-profile-avatar { display: grid; place-items: center; }
}

@media (max-width: 1020px) {
    .site-header { position: sticky; top: 0; box-shadow: 0 2px 14px rgba(7, 27, 46, .05); }
    .menu-toggle { z-index: 2; display: grid; place-content: center; width: 44px; height: 44px; padding: 0; color: var(--navy); border: 1px solid #dce4ea; border-radius: 10px; background: #fff; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
    .menu-toggle:hover, .menu-toggle.is-open { border-color: #f0b9bd; background: #fff4f5; box-shadow: 0 5px 14px rgba(227, 6, 19, .1); }
    .menu-toggle span { width: 21px; margin: 2.5px; border-radius: 99px; transition: transform .18s ease, opacity .18s ease, background-color .18s ease; }
    .menu-toggle.is-open span { background: var(--red); }
    .menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
    .menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav { position: fixed; top: 86px; right: 14px; left: 14px; max-height: min(460px, calc(100svh - 104px)); padding: 12px; overflow-y: auto; border: 1px solid #e1e7ec; border-top: 3px solid var(--red); border-radius: 0 0 16px 16px; background: rgba(255, 255, 255, .98); box-shadow: 0 20px 42px rgba(7, 27, 46, .18); backdrop-filter: blur(12px); }
    .site-nav.open { display: grid; grid-template-columns: 1fr; align-content: start; }
    .site-nav > a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; color: #24394a; border: 0; border-radius: 8px; font-size: .94rem; font-weight: 750; }
    .site-nav .nav-profile { gap: 9px; }
    .site-nav > a:not(.btn):hover, .site-nav > a:not(.btn).active { color: var(--red); border: 0; background: #fff0f1; }
    .site-nav .nav-action { width: 100%; min-height: 50px; margin: 7px 0 0; color: #fff; border-color: var(--red); background: var(--red); box-shadow: none; }
    .site-nav .nav-action:hover, .site-nav .nav-action.active { color: #fff; background: var(--red-dark); }
    .site-nav .nav-profile { width:100%; min-height:48px; margin:0; justify-content:flex-start; color:#24394a; border-color:#d9e3e9; background:#fff; }
    .site-nav .nav-profile:hover, .site-nav .nav-profile.active { color:var(--red); border-color:#efb8bd; background:#fff3f4; }
}

@media (max-width: 760px) {
    html, body { width: 100%; max-width: 100%; overflow-x: clip; }
    /* On narrow desktop previews, the classic scrollbar was reserving a visible strip. */
    html { scrollbar-width: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
    body { min-width: 0; font-size: 16px; line-height: 1.6; }
    .top-utility, .site-header, main, .site-footer { width: 100%; max-width: 100%; }

    /* Small utility text remains compact without falling below a readable size. */
    main small, .site-footer small,
    main .eyebrow, main .section-kicker, main .section-label,
    main .form-note, main .tracking-divider, main .breadcrumb,
    main .integration-footnote, main .portal-frame-loading p,
    main .portal-frame-fallback p, main .portal-frame-fallback a,
    main .quote-confirmation, main .quote-whatsapp,
    main .contact-result, main .provider-copy small,
    main .contact-form label, main .quote-card label,
    main .locker-provider-copy small, main .locker-provider-copy em,
    main .locker-control-heading p, main .locker-banner-points span,
    main .tracking-provider-control > p small {
        font-size: .8125rem !important;
        line-height: 1.5;
    }

    main p, main li, main label, main input, main select, main textarea,
    main button, main .btn, .site-footer p, .site-footer a {
        font-size: max(.875rem, 1em);
    }

    main input, main select, main textarea { min-height: 46px; }
    main textarea { min-height: 120px; }
    .site-nav > a:not(.btn) { font-size: .94rem; }
    .site-footer { font-size: .94rem; }
    .footer-bottom { font-size: .8rem; }
    .site-nav { top: 72px; right: 10px; left: 10px; max-height: min(450px, calc(100svh - 82px)); padding: 10px; border-radius: 0 0 13px 13px; }
    .site-nav > a:not(.btn) { min-height: 47px; padding-inline: 13px; }
    .site-nav .nav-action { min-height: 48px; margin-top: 5px; }
    body.menu-open { overflow: hidden; }

    /* Avoid painting distant sections until the user approaches them. */
    @supports (content-visibility: auto) {
        main > .section,
        main > .location-section,
        main > .tracking-guide-section,
        main > .tracking-data-section,
        main > .tracking-faq-section {
            content-visibility: auto;
            contain-intrinsic-size: auto 760px;
        }
    }
}

/* Single responsive navigation layer. It replaces conflicting menu offsets from
   earlier stylesheet layers and keeps the popover attached to the header. */
@media (max-width: 1160px) {
    .site-header { position: sticky; top: 0; z-index: 100; }
    .menu-toggle { z-index: 2; display: grid; place-content: center; width: 44px; height: 44px; padding: 0; color: var(--navy); border: 1px solid #dce4ea; border-radius: 10px; background: #fff; }
    .site-nav {
        position: absolute;
        top: 100%;
        right: 14px;
        left: 14px;
        z-index: 1;
        display: none;
        max-height: min(500px, calc(100svh - 96px));
        padding: 12px;
        overflow-y: auto;
        border: 1px solid #e1e7ec;
        border-top: 3px solid var(--red);
        border-radius: 0 0 16px 16px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 20px 42px rgba(7, 27, 46, .18);
        backdrop-filter: blur(12px);
    }
    .site-nav.open { display: grid; grid-template-columns: 1fr; align-content: start; gap: 0; }
    .site-nav > a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; color: #24394a; border: 0; border-radius: 8px; font-size: .94rem; font-weight: 750; }
    .site-nav > a:not(.btn)::after { display: none; }
    .site-nav > a:not(.btn):hover, .site-nav > a:not(.btn).active { color: var(--red); border: 0; background: #fff0f1; }
    .site-nav .nav-action { width: 100%; min-height: 50px; margin: 7px 0 0; color: #fff; border-color: var(--red); background: var(--red); box-shadow: none; }
    .site-nav .nav-action:hover, .site-nav .nav-action.active { color: #fff; background: var(--red-dark); }
    .site-nav .nav-profile-avatar {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100% !important;
        min-height: 50px !important;
        height: 50px;
        padding: 0 14px !important;
        margin: 7px 0 0 !important;
        overflow: hidden;
        color: #24394a;
        border: 1px solid #d9e3e9 !important;
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
    }
    .site-nav .nav-profile-avatar:hover, .site-nav .nav-profile-avatar.active { color: var(--red); border-color: var(--red) !important; background: #fff; box-shadow: none; }
    .site-nav .nav-profile-avatar img { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; }
    .site-nav .nav-profile-avatar .nav-avatar-icon { flex: 0 0 22px; width: 22px; height: 22px; }
    .site-nav .nav-profile-label { display: inline; }
}

/* Desktop keeps its full navigation. These compact values fit it comfortably
   on regular laptop screens without switching to the mobile menu. */
@media (min-width: 1161px) and (max-width: 1350px) {
    .header-inner { gap: 12px; }
    .header-logo { width: 190px; }
    .site-nav { gap: 11px; font-size: .72rem; }
    .site-nav > a:not(.btn) { padding-block: 27px 24px; }
    .site-nav .nav-action { min-height: 39px; padding-inline: 10px; font-size: .71rem; }
}

@media (max-width: 760px) {
    .site-header { border-bottom: 1px solid #e7edf1; box-shadow: 0 4px 16px rgba(7, 27, 46, .07); backdrop-filter: none; }
    .site-header.is-scrolled { height: 70px; }
    body.menu-open .site-header { position: fixed; right: 0; left: 0; }
    .menu-toggle { width: 42px; height: 42px; border-radius: 50%; }
    .site-nav {
        position: fixed;
        top: 70px;
        right: 0;
        left: 0;
        max-height: calc(100svh - 70px);
        padding: 12px 14px 17px;
        border: 0;
        border-top: 1px solid #e3eaee;
        border-radius: 0 0 18px 18px;
        background: #fff;
        box-shadow: 0 16px 30px rgba(7, 27, 46, .14);
    }
    .site-header.is-scrolled .site-nav { top: 70px; max-height: calc(100svh - 70px); }
    .site-nav.open { gap: 2px; }
    .site-nav > a:not(.btn) { min-height: 46px; padding-inline: 13px; border-radius: 9px; font-size: .92rem; }
    .site-header.is-scrolled .site-nav > a:not(.btn) { padding-top: 0; padding-bottom: 0; }
    .site-nav > a:not(.btn).active { position: relative; padding-left: 17px; }
    .site-nav > a:not(.btn).active::before { content: ""; position: absolute; left: 0; width: 4px; height: 22px; border-radius: 99px; background: var(--red); }
    .site-nav .nav-action { min-height: 48px; margin-top: 8px; border-radius: 9px; font-size: .86rem; }
    .site-nav .nav-action:first-of-type { margin-top: 11px; }
    .site-nav .nav-profile-avatar { min-height: 48px !important; height: 48px; margin-top: 8px !important; border-radius: 9px; }
}