/**
 * @file
 * Compact header transition dock (wordmark header + hub Catering | Logo | Shop | Cart).
 *
 * Dedicated dock scale; not theme .h1 hero typography.
 *
 * @see web/themes/frontend/templates/region--header.html.twig
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning
 * @see https://webkit.org/blog/7929/designing-websites-for-iphone-x/
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env
 */
:root {
  --bbq-styles-compact-header-pad-y: 0.65rem;
  --bbq-styles-compact-header-logo-max-h: 2.85rem;
  --bbq-styles-compact-header-cart-icon-size: clamp(1.85rem, 4vw, 2.05rem);
  --bbq-styles-compact-header-cart-min-h: 3.1rem;
  --bbq-styles-compact-header-inner: max(var(--bbq-styles-compact-header-cart-min-h), var(--bbq-styles-compact-header-logo-max-h));
  --bbq-styles-compact-header-h: calc(
    (var(--bbq-styles-compact-header-pad-y) * 2)
    + var(--bbq-styles-compact-header-inner)
    + env(safe-area-inset-top, 0px)
  );
}

/*
 * Keep the fixed header at top: 0 and pad its contents with the iOS unsafe
 * area. Offsetting the bar with top: env(safe-area-inset-top) leaves a gap
 * that paints page content above the header on iPhone.
 */
#page-header.header--compact {
  top: 0;
  left: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: 0;
  padding-left: env(safe-area-inset-left, 0px);
  isolation: isolate;
}

/*
 * Transparent at rest. Frosted glass on Header._stick() (header_sticky) and
 * on commerce-flow. Keep the header fill transparent so native bg-dark-1
 * cannot paint an opaque slab. Frost lives on ::before (header box) and
 * ::after (the strip above the header). Safari 26 insets backdrop-filter
 * away from the status-bar edge, which is the gap that appears only once
 * glass turns on.
 *
 * @see https://bugs.webkit.org/show_bug.cgi?id=301756
 * @see https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty
 * @see https://www.w3.org/TR/css-color-5/#color-mix
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning
 */
#page-header.header--compact.bg-dark-1,
#page-header.header--compact.header--commerce-flow,
#page-header.header--compact.header_sticky {
  background-color: transparent !important;
  box-shadow: none;
  padding-top: env(safe-area-inset-top, 0px);
}

#page-header.header--compact.js-header-sticky {
  transition: box-shadow 0.4s ease;
}

#page-header.header--compact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--color-dark-1) 8%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#page-header.header--compact.header_sticky::before,
#page-header.header--compact.header--commerce-flow::before {
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-dark-1) 35%, transparent),
    color-mix(in srgb, var(--color-dark-1) 35%, transparent) env(safe-area-inset-top, 0px),
    color-mix(in srgb, var(--color-dark-1) 8%, transparent) env(safe-area-inset-top, 0px)
  );
}

#page-header.header--compact.header_sticky::after,
#page-header.header--compact.header--commerce-flow::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  z-index: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--color-dark-1) 35%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  #page-header.header--compact::before {
    transition: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #page-header.header--compact.header_sticky::before,
  #page-header.header--compact.header--commerce-flow::before,
  #page-header.header--compact.header_sticky::after,
  #page-header.header--compact.header--commerce-flow::after {
    background-color: color-mix(in srgb, var(--color-dark-1) 8%, transparent);
  }
}

