/* drummer-shared.css — common look-and-feel across all four Drummer sites
   (master magazine, video, music, podcast). Loaded by every page via
   <link rel="stylesheet" href="{prefix}/site/drummer-shared.css">.
   Defined by /Users/josephfrancis/generation/drummer/UNIFIED-SITE-SPEC.md
   sections U-3, U-4, U-5. */

/* --- Type + color tokens ------------------------------------------------ */

:root {
    --drummer-bg: #111;
    --drummer-fg: #e8e8e8;
    --drummer-accent: #e8c870;
    --drummer-dim: #cccccc;
    --drummer-rule: #2a2a2a;
    --drummer-card-bg: #1a1a1a;
}

body {
    background: var(--drummer-bg);
    color: var(--drummer-fg);
    font-family: "Jost", Georgia, serif;
    margin: 0;
}

h1, h2 {
    font-family: "ringold-clarendon", "Didot", Georgia, serif;
    font-weight: 400; font-style: normal;
}
h3, h4 {
    font-family: "Anton", "Impact", sans-serif;
    font-weight: 400; font-style: normal;
    letter-spacing: 0.5px;
}

/* --- Top navigation strip (U-4) ----------------------------------------- */

/* A real site nav bar: DRUMMER wordmark left, the four sections as gold pill
   BUTTONS on the right, the current section a solid-gold filled pill. */
.drummer-topnav {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 56px;
    padding: 0 24px;
    background: rgba(17, 17, 17, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--drummer-rule);
}

.drummer-topnav .topnav-logo {
    font-family: "Anton", "Impact", sans-serif;
    font-size: 22px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drummer-fg);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.drummer-topnav .topnav-logo:hover { color: var(--drummer-accent); }

.drummer-topnav .topnav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.drummer-topnav .topnav-links li { margin: 0; }

.drummer-topnav .topnav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid rgba(232, 200, 112, 0.30);
    background: rgba(232, 200, 112, 0.05);
    color: var(--drummer-fg);
    font-family: "Jost", Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
}

.drummer-topnav .topnav-links a:hover {
    background: rgba(232, 200, 112, 0.15);
    border-color: rgba(232, 200, 112, 0.60);
    color: var(--drummer-accent);
}

.drummer-topnav .topnav-links a:active { transform: translateY(1px); }
.drummer-topnav .topnav-links a:focus-visible { outline: 2px solid var(--drummer-accent); outline-offset: 2px; }

.drummer-topnav .topnav-links a.active {
    background: var(--drummer-accent);
    border-color: var(--drummer-accent);
    color: #1a1305;
    font-weight: 700;
    box-shadow: 0 2px 14px rgba(232, 200, 112, 0.30);
}
.drummer-topnav .topnav-links a.active:hover { background: #f0d488; border-color: #f0d488; color: #1a1305; }

/* --- Responsive (U-5) --------------------------------------------------- */

@media (max-width: 900px) {
    /* Stack to a centered logo row + a full-width wrapping pill row so the
       buttons never clip on a phone. width:100vw pins the bar to the VIEWPORT
       so a horizontally-overflowing page body can't stretch it and push the
       pills off-screen. */
    .drummer-topnav {
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: 10px;
        padding: 12px;
        width: 100vw;
        box-sizing: border-box;
    }
    .drummer-topnav .topnav-logo {
        margin: 0;
        font-size: 20px;
    }
    .drummer-topnav .topnav-links {
        margin: 0;
        width: 100%;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .drummer-topnav .topnav-links a {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 12.5px;
    }
    /* Generic mobile bumps — site-specific CSS extends these. */
    body { font-size: 13pt; line-height: 1.55; }
    button, a.btn, input[type="button"], input[type="submit"] {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 12pt;
    }
}