/* ==========================================================================
   Tribe Aura — Header
   --------------------------------------------------------------------------
   Announcement bar, header, primary nav, search panel, mobile drawer.

   Mobile-first. Breakpoints are written literally (custom properties are not
   valid inside @media): 480 / 768 / 1024 / 1280.

   The nav switches from drawer to inline at 1024px — below that there is not
   enough room for six items plus a logo plus three actions without crowding.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------
   Standard sticky footer: the footer is pushed to the bottom of the viewport
   on any page shorter than the screen.

   Without this, a short page leaves dead space trailing BELOW the footer,
   after the copyright line, which looks like the page failed to finish.
   With it, the slack sits in the content area instead — which is honest,
   because on the pages that are still empty Elementor shells (Phases 3/6/7/8)
   that slack IS the empty page body. It disappears as soon as those pages
   have content.
   -------------------------------------------------------------------------- */

.ta-site {
  display: flex;
  flex-direction: column;
  /*
   * 100vh first as the fallback, then 100svh for browsers that support it.
   * On iOS Safari 100vh is the LARGEST viewport — the height with the address
   * bar hidden — so a 100vh box is taller than what is actually on screen and
   * the footer is pushed below the fold on every short page. svh is the small
   * viewport (chrome visible), which is the safe floor for a sticky footer.
   * Declaration order is the feature test: a browser that does not know svh
   * discards that line and keeps the vh value above it.
   */
  min-height: 100vh;
  min-height: 100svh;
}

/* Pushed rather than given flex-grow to a content wrapper, because Elementor's
   Full Width page template (used by most pages here) emits no <main> element
   at all — there is not always a content box to grow. */
.ta-footer {
  margin-top: auto;
}


/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.ta-announcement {
  background-color: var(--ta-palette-ink);
  color: var(--ta-color-text-invert);
}

.ta-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ta-space-sm);
  min-height: 2.25rem;
  padding-block: var(--ta-space-3xs);
  position: relative;
}


/* --------------------------------------------------------------------------
   The run
   --------------------------------------------------------------------------
   Base state, and the only state without JavaScript: a centred row that wraps.
   Readable, if not moving. The marquee below is added by script.
   -------------------------------------------------------------------------- */

.ta-announcement__viewport {
  flex: 1 1 auto;
  min-width: 0;
}

.ta-announcement__run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ta-space-sm) var(--ta-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ta-announcement__item {
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  white-space: nowrap;
}

/* The call to action. Underlined rather than coloured: on a dark band there is
   no second colour that stays legible, and an underline reads as a link at any
   contrast. */
.ta-announcement__link {
  margin-left: var(--ta-space-2xs);
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  font-weight: var(--ta-weight-medium);
}

.ta-announcement__link:hover {
  color: currentColor;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Marquee
   --------------------------------------------------------------------------
   Switched on by script, which clones the run so the loop has something to
   arrive as the original leaves. The track holds both copies and slides exactly
   half its own width, which puts the clone precisely where the original began —
   the seam is therefore invisible and needs no measuring.

   --ta-ticker-distance is set by the script from the measured run width, so the
   travel is the same speed whether the client wrote one message or five.
   -------------------------------------------------------------------------- */

.ta-announcement--marquee .ta-announcement__viewport {
  overflow: hidden;
}

.ta-announcement--marquee .ta-announcement__track {
  display: flex;
  width: max-content;
  animation: ta-ticker var(--ta-ticker-duration, 30s) linear infinite;
}

.ta-announcement--marquee .ta-announcement__run {
  flex-wrap: nowrap;
  justify-content: flex-start;
  /* Matches the column gap, so the last message and the first are as far apart
     across the seam as any other pair. */
  padding-right: var(--ta-space-2xl);
}

@keyframes ta-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/*
 * The run enters at the right edge of the display and leaves at the left. The
 * viewport is the full width of the bar, so the first character appears the
 * moment it clears the screen edge rather than a container's inner margin.
 */
.ta-announcement--marquee .ta-announcement__viewport {
  width: 100%;
}

/*
 * The dismiss button sits over the running text at the right edge, carrying a
 * short fade to the bar's own colour so a message slides out of view cleanly
 * instead of colliding with the cross.
 *
 * The fade is the button's own background rather than a pseudo-element behind
 * it: .ta-announcement creates no stacking context, so a z-index:-1 layer would
 * drop behind the bar's background and never be seen. The button follows the
 * track in the document, which already puts it on top.
 */
.ta-announcement--marquee .ta-announcement__dismiss {
  /* Full height and explicitly above the run. The track is animated, and a
     transform puts an element in the positioned-painting layer, so leaving this
     on z-index:auto let the text paint over the fade and collide with the
     cross. */
  inset-block: 0;
  z-index: 1;
  width: 5rem;
  justify-content: flex-end;
  padding-right: var(--ta-space-sm);
  background-image: linear-gradient(to right, transparent, var(--ta-palette-ink) 60%);
  /* Full strength over the fade: at 0.7 the cross was competing with the text
     sliding underneath it and read as part of the message. */
  opacity: 1;
}

.ta-announcement--marquee .ta-announcement__dismiss:hover {
  background-image: linear-gradient(to right, transparent, var(--ta-palette-ink) 55%);
}

/* Pausable — WCAG 2.2.2. Also simply necessary: a link that is sliding away is
   a link nobody can click. */
.ta-announcement--marquee:hover .ta-announcement__track,
.ta-announcement--marquee:focus-within .ta-announcement__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  /* No marquee at all. The script does not start one either; this is the
     backstop for a setting changed after the page loaded. */
  .ta-announcement--marquee .ta-announcement__track {
    animation: none;
  }
}

.ta-announcement__dismiss {
  position: absolute;
  right: 0;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: currentColor;
  opacity: 0.7;
}

.ta-announcement__dismiss:hover {
  background: transparent;
  color: currentColor;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------
   Mobile: burger | brand | actions.
   Desktop (1024+): nav | brand | actions, with the outer columns balanced so
   the logo lands optically centred.
   -------------------------------------------------------------------------- */

.ta-header {
  position: sticky;
  top: 0;
  z-index: var(--ta-z-header);
  background-color: var(--ta-color-bg);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ta-space-sm);
  min-height: 3.75rem;
}

@media (min-width: 1024px) {
  /*
   * Logo left, asked for on 14 September. It used to sit centred between the
   * nav and the icons.
   *
   * `order` rather than reordering the markup: the brand is a heading and a
   * home link, and on a phone it belongs after the burger — which is where the
   * source has it. Moving it in CSS puts it first on a wide screen without
   * changing the reading order underneath.
   */
  .ta-header__inner {
    grid-template-columns: auto 1fr auto;
    min-height: 5rem;
    gap: var(--ta-space-xl);
  }

  .ta-header__brand {
    order: -1;
    justify-self: start;
  }

  .ta-header__nav {
    justify-self: start;
  }

  .ta-header__actions {
    justify-self: end;
  }
}

/* --- Burger --- */

.ta-header__burger {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ta-color-text);
  justify-self: start;
}