@media (prefers-reduced-transparency: reduce) {
  #page-header.header--compact.header_sticky::before,
  #page-header.header--compact.header--commerce-flow::before,
  #page-header.header--compact.header_sticky::after,
  #page-header.header--compact.header--commerce-flow::after {
    background-color: color-mix(in srgb, var(--color-dark-1) 8%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.header--compact .header__container {
  min-height: 0;
}

#page-header.header--compact,
.header--compact .header__container,
.header--compact .header__controls {
  overflow: visible;
}

.header--compact .header-row {
  min-height: var(--bbq-styles-compact-header-inner);
  flex-wrap: nowrap;
  position: relative;
}

.header--compact .block-system-branding-block {
  line-height: 0;
}

.header--compact .block-system-branding-block img {
  display: block;
  max-height: var(--bbq-styles-compact-header-logo-max-h);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-top: 0;
}

.header--compact .header-logo-slot :is(img, svg) {
  display: block;
  max-height: var(--bbq-styles-compact-header-logo-max-h);
  width: auto;
  height: auto;
}

.header--compact .logo__wrapper-img {
  height: auto;
  margin-right: 0;
}

.header--compact .header__controls {
  padding-top: var(--bbq-styles-compact-header-pad-y);
  padding-bottom: var(--bbq-styles-compact-header-pad-y);
}

.header--compact .header__cart {
  display: flex;
  align-items: center;
}

.header--compact .header__cart--placeholder {
  min-width: calc(var(--bbq-styles-compact-header-cart-icon-size) + 1.1rem);
  min-height: var(--bbq-styles-compact-header-cart-min-h);
}

@media screen and (max-width: 991.98px) {
  .header--compact .header-logo-slot {
    flex-shrink: 1;
    min-width: 0;
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .header--compact .header-row .header-misc.header__cart {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin: 0;
  }
}

.header--compact .header__cart .cart-block--summary {
  margin: 0;
}

.header--compact .header__cart .cart-block--link__expand {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  position: relative;
  width: fit-content;
  height: fit-content;
  min-width: 0;
  min-height: 0;
  padding: 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  text-decoration: none;
}

.header--compact .header__cart .cart-block--summary__icon {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header--compact .header__cart .cart-block--summary__icon img {
  display: none;
}

.header--compact .header__cart .cart-block--summary__icon .material-icons {
  font-size: var(--bbq-styles-compact-header-cart-icon-size);
  line-height: 1;
}

.header--compact .header__cart .cart-block--summary__count {
  grid-area: 1 / 1;
  position: relative;
  align-self: start;
  justify-self: end;
  z-index: 1;
  min-width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  padding: 0 0.12rem;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #181818;
  font-family: var(--font-primary, "Montserrat", sans-serif);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  transform: translate(52%, -40%);
}

/**
 * True-center dock slot; cart-width changes do not shift it.
 *
 * The fixed height is the only header site-name size. The wordmark asset
 * (`smoke-empyr-text.png`, 1024x366) carries ~50% transparent padding above
 * and below the glyphs, so the slot height is sized to scale the visible
 * SMOKE EMPYR text to a cap-height proportional to the logo + cart icon in
 * the same row. The compact header uses `overflow: visible`, so a slot
 * slightly taller than the cart min-height stays visually clean.
 */
.header--compact .header__smokeempyr-slot {
  position: absolute;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(36rem, calc(100vw - 7rem));
  height: 4.5rem;
  margin: 0;
  font-family: var(--font-secondary, "Cinzel", serif);
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 2;
}

.header--compact .header__site-title-link {
  display: inline-flex;
  height: 100%;
  color: var(--color-accent) !important;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: auto;
}

.header--compact .header__site-title-link[hidden] {
  display: none;
}

.header--compact .header__site-title-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
  max-width: 100%;
}

.header--compact .header__site-title-text :is(img, svg) {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transform: translateY(100%);
  will-change: transform;
  transition: none;
}

/*
 * Header chrome legibility over light mastheads.
 *
 * The fixed transparent header floats over both dark heroes and light PDP
 * mastheads (oxtail, trinidadian-lamb-ribs, honey-bbq-pork-ribs); on those
 * light surfaces the gold wordmark and white cart icon lose separation. A
 * subtle dark drop/text shadow restores clarity on light and is visually
 * inert on dark. filter: drop-shadow() and text-shadow are paint-only — they
 * do not change layout boxes or transforms, so the masthead-to-header dock and
 * the flying-image transition measurements are unchanged.
 * https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
 */
#page-header .header__site-title-text :is(img, svg),
#page-header .block-system-branding-block img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

#page-header .header__cart .cart-block--link__expand,
#page-header .header__cart .cart-block--summary__icon .material-icons {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/*
 * Hub header (data-header-layout="logo"): Catering | Logo | Order | Cart.
 * Used on Order `/`, Catering `/catering`, and `/menu/*` PDPs.
 * Hub landings add masthead-to-header travel; PDPs play header split/dock only.
 *
 * @see templates/includes/header-logo-dock.html.twig
 * @see archetypes/includes/demo-header.html.twig
 */
#page-header:not([data-header-layout="logo"]) .header__logo-nav {
  display: none;
}

#page-header[data-header-layout="logo"] .header-logo-slot,
#page-header[data-header-layout="logo"] .header__smokeempyr-slot:not(.header__smokeempyr-slot--logo) {
  display: none;
}

#page-header.header--compact[data-header-layout="logo"] .header-row .header-misc.header__cart {
  margin-left: auto;
}

