/* ============================================================
   IMPRO SOLUTIONS USA LLC
   EXACT HEADER / MOBILE MENU VISUAL FIX
   Adapted from the existing Impro homepage header/mobile template.
   This file affects header + mobile navigation only.
   It does NOT change homepage body, footer, menu names or URLs.
   ============================================================ */

:root{
  --opp-red:#D72027;
  --opp-red-dark:#9B0E17;
  --opp-black:#1A1A1A;
  --opp-soft:#F2F2F2;
  --opp-shadow:0 24px 70px rgba(16,17,20,.13);
}

/* TOP BAR */
.topbar{
  background:var(--opp-black)!important;
  color:#fff!important;
  border:0!important;
  font-size:13px!important;
}
.topbar .topbar-inner{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.topbar a{
  color:#fff!important;
  text-decoration:none!important;
}

/* DESKTOP HEADER */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:999!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(16,17,20,.08)!important;
  box-shadow:0 14px 40px rgba(16,17,20,.06)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.site-header .nav-wrap{
  min-height:96px!important;
  display:flex!important;
  align-items:center!important;
  gap:22px!important;
  overflow:visible!important;
}
.site-header .brand{
  width:224px!important;
  min-width:224px!important;
  max-width:224px!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  text-decoration:none!important;
}
.site-header .site-master-logo{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:72px!important;
  object-fit:contain!important;
  object-position:left center!important;
  border:0!important;
  background:transparent!important;
  filter:none!important;
}

/* Hide any legal text below logo from older USA header */
.site-header .brand-legal{display:none!important;}

.main-nav{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,1.25vw,22px)!important;
  min-width:0!important;
}
.main-nav>a{
  position:relative!important;
  padding:15px 1px!important;
  border:0!important;
  background:transparent!important;
  color:var(--opp-black)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  text-transform:none!important;
  white-space:nowrap!important;
  transition:color .25s ease,transform .25s ease!important;
}
.main-nav>a::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:100%!important;
  bottom:5px!important;
  height:3px!important;
  border-radius:10px!important;
  background:var(--opp-red)!important;
  transition:right .25s ease!important;
}
.main-nav>a:hover,
.main-nav>a:focus-visible,
.main-nav>a.active{
  color:var(--opp-red)!important;
  transform:translateY(-1px)!important;
}
.main-nav>a:hover::after,
.main-nav>a:focus-visible::after,
.main-nav>a.active::after{
  right:0!important;
}

/* USA-only secondary partner link; keep menu wording unchanged */
.header-partner-link{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  max-width:118px!important;
  color:#005eb8!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-decoration:none!important;
}
.header-partner-link:hover,
.header-partner-link:focus-visible{
  color:var(--opp-red)!important;
}

.site-header .cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:52px!important;
  padding:13px 20px!important;
  border:0!important;
  border-radius:11px!important;
  background:var(--opp-red)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-shadow:0 16px 30px rgba(215,32,39,.22)!important;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease!important;
}
.site-header .cta:hover,
.site-header .cta:focus-visible{
  background:var(--opp-red-dark)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 20px 38px rgba(155,14,23,.25)!important;
}

/* HAMBURGER: same visual logic */
.hamburger{
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  width:46px!important;
  height:46px!important;
  padding:0!important;
  border:0!important;
  border-radius:12px!important;
  background:var(--opp-red)!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 12px 26px rgba(215,32,39,.20)!important;
}

/* ============================================================
   MOBILE OVERLAY
   IMPORTANT: this is the part missing in the previous patch.
   Dark blurred screen + CENTERED WHITE MENU CARD.
   ============================================================ */
.mobile-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:1300!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:rgba(16,17,20,.86)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .25s ease,visibility .25s ease!important;
}
.mobile-overlay.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.close-menu{
  position:absolute!important;
  top:20px!important;
  right:24px!important;
  display:grid!important;
  place-items:center!important;
  width:46px!important;
  height:46px!important;
  padding:0 0 4px!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#111!important;
  font-size:31px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
}
.mobile-menu-container{
  width:min(420px,100%)!important;
  max-height:calc(100vh - 80px)!important;
  overflow-y:auto!important;
  padding:30px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  border-radius:26px!important;
  background:#fff!important;
  box-shadow:var(--opp-shadow)!important;
  transform:translateY(18px) scale(.96)!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
}
.mobile-overlay.open .mobile-menu-container{
  transform:translateY(0) scale(1)!important;
}
.mobile-nav-links{
  display:grid!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.mobile-nav-links li{
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.mobile-nav-link{
  display:block!important;
  width:100%!important;
  padding:15px 18px!important;
  border:0!important;
  border-radius:14px!important;
  background:var(--opp-soft)!important;
  color:#111!important;
  font-size:17px!important;
  font-weight:800!important;
  line-height:1.35!important;
  text-decoration:none!important;
  transition:transform .2s ease,background .2s ease,color .2s ease!important;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-link.active{
  background:#FFF1F2!important;
  color:var(--opp-red)!important;
  transform:translateX(3px)!important;
}
.mobile-nav-link.mobile-partner-link{
  color:#005eb8!important;
}
.mobile-nav-link.mobile-partner-link:hover,
.mobile-nav-link.mobile-partner-link:focus-visible{
  background:#eef6ff!important;
  color:#005eb8!important;
}
.mobile-btn{
  margin-top:18px!important;
}
.mobile-btn .btn,
.mobile-btn .btn-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:48px!important;
  padding:13px 22px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:var(--opp-red)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-decoration:none!important;
}

/* Keep existing JS behavior safe */
body.mobile-menu-open{overflow:hidden!important;}

/* TABLET */
@media(max-width:1120px){
  .site-header .brand{
    width:190px!important;
    min-width:190px!important;
    max-width:190px!important;
  }
  .main-nav{gap:14px!important;}
  .main-nav>a{font-size:13px!important;}
  .header-partner-link{display:none!important;}
}

/* Same switch point used by the existing template */
@media(max-width:980px){
  .main-nav,
  .site-header .cta,
  .header-partner-link{
    display:none!important;
  }
  .hamburger{
    display:inline-flex!important;
    margin-left:auto!important;
  }
  .site-header .nav-wrap{
    min-height:84px!important;
  }
  .site-header .brand{
    width:196px!important;
    min-width:0!important;
    max-width:54vw!important;
  }
}

/* MOBILE */
@media(max-width:700px){
  .topbar .topbar-inner{
    justify-content:center!important;
    text-align:center!important;
  }
  .topbar .topbar-inner span:first-child{
    display:none!important;
  }
  .site-header .brand{
    width:188px!important;
    max-width:58vw!important;
  }
  .mobile-overlay{
    padding:18px!important;
  }
  .mobile-menu-container{
    width:min(420px,100%)!important;
    max-height:calc(100vh - 64px)!important;
    padding:24px!important;
    border-radius:22px!important;
  }
  .mobile-nav-links{
    gap:9px!important;
  }
  .mobile-nav-link{
    padding:13px 15px!important;
    font-size:16px!important;
  }
  .close-menu{
    top:16px!important;
    right:18px!important;
  }
}