/* ═══════════════════════════════════════════════════════════════ */
/* BENCHMARK STRUCTURES — NAVIGATION                              */
/* ═══════════════════════════════════════════════════════════════ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid #e8e5e0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  min-height: 72px;
  gap: 0;
  flex-wrap: nowrap;
  overflow: visible;
  width: 100%;
}
.nav-logo { flex-shrink: 0; margin-right: 16px; }
.nav-logo img { height: 36px; display: block; }
.nav-links { display: flex; align-items: center; flex: 1; min-width: 0; overflow: visible; }
.nav-item { position: relative; }
.nav-item > a {
  font-family: 'Akrobat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--black);
  text-decoration: none;
  padding: 0 16px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: .3px;
  transition: color 0.2s;
  white-space: nowrap;
  text-transform: uppercase;
}
.nav-item > a:hover { color: var(--tan); }
.nav-arrow { font-size: 8px; opacity: .5; margin-top: 1px; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid #e8e5e0;
  border-top: 2px solid var(--tan);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 220px;
  z-index: 999;
  overflow: hidden;
}
.nav-item:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  font-family: 'Akrobat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  text-decoration: none;
  padding: 11px 20px;
  border-bottom: 1px solid #f5f3ef;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: #f5f3ef; color: var(--tan); }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; max-width: none !important; white-space: nowrap; }
.nav-btn-tan {
  background: transparent;
  color: var(--navy);
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  font-family: 'Akrobat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-btn-tan span { font-weight: 400; font-size: 11px; opacity: .8; }
.nav-btn-navy {
  background: transparent;
  color: var(--white);
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  font-family: 'Akrobat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-btn-navy span { font-weight: 400; font-size: 11px; opacity: .7; }
.nav-divider { width: 1px; height: 24px; background: #ddd; margin: 0 6px; }
.nav-signin {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--black);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  transition: color 0.2s;
}
.nav-signin:hover { color: var(--tan); }
.nav-cart {
  position: relative;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--black);
  transition: color 0.2s;
}
.nav-cart:hover { color: var(--tan); }

/* Cart glow animation when items in cart */
@keyframes star-glow {
  0%, 100% { filter: drop-shadow(0 0 3px #aa936e) drop-shadow(0 0 6px #aa936e); }
  50% { filter: drop-shadow(0 0 8px #aa936e) drop-shadow(0 0 16px #aa936e) drop-shadow(0 0 24px #d4b98a); }
}
.nav-cart.cart-active path[style*="a6906d"],
.nav-cart.cart-active path[style*="a6906d"] {
  animation: star-glow 1.8s ease-in-out infinite;
}
.nav-cart.cart-active svg {
  filter: drop-shadow(0 0 4px rgba(170,147,110,.6));
  animation: star-glow 1.8s ease-in-out infinite;
}
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; margin-left: 8px; }
.nav-hamburger span { width: 22px; height: 2px; background: var(--black); border-radius: 2px; }

@media (max-width: 900px) {
  .nav-links, .nav-btn-tan, .nav-btn-navy, .nav-divider, .nav-cart { display: none !important; }
  .nav-hamburger { display: flex; }
  .navbar { overflow: hidden; }
  .nav-inner { overflow: hidden; }
  /* Keep Sign In visible in the top bar on mobile (icon + text) */
  .nav-signin { display: inline-flex !important; align-items: center; gap: 4px; font-size: 13px; padding: 6px 8px; }
  /* KILL the desktop hover mega/dropdowns on mobile/touch. Tapping counts as
     hover on touchscreens, which was firing the full-screen fixed mega-menu.
     The mobile hamburger slide-in panel handles all mobile navigation. */
  .nav-dropdown, .nav-mega { display: none !important; }
  .nav-item:hover .nav-dropdown, .nav-item:hover .nav-mega { display: none !important; }
}

/* MOBILE — force hide nav buttons that have inline display:flex */
@media (max-width: 900px) {
  a.nav-btn-tan,
  a.nav-btn-navy,
  .nav-btn-tan,
  .nav-btn-navy,
  .nav-right a.btn,
  .nav-right .btn,
  .nav-right .btn-tan {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* MEGA DROPDOWN — Shop Steel */
.nav-mega {
  display: none;
  position: fixed !important;
  top: 72px;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid var(--tan);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 28px 40px;
  display: none;
  flex-direction: row;
  gap: 0;
  z-index: 9998;
  width: 100%;
}
.nav-item:hover .nav-mega { display: flex !important; }
.mega-col {
  flex: 1;
  padding: 0 20px;
  border-right: 1px solid #f0eeeb;
}
.mega-col:last-child { border-right: none; }
.mega-heading {
  font-family: Akrobat, sans-serif;
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tan);
}
.nav-mega a {
  display: block;
  font-size: 12px;
  color: #444;
  text-decoration: none;
  padding: 5px 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  transition: color .15s;
}
.nav-mega a:hover { color: var(--tan); }

/* Ensure nav container uses full width with tighter padding */
.navbar .container {
  padding-left: 32px;
  padding-right: 32px;
  max-width: 1280px;
}


  10%      { transform: rotate(-15deg); }
  20%      { transform: rotate(15deg); }
  30%      { transform: rotate(-12deg); }
  40%      { transform: rotate(12deg); }
  50%      { transform: rotate(-8deg); }
  60%      { transform: rotate(8deg); }
  70%      { transform: rotate(0deg); }
}



/* Apply to phone icon in Support button */
.nav-btn-navy svg g:last-child path:first-child {
  transform-origin: center;
  animation: phone-ring 2.5s ease-in-out infinite;
}

/* BUTTON GLOW ON HOVER */
.nav-btn-tan {
  border-radius: 8px;
  transition: filter .2s, transform .15s;
}
.nav-btn-tan:hover {
  filter: drop-shadow(0 0 8px rgba(169,146,110,.85)) drop-shadow(0 0 18px rgba(169,146,110,.45));
  transform: scale(1.06);
}

.nav-btn-navy {
  border-radius: 8px;
  transition: filter .2s, transform .15s;
}
.nav-btn-navy:hover {
  filter: drop-shadow(0 0 8px rgba(7,27,48,.9)) drop-shadow(0 0 18px rgba(100,140,200,.5));
  transform: scale(1.06);
}



/* ============================================================
   MOBILE SLIDE-IN NAV (single source; moved from homepage inline
   so all 122 pages share the same working hamburger menu)
   ============================================================ */
/* Hamburger -> X animation */
.nav-hamburger span{
  transition:transform .3s ease, opacity .2s ease;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Slide-in panel */
#mobile-nav{
  position:fixed;top:0;right:0;
  width:min(86vw,380px);height:100vh;height:100dvh;
  background:var(--white,#fff);
  box-shadow:-12px 0 40px rgba(0,22,48,.22);
  border-left:3px solid var(--tan,#aa936e);
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  z-index:10001;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;
}
#mobile-nav.open{transform:translateX(0);visibility:visible;}
#mobile-nav-overlay{
  position:fixed;inset:0;
  background:rgba(0,22,48,.5);
  backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease;
  z-index:10000;
}
#mobile-nav-overlay.open{opacity:1;visibility:visible;}
body.mnav-lock{overflow:hidden;}

.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid #ece9e3;flex-shrink:0;
}
.mnav-head img{height:30px;display:block;}
.mnav-close{
  background:none;border:none;cursor:pointer;padding:6px;
  color:var(--navy,#001630);line-height:0;border-radius:6px;
}
.mnav-close:hover{background:#f5f3ef;}

.mnav-list{list-style:none;margin:0;padding:8px 0 24px;flex:1;}
.mnav-list>li{border-bottom:1px solid #f1efea;}
.mnav-link{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;box-sizing:border-box;
  font-family:'Akrobat',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.4px;text-transform:uppercase;
  color:var(--navy,#001630);text-decoration:none;
  padding:16px 24px;background:none;border:none;cursor:pointer;text-align:left;
}
.mnav-link:hover{color:var(--tan,#aa936e);}
.mnav-linkrow{display:flex;align-items:stretch;width:100%;}
.mnav-linkrow .mnav-link{flex:1;justify-content:flex-start;}
.mnav-expand{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:60px;background:none;border:none;border-left:1px solid #f1efea;
  cursor:pointer;color:var(--tan,#aa936e);
}
.mnav-expand:active{background:#faf9f6;}
.mnav-caret{
  width:22px;height:22px;flex-shrink:0;margin-left:12px;color:var(--tan,#aa936e);
  transition:transform .28s ease;
}
.mnav-expand .mnav-caret{margin-left:0;}
.mnav-item.open .mnav-caret{transform:rotate(180deg);}

.mnav-sub{
  max-height:0;overflow:hidden;
  transition:max-height .34s ease;
  background:#faf9f6;
}
.mnav-item.open .mnav-sub{max-height:2200px;}
.mnav-sub-heading{
  font-family:'Akrobat',sans-serif;font-weight:900;font-size:12px;
  letter-spacing:1px;text-transform:uppercase;color:var(--tan,#aa936e);
  padding:16px 24px 6px;
}
.mnav-sub a{
  display:block;
  font-family:'Montserrat',sans-serif;font-weight:500;font-size:13px;
  color:#444;text-decoration:none;padding:9px 24px 9px 32px;
}
.mnav-sub a:hover{color:var(--tan,#aa936e);background:#f2efe9;}

.mnav-foot{
  padding:20px 24px 32px;border-top:1px solid #ece9e3;flex-shrink:0;
  display:flex;flex-direction:column;gap:12px;
}
.mnav-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Akrobat',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.4px;text-transform:uppercase;text-decoration:none;
  padding:14px 18px;border-radius:8px;text-align:center;
}
.mnav-cta.tan{background:var(--tan,#aa936e);color:#fff;}
.mnav-cta.navy{background:var(--navy,#001630);color:#fff;}
.mnav-cta.outline{background:#fff;color:var(--navy,#001630);border:1.5px solid var(--navy,#001630);}

@media (min-width:901px){
  #mobile-nav,#mobile-nav-overlay{display:none !important;}
}