.ta-header__burger:hover {
  background: transparent;
  color: var(--ta-color-link-hover);
}

@media (min-width: 1024px) {
  .ta-header__burger { display: none; }
}

/* --- Brand --- */

.ta-header__brand {
  justify-self: center;
  min-width: 0;
}

.ta-brand {
  margin: 0;
  text-align: center;
}

.ta-brand__link {
  display: inline-block;
  text-decoration: none;
}

/* The supplied logo is 2560px wide. Constrain by HEIGHT — width would let a
   wide mark overflow on small screens, which is exactly what the parent
   theme's header did. */
.ta-brand__logo {
  width: auto;
  height: auto;
  max-height: 2rem;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .ta-brand__logo { max-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .ta-brand__logo { max-height: 3rem; }
}

.ta-brand__text {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-xl);
  letter-spacing: var(--ta-tracking-tight);
  color: var(--ta-color-heading);
}

/* The tagline is decorative next to the logo and crowds the header on small
   screens — it belongs in the footer and on the homepage. */
.ta-header__brand .ta-brand__tagline {
  display: none;
}

/* --- Actions --- */

.ta-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ta-space-3xs);
  justify-self: end;
}

@media (min-width: 768px) {
  .ta-header__actions { gap: var(--ta-space-2xs); }
}

.ta-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--ta-radius-sm);
  color: var(--ta-color-text);
  text-decoration: none;
  transition: color var(--ta-transition), background-color var(--ta-transition);
}

.ta-header__action:hover {
  background-color: var(--ta-color-bg-alt);
  color: var(--ta-color-link-hover);
}

/* --- Cart count --- */

.ta-cart-count {
  position: absolute;
  top: 0.35rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.25rem;
  background-color: var(--ta-color-accent-soft);
  color: var(--ta-color-text-invert);
  border-radius: var(--ta-radius-pill);
  font-size: var(--ta-text-3xs);
  font-weight: var(--ta-weight-semibold);
  line-height: 1;
}

.ta-cart-count--empty {
  display: none;
}


/* --------------------------------------------------------------------------
   Primary navigation (desktop)
   -------------------------------------------------------------------------- */

.ta-header__nav {
  display: none;
  justify-self: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .ta-header__nav { display: block; }
}

.ta-nav {
  display: flex;
  align-items: center;
  gap: var(--ta-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ta-nav__item {
  position: relative;
  margin: 0;
}

.ta-nav__link {
  display: inline-block;
  padding-block: var(--ta-space-2xs);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ta-color-text);
  white-space: nowrap;
}

/* Underline grows from the link rather than appearing abruptly — the
   restrained, non-flashy hover the guidelines ask for. */
.ta-nav__link::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 2px;
  background-color: var(--ta-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ta-duration-base) var(--ta-ease-out);
}

