/* =========================================================
   Nextawards Child — Responsive Fixes + Premium Mobile Menu
   FIXED VERSION
   ========================================================= */

/* =========================================================
   0) TOKENS
   ========================================================= */
:root{
  --aw-menu-overlay: rgba(0, 0, 0, .58);
  --aw-menu-bg: #06080d;
  --aw-menu-bg-top: rgba(255,255,255,.035);
  --aw-menu-border: rgba(255, 255, 255, .08);
  --aw-menu-text: rgba(255, 255, 255, .96);
  --aw-menu-text-soft: rgba(255, 255, 255, .72);
  --aw-menu-radius: 28px;
  --aw-menu-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

/* =========================================================
   1) GLOBAL SAFETY
   ========================================================= */
html.aw-menu-lock,
body.aw-menu-lock{
  overflow: hidden;
}

body.menu-open{
  overflow: hidden;
}

/* IMPORTANT:
   Footer socials must NEVER appear on desktop/tablet layout
   unless mobile breakpoint is active.
*/
.aw-mobile-menu-footer{
  display: none !important;
}

.aw-mobile-menu-footer__inner{
  display: none !important;
}

.aw-mobile-social{
  display: none !important;
}

.aw-mobile-social svg{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* =========================================================
   2) MOBILE MENU ENHANCEMENT
   ========================================================= */
@media (max-width: 1190px){

  body::before{
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 20% 10%, rgba(255,255,255,.05), transparent 28%),
      linear-gradient(180deg, rgba(0,0,0,.12), var(--aw-menu-overlay));
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.22,1,.36,1);
    z-index: 9990;
  }

  body.menu-open::before{
    opacity: 1;
    pointer-events: auto;
  }

  .header{
    z-index: 9999;
  }

  .header__content{
    position: relative;
    z-index: 2;
  }

  .icon-hamburger{
    right: -10px !important;
    top: 7px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px;
    background: transparent !important;
  }

  .icon-hamburger span{
    width: 32px !important;
    margin-left: auto;
    margin-right: auto;
    border-radius: 999px;
    transition:
      transform .36s cubic-bezier(.22,1,.36,1),
      opacity .24s ease,
      width .24s ease,
      background-color .24s ease !important;
  }

  .menu-open .icon-hamburger span:nth-child(2){
    transform: rotate(45deg) translateY(9px) !important;
  }

  .menu-open .icon-hamburger span:nth-child(3){
    transform: rotate(-45deg) translateY(-9px) !important;
  }

  .aw-mobile-nav-shell{
    position: static;
  }

  .menu.aw-mobile-menu-list{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(100vw, 420px) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding:
      clamp(90px, 12vh, 112px)
      clamp(22px, 4.8vw, 30px)
      134px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate3d(-108%, 0, 0) !important;
    transition:
      transform .62s cubic-bezier(.22,1,.36,1),
      opacity .38s ease,
      box-shadow .45s ease,
      clip-path .62s cubic-bezier(.22,1,.36,1) !important;
    clip-path: inset(0 14% 0 0 round 0 30px 30px 0);
    opacity: 0;
    background:
      linear-gradient(180deg, var(--aw-menu-bg-top), transparent 22%),
      var(--aw-menu-bg) !important;
    border-right: 1px solid var(--aw-menu-border);
    box-shadow: var(--aw-menu-shadow);
    z-index: 9998 !important;
    -webkit-overflow-scrolling: touch;
    filter: none !important;
    backdrop-filter: none !important;
  }

  body.menu-open .menu.aw-mobile-menu-list{
    transform: translate3d(0, 0, 0) !important;
    clip-path: inset(0 0 0 0 round 0 30px 30px 0);
    opacity: 1;
  }

  .menu.aw-mobile-menu-list > li{
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--aw-menu-border) !important;
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity .42s ease,
      transform .52s cubic-bezier(.22,1,.36,1),
      border-color .24s ease;
    filter: none !important;
  }

  body.menu-open .menu.aw-mobile-menu-list > li{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(1){ transition-delay: .06s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(2){ transition-delay: .10s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(3){ transition-delay: .14s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(4){ transition-delay: .18s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(5){ transition-delay: .22s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(6){ transition-delay: .26s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(7){ transition-delay: .30s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(8){ transition-delay: .34s; }
  body.menu-open .menu.aw-mobile-menu-list > li:nth-child(9){ transition-delay: .38s; }

  .menu.aw-mobile-menu-list > li > a{
    display: block;
    padding: 18px 0 !important;
    color: var(--aw-menu-text) !important;
    font-size: clamp(20px, 4.6vw, 28px);
    line-height: 1.15;
    letter-spacing: -.02em;
    filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
  }

  .menu.aw-mobile-menu-list .sub-menu{
    max-height: 0;
    overflow: hidden;
    padding-left: 14px !important;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      max-height .42s cubic-bezier(.22,1,.36,1),
      opacity .24s ease,
      transform .28s ease,
      padding-top .24s ease,
      padding-bottom .24s ease !important;
    filter: none !important;
  }

  .menu.aw-mobile-menu-list .menu-item-has-children.open-dropdown > .sub-menu{
    max-height: 480px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 4px;
    padding-bottom: 14px;
  }

  .menu.aw-mobile-menu-list .sub-menu li{
    border-bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .menu.aw-mobile-menu-list .sub-menu li a{
    color: var(--aw-menu-text-soft) !important;
    font-size: 15px !important;
    line-height: 1.45;
    padding: 10px 0 !important;
    filter: none !important;
  }

  .menu.aw-mobile-menu-list .menu-item-has-children > a{
    position: relative;
    padding-right: 38px !important;
  }

  .menu.aw-mobile-menu-list .menu-item-has-children > a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,.92);
    border-bottom: 2px solid rgba(255,255,255,.92);
    transform: translateY(-60%) rotate(45deg);
    transition: transform .28s ease, opacity .2s ease;
    opacity: .9;
  }

  .menu.aw-mobile-menu-list .menu-item-has-children.open-dropdown > a::after{
    transform: translateY(-20%) rotate(-135deg);
  }

  /* Mobile footer socials */
  .aw-mobile-menu-footer{
    display: block !important;
    position: fixed;
    left: 0;
    bottom: 0;
    width: min(100vw, 420px);
    padding: 18px 22px max(18px, env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, rgba(6,8,13,0), rgba(6,8,13,.84) 24%, rgba(6,8,13,.98));
    border-top: 1px solid rgba(255,255,255,.06);
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity .35s ease .16s,
      transform .45s cubic-bezier(.22,1,.36,1) .16s;
    z-index: 9999;
    pointer-events: none;
    filter: none !important;
    backdrop-filter: none !important;
  }

  body.menu-open .aw-mobile-menu-footer{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .aw-mobile-menu-footer__inner{
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  .aw-mobile-social{
    display: inline-flex !important;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff !important;
    text-decoration: none;
    transition:
      transform .24s ease,
      background-color .24s ease,
      border-color .24s ease;
  }

  .aw-mobile-social:hover,
  .aw-mobile-social:focus-visible{
    transform: translateY(-2px);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
  }

  .aw-mobile-social svg{
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
  }

  .menu-open .menu > li:last-child{
    margin-bottom: 0 !important;
    position: static !important;
  }
}

/* =========================================================
   3) STORY FIX — TABLET + MOBILE
   Disattiva il pin storytelling e riporta i blocchi in flow
   ========================================================= */
@media (max-width: 1023px){

  .wp-block-cover.alignfull.aw-story{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .wp-block-cover.alignfull.aw-story > .wp-block-cover__inner-container{
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding-left: clamp(16px, 4vw, 26px) !important;
    padding-right: clamp(16px, 4vw, 26px) !important;
  }

  .wp-block-cover.aw-story .aw-story-wipe{
    display: none !important;
  }

  .wp-block-cover.aw-story .aw-story-media{
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
    z-index: auto !important;
  }

  .wp-block-cover.aw-story .aw-story-media + .aw-story-media{
    margin-top: 28px !important;
  }

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media{
    display: grid !important;
    gap: 18px !important;
    align-items: start !important;
    grid-template-columns: 1fr !important;
  }

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media .wp-block-media-text__media,
  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media .wp-block-media-text__content{
    grid-column: 1 / -1 !important;
  }

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media .wp-block-media-text__media{
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media .wp-block-media-text__content{
    padding: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 767px){

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media{
    gap: 16px !important;
  }

  .wp-block-cover.aw-story .aw-story-media + .aw-story-media{
    margin-top: 24px !important;
  }

  .wp-block-cover.aw-story .wp-block-media-text.aw-story-media .wp-block-media-text__content > *:last-child{
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   4) EXTRA MOBILE REFINEMENTS
   ========================================================= */
@media (max-width: 767px){

  .header__content{
    height: 60px !important;
    padding-right: 54px !important;
  }

  .header__logo-img,
  .header__logo_white-img{
    width: 64px !important;
    height: auto !important;
  }
}

/* =========================================================
   5) REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  body::before,
  .menu.aw-mobile-menu-list,
  .menu.aw-mobile-menu-list > li,
  .menu.aw-mobile-menu-list .sub-menu,
  .aw-mobile-menu-footer,
  .aw-mobile-social{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   6) FIX HEADER / HAMBURGER OVER CUSTOM PLUGINS
   ========================================================= */
@media (max-width: 1190px){

  .header,
  .header__content{
    position: relative;
    z-index: 10020 !important;
  }

  .icon-hamburger{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10030 !important;
    pointer-events: auto !important;
  }

  .header__logo,
  .header__logo-img,
  .header__logo_white-img{
    position: relative;
    z-index: 10025 !important;
  }

  /* Prevent plugin/custom sections from sitting above header tap area */
  .aw-brands-slider,
  .aw-brands-viewport,
  .aw-brands-track,
  .ff-auto-filter,
  .ff-auto-grid,
  .ff-auto-actions,
  .ff-auto-toolbar,
  .ff-auto-results{
    position: relative;
    z-index: 1 !important;
  }
}

/* =========================================================
   7) COLOR SOCIAL ICONS
   ========================================================= */
@media (max-width: 1190px){

  .aw-mobile-social--facebook{
    background: rgba(24, 119, 242, .16) !important;
    border-color: rgba(24, 119, 242, .34) !important;
    color: #1877f2 !important;
  }

  .aw-mobile-social--facebook:hover,
  .aw-mobile-social--facebook:focus-visible{
    background: rgba(24, 119, 242, .22) !important;
    border-color: rgba(24, 119, 242, .42) !important;
  }

  .aw-mobile-social--instagram{
    background:
      linear-gradient(135deg,
        rgba(131, 58, 180, .18) 0%,
        rgba(225, 48, 108, .18) 45%,
        rgba(253, 29, 29, .16) 68%,
        rgba(252, 176, 69, .18) 100%) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #ff7a59 !important;
  }

  .aw-mobile-social--instagram:hover,
  .aw-mobile-social--instagram:focus-visible{
    background:
      linear-gradient(135deg,
        rgba(131, 58, 180, .26) 0%,
        rgba(225, 48, 108, .24) 45%,
        rgba(253, 29, 29, .22) 68%,
        rgba(252, 176, 69, .24) 100%) !important;
  }

  .aw-mobile-social--tiktok{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    position: relative;
  }

  .aw-mobile-social--tiktok svg{
    filter:
      drop-shadow(-1px 0 0 #25f4ee)
      drop-shadow(1px 0 0 #fe2c55);
  }

  .aw-mobile-social--tiktok:hover,
  .aw-mobile-social--tiktok:focus-visible{
    background: rgba(255,255,255,.10) !important;
  }
}

/* =========================================================
   8) MOBILE HEADER — REALLY FIXED, IN-GRID, NO HORIZONTAL OVERFLOW
   ========================================================= */
@media (max-width: 1190px){

  html,
  body{
    overflow-x: hidden !important;
  }

  body{
    max-width: 100vw !important;
  }

  .header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 !important; /* kills parent 0 3% */
    margin: 0 !important;
    z-index: 10040 !important;
    box-sizing: border-box !important;
  }

  .header__content{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 10px 16px !important;
    padding-right: 72px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .icon-hamburger{
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10050 !important;
    pointer-events: auto !important;
  }

  .header__logo,
  .header__logo-img,
  .header__logo_white-img{
    position: relative !important;
    z-index: 10045 !important;
  }

  .wrapper{
    padding-top: 72px !important;
    overflow-x: clip !important;
  }

  .spacer{
    display: none !important;
    height: 0 !important;
  }

  /* menu panel stays fixed and flush to viewport */
  .menu.aw-mobile-menu-list{
    left: 0 !important;
    right: auto !important;
  }
}

@media (max-width: 767px){

  .header__content{
    min-height: 60px !important;
    padding: 8px 12px !important;
    padding-right: 60px !important;
  }

  .icon-hamburger{
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .wrapper{
    padding-top: 60px !important;
  }
}