/*
 * Full-bleed CSS Grid 1fr | auto | 1fr keeps the logo on the viewport
 * centerline when Catering/Order widths differ (W3C CSS Grid fr tracks +
 * justify-self). Masthead-to-header travel measures this slot for endX.
 *
 * @see https://www.w3.org/TR/css-grid-1/#fr-unit
 * @see https://www.w3.org/TR/css-align-3/#justify-self-property
 */
.header--compact .header__logo-nav {
  position: absolute;
  inset-inline: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(0.75rem, 2.4vw, 2rem);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Shared editorial / auth / cart: no SectionMasthead — show Catering|LOGO|Order
 * immediately. !important beats GSAP autoAlpha parks from resetHubNavWords when
 * Barba lands on a non-masthead shared page (Rule 32 forbids editing that owner). */
#page-header.header--compact[data-header-nav-reveal="immediate"] .header__logo-nav {
  opacity: 1 !important;
  visibility: visible !important;
}

#page-header.header--compact[data-header-nav-reveal="immediate"] .header__logo-nav .split-text__word {
  transform: none !important;
}

.header--compact .header__hub-link {
  display: flex;
  align-items: center;
  height: var(--bbq-styles-compact-header-inner);
  will-change: transform;
  transition: none;
}

.header--compact .header__hub-link--catering {
  justify-self: end;
}

.header--compact .header__hub-link--pickup {
  justify-self: start;
}

.header--compact .header__logo-nav a {
  pointer-events: auto;
}

.header--compact .header__logo-nav .header__smokeempyr-slot--logo {
  position: relative;
  left: auto;
  width: auto;
  height: var(--bbq-styles-compact-header-inner);
  margin: 0;
  transform: none;
  pointer-events: none;
}

.header--compact .header__logo-nav .header__site-title-link {
  pointer-events: auto;
}

.header--compact .header__logo-nav .logo__wrapper-img {
  height: var(--bbq-styles-compact-header-logo-max-h);
  margin-right: 0;
}

.header--compact .header__logo-nav .header__site-title-text :is(img, svg) {
  height: var(--bbq-styles-compact-header-logo-max-h);
  width: auto;
}

/*
 * Stretch Shop/Catering to the hub-link row so the tap target meets the
 * 44px mobile-readiness floor (Apple HIG). Split text stays content-sized
 * inside the flex item; the dock still measures the wrapper.
 */
.header--compact .header__logo-nav .header__hub-link > a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.header--compact .header__logo-nav .header__hub-link > a:hover,
.header--compact .header__logo-nav .header__hub-link > a:focus-visible,
.header--compact .header__logo-nav .header__hub-link > a.is-active,
body:has(#page-wrapper.catering-quote-page) .header--compact .header__logo-nav .header__hub-link--catering > a,
body:has(#page-wrapper.bbq-styles-page--menu:not(.catering-quote-page)) .header--compact .header__logo-nav .header__hub-link--pickup > a {
  color: var(--color-accent);
}