/* =====================================================================
   ZOOM SYSTEM
   - Desktop: zoom = compression only
   - Mobile: width-only stacking
===================================================================== */
html, body {
    overflow-x: hidden;
}


/* =========================================================
   DEBUG — ZOOM STATE INDICATOR

    body::after {
    content: "ZOOM BASE — NO OVERRIDE";
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: #1a5632;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 999999;
    pointer-events: none;
} */

.bg-darker.py-2.fixed-top {
    display: block !important;
    visibility: visible !important;
}

.kyp-mobile-secondary {
    display: none;
}

/* =====================================================================
   DESKTOP ZOOM — LIGHT COMPRESSION (125%–149%)
===================================================================== */
@media (min-width: 992px) and (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {

    /* =========================================================
    DEBUG — ZOOM STATE INDICATOR
        body::after {
        content: "DESKTOP ZOOM — 125–149%";
        background: #2e7d32;
    } */

    nav.navbar.bootsnav {
        padding-block: 0.5rem;
    }

        nav.navbar.bootsnav .nav-link {
            font-size: 0.95rem;
            line-height: 1.4;
            white-space: nowrap;
        }
}

/* =====================================================================
   DESKTOP ZOOM — MEDIUM COMPRESSION (150%–174%)
   STILL DESKTOP — NO STACK
===================================================================== */
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) {

    /* =========================================================
    DEBUG — ZOOM STATE INDICATOR

        body::after {
        content: "DESKTOP ZOOM — 150–174%";
        background: #1565c0;
    } */

    nav.navbar.bootsnav {
        padding-block: 0.4rem;
    }

        nav.navbar.bootsnav .nav-link {
            font-size: 0.9rem;
            line-height: 1.35;
        }

    .btn-default.btn-highlighted {
        font-size: 0.65rem !important;
    }

    .video-section h1 {
        padding-top: 3.5rem;
        padding-inline: 1rem;
    }

    /* ---------------------------------------------
       HERO OVERLAY STACKS RESIZE
    --------------------------------------------- */

    .stack-433 {
        min-height: 85vh !important; /* shrink from 100vh */
        height: auto !important;
    }

        .stack-433 .hero-img {
            position: relative !important;
            top: 0 !important;
            height: auto !important;
            max-height: 85vh !important;
            object-fit: cover;
        }

    .hero-img {
        top: var(--header-h);
        object-fit: cover;
        position: relative !important;
        object-position: center -30%;
    }
    
    .overlay-wrap {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        padding-top: clamp(0.5rem, 2vh, 1.25rem) !important;
        width: 100% !important;
        height: auto !important;
        z-index: 2 !important;
    }

}


