@media screen and (max-width: 560px) {
    .nav-container {
        position: fixed;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background: #1f2227;
        opacity: 0;
        transition: all 0.2s ease;
        display: none;
    }

    .nav-container ul li a {
        padding: 10px 25px !important;
    }
}

/* ---- Desktop nav: inline links, no hamburger (≥ 768px) ---- */
@media screen and (min-width: 768px) {
    /* hide the hamburger + its checkbox */
    .nav-open { display: none !important; }
    #nav { display: none !important; }

    /* the link container sits inline in the header instead of a full-screen overlay */
    .nav-container {
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        width: auto !important;
        background: transparent !important;
        opacity: 1 !important;
        display: block !important;
        z-index: auto !important;
        float: right;
    }

    .nav-container ul {
        position: static !important;
        transform: none !important;
        width: auto !important;
        float: right;
        margin: 12px 30px 0 0;
    }

    .nav-container ul li {
        display: inline-block !important;
        float: left !important;
        width: auto !important;
        text-align: left !important;
        margin: 0 0 0 26px !important;
    }
    .nav-container ul li:first-child { margin-left: 0 !important; }
    /* keep intentionally-hidden items (e.g. Test Shoot) hidden on desktop too */
    .nav-container ul li[style*="display:none"],
    .nav-container ul li[style*="display: none"] { display: none !important; }

    .nav-container ul li a {
        opacity: 1 !important;
        transform: none !important;
        color: #1f2227 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        letter-spacing: 0.04em !important;
        padding: 0 !important;
        transition: color 0.2s ease;
    }
    .nav-container ul li a:hover { color: #808080 !important; }
}

/* The hamburger checkbox is only a toggle; form.css checkbox styling was making it visible */
#nav { display: none !important; }

/* Mark the page you are on */
.nav-container ul li a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Mobile menu open: logo turns white so it shows on the dark panel */
header:has(#nav:checked) div.logo { position: relative; z-index: 9991; }
header:has(#nav:checked) .logo img { filter: invert(1); }

/* Open the mobile menu from the checkbox alone, so it works on pages without scroll.js (home) */
@media screen and (max-width: 767px) {
  #nav:checked ~ .nav-container { display: block !important; }
}