.ta-nav__link:hover::after,
.ta-nav__item--current > .ta-nav__link::after {
  transform: scaleX(1);
}

.ta-nav__link:hover {
  color: var(--ta-color-link-hover);
}

/* --- Submenu --- */

.ta-nav__toggle {
  display: none;
}

.ta-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ta-z-dropdown);
  min-width: 13rem;
  margin: 0;
  padding: var(--ta-space-2xs);
  list-style: none;
  background-color: var(--ta-color-surface);
  border: var(--ta-border);
  border-radius: var(--ta-radius-sm);
  box-shadow: var(--ta-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ta-transition),
              transform var(--ta-transition),
              visibility var(--ta-transition);
}

/* :focus-within keeps the submenu open for keyboard users, who never trigger
   :hover. */
.ta-nav__item--has-children:hover > .ta-nav__submenu,
.ta-nav__item--has-children:focus-within > .ta-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ta-nav__link--child {
  display: block;
  padding: var(--ta-space-2xs) var(--ta-space-xs);
  text-transform: none;
  letter-spacing: var(--ta-tracking-normal);
  font-size: var(--ta-text-sm);
  border-radius: var(--ta-radius-xs);
  white-space: normal;
}

.ta-nav__link--child::after {
  display: none;
}

.ta-nav__link--child:hover {
  background-color: var(--ta-color-bg);
}


/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */

.ta-search {
  border-top: var(--ta-border-width) solid var(--ta-color-border);
  background-color: var(--ta-color-surface);
}

.ta-search__inner {
  padding-block: var(--ta-space-sm);
}

.ta-search__form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ta-space-2xs);
}

.ta-search__icon {
  color: var(--ta-color-text-subtle);
}

.ta-search__field {
  min-height: 2.5rem;
  border: 0;
  border-bottom: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}

.ta-search__field:focus {
  box-shadow: none;
  border-bottom-color: var(--ta-color-focus);
}

/* On mobile the submit button would squeeze the field to nothing; the Enter
   key already submits, so hide it and show it once there is room. */
.ta-search__submit {
  display: none;
}

@media (min-width: 768px) {
  .ta-search__form {
    grid-template-columns: auto 1fr auto auto;
  }

  .ta-search__submit {
    display: inline-flex;
  }
}

.ta-search__close {
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ta-color-text-muted);
}

.ta-search__close:hover {
  background: transparent;
  color: var(--ta-color-text);
}


/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

.ta-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--ta-z-drawer);
}

/* Never show the drawer on desktop, even if a stale `open` state survives a
   resize — the inline nav is the desktop affordance. */
@media (min-width: 1024px) {
  .ta-drawer { display: none !important; }
}

.ta-drawer__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--ta-color-overlay);
  opacity: 0;
  transition: opacity var(--ta-transition);
}

.ta-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(20rem, 85vw);
  background-color: var(--ta-color-bg);
  box-shadow: var(--ta-shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--ta-duration-base) var(--ta-ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ta-drawer--open .ta-drawer__scrim { opacity: 1; }
.ta-drawer--open .ta-drawer__panel { transform: translateX(0); }

.ta-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ta-space-sm);
  padding: var(--ta-space-sm) var(--ta-space-md);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-drawer__title {
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wider);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
}

.ta-drawer__close {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ta-color-text);
}

.ta-drawer__close:hover {
  background: transparent;
  color: var(--ta-color-link-hover);
}

.ta-drawer__nav {
  flex: 1 1 auto;
  padding: var(--ta-space-2xs) var(--ta-space-md);
}

.ta-drawer__foot {
  display: grid;
  gap: var(--ta-space-2xs);
  padding: var(--ta-space-md);
  border-top: var(--ta-border-width) solid var(--ta-color-border);
}

/* --- Nav inside the drawer --- */

.ta-nav--drawer {
  display: block;
}

.ta-nav--drawer .ta-nav__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-nav--drawer .ta-nav__item:last-child {
  border-bottom: 0;
}

.ta-nav--drawer .ta-nav__link {
  padding-block: var(--ta-space-sm);
  font-size: var(--ta-text-sm);
  white-space: normal;
}

.ta-nav--drawer .ta-nav__link::after {
  display: none;
}

/* In the drawer, hover is unavailable — the submenu needs a real button. */
.ta-nav--drawer .ta-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ta-color-text-muted);
  transition: transform var(--ta-transition);
}

.ta-nav--drawer .ta-nav__toggle:hover {
  background: transparent;
  color: var(--ta-color-text);
}

.ta-nav--drawer .ta-nav__toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.ta-nav--drawer .ta-nav__submenu {
  position: static;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--ta-space-2xs) var(--ta-space-sm);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: none;
}

.ta-nav--drawer .ta-nav__item--open > .ta-nav__submenu {
  display: block;
}

.ta-nav--drawer .ta-nav__link--child {
  padding-block: var(--ta-space-2xs);
}

/* Stop the page behind the drawer from scrolling. */
.ta-scroll-locked {
  overflow: hidden;
}