/* ===============================================================
   BREWOIL PREMIUM NAVIGATION SYSTEM
   Targets all common header patterns site-wide. Single source of
   truth for header/nav styling. Loads after page-local CSS so
   selectors are intentionally specific.
   =============================================================== */

:root{
  --nav-bg:rgba(245,239,227,0.85);
  --nav-bg-scrolled:rgba(245,239,227,0.97);
  --nav-border:rgba(61,40,23,0.08);
  --nav-fg:#2A1F15;
  --nav-fg-muted:#6B5A47;
  --nav-accent:#C9A25A;
  --nav-accent-bright:#F5C97A;
  --nav-h:64px;
  --nav-h-mobile:60px;
}

/* Hide existing announcement bars and duplicate nav text nodes
   that came from the cluttered legacy header */
header.top + p, .top-bar + p, .header + p{color:inherit}

/* Force the primary header into the premium pattern */
body > header,
body > .top,
body > .header,
body > .site-header,
body > .top-bar,
body > .topbar,
header.top,
header.header,
header.site-header{
  position:fixed !important;
  top:0;left:0;right:0;
  height:var(--nav-h);
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--nav-border);
  z-index:1000;
  display:flex;
  align-items:center;
  padding:0 max(24px, env(safe-area-inset-left)) 0 max(24px, env(safe-area-inset-right)) !important;
  transition:background .25s ease, box-shadow .25s ease, height .25s ease;
  will-change:background, box-shadow;
}
body > header.nav-scrolled,
body > .top.nav-scrolled,
body > .header.nav-scrolled,
header.top.nav-scrolled{
  background:var(--nav-bg-scrolled);
  box-shadow:0 4px 20px rgba(61,40,23,0.06);
}

/* Inner wrap — symmetric 3-column grid: logo | nav | actions */
body > header > *:first-child,
header.top > *:first-child,
.top-wrap,
.top > div,
.header > div,
.site-header > div{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:0 !important;
}

/* Push body down to prevent content underneath fixed header */
body{padding-top:var(--nav-h) !important}

/* Brand / logo treatment */
.brand,
header .brand,
header.top .brand,
[class*="brand"]:first-child,
header a[href="/"]:not([class*="bx-"]),
header a[href="#"]:first-of-type{
  font-family:'Inter','SF Pro Display',-apple-system,sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:0.32em !important;
  text-transform:uppercase !important;
  color:var(--nav-fg) !important;
  text-decoration:none !important;
  white-space:nowrap;
  flex-shrink:0;
  min-height:auto !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
}
.brand:hover{color:var(--nav-accent) !important;transition:color .2s ease}

/* Nav container — center column, single horizontal line */
header nav,
header .nav,
header ul,
header .menu,
.top-wrap nav,
.top nav{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:clamp(8px, 1.8vw, 28px) !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  min-width:0;
  overflow:visible;
}
header nav li,
header .nav li,
header ul li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
}

/* Nav links — equal spacing, premium underline animation */
header nav a,
header .nav a,
header ul a,
header .menu a{
  position:relative !important;
  font-family:'Inter','SF Pro Display',-apple-system,sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:0.02em !important;
  color:var(--nav-fg) !important;
  text-decoration:none !important;
  padding:8px 4px !important;
  white-space:nowrap !important;
  min-height:auto !important;
  transition:color .2s ease !important;
  display:inline-flex !important;
  align-items:center;
}
header nav a::after,
header .nav a::after,
header ul a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--nav-accent), var(--nav-accent-bright));
  border-radius:1px;
  transition:width .3s cubic-bezier(.65,.05,.36,1), left .3s cubic-bezier(.65,.05,.36,1);
}
header nav a:hover,
header .nav a:hover,
header ul a:hover{color:var(--nav-accent) !important}
header nav a:hover::after,
header .nav a:hover::after,
header ul a:hover::after{width:100%;left:0}

/* Active page state — persistent underline */
header nav a[aria-current="page"]::after,
header nav a.active::after,
header .nav a[aria-current="page"]::after,
header .nav a.active::after,
header nav a.nav-active::after{width:100%;left:0;opacity:1}
header nav a[aria-current="page"],
header nav a.active,
header .nav a.active,
header nav a.nav-active{color:var(--nav-accent) !important}

