/*
 * Veleno Mobile Header V3
 * Removes the empty mobile masthead and turns the hamburger into a compact,
 * accessible overlay control. Desktop/tablet >= 768px is unchanged.
 */
@media (max-width:767px){
  :root{
    --vm3-menu-size:58px;
    --vm3-menu-edge:14px;
    --vm3-red:#e11b35;
  }

  /* The old navbar reserved a tall black block above the real banner. */
  .navbar-necro-apocalypse,
  .navbar.navbar-default.navbar-necro-apocalypse{
    position:relative!important;
    z-index:1080!important;
    width:100%!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .navbar-necro-apocalypse::before,
  .navbar-necro-apocalypse::after{display:none!important;content:none!important;}
  .navbar-necro-apocalypse>.container,
  .navbar-necro-apocalypse>.container-fluid{
    position:static!important;
    width:100%!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
  }

  /* Hamburger overlays the following header artwork instead of creating space. */
  .navbar-necro-apocalypse .navbar-header{
    position:absolute!important;
    top:calc(var(--vm3-menu-edge) + env(safe-area-inset-top))!important;
    left:calc(var(--vm3-menu-edge) + env(safe-area-inset-left))!important;
    right:auto!important;
    z-index:1120!important;
    display:block!important;
    width:var(--vm3-menu-size)!important;
    height:var(--vm3-menu-size)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .navbar-necro-apocalypse .navbar-brand{display:none!important;}

  /* Three lines are centred, evenly spaced and become an X when open. */
  .navbar-necro-apocalypse .navbar-toggle{
    position:relative!important;
    inset:auto!important;
    float:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:var(--vm3-menu-size)!important;
    height:var(--vm3-menu-size)!important;
    min-width:var(--vm3-menu-size)!important;
    min-height:var(--vm3-menu-size)!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(225,27,53,.92)!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,rgba(18,7,9,.97),rgba(3,3,4,.98))!important;
    box-shadow:0 0 0 2px rgba(0,0,0,.75),0 0 18px rgba(225,27,53,.38),inset 0 0 16px rgba(225,27,53,.08)!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }
  .navbar-necro-apocalypse .navbar-toggle:hover,
  .navbar-necro-apocalypse .navbar-toggle:focus,
  .navbar-necro-apocalypse .navbar-toggle[aria-expanded="true"]{
    border-color:#ff304c!important;
    background:linear-gradient(145deg,rgba(37,8,13,.99),rgba(5,3,4,.99))!important;
    box-shadow:0 0 0 2px rgba(0,0,0,.8),0 0 24px rgba(255,28,58,.58),inset 0 0 18px rgba(255,28,58,.14)!important;
    outline:none!important;
  }
  .navbar-necro-apocalypse .navbar-toggle:focus-visible{
    outline:2px solid #f3d29b!important;
    outline-offset:3px!important;
  }
  .navbar-necro-apocalypse .navbar-toggle .icon-bar,
  .navbar-necro-apocalypse .navbar-toggle .icon-bar+.icon-bar{
    display:block!important;
    width:29px!important;
    height:3px!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#f4dfc2!important;
    box-shadow:0 0 8px rgba(255,53,72,.65)!important;
    transform-origin:center!important;
    transition:transform .2s ease,opacity .16s ease,width .2s ease!important;
  }
  .navbar-necro-apocalypse .navbar-toggle[aria-expanded="true"] .icon-bar:nth-of-type(2){
    transform:translateY(9px) rotate(45deg)!important;
  }
  .navbar-necro-apocalypse .navbar-toggle[aria-expanded="true"] .icon-bar:nth-of-type(3){
    opacity:0!important;width:0!important;
  }
  .navbar-necro-apocalypse .navbar-toggle[aria-expanded="true"] .icon-bar:nth-of-type(4){
    transform:translateY(-9px) rotate(-45deg)!important;
  }

  /* Full-height menu drawer. The button remains in the same place above it. */
  .navbar-necro-apocalypse #navbar.navbar-collapse.in,
  .navbar-necro-apocalypse #navbar.navbar-collapse.show,
  .navbar-necro-apocalypse #navbar.navbar-collapse.collapsing{
    position:fixed!important;
    inset:0!important;
    z-index:1100!important;
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:calc(86px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))!important;
    border:0!important;
    background:radial-gradient(circle at 12% 8%,rgba(150,0,25,.2),transparent 30%),linear-gradient(180deg,rgba(4,3,4,.995),rgba(12,4,7,.99))!important;
    box-shadow:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  .navbar-necro-apocalypse #navbar.navbar-collapse.collapsing{
    transition:opacity .18s ease!important;
    opacity:.35;
  }
  .navbar-necro-apocalypse #navbar.navbar-collapse.in,
  .navbar-necro-apocalypse #navbar.navbar-collapse.show{opacity:1;}
  .veleno-mobile-close{display:none!important;}

  /* Remove the hidden cinema copy's leftover dimensions inside the drawer. */
  #navbar .veleno-cinema-stage,
  #navbar .veleno-cinema-poster,
  #navbar .veleno-cinema-copy,
  #navbar .veleno-cinema-menu-row{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
  }
  #navbar .veleno-cinema-copy,
  #navbar .veleno-cinema-kicker,
  #navbar .veleno-cinema-titleline,
  #navbar .veleno-cinema-trailer,
  #navbar .veleno-cinema-controls,
  #navbar .veleno-cinema-tags{display:none!important;}

  /* Clear, ordered menu entries. */
  #navbar .veleno-primary-menu,
  #navbar .veleno-auth-menu{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    float:none!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #navbar .veleno-auth-menu{
    margin-top:12px!important;
    padding-top:12px!important;
    border-top:1px solid rgba(225,27,53,.28)!important;
  }
  #navbar .navbar-nav>li{
    float:none!important;
    width:100%!important;
    margin:0!important;
  }
  #navbar .navbar-nav>li>a,
  #navbar .navbar-nav>li>.menu-bg-btn,
  #navbar .dropdown-menu>li>a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:50px!important;
    margin:0!important;
    padding:10px 13px!important;
    border:1px solid rgba(225,27,53,.3)!important;
    border-radius:10px!important;
    background:linear-gradient(90deg,rgba(42,7,12,.74),rgba(6,5,6,.94))!important;
    color:#f1e5d4!important;
    text-align:left!important;
    white-space:normal!important;
    box-shadow:inset 0 0 14px rgba(0,0,0,.5)!important;
  }
  #navbar .navbar-nav>li>a:active,
  #navbar .navbar-nav>li.open>a,
  #navbar .dropdown-menu>li>a:active{
    border-color:rgba(255,47,74,.82)!important;
    background:linear-gradient(90deg,rgba(91,8,20,.88),rgba(12,6,8,.96))!important;
  }
  #navbar .menu-label{flex:1 1 auto!important;min-width:0!important;}
  #navbar .caret{flex:0 0 auto!important;margin-left:auto!important;}
  #navbar .dropdown-menu{
    position:static!important;
    float:none!important;
    width:100%!important;
    min-width:0!important;
    margin:6px 0 3px!important;
    padding:6px 0 2px 13px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #navbar .dropdown-menu>li{margin-bottom:6px!important;}

  /* No accidental gap between the header artwork and page content. */
  body>.navbar-necro-apocalypse+*,
  .navbar-necro-apocalypse+*{margin-top:0!important;}
}

@media (max-width:360px){
  :root{--vm3-menu-size:52px;--vm3-menu-edge:10px;}
  .navbar-necro-apocalypse .navbar-toggle .icon-bar,
  .navbar-necro-apocalypse .navbar-toggle .icon-bar+.icon-bar{width:26px!important;}
  .navbar-necro-apocalypse #navbar.navbar-collapse.in,
  .navbar-necro-apocalypse #navbar.navbar-collapse.show,
  .navbar-necro-apocalypse #navbar.navbar-collapse.collapsing{
    padding-top:calc(74px + env(safe-area-inset-top))!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .navbar-necro-apocalypse .navbar-toggle .icon-bar{transition:none!important;}
}