/* TICKETQ MOBILE OPENING FIX FINAL */

@media (max-width: 820px){

  html, body{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  header,
  .site-header,
  .topbar,
  .main-header{
    position:sticky!important;
    top:0!important;
    z-index:10000!important;
    min-height:72px!important;
    padding-left:18px!important;
    padding-right:18px!important;
    overflow:visible!important;
    background:#0B1424!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }

  .brand,
  header .brand,
  .site-header .brand,
  .topbar .brand{
    position:relative!important;
    z-index:10002!important;
    max-width:165px!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  .brand img,
  header .brand img,
  .site-header .brand img{
    max-width:132px!important;
    height:auto!important;
  }

  .mobile-menu{
    position:relative!important;
    z-index:10003!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.045)!important;
    color:#F7F9FC!important;
    box-shadow:none!important;
    transform:none!important;
    font-size:0!important;
    line-height:0!important;
    cursor:pointer!important;
  }

  .mobile-menu .tq-mobile-menu-lines{
    width:20px!important;
    height:16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
  }

  .mobile-menu .tq-mobile-menu-lines i{
    display:block!important;
    width:100%!important;
    height:2px!important;
    border-radius:999px!important;
    background:#F7F9FC!important;
    transform-origin:center!important;
    transition:transform .18s ease, opacity .18s ease!important;
  }

  body.tq-mobile-nav-open .mobile-menu .tq-mobile-menu-lines i:nth-child(1){
    transform:translateY(7px) rotate(45deg)!important;
  }

  body.tq-mobile-nav-open .mobile-menu .tq-mobile-menu-lines i:nth-child(2){
    opacity:0!important;
  }

  body.tq-mobile-nav-open .mobile-menu .tq-mobile-menu-lines i:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)!important;
  }

  #tqPremiumNav,
  #mainNav{
    position:absolute!important;
    z-index:10001!important;
    top:calc(100% + 10px)!important;
    right:16px!important;
    left:auto!important;
    width:min(252px,calc(100vw - 32px))!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:18px!important;
    background:linear-gradient(150deg,rgba(22,38,63,.98),rgba(11,22,39,.99))!important;
    -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
    backdrop-filter:blur(20px) saturate(120%)!important;
    box-shadow:0 24px 54px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px) scale(.985)!important;
    transform-origin:top right!important;
    transition:opacity .17s ease, transform .17s ease, visibility .17s ease!important;
  }

  body.tq-mobile-nav-open #tqPremiumNav,
  body.tq-mobile-nav-open #mainNav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0) scale(1)!important;
  }

  #tqPremiumNav a,
  #tqPremiumNav button,
  #mainNav a,
  #mainNav button{
    width:100%!important;
    min-height:46px!important;
    margin:0!important;
    padding:0 15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#DDE6F2!important;
    text-decoration:none!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:500!important;
    box-shadow:none!important;
    transform:none!important;
  }

  #tqPremiumNav .tq-premium-current,
  #mainNav .tq-premium-current,
  #tqPremiumNav [aria-current="page"],
  #mainNav [aria-current="page"]{
    background:rgba(250,101,42,.08)!important;
    border-color:rgba(250,101,42,.46)!important;
    color:#FF9A72!important;
  }

  .wrap{
    width:calc(100% - 30px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .hero{
    width:100%!important;
    margin:20px 0 0!important;
    padding:32px 22px 28px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    align-items:start!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }

  .hero > div{
    min-width:0!important;
  }

  .hero h1{
    max-width:100%!important;
    margin-top:12px!important;
    margin-bottom:16px!important;
    font-size:clamp(54px,17vw,72px)!important;
    line-height:.90!important;
    letter-spacing:-.055em!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .hero .lead{
    max-width:100%!important;
    margin-bottom:22px!important;
    font-size:16px!important;
    line-height:1.52!important;
  }

  .hero .actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }

  .hero .actions .btn{
    min-height:48px!important;
    padding:0 17px!important;
    flex:0 1 auto!important;
    font-size:14px!important;
  }

  .hero-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:26px 24px!important;
    border-radius:22px!important;
  }

  .hero-card h2{
    margin-top:16px!important;
    font-size:clamp(34px,10vw,46px)!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
  }

  .hero-card .metric{
    gap:16px!important;
    padding:17px 0!important;
  }

  #events,
  .tq-events-listing-section{
    margin-top:42px!important;
  }

  .section-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:14px!important;
    margin-bottom:20px!important;
  }

  .section-head h2{
    font-size:clamp(36px,11vw,48px)!important;
    line-height:.96!important;
  }

  .events-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .card{
    max-width:100%!important;
  }

  .tq-events-hero{
    margin:20px 0 34px!important;
    padding:30px 22px!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    border-radius:24px!important;
  }

  .tq-events-hero-copy h1{
    font-size:clamp(48px,15vw,64px)!important;
  }

  .tq-events-hero-stats{
    grid-template-columns:1fr!important;
  }

  .tq-footer-inner{
    width:calc(100% - 30px)!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
  }

  .tq-footer-nav{
    grid-template-columns:1fr 1fr!important;
    gap:28px 18px!important;
  }

  .tq-footer-bottom{
    width:calc(100% - 30px)!important;
  }
}

@media (max-width: 420px){

  header,
  .site-header,
  .topbar,
  .main-header{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  #tqPremiumNav,
  #mainNav{
    right:12px!important;
    width:calc(100vw - 24px)!important;
  }

  .hero{
    padding:28px 18px 24px!important;
  }

  .hero h1{
    font-size:56px!important;
  }

  .hero .actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }

  .hero .actions .btn{
    width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .hero-card{
    padding:23px 19px!important;
  }

  .section-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}