/* Header global do Rage Critico */

.site-header{
  min-height:64px !important;
  padding:0 24px !important;
  background:#050505 !important;
  border-bottom:2px solid #c40000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:1000 !important;
}

.site-header .logo,
.logo{
  width:155px !important;
  max-height:52px !important;
  object-fit:contain !important;
  filter:none !important;
}

.menu-btn{
  position:absolute !important;
  right:24px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:54px !important;
  height:48px !important;
  padding:0 !important;
  border-radius:14px !important;
  background:#d60000 !important;
  color:#fff !important;
  font-size:0 !important;
  box-shadow:0 0 24px rgba(255,0,0,.35) !important;
}

.menu-btn::before{
  content:"\2630";
  font-size:28px;
  line-height:1;
}

.site-menu{
  z-index:999 !important;
}

@media(min-width:901px){
  .site-header{
    justify-content:flex-start !important;
    padding-left:clamp(24px, 16vw, 300px) !important;
    padding-right:clamp(24px, 11vw, 230px) !important;
  }

  .site-header .logo,
  .logo{
    width:160px !important;
    position:relative !important;
    z-index:1003 !important;
    pointer-events:auto !important;
  }

  .menu-btn{
    display:none !important;
  }

  .site-menu,
  .site-menu.hidden{
    min-height:64px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 clamp(18px, 4vw, 72px) 0 clamp(190px, 18vw, 280px) !important;
    background:transparent !important;
    backdrop-filter:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    gap:clamp(8px, 1vw, 14px) !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:auto !important;
    margin:0 !important;
    transform:none !important;
    z-index:1001 !important;
    pointer-events:none !important;
  }

  .site-menu a,
  .site-menu .submenu-btn{
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#f4f4f4 !important;
    font-size:clamp(11px, .78vw, 13px) !important;
    font-weight:900 !important;
    line-height:64px !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  .site-menu .submenu-btn::after{
    content:"";
    display:inline-block;
    margin-left:7px;
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid currentColor;
    vertical-align:middle;
    transform:translateY(-1px);
  }

  .site-menu a:hover,
  .site-menu .submenu-btn:hover{
    color:#ff3333 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .site-menu .submenu-box{
    width:auto !important;
    margin:0 !important;
    position:relative !important;
    grid-column:auto !important;
    display:block !important;
    pointer-events:auto !important;
  }

  .site-menu > a{
    pointer-events:auto !important;
  }

  .site-menu .submenu-links{
    min-width:270px !important;
    width:max-content !important;
    max-width:min(360px, 92vw) !important;
    padding:8px !important;
    background:#080808 !important;
    border:1px solid rgba(255,0,0,.35) !important;
    border-radius:8px !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    position:absolute !important;
    top:58px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  .site-menu .submenu-box:hover .submenu-links,
  .site-menu .submenu-box:focus-within .submenu-links{
    display:grid !important;
  }

  .site-menu .submenu-links.hidden{
    display:none !important;
  }

  .site-menu .submenu-links a{
    min-height:42px !important;
    line-height:1.15 !important;
    padding:10px 14px !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:12px !important;
  }
}

@media(max-width:900px){
  .site-header{
    min-height:76px !important;
    padding:12px 74px !important;
    border-bottom:3px solid #d00000 !important;
    justify-content:center !important;
    z-index:1000001 !important;
  }

  .site-header .logo,
  .logo{
    width:172px !important;
    max-height:50px !important;
  }

  .menu-btn{
    left:18px !important;
    right:auto !important;
    top:14px !important;
    transform:none !important;
    width:48px !important;
    height:48px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:#fff !important;
    font-size:0 !important;
    line-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:1000002 !important;
  }

  .menu-btn::before,
  .menu-btn::after{
    content:"" !important;
    position:absolute !important;
    left:8px !important;
    top:50% !important;
    width:32px !important;
    height:4px !important;
    border-radius:999px !important;
    background:#fff !important;
    transform-origin:center !important;
    transition:transform .22s ease, box-shadow .22s ease !important;
  }

  .menu-btn::before{
    transform:translateY(-11px) !important;
    box-shadow:0 11px 0 #fff !important;
  }

  .menu-btn::after{
    transform:translateY(11px) !important;
    box-shadow:none !important;
  }

  .menu-btn.menu-open::before{
    transform:translateY(0) rotate(45deg) !important;
    box-shadow:none !important;
  }

  .menu-btn.menu-open::after{
    transform:translateY(0) rotate(-45deg) !important;
    box-shadow:none !important;
  }

  .site-menu,
  .site-menu.hidden{
    position:fixed !important;
    top:76px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:14px 22px !important;
    background:rgba(17,17,17,.98) !important;
    border:0 !important;
    border-top:1px solid rgba(255,0,0,.55) !important;
    border-bottom:2px solid rgba(255,0,0,.75) !important;
    border-radius:0 !important;
    box-shadow:0 18px 32px rgba(0,0,0,.55) !important;
    backdrop-filter:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow:hidden !important;
    transform:translateY(0) !important;
    transition:max-height .32s ease, opacity .22s ease, visibility .22s ease !important;
    z-index:1000000 !important;
  }

  .site-menu{
    max-height:calc(100vh - 76px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .site-menu.hidden{
    max-height:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  .site-menu a,
  .site-menu .submenu-btn{
    min-height:46px !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#f4f4f4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    font-size:18px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-align:left !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
  }

  .site-menu a:hover,
  .site-menu .submenu-btn:hover{
    color:#ff3333 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  .site-menu .submenu-box{
    width:100% !important;
    margin:0 !important;
    display:block !important;
  }

  .site-menu .submenu-btn{
    position:relative !important;
  }

  .site-menu .submenu-btn::after{
    content:"";
    display:inline-block;
    margin-left:10px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid currentColor;
    transform:translateY(1px);
  }

  .site-menu .submenu-links{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:0 0 6px 16px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    position:static !important;
    transform:none !important;
  }

  .site-menu .submenu-links.hidden{
    display:none !important;
  }

  .site-menu .submenu-links a{
    min-height:36px !important;
    padding:0 !important;
    color:#ccc !important;
    font-size:14px !important;
    background:transparent !important;
    border:0 !important;
    justify-content:flex-start !important;
  }
}