/* ===================================================================
   MOBILE NAV
   Single source of truth. Do not add nav CSS to navigation.php.
   Base style.css sets:  .nav-menu   padding: 20px
                         .nav-menu li padding: 10px 0
                         .nav-menu.active max-height: 400px
   =================================================================== */
@media (max-width: 768px) {

    .nav-menu {
        padding: 10px 15px !important;
    }

    .nav-menu.active {
        max-height: 400px !important;
    }

    /* The gap between items lives here. Base is 10px 0 - far too much
       for seven items. 6px keeps them readable without crowding. */
    .nav-menu li {
        padding: 6px 0 !important;
    }

    .nav-menu li a {
        font-size: 16px !important;
        line-height: 1.4 !important;
        display: block;
        padding: 2px 0;
    }
}

/* Hero video - slower playback, gentler fade */
.hero-video {
    animation: heroVideoFade 90s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes heroVideoFade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { opacity: 0; }
}