html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ============================================
   STICKY FOOTER - FLEXBOX LAYOUT
   ============================================ */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Fixed background should not participate in flex layout */
.fixed-background {
    position: fixed;
    /* Already fixed, so it won't affect flex layout */
}

/* Main content wrapper - must grow to push footer down */
body > .relative.flex-grow,
body > div.relative {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Main element should also grow */
main[role="main"],
main.flex-grow {
    flex: 1 0 auto;
}

/* Footer stays at bottom */
.footer {
    flex-shrink: 0;
}

/* Navbar spacer */
body > .h-24 {
    flex-shrink: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Pill Navbar Styles — defined in site.css; base.css only overrides nav-pills for other navs */

    /* Remove conflicting nav-pills styles for pill-navbar */
    .pill-navbar .nav-pills {
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

/* General nav-pills styles for other navs */
nav:not(.pill-navbar) .nav-pills {
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: var(--bg-secondary, #1e1e1e);
    padding: 0.5rem 2rem;
}

nav:not(.pill-navbar) .nav-link {
    font-size: 1.25rem;
    color: #222 !important;
}

    nav:not(.pill-navbar) .nav-link.active {
        background-color: #222 !important;
        color: #fff !important;
    }

/* ============================================
   FIX: Prevent page content from blocking navbar
   ============================================ */
.stage,
#viewer,
.container,
main {
    pointer-events: none;
}

    /* Re-enable pointer events for interactive children */
    .stage *,
    #viewer *,
    .container *,
    main * {
        pointer-events: auto;
    }

/* Ensure canvas doesn't block fixed elements */
canvas {
    pointer-events: auto;
}

/* Dark theme defaults */
:root {
    --bg-color: #121212;
    --bg-secondary: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #333;
}

/* Dark fallback fills iOS safe-area insets; orbs still show through the
   transparent body since they are position:fixed children. */
html {
    background-color: #0a0a10;
}

body {
    background-color: transparent;
    color: var(--text-color);
}

/* Override Bootstrap light defaults */
.container, .container-fluid {
    background-color: transparent;
}

/* Pill navbar dark styling */
.pill-navbar {
    background-color: var(--bg-secondary);
}

    .pill-navbar .nav-link {
        color: var(--text-color);
    }

        .pill-navbar .nav-link:hover {
            color: #fff;
        }

/* Footer dark styling */
.footer {
    background-color: var(--bg-secondary);
    border-color: var(--border-color) !important;
    color: var(--text-muted);
}

    .footer a {
        color: var(--text-color);
    }

/* Ensure main content doesn't block navbar */
.container, main {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */
[data-theme="light"] html {
    background-color: var(--bg-page, #ffffff);
}

[data-theme="light"] .pill-navbar .nav-link:hover {
    color: #0f172a;
}

[data-theme="light"] .footer a:hover {
    color: #0f172a;
}

[data-theme="light"] nav:not(.pill-navbar) .nav-pills {
    background: var(--bg-secondary, #f5f6f8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] nav:not(.pill-navbar) .nav-link {
    color: #334155 !important;
}

[data-theme="light"] nav:not(.pill-navbar) .nav-link.active {
    background-color: #3b82f6 !important;
    color: #fff !important;
}