@font-face {
    font-family: EnmarMobileNav;
    src: url('../assets/fonts/thmanyahsans-medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: EnmarMobileNav;
    src: url('../assets/fonts/thmanyahsans-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* Restore the wordmark alongside the mobile brand symbol. */
@media (max-width: 768px) {
    #navbar .logo { gap: 10px; align-items: center; }
    #navbar .logo > span { display: flex; align-items: center; }
    #navbar .logo > span img {
        display: block;
        width: 92px;
        height: 34px;
        object-fit: contain;
    }
    #navbar .logo > img { width: 40px; height: 40px; object-fit: contain; }
}

@media (max-width: 720px) {
    .site-shell .topbar .brand { gap: 10px; align-items: center; }
    .site-shell .topbar .brand > img { width: 40px; height: 40px; object-fit: contain; }
    .site-shell .topbar .brand::after {
        display: block;
        width: 92px;
        height: 34px;
        flex-shrink: 0;
    }
}

/* Shared drawer appearance for the home and internal mobile menus. */
@media (max-width: 720px) {
    #navbar #navLinks,
    .site-shell #mainNav {
        top: 0;
        right: 0;
        left: auto;
        width: min(82vw, 330px);
        height: 100svh;
        margin: 0;
        padding: 80px 24px 24px;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        background: #080412 !important;
        box-shadow: -12px 0 32px rgba(0, 0, 0, .25);
        text-align: start;
        font-family: EnmarMobileNav, Arial, sans-serif;
    }

    #navbar #navLinks > li,
    .site-shell #mainNav > a {
        flex-shrink: 0;
        width: 100%;
    }

    #navbar #navLinks > li:not(.mobile-nav-actions) > a,
    .site-shell #mainNav > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
        color: #c7bed1;
        font-size: .9rem;
        font-weight: 500;
        line-height: 1.5;
        white-space: normal;
        text-decoration: none;
        text-shadow: none;
    }

    #navbar #navLinks a.active,
    .site-shell #mainNav > a.active {
        color: #fff;
        font-weight: 700;
    }

    #navbar #navLinks a::after,
    .site-shell #mainNav a::after { display: none; }

    #navbar #navLinks .mobile-nav-actions,
    .site-shell #mainNav .mobile-nav-actions {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    #navbar #navLinks .mobile-nav-actions > *,
    .site-shell #mainNav .mobile-nav-actions > * {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 14px;
        border-radius: 999px;
        color: #fff;
        font: 700 .85rem/1.4 EnmarMobileNav, Arial, sans-serif;
        text-align: center;
    }

    #navbar #navLinks a,
    #navbar #navLinks button,
    .site-shell #mainNav a,
    .site-shell #mainNav button {
        font-family: EnmarMobileNav, Arial, sans-serif !important;
    }

    #navbar #navLinks .language-toggle,
    .site-shell #mainNav .lang-toggle {
        border: 1px solid rgba(255, 255, 255, .24);
        background: rgba(255, 255, 255, .04);
    }
}