/* ============================================================
   DCE auto-chrome — header (topbar + nav) and footer styles.
   Self-contained so uploading chrome.css alone fixes the nav.
   ============================================================ */

/* ------- topbar ------- */
.dce-topbar {
  background: #0F2647;
  color: #E9D7A3;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 0;
}
.dce-topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dce-topbar a { color: inherit; text-decoration: none; }
.dce-topbar a:hover { color: #fff; }

/* ------- nav ------- */
.nav.dce-nav-fallback {
  background: #1B3A6B;
  color: #fff;
  border-bottom: 4px solid #B22222;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* If anything wraps to a second row at medium widths, keep rows tight. */
  row-gap: 4px;
}

/* Medium widths (between burger threshold and desktop): squeeze the menu
   so it fits on one row, then if it still has to wrap, do it tightly. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-inner { padding: 6px 16px; gap: 14px; }
  .dce-nav-wrap ul,
  .dce-nav-wrap .menu { gap: 14px; row-gap: 2px; flex-wrap: wrap; justify-content: center; }
  .dce-nav-wrap a { padding: 6px 8px !important; font-size: 13px; }
  .dce-nav-cta { padding: 10px 14px; font-size: 13px; }
  .nav-logo-img { height: 38px; }
}

/* LOGO — this is the fix */
.nav-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 240px;
}
.nav-logo-img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* menu */
.dce-nav-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}
.dce-nav-wrap ul,
.dce-nav-wrap .menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
}
.dce-nav-wrap a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 22px 16px;
  font-family: var(--font-display, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 0;
  transition: background .15s ease, color .15s ease;
}
.dce-nav-wrap a:hover,
.dce-nav-wrap .current-menu-item > a,
.dce-nav-wrap .current_page_item > a {
  border-bottom: 0;
  background: rgba(244,239,228,0.10);
  color: #fff;
}
/* When dropdown is open, parent tab visually merges with the panel */
.dce-nav-wrap > ul > li.menu-item-has-children:hover > a,
.dce-nav-wrap > ul > li.menu-item-has-children:focus-within > a,
.dce-nav-wrap .dce-nav-menu > li.menu-item-has-children:hover > a,
.dce-nav-wrap .dce-nav-menu > li.menu-item-has-children:focus-within > a {
  background: #ffffff !important;
  color: #1B3A6B !important;
}

/* Kill any list bullets on every menu level */
.dce-nav-wrap ul,
.dce-nav-wrap ol,
.dce-nav-wrap .menu,
.dce-nav-wrap .sub-menu {
  list-style: none !important;
}
.dce-nav-wrap li {
  list-style: none !important;
  list-style-type: none !important;
}
.dce-nav-wrap li::marker {
  content: '' !important;
  display: none !important;
}

/* Kill any unwanted "current item" bullets/dots that themes inject —
   applies to top-level AND any nested submenu items. */
.dce-nav-wrap a::before,
.dce-nav-wrap li::before,
.dce-nav-wrap .menu > li > a::before,
.dce-nav-wrap .sub-menu .current-menu-item > a::before,
.dce-nav-wrap .sub-menu .current_page_item > a::before,
.dce-nav-wrap .sub-menu .current-menu-ancestor > a::before,
.dce-nav-wrap .sub-menu a::before,
.dce-nav-wrap .sub-menu a::marker,
.dce-nav-wrap li::marker,
.dce-nav-wrap .current-menu-ancestor::before,
.dce-nav-wrap .current-menu-parent::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Active sub item: subtle background only, no bullets, no underline */
.dce-nav-wrap .sub-menu .current-menu-item > a,
.dce-nav-wrap .sub-menu .current_page_item > a,
.dce-nav-wrap .sub-menu .current-menu-ancestor > a {
  background: #f4efe4;
  color: #1B3A6B;
  font-weight: 600;
  border-bottom: 0 !important;
}

/* cta */
.dce-nav-cta {
  flex-shrink: 0;
}

/* ---- Submenus (dropdowns) — clean & minimal ---- */
.dce-nav-wrap li { position: relative; }
.dce-nav-wrap li.menu-item-has-children > a {
  position: relative;
  padding-right: 18px;
}
.dce-nav-wrap li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  opacity: 0.6;
  transition: opacity .15s ease;
}
.dce-nav-wrap li.menu-item-has-children:hover > a::after { opacity: 1; }

.dce-nav-wrap .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #ffffff;
  border: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 6px 0 10px;
  margin: 0;
  list-style: none;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 100;
}

/* invisible hover-bridge so cursor doesn't lose the submenu */
.dce-nav-wrap li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 4px;
}

.dce-nav-wrap li:hover > .sub-menu,
.dce-nav-wrap li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.dce-nav-wrap .sub-menu li { width: 100%; border: 0; }

