/* ============================================================================
   Allegory bridge — scoped HEADER styles (Track 2)
   Owns: desktop 3-column layout, off-canvas slide-in mobile/desktop drawer,
   cart badge + revolving hover, Contact revolving hover.

   NOTE on cascade: allegory-static.css loads AFTER this file, so a few rules
   below are written with extra specificity (html.js .., .header--center-logo ..)
   to win over the older header rules that live in allegory-static.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   C) HEADER LAYOUT — logo always centered (3-col grid: left / logo / right)
   The theme's .header--center-logo is already display:grid 5fr/auto/5fr.
   We just keep the columns behaving and place our content in left/right.
   --------------------------------------------------------------------------- */
.header.header--center-logo {
  align-items: center;
}

/* LEFT column: hamburger first, then (desktop only) the social links. */
.header__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

/* Show the hamburger on EVERY breakpoint (nav lives in the drawer now). */
.header__left > header-drawer {
  display: flex;
  align-items: center;
  height: 100%;
  width: 4.8rem;
}
/* Override the ported static.css rule that hides the hamburger >=1160px. */
@media screen and (min-width: 1160px) {
  .header .header__left > header-drawer {
    display: flex;
  }
}

/* Social links: desktop-only LEFT-column text menu (INSTAGRAM · TIKTOK · FACEBOOK). */
.header__social-menu {
  display: none;
}
@media screen and (min-width: 990px) {
  .header__social-menu {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline-start: 0.8rem;
  }
  .header__social-menu .list-menu--inline {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .header__social-menu .list-menu-item {
    display: flex;
  }
  .header__social-menu .header__menu-item {
    display: inline-flex;
    align-items: center;
    min-height: 3.2rem;
    padding: 0 0.6rem;
    text-decoration: none;
    color: rgb(var(--color-foreground));
    transition: opacity var(--duration-default, 0.2s) ease-in-out;
  }
  .header__social-menu .header-label {
    white-space: nowrap;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
  }
}
@media screen and (min-width: 990px) and (hover: hover) and (pointer: fine) {
  .header__social-menu .header__menu-item:hover {
    opacity: var(--hover-opacity, 0.7);
  }
}

/* Keep the logo centered: heading is the middle grid track. */
.header.header--center-logo > .header__heading {
  justify-content: center;
  justify-self: center;
}

/* RIGHT column: Contact + cart, right-aligned. */
.header__column {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.header__buttons {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 100%;
}
.header__buttons > * {
  margin-inline-end: 0;
}

/* ---------------------------------------------------------------------------
   E) CONTACT button — button--simple revolving hover-reveal.
   Desktop-only (matches the theme: hidden under 990px). The duplicate label is
   produced by base.css's `.button__label::after { content: attr(data-label) }`
   sitting just below; on hover the whole label slides up -100% revealing it.
   --------------------------------------------------------------------------- */
.header__additional-btn.button--simple {
  display: none;
}
@media screen and (min-width: 990px) {
  .header__additional-btn.button--simple {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    min-height: unset;
    border: none;
    background: none;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
}
/* base.css already animates .button--simple .button__label up on hover; ensure the
   overflow-clipping content box hides the duplicate until it slides in. */
.header__additional-btn .button__content {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   D) CART — icon everywhere (never the "Cart" word), live count as a small
   top-right badge, plus a revolving hover (icon slides up, duplicate slides in).
   We must beat allegory-static.css, which (a) hides the icon / shows text on
   desktop and (b) only badges on mobile. Hence the elevated specificity below.
   --------------------------------------------------------------------------- */
.header__cart {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

/* The whole cart pill is the hover button. */
.header .cart-count-bubble.button--simple {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  overflow: visible; /* badge may poke outside */
  color: rgb(var(--color-foreground));
}

/* Stacked-icons viewport: clips the duplicate until hover slides it up. */
.cart-count-bubble__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
}

/* Force the icon visible at EVERY width (override static.css text/icon swap). */
html .header .cart-count-bubble__icon,
.header__cart--icon .cart-count-bubble__icon,
.header__cart--icon-mobile .cart-count-bubble__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}
/* Never render the "Cart"/"Bag" word version. */
html .header .cart-count-bubble__text {
  display: none !important;
}

/* The revolving duplicate icon: a clone of the cart svg sitting one row below,
   revealed by sliding the icon up on hover (mirrors base.css button__label). */
.cart-count-bubble__icon {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.05s;
}
.cart-count-bubble__icon .icon {
  display: block;
  width: 2rem;
  height: 2rem;
}
.cart-count-bubble__icon::after {
  content: "";
  position: absolute;
  inset: 100% auto auto 0;
  width: 2rem;
  height: 2rem;
  /* duplicate cart glyph drawn as a background SVG so we never see white/blank */
  background: no-repeat center / 2rem 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1.75' y='5.75' width='16.5' height='11.5' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M14 9V5C14 2.79086 12.2091 1 10 1C7.79086 1 6 2.79086 6 5V9' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
@media screen and (pointer: fine) {
  .header .cart-count-bubble.button--simple:hover .cart-count-bubble__icon,
  #cart-icon-bubble:hover .cart-count-bubble__icon {
    transform: translate3d(0, -100%, 0);
  }
}

/* Count BADGE — small pill pinned to the top-right of the cart icon. */
html .header .cart-count-bubble .cart-count-bubble__count {
  position: absolute;
  top: -0.4rem;
  right: -0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  color: rgb(var(--color-background));
  background-color: rgb(var(--color-foreground));
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
/* Empty cart: show a persistent "0" badge, matching the live store. */
.cart-count-bubble__count:empty::after {
  content: "0";
}

/* ---------------------------------------------------------------------------
   B) MOBILE/DESKTOP MENU DRAWER — proper LEFT off-canvas slide-in.
   Fixed, full height, slides via transform, dimmed backdrop, X close control,
   page underneath does NOT reflow. Driven by the native <details open> state.
   Higher specificity than allegory-static.css's `.js details[open] > .menu-drawer`.
   --------------------------------------------------------------------------- */

/* Keep the panel + backdrop RENDERED even while <details> is closed, so the
   transform transition can animate both in AND out. Native <details> would set
   `display:none` on non-summary children when closed — undo that here. */
html.js .menu-drawer-container > .menu-drawer,
html.js .menu-drawer-container > .menu-drawer__overlay {
  display: block;
}

/* CRITICAL: the sticky-header's transform + the header's will-change:transform each
   establish a containing block, which would make the drawer's position:fixed resolve
   against the header bar (breaking the full-viewport off-canvas slide). Neutralize them
   so `position: fixed` resolves against the viewport. (Header is not sticky here.) */
html.js .shopify-section-header,
html.js .header-wrapper {
  transform: none !important;
  will-change: auto !important;
}

/* The drawer panel: off-screen to the left, slides in on open. */
html.js .menu-drawer-container > .menu-drawer {
  position: fixed;
  top: 0;
  /* Slide via `left` (layout-based) rather than `transform`: a transform transition on
     an off-screen panel gets skipped by some compositors; animating `left` runs everywhere. */
  left: calc(-1 * min(88vw, 36rem));
  bottom: auto;
  width: 88vw;
  max-width: 36rem;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: rgb(var(--color-background));
  border: none;
  box-shadow: 0.4rem 0 2.4rem rgba(0, 0, 0, 0.18);
  transform: none;
  /* Override the theme's `.menu-drawer{visibility:hidden}` with a CONSTANT visible
     (the panel is hidden by being positioned off-screen). visibility:hidden would not paint. */
  visibility: visible;
  pointer-events: none;
  overflow: hidden;
  z-index: 1001;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Open state, driven by the JS `menu-drawer-open` class on <html>. */
html.menu-drawer-open .menu-drawer-container > .menu-drawer {
  left: 0;
  pointer-events: auto;
}

/* Dimmed backdrop behind the drawer. The blur is applied ONLY while open, so a
   stale opacity can never leave the page looking grayed/blurred after close. */
.menu-drawer__overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.35s ease;
}
html.menu-drawer-open .menu-drawer-container > .menu-drawer__overlay {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Inner layout: a top bar with the X, then the scrollable nav. */
.menu-drawer__inner-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.menu-drawer__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-height: var(--header-height, 6rem);
  padding: 0 1.2rem;
  border-bottom: 0.1rem solid rgb(var(--color-border));
}
.menu-drawer__close.button--simple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
}
.menu-drawer__close .icon-close {
  width: 1.8rem;
  height: 1.8rem;
}
.menu-drawer__main {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem 0 2.4rem;
}
.menu-drawer__navigation {
  padding: 0.8rem 2rem;
}

/* Lock the page behind the open drawer (no scroll, no reflow). */
html.menu-drawer-open,
html.menu-drawer-open body {
  overflow: hidden;
}

/* Avoid a first-paint flash: only enable the slide transition once JS is ready
   is not required here because the panel starts translateX(-100%) hidden. */

/* Keep the hamburger summary clean (no default disclosure marker). */
.menu-drawer-container > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.menu-drawer-container > summary::-webkit-details-marker {
  display: none;
}

/* Drawer nav: kill the default <li> bullets/indent. */
.menu-drawer__menu,
.menu-drawer__menu li,
.menu-drawer__inline-list,
.menu-drawer__inline-list li {
  list-style: none;
  margin: 0;
  padding-left: 0;
}