/* STLBEAST V198 — Global Logo Final Fix
   Fixes logo placement/overflow on every public page, including legacy .nav/.logo pages.
   Does not touch product data, checkout, downloads, admin, membership, or Hub. */

:root{
  --stlb198-cyan:#20d9ff;
  --stlb198-ink:#e9f7ff;
  --stlb198-bg:#020812;
  --stlb198-panel:#061322;
}

/* Core shell safety */
header.nav,
.v114-nav.stlb147-premium-nav,
header.stlb125-nav,
.sb-header,
.seo-nav{
  box-sizing:border-box!important;
  width:min(1480px,calc(100vw - 24px))!important;
  max-width:min(1480px,calc(100vw - 24px))!important;
  margin:14px auto 34px!important;
  overflow:visible!important;
  position:relative!important;
  z-index:10!important;
}

/* Legacy pages using <header class="nav"> get the same predictable layout */
header.nav{
  display:grid!important;
  grid-template-columns:minmax(260px,390px) minmax(0,1fr)!important;
  grid-template-areas:"brand nav"!important;
  align-items:center!important;
  gap:22px!important;
  min-height:112px!important;
  padding:18px 26px!important;
  border-radius:24px!important;
  border:1px solid rgba(32,217,255,.34)!important;
  background:
    radial-gradient(circle at 50% -10px, rgba(32,217,255,.28), transparent 26%),
    linear-gradient(90deg,rgba(2,10,19,.98),rgba(5,17,31,.98) 52%,rgba(13,8,30,.96))!important;
  box-shadow:0 26px 76px rgba(0,0,0,.42), 0 0 36px rgba(32,217,255,.10), inset 0 0 0 1px rgba(255,255,255,.045)!important;
}

/* Brand/logo: one fixed home. Never floats on the right, never clips. */
header.nav > a.logo,
.v114-nav .stlb147-logo-frame,
header.stlb125-nav .stlb125-brand,
.sb-header .sb-logo,
.seo-nav .logo{
  grid-area:brand!important;
  justify-self:start!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:min(390px,100%)!important;
  max-width:390px!important;
  height:86px!important;
  min-height:86px!important;
  padding:10px 18px!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:20px!important;
  border:1px solid rgba(32,217,255,.50)!important;
  background:linear-gradient(90deg,rgba(3,16,31,.98),rgba(2,8,17,.98))!important;
  box-shadow:0 0 30px rgba(32,217,255,.15), inset 0 0 0 1px rgba(255,255,255,.05)!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
}

/* Disable legacy duplicate text/mark layers that caused partial logos and overlap */
header.nav > a.logo > span,
header.nav > a.logo .stlb156-logo-fallback,
.v114-nav .stlb147-logo-frame .stlb161-logo-fallback,
header.stlb125-nav .stlb125-brand .stlb161-logo-fallback,
.sb-header .sb-logo .stlb161-logo-fallback,
.seo-nav .logo .stlb161-logo-fallback{
  display:none!important;
}

/* Image is authoritative globally */
header.nav > a.logo > img,
.v114-nav .stlb147-logo-frame img,
header.stlb125-nav .stlb125-brand img,
.sb-header .sb-logo img,
.seo-nav .logo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:70px!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 0 14px rgba(32,217,255,.30)) saturate(1.08) contrast(1.06)!important;
}

/* Upgrade old mark-only legacy logo pages to the final horizontal nav logo without editing every template image tag */
header.nav > a.logo > img[src*="stlbeast-mark-clean"],
header.nav > a.logo > img[src*="stlbeast-premium-header-logo"],
header.nav > a.logo > img[src*="stlbeast-final-header-logo"]{
  content:url('/assets/images/brand/stlbeast-nav-logo-v181.png?v=181')!important;
}

/* Nav sits beside/below logo, never underneath it */
header.nav > nav.navlinks,
.v114-nav .stlb147-link-row,
header.stlb125-nav .stlb125-links,
.sb-header .sb-menu,
.seo-nav nav{
  grid-area:nav!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  overflow:visible!important;
  position:relative!important;
  z-index:2!important;
}

header.nav > nav.navlinks a,
.v114-nav .stlb147-link-row a,
header.stlb125-nav .stlb125-links a,
.sb-header .sb-menu a,
.seo-nav nav a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 22px!important;
  border-radius:999px!important;
  border:1px solid rgba(120,205,255,.18)!important;
  background:rgba(5,17,31,.55)!important;
  color:rgba(240,248,255,.92)!important;
  font-size:.78rem!important;
  font-weight:800!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

/* Tablet and narrow desktop: logo full width on top, nav grid below */
@media(max-width:1320px){
  header.nav,
  .v114-nav.stlb147-premium-nav .stlb147-nav-shell,
  header.stlb125-nav .stlb147-nav-shell,
  .sb-header .sb-nav,
  .seo-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "nav" "search"!important;
    width:min(1040px,100%)!important;
    max-width:100%!important;
    min-height:0!important;
    gap:14px!important;
    padding:18px 18px 22px!important;
  }

  header.nav > a.logo,
  .v114-nav .stlb147-logo-frame,
  header.stlb125-nav .stlb125-brand,
  .sb-header .sb-logo,
  .seo-nav .logo{
    justify-self:center!important;
    width:min(430px,92vw)!important;
    max-width:min(430px,92vw)!important;
    height:88px!important;
    min-height:88px!important;
  }

  header.nav > nav.navlinks,
  .v114-nav .stlb147-link-row,
  header.stlb125-nav .stlb125-links,
  .sb-header .sb-menu,
  .seo-nav nav{
    justify-self:center!important;
    width:min(980px,100%)!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(170px,1fr))!important;
    gap:10px!important;
  }
}

/* Mobile: compact centered logo, two-column buttons */
@media(max-width:680px){
  header.nav,
  .v114-nav.stlb147-premium-nav,
  header.stlb125-nav,
  .sb-header,
  .seo-nav{
    width:calc(100vw - 12px)!important;
    margin:8px auto 20px!important;
  }

  header.nav,
  .v114-nav.stlb147-premium-nav .stlb147-nav-shell,
  header.stlb125-nav .stlb147-nav-shell,
  .sb-header .sb-nav,
  .seo-nav{
    border-radius:18px!important;
    padding:12px 10px 14px!important;
    gap:10px!important;
  }

  header.nav > a.logo,
  .v114-nav .stlb147-logo-frame,
  header.stlb125-nav .stlb125-brand,
  .sb-header .sb-logo,
  .seo-nav .logo{
    width:min(326px,90vw)!important;
    max-width:min(326px,90vw)!important;
    height:74px!important;
    min-height:74px!important;
    padding:7px 12px!important;
  }

  header.nav > a.logo > img,
  .v114-nav .stlb147-logo-frame img,
  header.stlb125-nav .stlb125-brand img,
  .sb-header .sb-logo img,
  .seo-nav .logo img{
    max-height:58px!important;
  }

  header.nav > nav.navlinks,
  .v114-nav .stlb147-link-row,
  header.stlb125-nav .stlb125-links,
  .sb-header .sb-menu,
  .seo-nav nav{
    width:min(340px,100%)!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  header.nav > nav.navlinks a,
  .v114-nav .stlb147-link-row a,
  header.stlb125-nav .stlb125-links a,
  .sb-header .sb-menu a,
  .seo-nav nav a{
    min-height:36px!important;
    padding:0 8px!important;
    font-size:.56rem!important;
    letter-spacing:.055em!important;
  }
}