/*
 * Shared site chrome
 *
 * This file is loaded after each page's local styles so the header and footer
 * stay consistent even though the site is made from static HTML pages.
 */

:root {
  --chrome-max: 1440px;
  --chrome-gutter: clamp(20px, 4.5vw, 72px);
}

/* Header --------------------------------------------------------------- */

.announcement {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.announcement-content {
  width: min(100%, var(--chrome-max));
  margin: 0 auto;
}

.site-header {
  z-index: 80;
  transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease,
    transform 220ms ease;
}

.header-inner {
  width: min(100%, var(--chrome-max));
  min-height: 78px;
  margin: 0 auto;
  padding-right: var(--chrome-gutter);
  padding-left: var(--chrome-gutter);
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: opacity 180ms ease, transform 180ms ease;
}

.brand:hover {
  opacity: 0.78;
  transform: translateY(-1px);
}

.desktop-nav {
  gap: clamp(16px, 1.9vw, 30px);
}

.desktop-nav a,
.header-actions a,
.menu-toggle {
  min-height: 44px;
  align-items: center;
}

.desktop-nav a {
  display: inline-flex;
  white-space: nowrap;
}

.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  gap: 14px;
}

.header-actions .header-cta {
  min-height: 42px;
  padding-right: 17px;
  padding-left: 17px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  white-space: nowrap;
}

.header-actions .shop-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}

/* Keep the Shop link crisp over the dark, image-led hero headers. The
   light-background pages retain their darker link color for contrast. */

body:has(.hero) .site-header:not(.is-scrolled) .header-actions .shop-link,
body:has(.collection-hero) .site-header:not(.is-scrolled) .header-actions .shop-link,
body:has(.hosp-hero) .site-header:not(.is-scrolled) .header-actions .shop-link {
  color: var(--white, #fffdfa);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(32, 33, 28, 0.06);
}

.site-header.is-scrolled .header-inner {
  min-height: 70px;
}

/* Sticky on-page navigation ----------------------------------------- */

/* Keep the breathing room, but give every sticky bar the same quiet,
   translucent surface so it feels attached to the chrome rather than like
   an extra block inserted into the page. */
.jump-nav {
  min-height: 64px;
  gap: clamp(24px, 4vw, 58px);
  padding-right: clamp(24px, 5vw, 72px);
  padding-left: clamp(24px, 5vw, 72px);
  border-color: rgba(32, 33, 28, 0.13);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52),
    rgba(246, 245, 239, 0.8)
  );
  box-shadow: 0 10px 28px rgba(32, 33, 28, 0.055);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.support-index {
  border-top: 1px solid rgba(32, 33, 28, 0.13);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52),
    rgba(245, 242, 235, 0.8)
  );
  box-shadow: 0 10px 28px rgba(32, 33, 28, 0.055);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.menu-toggle {
  gap: 9px;
  padding-right: 0;
  padding-left: 0;
}

.menu-toggle::before {
  width: 18px;
  height: 12px;
  content: "";
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: transform 180ms ease, border-color 180ms ease;
}

.menu-toggle[aria-expanded="true"]::before {
  border-bottom-color: transparent;
  transform: rotate(45deg) translate(2px, 3px);
}

.mobile-panel {
  z-index: 90;
  padding-right: clamp(24px, 7vw, 92px);
  padding-left: clamp(24px, 7vw, 92px);
  background: #171813;
}

.mobile-panel-top {
  min-height: 44px;
  margin-bottom: clamp(42px, 8vh, 72px);
}

.mobile-close {
  min-width: 44px;
  min-height: 44px;
  padding-right: 0;
  padding-left: 0;
  text-align: right;
}

.mobile-links {
  gap: 0;
}

.mobile-links a {
  position: relative;
  display: flex;
  min-height: clamp(58px, 9vh, 82px);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: color 180ms ease, padding-left 180ms ease;
}

.mobile-links a:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mobile-links a:hover,
.mobile-links a:focus-visible {
  padding-left: 10px;
  color: var(--pollen);
}

.mobile-panel-footer {
  max-width: 330px;
}

/* Footer --------------------------------------------------------------- */

.footer {
  padding-right: var(--chrome-gutter);
  padding-left: var(--chrome-gutter);
}

.footer > .footer-grid,
.footer > .footer-inner,
.footer > .footer-bottom {
  width: min(100%, var(--chrome-max));
  margin-right: auto;
  margin-left: auto;
}

.footer-grid {
  grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(130px, 1fr));
  gap: clamp(30px, 4vw, 64px);
}

.footer-grid > div:first-child {
  padding-right: 20px;
}

.footer .brand {
  margin-bottom: 25px;
}

.footer-intro {
  max-width: 320px;
}

.footer-index {
  margin-bottom: 12px;
}

.footer-title {
  margin-bottom: 13px;
}

.footer a:not(.brand) {
  min-height: 28px;
  align-items: center;
  margin-bottom: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.footer-bottom {
  min-height: 40px;
}

.footer-top {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  margin-bottom: 0 !important;
  color: var(--pollen) !important;
  white-space: nowrap;
}

.footer-top::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
  opacity: 0.5;
}

.footer-top:hover {
  color: var(--white) !important;
}

/* The 404 page uses the older, compact footer markup. */

.footer-inner .footer-links {
  align-items: center;
}

.footer-inner .footer-links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 4px 0;
}

@media (max-width: 1080px) {
  .footer-grid {
    gap: 28px;
  }

  .footer-grid > div:first-child {
    padding-right: 0;
  }
}

@media (max-width: 960px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
  }

  /* Product pages place the menu button inside .header-actions. Keeping the
     actions transparent lets both markup variants share the same mobile grid. */
  .site-header .header-actions {
    display: contents;
  }

  .site-header .menu-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-header .header-actions .header-cta {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .site-header .header-actions .shop-link {
    display: none;
  }

  .footer-grid {
    grid-template-columns: minmax(200px, 1.4fr) repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 5px;
  }
}

@media (max-width: 650px) {
  .jump-nav {
    min-height: 58px;
    gap: 24px;
    padding-right: 7vw;
    padding-left: 7vw;
  }

  .jump-nav a {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .header-inner {
    min-height: 69px;
    padding-right: 6vw;
    padding-left: 6vw;
  }

  .site-header.is-scrolled .header-inner {
    min-height: 64px;
  }

  .site-header .header-actions .header-cta {
    min-height: 38px;
    padding-right: 13px;
    padding-left: 13px;
  }

  .mobile-panel {
    padding-top: 24px;
    padding-right: 7vw;
    padding-left: 7vw;
  }

  .mobile-panel-top {
    margin-bottom: 34px;
  }

  .mobile-links a {
    min-height: 62px;
    font-size: clamp(42px, 12vw, 64px);
  }

  .footer {
    padding-right: 7vw;
    padding-left: 7vw;
  }

  .footer-grid {
    gap: 32px 22px;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: 10px;
    margin-top: 45px;
  }

  .footer-bottom span:last-child {
    text-align: left;
  }

  .footer-top {
    margin-top: 4px;
  }

  .footer-inner .footer-links {
    justify-content: flex-start;
    gap: 8px 18px;
    margin-top: 32px;
  }

  .support-index {
    border-top: 1px solid rgba(32, 33, 28, 0.13);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .brand,
  .mobile-links a,
  .menu-toggle::before {
    transition: none;
  }
}