/* SG-Tronic Motorsport — Navigation v122
   Fixes brand contrast + navigation visibility at browser zoom / narrower desktops. */

/* ---------- Header / brand ---------- */
.sgtm-header{
  position:relative;
  z-index:500;
  width:100%;
  box-sizing:border-box;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  min-height:82px;
  padding:14px clamp(18px,3vw,48px)!important;
  background:#081b2c!important;
  border-bottom:1px solid rgba(8,122,199,.20);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.sgtm-header .brand{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:max-content;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
}

.sgtm-header .brand .mark{
  display:grid!important;
  place-items:center!important;
  width:66px!important;
  height:66px!important;
  min-width:66px!important;
  border-radius:4px!important;
  background:linear-gradient(155deg,#087AC7,#35c5f4)!important;
  color:#fff!important;
  font-size:1.8rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.03em!important;
  box-shadow:0 8px 20px rgba(8,122,199,.22);
}

.sgtm-header .brand > span:last-child{
  display:grid!important;
  gap:4px!important;
}

.sgtm-header .brand b{
  color:#ffffff!important;
  font-size:1.12rem!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  font-weight:900!important;
  opacity:1!important;
}

.sgtm-header .brand small{
  color:#35c5f4!important;
  font-size:.71rem!important;
  line-height:1!important;
  letter-spacing:.28em!important;
  font-weight:850!important;
  opacity:1!important;
}

/* ---------- Desktop navigation ---------- */
.sgtm-desktop-nav{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:4px!important;
  flex:1 1 auto;
  min-width:0;
}

.sgtm-desktop-nav>a,
.sgtm-desktop-nav .nav-drop-trigger{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 11px!important;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#ffffff!important;
  font:inherit;
  font-size:.9rem!important;
  font-weight:750!important;
  line-height:1;
  text-decoration:none!important;
  white-space:nowrap;
  cursor:pointer;
}

.sgtm-desktop-nav>a:hover,
.sgtm-desktop-nav>a:focus-visible,
.sgtm-desktop-nav .nav-drop-trigger:hover,
.sgtm-desktop-nav .nav-drop-trigger:focus-visible,
.sgtm-desktop-nav .nav-dropdown.is-open>.nav-drop-trigger{
  background:rgba(8,122,199,.14)!important;
  color:#fff!important;
}

.sgtm-desktop-nav .nav-book{
  background:linear-gradient(135deg,#35c5f4,#35c5f4)!important;
  color:#102d43!important;
  padding:0 18px!important;
  font-weight:850!important;
}

/* ---------- Dropdowns ---------- */
.nav-dropdown{position:relative!important;display:flex!important;align-items:center!important}
.nav-drop-trigger span{margin-left:6px}
.nav-drop-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  left:50%!important;
  width:min(430px,88vw)!important;
  padding:10px!important;
  border:1px solid rgba(104,174,230,.22)!important;
  border-radius:16px!important;
  background:#081b2c!important;
  box-shadow:0 20px 55px rgba(0,0,0,.42)!important;
  transform:translate(-50%,8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.nav-dropdown:hover>.nav-drop-menu,
.nav-dropdown:focus-within>.nav-drop-menu,
.nav-dropdown.is-open>.nav-drop-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}
.nav-drop-menu a{
  display:grid!important;
  gap:4px!important;
  padding:12px 13px!important;
  border-radius:11px!important;
  text-decoration:none!important;
}
.nav-drop-menu strong{color:#ffffff!important}
.nav-drop-menu small{color:#8faec7!important}

/* ---------- Phone ---------- */
.sgtm-header .call{
  flex:0 0 auto!important;
  display:grid!important;
  gap:2px!important;
  min-width:146px;
  padding:9px 15px!important;
  border:1px solid rgba(53,197,244,.42)!important;
  border-radius:12px!important;
  background:rgba(8,122,199,.13)!important;
  color:#fff!important;
  text-decoration:none!important;
  text-align:center!important;
}
.sgtm-header .call .call-label{
  color:#35c5f4!important;
  font-size:.66rem!important;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:850!important;
}
.sgtm-header .call span:last-child{
  color:#fff!important;
  font-size:.9rem!important;
  font-weight:850!important;
}

/* ---------- Mobile / zoom menu ---------- */
.sgtm-header .mobile-menu{
  position:relative!important;
  flex:0 0 auto!important;
  margin-left:auto!important;
}

.sgtm-header .mobile-menu > summary{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:52px!important;
  height:48px!important;
  padding:7px!important;
  margin:0!important;
  border:1px solid rgba(53,197,244,.30)!important;
  border-radius:11px!important;
  background:rgba(18,77,119,.16)!important;
  list-style:none!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}

.sgtm-header .mobile-menu > summary::-webkit-details-marker{display:none!important}

.sgtm-header .mobile-menu > summary span{
  display:block!important;
  width:25px!important;
  height:2px!important;
  margin:3px 0!important;
  border:0!important;
  border-radius:2px!important;
  background:#f5f8fc!important;
  opacity:1!important;
  transform:none;
}

.sgtm-header .mobile-menu > summary b{
  display:none!important;
}

.sgtm-header .mobile-menu[open] > summary{
  background:rgba(53,197,244,.22)!important;
  border-color:rgba(53,197,244,.62)!important;
}

.sgtm-header .mobile-menu-panel{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  right:0!important;
  left:auto!important;
  width:min(390px,calc(100vw - 28px))!important;
  max-height:calc(100vh - 120px)!important;
  overflow:auto!important;
  padding:12px!important;
  border:1px solid rgba(99,178,233,.20)!important;
  border-radius:16px!important;
  background:#081b2c!important;
  box-shadow:0 22px 55px rgba(0,0,0,.42)!important;
  z-index:1200!important;
}

.mobile-menu-panel .mobile-nav-section{
  display:grid!important;
  gap:4px!important;
  padding:8px 0 12px!important;
}
.mobile-menu-panel .mobile-nav-section+.mobile-nav-section{
  border-top:1px solid rgba(115,170,211,.16)!important;
  padding-top:14px!important;
}
.mobile-menu-panel .mobile-nav-label{
  padding:4px 14px 7px!important;
  color:#35c5f4!important;
  font-size:.68rem!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.mobile-menu-panel .mobile-nav-section a{
  display:flex!important;
  align-items:center!important;
  min-height:42px!important;
  padding:9px 14px!important;
  border-radius:9px!important;
  color:#ffffff!important;
  text-decoration:none!important;
}

/* Normal desktop: full navigation */
@media(min-width:1181px){
  .sgtm-desktop-nav{display:flex!important}
  .sgtm-header .mobile-menu{display:none!important}
}

/* Browser zoom / compact desktop:
   switch to a clearly visible hamburger before the nav becomes cramped. */
@media(max-width:1180px){
  .sgtm-desktop-nav{display:none!important}
  .sgtm-header .mobile-menu{display:block!important}
  .sgtm-header .brand{margin-right:auto!important}
}

/* At stronger zoom/smaller width retain logo + menu + compact call button. */
@media(max-width:760px){
  .sgtm-header{
    min-height:74px!important;
    gap:10px!important;
    padding:10px 14px!important;
  }
  .sgtm-header .brand{gap:10px!important}
  .sgtm-header .brand .mark{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    font-size:1.48rem!important;
  }
  .sgtm-header .brand b{font-size:.94rem!important}
  .sgtm-header .brand small{font-size:.61rem!important;letter-spacing:.21em!important}
  .sgtm-header .call{
    min-width:0!important;
    padding:8px 10px!important;
  }
  .sgtm-header .call .call-label{display:none!important}
  .sgtm-header .call span:last-child{font-size:.78rem!important}
}

/* Very small screens: logo + hamburger only, phone remains available inside content/mobile bar. */
@media(max-width:500px){
  .sgtm-header .call{display:none!important}
  .sgtm-header .brand b{font-size:.86rem!important}
  .sgtm-header .brand small{font-size:.56rem!important}
}

@media(max-width:380px){
  .sgtm-header .brand b,
  .sgtm-header .brand small{display:none!important}
}

/* v125 consolidated sticky-navigation corrections */

/* Sticky header */
.sgtm-header{
  position:sticky!important;
  top:0!important;
  z-index:1600!important;
  width:100%!important;
  box-sizing:border-box!important;
  background:rgba(8,27,44,.97)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  transition:padding .2s ease,background .2s ease,box-shadow .2s ease!important;
}
.sgtm-header.is-scrolled{
  padding-top:8px!important;
  padding-bottom:8px!important;
  background:rgba(8,27,44,.99)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.30)!important;
}
.sgtm-header.is-scrolled .brand .mark{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
}

/* CRITICAL: dropdowns must be hidden until opened/hovered. */
.sgtm-header .nav-dropdown{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
}
.sgtm-header .nav-drop-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  left:50%!important;
  width:min(430px,88vw)!important;
  padding:10px!important;
  margin:0!important;
  border:1px solid rgba(104,174,230,.22)!important;
  border-radius:16px!important;
  background:#081b2c!important;
  box-shadow:0 20px 55px rgba(0,0,0,.42)!important;
  transform:translate(-50%,8px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:1700!important;
}
.sgtm-header .nav-dropdown:hover > .nav-drop-menu,
.sgtm-header .nav-dropdown:focus-within > .nav-drop-menu,
.sgtm-header .nav-dropdown.is-open > .nav-drop-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}

/* Keep all dropdown items inside the dropdown panel. */
.sgtm-header .nav-drop-menu a{
  position:relative!important;
  display:grid!important;
  width:auto!important;
  min-width:0!important;
  gap:4px!important;
  padding:12px 13px!important;
  margin:0!important;
  border-radius:11px!important;
  color:#fff!important;
  background:transparent!important;
  text-decoration:none!important;
  white-space:normal!important;
}
.sgtm-header .nav-drop-menu a:hover,
.sgtm-header .nav-drop-menu a:focus-visible{
  background:rgba(8,122,199,.14)!important;
}
.sgtm-header .nav-drop-menu strong{
  display:block!important;
  color:#ffffff!important;
  font-size:.94rem!important;
  line-height:1.2!important;
}
.sgtm-header .nav-drop-menu small{
  display:block!important;
  color:#8faec7!important;
  font-size:.78rem!important;
  line-height:1.3!important;
}

/* Desktop main bar: never allow items to overlap logo/call. */
.sgtm-desktop-nav{
  overflow:visible!important;
}
.sgtm-desktop-nav > a,
.sgtm-desktop-nav > .nav-dropdown{
  flex:0 0 auto!important;
}

/* Full navigation only where there is enough width. */
@media(min-width:1281px){
  .sgtm-desktop-nav{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .sgtm-header .mobile-menu{
    display:none!important;
  }
}

/* Switch earlier to hamburger rather than squeezing/overlapping. */
@media(max-width:1280px){
  .sgtm-desktop-nav{
    display:none!important;
  }
  .sgtm-header .mobile-menu{
    display:block!important;
    margin-left:auto!important;
  }
  .sgtm-header .brand{
    margin-right:auto!important;
  }
}

/* Mobile panel stays hidden unless details is open. */
.sgtm-header details.mobile-menu:not([open]) > .mobile-menu-panel{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.sgtm-header details.mobile-menu[open] > .mobile-menu-panel{
  display:block!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Keep the panel attached to the hamburger, above page content. */
.sgtm-header .mobile-menu{
  position:relative!important;
}
.sgtm-header .mobile-menu-panel{
  position:absolute!important;
  right:0!important;
  left:auto!important;
  top:calc(100% + 12px)!important;
  width:min(390px,calc(100vw - 28px))!important;
  max-height:calc(100vh - 110px)!important;
  overflow:auto!important;
  z-index:1800!important;
}

/* Avoid page anchors being hidden under sticky header. */
html{
  scroll-padding-top:110px!important;
}

@media(max-width:760px){
  .sgtm-header{
    gap:10px!important;
    padding:9px 14px!important;
  }
}
@media(max-width:500px){
  html{scroll-padding-top:86px!important}
}