/* =====================================================================
   DESKTOP ZOOM — HIGH (175%–249%)
===================================================================== */
@media (min-width: 992px) and (min-resolution: 1.75dppx) and (max-resolution: 2.49dppx) {

    /* =========================================================
    DEBUG — ZOOM STATE INDICATOR
        body::after {
        content: "DESKTOP ZOOM — 175–249%";
        background: #c62828;
    } */

    nav.navbar.bootsnav .nav-link {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    .video-section h1 {
        padding-top: 4.5rem;
        padding-inline: 1rem;
    }

    /* ---------------------------------------------
       HERO OVERLAY STACKS RESIZE
    --------------------------------------------- */

    .stack-433 {
        min-height: 90vh !important; /* shrink from 100vh */
        height: auto !important;
    }

        .stack-433 .hero-img {
            position: relative !important;
            top: 0 !important;
            height: auto !important;
            max-height: 90vh !important;
            object-fit: cover;
        }

    .hero-img {
        top: var(--header-h);
        object-fit: cover;
        position: relative !important;
        object-position: center -70%;
    }
   
    .overlay-wrap {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        padding-top: clamp(0.5rem, 2vh, 1.25rem) !important;
        width: 100% !important;
        height: auto !important;
        z-index: 2 !important;
    }

}

/* =====================================================================
   DESKTOP ZOOM — EXTREME (≥250%)
===================================================================== */
@media (min-width: 992px) and (min-resolution: 2.5dppx) {

    /* =========================================================
    DEBUG — ZOOM STATE INDICATOR

        body::after {
        content: "DESKTOP ZOOM — ≥250%";
        background: #37474f;
    } */

    h1,
    h2 {
        line-height: 1.25;
    }

    nav.navbar.bootsnav .nav-link {
        font-size: 0.8rem;
    }

    h1.Heading-wing {
        font-size: 1.85rem;
        letter-spacing: 7px; /* tighten tracking slightly */
    }

}

/* =====================================================================
   DESKTOP NAV AUTHORITY
   Desktop NEVER collapses
===================================================================== */
@media (min-width: 992px) {

    nav.navbar.bootsnav .navbar-toggler {
        display: none !important;
    }

    nav.navbar.bootsnav .navbar-collapse {
        display: flex !important;
        height: auto !important;
        overflow: visible !important;
    }

    nav.navbar.bootsnav ul.navbar-nav {
        flex-direction: row !important;
        align-items: center;
    }
}

/* =====================================================================
   MOBILE NAV — WIDTH ONLY (≤991.98px)
   This is the ONLY place stacking happens
===================================================================== */
@media (max-width: 991.98px) {

    /* =========================================================
    DEBUG — ZOOM STATE INDICATOR
        body::after {
        content: "MOBILE NAV — WIDTH MODE";
        background: #000;
    } */

    :root {
        --header-h: 64px;
    }

    body.nav-open {
        overflow: hidden;
    }

    nav.navbar.bootsnav li.dropdown > .dropdown-menu {
        border-bottom: none !important;
        box-shadow: none !important;
    }

    nav.navbar.bootsnav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-h);
        min-height: var(--header-h);
        background: #fffef9;
        z-index: 1000;
    }

        nav.navbar.bootsnav .container {
            margin-top: -40px;
        }

        nav.navbar.bootsnav .attr-nav {
            top: 50%;
            transform: translateY(-50%);
            right: 50px;
        }


        nav.navbar.bootsnav img.logo.logo-scrolled {
            width: 140px;
            top: 0;
        }

        nav.navbar.bootsnav .navbar-toggler {
            display: block;
            top: 0;
            margin-right: 0px;
        }

        nav.navbar.bootsnav .navbar-collapse {
            position: fixed;
            top: var(--header-h);
            left: 0;
            right: 0;
            height: calc(100vh - var(--header-h));
            background: #fffef9;
            padding: 1.25rem 2rem;
            overflow-y: auto;
        }

        nav.navbar.bootsnav ul.navbar-nav {
            flex-direction: column;
        }

    .video-section h1 {
        padding-top: 0 !important;
       
    }

    /* ---------------------------------------------
       HERO STACKS
    --------------------------------------------- */
    .hero-img {
        margin-top: var(--header-h);
        min-height: 360px;
        object-fit: cover;
        position: relative !important;
    }
    /* ---------------------------------------------
       OVERLAY STACKS NORMALLY
    --------------------------------------------- */
    .overlay-wrap {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        padding-top: clamp(0.5rem, 2vh, 1.25rem) !important;
        width: 100% !important;
        height: auto !important;
        z-index: 2 !important;
    }

    .bg-darker.py-2.fixed-top {
        display: none !important;
        visibility: hidden !important;
    }
    /* ------------------------------------------------------------
   KYPROUD-STYLE MOBILE SECONDARY NAV (EXTRA TIGHT)
------------------------------------------------------------ */
    .kyp-mobile-secondary {
        list-style: none;
        margin: 0.5rem 0 0;
        padding-left: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem; /*  very tight vertical rhythm */
    }

        .kyp-mobile-secondary li {
            margin: 0;
            padding: 0;
        }

        .kyp-mobile-secondary a {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.1rem 0; /*  key: removes Bootstrap bulk */
            font-size: 0.78rem; /*  matches kyproud mobile */
            line-height: 1.15;
            font-weight: 400;
            color: #1a5632;
            text-decoration: none;
        }

            .kyp-mobile-secondary a:hover,
            .kyp-mobile-secondary a:focus {
                text-decoration: underline;
            }

        /* External link icon — very small */
        .kyp-mobile-secondary .external-icon {
            display: inline-flex;
            align-items: center;
            margin-left: 0.15rem;
            color: #6b4f2d;
        }

        .kyp-mobile-secondary .icon {
            width: 0.65em;
            height: 0.65em;
            fill: currentColor;
        }

        .min-vh-100 {
            min-height: 30vh!important;
        }

}

/* ============================================================
   TIER 5 — CHROME EXTREME (400–500%)
   Control only — no reflow
============================================================ */
@media (min-resolution:4dppx),(max-height:360px) {

    /* =========================================================
      DEBUG — ZOOM STATE INDICATOR
        body::after {
        content: "EXTREME ZOOM";
        background: #000;
        color: #fff;
    } */

    nav.navbar.bootsnav .attr-nav {
        top: 50%;
        transform: translateY(-50%);
        padding-right: 5px;
        right: 0 !important;
    }

    .video-section h1 {
        font-size: 1.5rem; /* hard cap */
        line-height: 1.25; /* improves legibility */
        margin: 0;
        padding-top: 1.25rem; /* avoids nav overlap */
        max-width: 100%;
        word-break: normal;
    }

    .custom-search-input{
        width:70%!important;
    }

    nav.navbar.bootsnav .navbar-toggler {
        margin-right: 20px;
    }


    @media (min-resolution: 2dppx) {
        nav .navbar.bootsnav .navbar-toggler {
            margin-right: 20px;
        }
    }
}

/* =====================================================================
   SAFARI STABILITY
===================================================================== */
@supports (-webkit-touch-callout: none) {
    nav.navbar,
    nav.navbar * {
        transform: none !important;
    }
}