/* mobile nav: collapse links to the menu button at 1000px and under (was 800px; 9 links since 2026-10-26) */
@media (max-width: 1000px) {
    .nav { position: relative; }
    .nav-links {
        display: none;
        position: absolute; top: calc(100% + 10px); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--navy-deep, #062F40);
        border: 1px solid var(--glass-border, rgba(244,238,227,0.18));
        border-radius: 14px; padding: 10px;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
        z-index: 80;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 13px 16px; border-radius: 10px; }
    .nav-links a:hover, .nav-links a:active { background: rgba(244, 238, 227, 0.08); }
}
/* tablet / small laptop: tighten the full nav so seven items fit on one line (2026-10-24) */
@media (min-width: 1001px) and (max-width: 1240px) {
    .nav { gap: 14px; padding-left: 18px; padding-right: 18px; }
    .nav-brand-text { white-space: nowrap; }
    .nav-links { gap: 0; }
    .nav-links a { padding: 9px 10px; font-size: 0.86rem; }
    .nav-links a.nav-cta { padding: 9px 14px; margin-left: 4px; }
}

/* the menu button itself (styles.css shows it only under 800px) */
@media (max-width: 1000px) {
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 10px;
        border: 1px solid var(--glass-border); background: var(--glass-bg-light);
    }
    .nav-toggle svg { width: 22px; height: 22px; color: var(--white); }
}