/* ============================================
   NAV TYPOGRAPHY LOCK
   The menu renders in the same face on every page, regardless of which
   fonts the page itself loads or sets globally. Buttons keep their own
   inline stack, so this only pins the logo link and the menu items.
   ============================================ */
#frontNav,
#frontNav .navItem,
#frontNav a {
    font-family: 'PT Sans Narrow', 'Arial Narrow', Arial, sans-serif;
}
/* ============================================
   FIXED FRONT NAV - applies to EVERY front page
   Strategy: position:fixed pinned to top:0 with explicit height,
   body padding-top compensates so content starts below the nav.
   - Eliminates the "white bar above the menu" gap that appears
     when sticky context breaks (any ancestor with overflow:hidden
     or scroll container kills sticky and the nav falls back into
     the body flow, exposing the browser-default 8px body margin).
   - Bulletproof html/body reset removes that 8px margin globally.
   - html background is painted with the nav colour so any phantom
     overscroll/repaint gap stays invisible (no white flash).
   - Inline here (not in cached landing.css) so it takes effect
     immediately without waiting for a Cloudflare cache purge.
   ============================================ */
html, body {
    margin: 0 !important;          /* kill browser-default 8px body margin */
    overflow-x: hidden;            /* fallback for older browsers */
    overflow-x: clip;              /* modern: prevents horizontal scroll */
}
#frontNav {
    margin: 0 !important;          /* never let any rule push the nav down */
}
@media only screen and (min-width: 1201px) {
    #frontNav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 74px !important;
        z-index: 1000;
        background: #0d1b2a;
        box-sizing: border-box !important;
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body {
        padding-top: 74px !important;   /* compensate for fixed nav height */
    }
    #frontNav.is-scrolled {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    }
}
#hamButton {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: rgba(255,255,255,0.9);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: background 0.15s ease;
}
#hamButton:active {
    background: rgba(255,255,255,0.08);
}
#hamButton.is-active {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
@media only screen and (min-width: 769px) {
    #googleIcon { display: none !important; }
}
@media only screen and (max-width: 1200px) {
    #hamButton {
        display: flex !important;
    }
    #hamButton.is-active {
        display: flex !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #frontNav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        padding: 0 12px !important;
        height: 56px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }
    body {
        padding-top: 56px !important;
    }
    .logoMainLink {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding: 6px 0 !important;
    }
    #mainLogo img {
        width: 140px !important;
        height: auto !important;
        display: block !important;
    }
    #loginMenu {
        column-gap: 8px !important;
        padding-right: 0 !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }
    #googleIcon {
        display: flex !important;
        align-items: center !important;
    }
    #googleIcon img {
        width: 76px !important;
        height: auto !important;
        display: block !important;
    }
    .frontNav-login-btn {
        height: 40px !important;
        padding: 0 18px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        border-radius: 50px !important;
        border: 2px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 2px 12px rgba(255,224,27,0.35) !important;
    }
    .frontNav-login-btn svg {
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
    .frontNav-register-btn { display: none !important; }
}
@media only screen and (max-width: 480px) {
    #frontNav {
        padding: 0 8px !important;
        height: 52px !important;
        gap: 8px !important;
    }
    body {
        padding-top: 52px !important;
    }
    #hamButton {
        width: 38px !important;
        height: 38px !important;
    }
    #mainLogo img {
        width: 125px !important;
    }
    #googleIcon img {
        width: 66px !important;
    }
    .frontNav-login-btn {
        height: 38px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
    }
    .frontNav-login-btn svg {
        width: 15px !important;
        height: 15px !important;
    }
}
@media only screen and (max-width: 360px) {
    #frontNav {
        padding: 0 6px !important;
        height: 48px !important;
        gap: 6px !important;
    }
    body {
        padding-top: 48px !important;
    }
    #hamButton {
        width: 36px !important;
        height: 36px !important;
    }
    #mainLogo img {
        width: 110px !important;
    }
    #googleIcon {
        display: none !important;
    }
    .frontNav-login-btn {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
    }
    .frontNav-login-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}