.dce-nav-wrap .sub-menu a {
  display: block;
  padding: 10px 22px 10px 32px;
  border: 0 !important;
  border-radius: 0;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1814;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.dce-nav-wrap .sub-menu a:hover,
.dce-nav-wrap .sub-menu a:focus {
  background: #f4efe4;
  color: #1B3A6B;
}

/* Indicator on submenu items that have their own children (3rd level) */
.dce-nav-wrap .sub-menu li.menu-item-has-children > a {
  padding-right: 32px;
  padding-left: 32px;
  position: relative;
}
.dce-nav-wrap .sub-menu li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px; height: 6px;
  border-right: 2px solid #A8321F;
  border-bottom: 2px solid #A8321F;
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0.85;
  transition: transform .15s ease, opacity .15s ease, right .15s ease;
}
.dce-nav-wrap .sub-menu li.menu-item-has-children:hover > a::after {
  transform: translateY(-50%) translateX(3px) rotate(-45deg);
  opacity: 1;
}

/* Nested 3rd-level — same panel, slides out to the right */
.dce-nav-wrap .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 4px;
}

/* burger — hidden on desktop */
.dce-nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.dce-nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* ------- footer ------- */
.site-footer {
  background: #0F2647;
  color: #E9D7A3;
  padding: 60px 0 24px;
  margin-top: 80px;
  border-top: 4px solid #B22222;
}
.site-footer .container { padding: 0 24px; }
.footer-top {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(233, 215, 163, 0.15);
}
.footer-brand .footer-logo {
  display: block;
  max-width: 220px;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
}
.footer-tagline {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.footer-hours { font-size: 12px; color: #E9D7A3; }

.footer-locations__title {
  font-size: 12px;
  letter-spacing: 0.1em;
  margin: 0 0 24px;
  color: #E9D7A3;
  text-transform: uppercase;
}
.footer-locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-location__name {
  font-size: 13px;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  color: #fff;
  text-transform: uppercase;
}
.footer-location__tag {
  display: inline-block;
  background: #B22222;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 2px;
}
.footer-location__address {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  font-style: normal;
  line-height: 1.5;
  margin-bottom: 8px;
}
.footer-location__phone,
.footer-location__email {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.footer-location__email {
  font-size: 12px;
  color: rgba(233, 215, 163, 0.8);
  font-weight: 400;
  margin-top: 4px;
}
.footer-location__phone:hover,
.footer-location__email:hover { color: #B22222; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(233, 215, 163, 0.6);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { margin: 0; }

/* ================= MOBILE ================= */
@media (max-width: 900px) {
  .nav-inner { padding: 10px 16px; gap: 12px; }
  .nav-logo-link { max-width: 180px; }
  .nav-logo-img { height: 36px; }

  /* When the burger menu is open, force the nav to be fixed at the top of
     the viewport (sticky can break when body overflow is hidden, on iOS
     especially). This guarantees the close button is always visible. */
  .nav.dce-nav-fallback.is-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  /* And keep the topbar visible too. */
  body.dce-nav-open .dce-site-chrome,
  body.dce-nav-open .topbar {
    position: relative;
    z-index: 1000;
  }
  /* Rock-solid scroll lock — iOS Safari ignores body{overflow:hidden},
     so we ALSO pin html overflow and add a body-positioned backdrop. */
  html.dce-nav-locked,
  html.dce-nav-locked body { overflow: hidden !important; height: 100% !important; touch-action: none; overscroll-behavior: none; }

  .dce-nav-wrap {
    /* Mobile nav menu: position fixed to viewport so it doesn't depend on the
       sticky nav's position (which can break in body{overflow:hidden}). The
       menu fills the screen below the nav bar, scrolls internally, and sits
       above everything else. */
    position: fixed !important;
    top: 100px !important; /* below the topbar + nav row; overridden by JS to actual nav-row bottom */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    background: #1B3A6B !important;
    flex-direction: column !important;
    padding: 20px 24px 40px !important;
    border-bottom: 4px solid #B22222 !important;
    display: none !important;
    justify-content: flex-start !important;
    flex: none !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .nav.dce-nav-fallback.is-open .dce-nav-wrap { display: flex !important; }

  .dce-nav-wrap ul,
  .dce-nav-wrap .menu {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Top-level parents — bold, full-width, with a clear "+" chevron when they have kids */
  .dce-nav-wrap > ul > li > a,
  .dce-nav-wrap .dce-nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 4px !important;
    width: 100% !important;
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #F4EFE4 !important;
    border-bottom: 1px solid rgba(244,239,228,0.12) !important;
  }
  .dce-nav-wrap > ul > li.menu-item-has-children > a::after,
  .dce-nav-wrap .dce-nav-menu > li.menu-item-has-children > a::after {
    content: '+' !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important; height: auto !important;
    margin-left: 10px !important;
    border: 0 !important;
    transform: none !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #A8321F !important;
    opacity: 1 !important;
  }

  /* Submenus inline on mobile — collapsed by default, expand when parent has .is-submenu-open */
  .dce-nav-wrap .menu-item-has-children > .sub-menu {
    display: none !important;
  }
  .dce-nav-wrap .menu-item-has-children.is-submenu-open > .sub-menu {
    display: block !important;
  }
  .dce-nav-wrap .sub-menu {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 0 0 8px 0 !important;
    margin: 0 0 0 14px !important;
    min-width: 0 !important;
    border-left: 2px solid #A8321F !important;
  }
  /* Rotate the "+" to "−" when the submenu is expanded */
  .dce-nav-wrap > ul > li.menu-item-has-children.is-submenu-open > a::after,
  .dce-nav-wrap .dce-nav-menu > li.menu-item-has-children.is-submenu-open > a::after {
    content: '−' !important;
  }
  /* Also for nested parents that have children */
  .dce-nav-wrap .sub-menu li.menu-item-has-children > a::after {
    content: '+' !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important; height: auto !important;
    margin-left: auto !important;
    padding-left: 10px !important;
    border: 0 !important;
    transform: none !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #A8321F !important;
    opacity: 1 !important;
  }
  .dce-nav-wrap .sub-menu li.menu-item-has-children.is-submenu-open > a::after {
    content: '−' !important;
  }
  .dce-nav-wrap .sub-menu::before,
  .dce-nav-wrap li.menu-item-has-children::after { display: none !important; content: none !important; }

  .dce-nav-wrap .sub-menu li {
    border-top: 0 !important;
  }
  .dce-nav-wrap .sub-menu a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 0 11px 16px !important;
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(244,239,228,0.12) !important;
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(244,239,228,0.78) !important;
    white-space: normal !important;
  }
  .dce-nav-wrap .sub-menu a::before {
    content: '·' !important;
    position: static !important;
    width: auto !important; height: auto !important;
    background: transparent !important;
    color: #A8321F !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin-right: 10px !important;
    margin-left: -8px !important;
  }
  .dce-nav-wrap .sub-menu a:hover,
  .dce-nav-wrap .sub-menu a:focus {
    color: #F4EFE4 !important;
    background: transparent !important;
    padding-left: 16px !important;
  }
  /* Hide the generic fallback rule below so it doesn't double-style */
  .dce-nav-wrap a { border-bottom: 0; }

  .dce-nav-cta { display: none !important; }
  .dce-nav-burger { display: inline-flex !important; margin-left: auto !important; }

  .dce-topbar { font-size: 11px; }
  .dce-topbar-inner { justify-content: center; text-align: center; }

  /* Burger animation when open */
  .nav.dce-nav-fallback.is-open .dce-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.dce-nav-fallback.is-open .dce-nav-burger span:nth-child(2) { opacity: 0; }
  .nav.dce-nav-fallback.is-open .dce-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .dce-nav-burger span { transition: transform .2s, opacity .2s; }
}

@media (max-width: 560px) {
  .nav-inner { padding: 8px 14px; }
  .nav-logo-link { max-width: 150px; }
  .nav-logo-img { height: 32px; }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-locations__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .site-footer { padding: 40px 0 20px; margin-top: 48px; }
}


/* Mobile nav backdrop — dim the page behind the open hamburger menu */
@media (max-width: 900px) {
  body.dce-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    pointer-events: none;
    animation: dceNavFade 0.2s ease;
  }
  @keyframes dceNavFade { from { opacity: 0; } to { opacity: 1; } }
}


/* The "Call the Store" button rendered inside the mobile hamburger menu.
   Hidden by default (desktop has its own copy in .dce-nav-cta); shown only
   when the burger menu is the active nav (≤ 900px). */
.dce-nav-mobile-cta { display: none; }
@media (max-width: 900px) {
  .dce-nav-mobile-cta {
    display: block;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(244,239,228,0.15);
  }
  .dce-nav-mobile-cta .dce-call-dd { display: block; width: 100%; }
  .dce-nav-mobile-cta .dce-call-dd__btn {
    width: 100%;
    justify-content: center;
    padding: 16px 22px !important;
    font-size: 14px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: var(--barn-red, #A8321F) !important;
    color: #fff !important;
    border: 2px solid var(--barn-red, #A8321F) !important;
  }
  .dce-nav-mobile-cta .dce-call-dd__btn:hover { background: var(--barn-red-deep, #7a2415) !important; }
}