/* Retro Weather Rewind — shared site navigation + footer.
   Stamped into every page by scripts/apply_site_nav.py; loaded LAST in <head>
   so it wins over each page's own inline <style> at equal specificity. */

.sitenav {
    position: relative;
    z-index: 60;
    background: linear-gradient(180deg, #0b1338, #070d24);
    border-bottom: 3px solid #e6b93c;
    font-family: Bahnschrift, 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}
.sitenav .navwrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3vw;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.sitenav li { position: relative; margin: 0; }
.sitenav .top {
    display: block;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #FFF5E6;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    padding: 14px 17px;
    cursor: pointer;
    white-space: nowrap;
}
.sitenav .top:hover { color: #e6b93c; background: rgba(230, 185, 60, .09); }
.sitenav .top:focus-visible { outline: 3px solid #e6b93c; outline-offset: -3px; }
.sitenav li.active > .top { color: #e6b93c; border-bottom-color: #e6b93c; }
.sitenav .caret {
    display: inline-block;
    margin-left: 7px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

.sitenav .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 244px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #0b1338;
    border: 2px solid #3f6bbf;
    border-top: 3px solid #e6b93c;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
    z-index: 70;
}
.sitenav li:hover > .menu,
.sitenav li:focus-within > .menu,
.sitenav li.open > .menu { display: block; }
.sitenav .menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 4px;
    color: #dbe4ff;
    font-size: .95rem;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
}
.sitenav .menu a:hover { background: #16255c; color: #fff; }
.sitenav .menu a[aria-current="page"] { color: #e6b93c; font-weight: 700; }
.sitenav .menu .sub { display: block; font-size: .78rem; color: #8fa0cf; letter-spacing: .01em; }
.sitenav .menu a:hover .sub { color: #b9c6ea; }

@media (max-width: 720px) {
    .sitenav .navwrap { padding: 0 4px; }
    /* position:static so the menu anchors to the BAR, not the item - otherwise a
       244px menu hangs off the side of a phone. Sizing keeps all four on one row
       down to 360px. */
    .sitenav li { position: static; }
    .sitenav .top { padding: 12px 9px; font-size: .78rem; letter-spacing: .03em; }
    .sitenav .caret { margin-left: 5px; }
    .sitenav .menu { left: 8px; right: 8px; min-width: 0; }
    .sitenav .menu a { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
    .sitenav .top, .sitenav .menu a { transition: color .12s, background-color .12s; }
}

/* --- shared footer ------------------------------------------------------- */
footer.sitefoot {
    border-top: 5px solid #e6b93c;
    background: #050818;
    color: #7e88ac;
    font-family: Bahnschrift, 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    font-size: .87rem;
    line-height: 1.6;
    text-align: left;
    padding: 30px 5vw 34px;
    margin-top: 0;
}
footer.sitefoot .cols {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 22px 26px;
}
footer.sitefoot h2 {
    color: #e6b93c;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 9px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid #24418f;
}
footer.sitefoot ul { list-style: none; margin: 0; padding: 0; }
footer.sitefoot li { margin: 0 0 6px; }
footer.sitefoot a { color: #a9b7dd; text-decoration: none; margin: 0; }
footer.sitefoot a:hover { color: #FFF5E6; text-decoration: underline; }
footer.sitefoot a[aria-current="page"] { color: #e6b93c; }
footer.sitefoot .base {
    max-width: 1100px;
    margin: 24px auto 0;
    padding-top: 18px;
    border-top: 1px solid #1b2a5e;
    text-align: center;
}
footer.sitefoot .socials { margin-bottom: 10px; }
footer.sitefoot .socials a { margin: 0 9px; color: #6cafeb; }
footer.sitefoot .fine { max-width: 74ch; margin: 0 auto; opacity: .82; font-size: .84rem; }
footer.sitefoot .copy { margin-top: 9px; opacity: .8; }
