/* Compact mobile navigation, with the same geometry in both site themes. */
:root {
    --mobile-nav-safe-area: env(safe-area-inset-bottom, 0px);
    --mobile-nav-offset: calc(12px + var(--mobile-nav-safe-area));
    --mobile-nav-height: 70px;
}

.mobile-bottom-nav {
    display: none;
}

/* Mobile header actions and theme choices live in the expanded menu. */
@media (max-width: 767.98px) {
    .site-header-row { gap: 8px; }
    .site-header-brand { margin-right: 0; }
    .site-header-actions { flex: 0 0 auto; }
    .site-theme-picker--desktop { display: none; }
    .mobile-header-menu {
        max-height: calc(100vh - var(--mobile-menu-top, 56px) - var(--mobile-nav-height, 70px) - var(--mobile-nav-offset, 12px) - 12px);
        max-height: calc(100dvh - var(--mobile-menu-top, 56px) - var(--mobile-nav-height, 70px) - var(--mobile-nav-offset, 12px) - 12px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mobile-theme-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
    .mobile-theme-heading { display: block; margin-bottom: 10px; padding-inline: 3px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
    .mobile-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--muted) / .5); }
    .mobile-theme-choice { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; border-radius: 8px; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
    .mobile-theme-choice i { font-size: 16px; }
    .mobile-theme-choice[aria-pressed="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
    .mobile-theme-choice:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
}
@media (max-width: 359px) {
    .site-header-brand a { font-size: 14px; }
}

@media (max-width: 767.98px) {
    body:has(.mobile-bottom-nav) {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-offset) + 12px);
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 50;
        right: 12px;
        bottom: var(--mobile-nav-offset);
        left: 12px;
        display: grid;
        grid-template-columns: repeat(var(--mobile-nav-columns, 4), minmax(0, 1fr));
        align-items: stretch;
        gap: 4px;
        box-sizing: border-box;
        height: var(--mobile-nav-height);
        padding: 6px;
        border: 1px solid hsl(var(--border) / .85);
        border-radius: 22px;
        background: hsl(var(--background));
        color: hsl(var(--foreground));
        box-shadow: 0 6px 24px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .04);
    }

    .mobile-bottom-nav-link {
        display: flex;
        min-width: 0;
        min-height: 56px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 2px;
        border-radius: 12px;
        color: hsl(var(--muted-foreground));
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: color .18s ease, background-color .18s ease;
    }

    .mobile-bottom-nav-link.is-active,
    .mobile-bottom-nav-link[aria-current="page"] {
        background: hsl(var(--muted));
        color: hsl(var(--foreground));
    }

    .mobile-bottom-nav-link:focus-visible {
        outline: 2px solid hsl(var(--ring));
        outline-offset: 1px;
    }

    .mobile-bottom-nav-icon {
        display: flex;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .mobile-bottom-nav-icon svg {
        display: block;
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bottom-nav[data-items="5"] {
        gap: 2px;
    }

    .mobile-bottom-nav[data-items="5"] .mobile-bottom-nav-link {
        padding-inline: 0;
    }

    .mobile-bottom-nav[data-items="5"] .mobile-bottom-nav-label {
        font-size: 10px;
        letter-spacing: -.025em;
    }

    body:has(.mobile-bottom-nav) .whatsapp-floating-btn {
        z-index: 49;
        right: 16px;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-offset) + 14px);
        width: 48px;
        height: 48px;
        animation: none;
        transform: none;
    }

    body:has(.mobile-bottom-nav) .whatsapp-floating-btn i {
        font-size: 26px;
        line-height: 1;
    }

    html[data-theme="dark"] .mobile-bottom-nav {
        box-shadow: 0 8px 28px rgb(0 0 0 / .3), 0 1px 3px rgb(0 0 0 / .16);
    }

    @supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
        .mobile-bottom-nav {
            background: hsl(var(--background) / .96);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
        }
    }

    @media (hover: hover) {
        .mobile-bottom-nav-link:hover {
            background: hsl(var(--muted));
            color: hsl(var(--foreground));
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav-link {
        transition: none;
    }
}