/* nav.css — Announcement bar + site navigation */

/* Announcement bar */
.hlc-ann {
  background: var(--color-black);
  color: var(--color-gold);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 9px var(--space-lg);
  font-family: var(--font-body);
}
.hlc-ann a { color: var(--color-gold); text-decoration: underline; }

/* Nav wrapper */
.hlc-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 280ms ease, box-shadow 280ms ease,
              backdrop-filter 280ms ease, border-color 280ms ease;
}
.hlc-nav.is-scrolled {
  background-color: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom-color: rgba(236,234,226,0.5);
  box-shadow: 0 1px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(201,168,76,0.06);
}

/* Override Storefront site-header if it wraps nav */
.site-header {
  padding: 0 !important;
  border-bottom: none !important;
}

.hlc-nav-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-2xl);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  height: 72px;
  transition: height 280ms ease;
}
.hlc-nav.is-scrolled .hlc-nav-inner {
  height: 56px;
}

/* Logo */
.hlc-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.hlc-logo:hover { opacity: 0.88; }

/* Logo mark — hexagon seal.
   No border-radius or overflow clipping: the header cut is transparent, so a
   rounded container made it read as an app icon pasted beside the wordmark. */
.hlc-logo-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}
.hlc-logo-mark img,
.hlc-logo-mark svg { width: 100%; height: 100%; display: block; }

/* Logo wordmark — "HIGH LEVEL" + "COMPOUNDS" */
.hlc-logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hlc-logo-primary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-black);
  line-height: 1;
}
.hlc-logo-secondary {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  /* Was #2d6b4e, a green left over from an earlier palette. The brand is gold. */
  color: var(--color-gold-dark);
  line-height: 1;
}

/* Nav links (center column — flex-centered) */
.hlc-nav-links {
  display: flex;
  justify-content: center;
  gap: 36px;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0; /* allow shrinking without overflowing */
}
.hlc-nav-links a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 200ms ease;
  font-family: var(--font-body);
}
.hlc-nav-links a:hover,
.hlc-nav-links .active,
.hlc-nav-links .current-menu-item > a {
  color: var(--color-black);
}

/* Nav right: icons */
.hlc-nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0; /* never collapse — icons must always be reachable */
  position: relative;
  z-index: 10;
}

.hlc-nav .hlc-icon-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #f5f4f0 !important;
  border: 1px solid #eceae2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 200ms ease, color 200ms ease !important;
  text-decoration: none !important;
  color: #888888 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.hlc-nav .hlc-icon-btn:hover {
  background: #eceae2 !important;
  color: #0a0a0a !important;
}
.hlc-nav .hlc-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  display: block !important;
  fill: none !important;
  overflow: visible !important;
}

/* Cart icon */
.hlc-nav .hlc-cart-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #0a0a0a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 200ms ease !important;
  color: #c9a84c !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.hlc-nav .hlc-cart-btn:hover { background: #1a1a1a !important; color: #c9a84c !important; }
.hlc-nav .hlc-cart-btn svg {
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  display: block !important;
  fill: none !important;
  overflow: visible !important;
}
.hlc-cart-count {
  position: absolute;
  top: -3px; right: -3px;
  width: 15px; height: 15px;
  background: var(--color-gold);
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
}

/* Mobile nav */
@media (max-width: 860px) {
  .hlc-nav-links { display: none; }
  .hlc-nav-inner {
    grid-template-columns: auto 1fr;
    /* hides center menu column — logo left, icons right */
  }
  /* On mobile, icons shift to use the 1fr space */
  .hlc-nav-right { grid-column: 2; }
}
@media (max-width: 480px) {
  .hlc-nav-inner { padding-inline: var(--space-lg); }
  /* Four circular targets plus the wordmark is too much at 375px, so the
     secondary account icon steps aside. It stays reachable in the drawer. */
  .hlc-nav-right .hlc-icon-btn[aria-label="My Account"] { display: none !important; }
  .hlc-nav-right { gap: 8px; }
}

/* ── Menu toggle (hamburger) ───────────────────────────────────────────────
   Desktop keeps the horizontal bar, so the button only exists below 860px.
   Selector is scoped to .hlc-nav to outrank the theme's own
   `.hlc-nav .hlc-icon-btn { display: flex !important }`, which this button
   also matches. A bare .hlc-menu-toggle rule loses that fight and leaks the
   hamburger onto desktop.                                                    */
.hlc-nav .hlc-menu-toggle { display: none !important; }

/* The override must come AFTER the base rule: both selectors carry the same
   specificity and both are !important, so source order decides. Declaring this
   inside the earlier "Mobile nav" media block put it before the base rule and
   the hamburger stayed hidden at every width. */
@media (max-width: 860px) {
  .hlc-nav .hlc-menu-toggle { display: flex !important; }
}

.hlc-burger {
  display: block;
  width: 16px;
  height: 12px;
  position: relative;
}
.hlc-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-black);
  border-radius: 2px;
  transition: transform 240ms ease, opacity 160ms ease, top 240ms ease;
}
.hlc-burger span:nth-child(1) { top: 0; }
.hlc-burger span:nth-child(2) { top: 5.25px; }
.hlc-burger span:nth-child(3) { top: 10.5px; }

