/* =====================================================================
   Teaspoon Honey — Header visibility fix (ADDITIVE)
   The theme's fixed header is transparent with WHITE logo/nav so it can sit
   over the DARK homepage & founder heroes, only turning solid on scroll. On
   every other (light) page it is invisible at the top. This stylesheet is
   enqueued ONLY on those light pages (not home, not founder) and makes the
   header solid + dark from the very top — matching the theme's own `.is-stuck`
   styling so scrolling stays seamless. Nothing is overridden on the dark-hero
   pages, which never load this file.
   ===================================================================== */
.hp-header {
  background: rgba(255, 253, 248, .98);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(67, 55, 45, .13);
}
.hp-brand { color: var(--brown); }
.hp-brand .wm { filter: none; }
.hp-links a { color: var(--ink-soft); }
.hp-links a:hover { color: var(--terra); }
.hp-icons button, .hp-icons a { color: var(--brown); }
.hp-burger span { background: var(--brown); }



/* ====================================================================
   UNIVERSAL DROPDOWN MENU VISIBILITY & LEGIBILITY FIX
   ==================================================================== */
.hp-navi {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.hp-sub, .v2hd .hp-sub, .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translate(-50%, 10px) !important;
  min-width: 240px !important;
  background: #ffffff !important;
  color: #1f1b16 !important;
  border-radius: 14px !important;
  padding: 12px 8px !important;
  box-shadow: 0 16px 40px rgba(13, 10, 8, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(196, 150, 70, 0.25) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  z-index: 9999 !important;
}

.hp-navi:hover .hp-sub,
.hp-navi:focus-within .hp-sub,
.hp-navi:hover .sub-menu,
.hp-navi:focus-within .sub-menu,
li.menu-item-has-children:hover > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.hp-sub a, .hp-sub__link, .sub-menu a, .v2hd .hp-sub__link {
  display: block !important;
  padding: 10px 16px !important;
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #43372d !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.2s, color 0.2s, padding-left 0.2s !important;
  white-space: nowrap !important;
}

.hp-sub a:hover, .hp-sub__link:hover, .sub-menu a:hover, .v2hd .hp-sub__link:hover {
  background: #f7f3ec !important;
  color: #c49646 !important;
  padding-left: 20px !important;
}

.hp-sub__link--head {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c49646 !important;
  padding: 8px 16px 4px !important;
  pointer-events: none !important;
}

.hp-sub__link--deep {
  padding-left: 26px !important;
  font-size: 0.78rem !important;
  color: #55483d !important;
}

.hp-sub__link--deep:hover {
  padding-left: 30px !important;
  color: #c49646 !important;
}