/* Right-column actions (cart, account, search) — keep compact */
.top > div > *:last-child,
.header > div > *:last-child{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  justify-self:end;
}
header button,
header [role="button"]{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--nav-fg) !important;
  font-size:18px !important;
  min-height:40px !important;
  width:40px;
  height:40px;
  border-radius:50% !important;
  padding:0 !important;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
header button:hover{background:rgba(201,162,90,0.12) !important;border-color:rgba(201,162,90,0.25) !important}

/* Mobile hamburger button (injected via JS) */
.bx-nav-burger{
  display:none;
  background:transparent;
  border:none;
  width:44px;
  height:44px;
  padding:0;
  cursor:pointer;
  position:relative;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.bx-nav-burger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--nav-fg);
  position:relative;
  border-radius:2px;
  transition:transform .3s ease, background .3s ease, opacity .3s ease, top .3s ease;
}
.bx-nav-burger span::before,
.bx-nav-burger span::after{
  content:'';
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:inherit;
  border-radius:inherit;
  transition:transform .3s ease, top .3s ease;
}
.bx-nav-burger span::before{top:-7px}
.bx-nav-burger span::after{top:7px}
.bx-nav-burger.open span{background:transparent}
.bx-nav-burger.open span::before{top:0;transform:rotate(45deg)}
.bx-nav-burger.open span::after{top:0;transform:rotate(-45deg)}

/* Mobile nav panel */
.bx-mobile-nav{
  position:fixed;
  top:var(--nav-h-mobile);
  left:0;
  right:0;
  background:#F5EFE3;
  border-bottom:1px solid var(--nav-border);
  box-shadow:0 12px 30px rgba(0,0,0,0.1);
  padding:16px 20px 28px;
  z-index:999;
  transform:translateY(-20px);
  opacity:0;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  max-height:calc(100vh - var(--nav-h-mobile));
  overflow-y:auto;
}
.bx-mobile-nav.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.bx-mobile-nav a{
  display:block;
  padding:14px 4px;
  font-family:'Inter','SF Pro Display',-apple-system,sans-serif;
  font-size:16px;
  font-weight:500;
  color:var(--nav-fg);
  text-decoration:none;
  border-bottom:1px solid rgba(61,40,23,0.06);
  letter-spacing:0.01em;
  transition:color .2s ease, padding-left .2s ease;
}
.bx-mobile-nav a:hover,
.bx-mobile-nav a:focus{
  color:var(--nav-accent);
  padding-left:8px;
}
.bx-mobile-nav a:last-child{border-bottom:none}

/* Responsive switch */
@media (max-width: 900px){
  body{padding-top:var(--nav-h-mobile) !important}
  body > header,
  body > .top,
  body > .header,
  header.top,
  header.header{
    height:var(--nav-h-mobile) !important;
    padding:0 16px !important;
  }
  body > header > *:first-child,
  header.top > *:first-child,
  .top-wrap{
    grid-template-columns:auto 1fr auto !important;
    gap:12px !important;
  }
  .brand{font-size:14px !important;letter-spacing:0.28em !important}
  /* Hide desktop nav, show hamburger */
  header nav,
  header .nav,
  header ul:not(.bx-mobile-nav),
  header .menu:not(.bx-mobile-nav){display:none !important}
  .bx-nav-burger{display:inline-flex !important}
  /* Hide right-column buttons except critical ones */
  header button:not(.bx-nav-burger){display:none}
}

/* Prevent menu items wrapping at any width on desktop */
@media (min-width: 901px){
  header nav,
  header .nav,
  header ul:not(.bx-mobile-nav){
    flex-wrap:nowrap !important;
  }
}

/* Tablet tightening — squeeze gaps but stay one line */
@media (min-width: 901px) and (max-width: 1100px){
  header nav,
  header .nav,
  header ul{gap:clamp(6px, 1.4vw, 16px) !important}
  header nav a,
  header .nav a,
  header ul a{font-size:13px !important;padding:8px 2px !important}
  .brand{font-size:15px !important;letter-spacing:0.24em !important}
}

/* Print: hide nav */
@media print{
  body > header, header.top, .top, .header{display:none !important}
  body{padding-top:0 !important}
}

/* CLS prevention — reserve space immediately on first paint */
body{min-height:100vh}
header.top, .top, .header, body > header{
  contain:layout style;
}

/* Wide screen — keep nav centered in container */
@media (min-width: 1400px){
  header nav,
  header .nav,
  header ul{gap:32px !important}
}