/* Site navigation: four groups in the header on wide screens, one Menu button and a sheet on phones. Colours follow the theme variables. */
.nav-wrap { display: flex; align-items: center; gap: 1.25rem; }
.nav-home { font-size: 0.9rem; color: rgb(var(--muted)); text-decoration: none; }
.nav-home:hover { color: rgb(var(--ink)); }
.nav-toggle {
    display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; cursor: pointer;
    border: 1px solid rgb(var(--ink) / 0.15); border-radius: 8px; background: rgb(var(--ink) / 0.05);
    color: rgb(var(--ink)); font: 500 1rem 'Newsreader', Georgia, serif;
}
.nav-toggle:hover { border-color: rgb(var(--link) / 0.6); }

/* Phones: the sheet is pinned under the header at full width, so it can never run off the screen */
.site-nav { display: none; }
.site-nav.open {
    display: block; position: fixed; z-index: 50; top: 4.5rem; left: 1rem; right: 1rem; max-height: calc(100dvh - 6rem); overflow-y: auto;
    background: var(--bg-deep); border: 1px solid rgb(var(--ink) / 0.18); border-radius: 12px; padding: 0.5rem 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.nav-group-btn {
    display: flex; width: 100%; align-items: center; gap: 0.4rem; padding: 0.75rem 1rem 0.25rem; background: none; border: 0; text-align: left;
    font: 600 0.7rem 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.15em; color: rgb(var(--link)); pointer-events: none;
}
.nav-group-btn i { display: none; }
.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; color: rgb(var(--muted)); text-decoration: none; }
.nav-item i { width: 1rem; text-align: center; color: rgb(var(--link)); }
.nav-item strong { display: block; font-weight: 600; font-size: 0.9rem; color: rgb(var(--ink)); }
.nav-item small { display: block; font-size: 0.85rem; }
.nav-item:hover, .nav-item:focus-visible { background: rgb(var(--link) / 0.1); }

@media (min-width: 768px) {
    .nav-toggle { display: none; }
    .site-nav, .site-nav.open { display: flex; position: static; max-height: none; overflow: visible; background: none; border: 0; box-shadow: none; padding: 0; gap: 0.25rem; }
    .nav-group { position: relative; }
    .nav-group-btn {
        width: auto; padding: 0.5rem 0.75rem; border-radius: 8px; cursor: pointer; pointer-events: auto;
        font: 500 1rem 'Newsreader', Georgia, serif; text-transform: none; letter-spacing: 0; color: rgb(var(--ink));
    }
    .nav-group-btn i { display: inline; font-size: 0.65rem; opacity: 0.7; transition: transform 0.2s ease; }
    .nav-group-btn[aria-expanded="true"] i { transform: rotate(180deg); }
    .nav-group-btn:hover, .nav-group-btn[aria-expanded="true"] { background: rgb(var(--ink) / 0.07); }
    .nav-panel {
        display: none; position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 50; min-width: 280px; padding: 0.4rem 0;
        background: var(--bg-deep); border: 1px solid rgb(var(--ink) / 0.18); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    }
    .nav-group.open .nav-panel { display: block; }
}
[data-theme="contrast"] .nav-panel, [data-theme="contrast"] .site-nav.open { border: 2px solid #fff; box-shadow: none; }

/* Theme button: sun while dark (click for light), moon while light (click for dark) */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; cursor: pointer;
    border: 1px solid rgb(var(--ink) / 0.15); border-radius: 8px; background: transparent; color: rgb(var(--ink)); font-size: 0.95rem;
}
.theme-toggle:hover { border-color: rgb(var(--link) / 0.6); color: rgb(var(--link)); }
[data-theme="light"] .theme-toggle .fa-sun, :root:not([data-theme="light"]) .theme-toggle .fa-moon { display: none; }
@media (min-width: 768px) { .nav-wrap { gap: 0.75rem; } }
@media (max-width: 767px) { .nav-wrap { gap: 0.5rem; } }