/* Morph to an X while the drawer is open */
.hlc-menu-toggle[aria-expanded="true"] .hlc-burger span:nth-child(1) {
  top: 5.25px;
  transform: rotate(45deg);
}
.hlc-menu-toggle[aria-expanded="true"] .hlc-burger span:nth-child(2) { opacity: 0; }
.hlc-menu-toggle[aria-expanded="true"] .hlc-burger span:nth-child(3) {
  top: 5.25px;
  transform: rotate(-45deg);
}

/* ── Drawer ────────────────────────────────────────────────────────────── */
.hlc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 9998;
}
.hlc-drawer-backdrop[hidden] { display: none; }
.hlc-drawer-backdrop.is-open { opacity: 1; }

.hlc-drawer {
  box-sizing: border-box;   /* padding must sit inside the 340px cap, not outside it */
  /* The theme's background enforcer repaints dark elements cream. The drawer is
     dark by design, so it states its ground with !important and carries
     data-hlc-keep-dark for the JS side. */
  background-color: #0a0a0a !important;
  background-image: none !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--color-black, #0a0a0a);
  color: #f8f7f3;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 22px 26px calc(22px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.3);
}
.hlc-drawer.is-open { transform: translateX(0); }

.hlc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.hlc-drawer-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold, #c9a84c);
}
.hlc-drawer-close {
  background: none;
  border: 0;
  color: #f8f7f3;
  cursor: pointer;
  padding: 12px;
  margin: -12px -12px -12px 0;  /* pulled back so the visual alignment is
                                   unchanged while the target grows */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;              /* stated outright rather than relying on the
                                   icon happening to be 20px */
  min-height: 44px;
  border-radius: 50%;
}
.hlc-drawer-close:focus-visible { outline: 2px solid var(--color-gold, #c9a84c); outline-offset: 2px; }

.hlc-drawer-nav { flex-shrink: 0; }
.hlc-drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hlc-drawer-links a {
  display: block;
  padding: 14px 0;              /* comfortably past the 44px touch minimum */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #f8f7f3;
  text-decoration: none;
  border-bottom: 1px solid rgba(248, 247, 243, 0.08);
  transition: color 180ms ease, padding-left 180ms ease;
}
.hlc-drawer-links a:hover,
.hlc-drawer-links a:focus-visible { color: var(--color-gold, #c9a84c); padding-left: 5px; }
.hlc-drawer-links .active > a,
.hlc-drawer-links .current-menu-item > a { color: var(--color-gold, #c9a84c); }

.hlc-drawer-links-sm a {
  font-size: 13px;
  font-weight: 400;
  padding: 15px 0;              /* secondary, but still a 44px finger target */
  color: rgba(248, 247, 243, 0.62);
  border-bottom: 0;
}

.hlc-drawer-sep {
  height: 1px;
  background: rgba(248, 247, 243, 0.12);
  margin: 20px 0 6px;
}

.hlc-drawer-foot {
  margin-top: auto;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hlc-drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f8f7f3;
  border: 1px solid rgba(248, 247, 243, 0.28);
  border-radius: 2px;
  transition: border-color 180ms ease, color 180ms ease;
}
.hlc-drawer-btn:hover { border-color: var(--color-gold, #c9a84c); color: var(--color-gold, #c9a84c); }
.hlc-drawer-btn-gold {
  border-color: var(--color-gold, #c9a84c);
  color: var(--color-gold, #c9a84c);
}

.hlc-drawer-ruo {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(248, 247, 243, 0.42);
}

/* The drawer is a mobile affordance; never show it on desktop. */
@media (min-width: 861px) {
  .hlc-drawer, .hlc-drawer-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hlc-drawer, .hlc-drawer-backdrop, .hlc-burger span, .hlc-drawer-links a {
    transition: none !important;
  }
}

/* ── Search overlay ────────────────────────────────────────────────────────── */
.hlc-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.hlc-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.hlc-search-close {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.hlc-search-close:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.hlc-search-overlay-inner {
  width: 100%;
  max-width: 680px;
  padding-inline: var(--space-lg);
}

.hlc-search-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
  font-family: var(--font-body);
}

/* Search form */
.hlc-search-form {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
  margin-bottom: var(--space-2xl);
}

.hlc-search-field-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.hlc-search-field-icon {
  position: absolute;
  left: 18px;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  flex-shrink: 0;
}
.hlc-search-input {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-lg) 0 52px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
  -webkit-appearance: none;
}
.hlc-search-input::placeholder { color: rgba(255,255,255,0.3); }
.hlc-search-input:focus {
  border-color: var(--color-gold);
  background: rgba(255,255,255,0.09);
}
/* Hide browser default clear/search UI */
.hlc-search-input::-webkit-search-decoration,
.hlc-search-input::-webkit-search-cancel-button { display: none; }

.hlc-search-submit {
  height: 56px;
  padding-inline: var(--space-xl);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Quick links */
.hlc-search-quick-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
}
.hlc-search-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hlc-search-chip {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.06);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(201,168,76,0.8);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.hlc-search-chip:hover {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.5);
  color: var(--color-gold);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hlc-search-overlay { transition: none; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .hlc-search-close { top: var(--space-lg); right: var(--space-lg); }
  .hlc-search-form { flex-direction: column; }
  .hlc-search-submit { height: 48px; }
  .hlc-search-input { height: 52px; }
}