/* ═══════════════════════════════════════════════════════
   TETON TROUTFITTERS — STICKY BAR STYLESHEET
   Scoped under .tt-stickybar. No global overrides.
   Custom properties defined in Section 3 of spec.
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   TETON TROUTFITTERS — STICKY BAR CSS CUSTOM PROPERTIES
   Maps to Elementor Styling Kit Global Color tokens.
   If a Kit color changes, update the value here.
   ───────────────────────────────────────────────────── */
.tt-stickybar {
  /* Kit token: TT Navy Dark */
  --tt-navy-dark:      #070F1A;
  /* Kit token: TT Gold */
  --tt-gold:           #C49A3C;
  /* Kit token: TT Gold Light */
  --tt-gold-lt:        #D4A94E;
  /* Kit token: TT Cream */
  --tt-cream:          #F2EDE2;
  /* Kit token: TT Cream Dim */
  --tt-cream-dim:      rgba(242, 237, 226, 0.55);
  /* Kit token: TT Cream Faint */
  --tt-cream-faint:    rgba(242, 237, 226, 0.32);
  /* Kit token: TT Border Subtle */
  --tt-border:         rgba(255, 255, 255, 0.08);
  --tt-border-md:      rgba(255, 255, 255, 0.13);
  /* Gold border tint — used for Call to Book outline */
  --tt-gold-border:    rgba(196, 154, 60, 0.35);
  /* Bar dimensions */
  --tt-bar-height:     60px;
  --tt-inner-max:      1200px;
  --tt-pad-h:          32px;
}

/* ── RESET ────────────────────────────────────────────── */
.tt-stickybar *,
.tt-stickybar *::before,
.tt-stickybar *::after { box-sizing: border-box; }
.tt-stickybar a { text-decoration: none; }

/* ── BAR SHELL ─────────────────────────────────────────── */
.tt-stickybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9900;
  height: var(--tt-bar-height);
  background: var(--tt-navy-dark);
  border-top: 2px solid var(--tt-gold);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
  will-change: transform;
}

/* Visible state — applied by JS */
.tt-stickybar.is-visible {
  transform: translateY(0);
  visibility: visible;
}

/* ── INNER CONTAINER ─────────────────────────────────── */
.tt-stickybar__inner {
  max-width: var(--tt-inner-max);
  margin: 0 auto;
  padding: 0 var(--tt-pad-h);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── BRAND (desktop only) ─────────────────────────────── */
.tt-stickybar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tt-stickybar__logo {
  height: 22px;
  width: auto;
}
.tt-stickybar__brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  color: var(--tt-cream-faint);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ── DIVIDER ─────────────────────────────────────────── */
.tt-stickybar__divider {
  width: 0.5px;
  height: 28px;
  background: var(--tt-border-md);
  flex-shrink: 0;
}

/* ── ACTIONS ─────────────────────────────────────────── */
.tt-stickybar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

/* ── SHARED ITEM BASE ─────────────────────────────────── */
.tt-stickybar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.tt-stickybar__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── FAQs — ghost ─────────────────────────────────────── */
.tt-stickybar__item--faq {
  color: var(--tt-cream-dim) !important;
  padding: 8px 16px;
  border: 0.5px solid var(--tt-border-md);
}
.tt-stickybar__item--faq:hover {
  color: var(--tt-cream);
  border-color: var(--tt-cream-dim);
}

/* ── Call to Book — gold outline ─────────────────────── */
.tt-stickybar__item--call {
  color: var(--tt-gold) !important;
  padding: 8px 16px;
  border: 0.5px solid var(--tt-gold-border);
}
.tt-stickybar__item--call:hover {
  color: var(--tt-gold-lt) !important;
  border-color: var(--tt-gold);
}

/* ── Book a Trip — solid gold primary ─────────────────── */
.tt-stickybar__item--book {
  color: var(--tt-navy-dark);
  background: var(--tt-gold);
  padding: 10px 20px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.tt-stickybar__item--book:hover {
  background: var(--tt-gold-lt);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 767px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hide brand on mobile — full width goes to actions */
  .tt-stickybar__brand,
  .tt-stickybar__divider { display: none; }

  .tt-stickybar__inner {
    padding: 0;
    gap: 0;
    max-width: 100%;
  }

  /* Three equal-width tap targets */
  .tt-stickybar__actions {
    flex: 1;
    gap: 0;
    justify-content: stretch;
    width: 100%;
  }

  .tt-stickybar__item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: var(--tt-bar-height);
    border-radius: 0;
    padding: 0 6px;
    border: none;
    border-right: 0.5px solid var(--tt-border-md);
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .tt-stickybar__item:last-child { border-right: none; }

  .tt-stickybar__icon {
    width: 16px;
    height: 16px;
  }

  /* Override desktop border styles for mobile */
  .tt-stickybar__item--faq {
    color: var(--tt-cream-dim);
    background: transparent;
  }
  .tt-stickybar__item--call {
    color: var(--tt-gold);
    background: transparent;
  }
  /* Book a Trip retains gold fill on mobile */
  .tt-stickybar__item--book {
    background: var(--tt-gold);
    color: var(--tt-navy-dark);
    border-right: none;
  }
}

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tt-stickybar {
    transition: visibility 0.1s ease;
  }
}