/**
 * Teton Troutfitters — Footer Stylesheet
 *
 * Scoped under .tt-footer. No global overrides.
 * CSS custom properties map to Elementor Styling Kit Global Color tokens.
 * If a Kit color changes, update the value in the .tt-footer block below.
 *
 * @see TT-Footer-Implementation-Spec_v3.pdf, Sections 3 + 5
 */

/* ─────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES — Kit Token Bridge
   Maps to Elementor Styling Kit Global Color tokens.
   If a Kit color changes, update the value here.
   ───────────────────────────────────────────────────── */
.tt-footer {
  /* Kit token: TT Navy */
  --tt-navy:            #0B1A2C;
  /* Kit token: TT Navy Mid */
  --tt-navy-mid:        #142236;
  /* 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 Teal */
  --tt-teal:            #2B7A6F;
  /* Kit token: TT Cream */
  --tt-cream:           #F2EDE2;
  /* Kit token: TT Cream Dim */
  --tt-cream-dim:       rgba(242, 237, 226, 0.55);
  /* Kit token: TT Border Subtle */
  --tt-border:          rgba(255, 255, 255, 0.08);
  --tt-border-md:       rgba(255, 255, 255, 0.13);
  /* Derived — not Kit tokens, used internally only */
  --tt-cream-faint:     rgba(242, 237, 226, 0.28);
  --tt-gold-creds:      rgba(196, 154,  60, 0.25);
  --tt-inner-max:       1200px;
  --tt-pad-h:           48px;
}

/* ── RESET & BASE ─────────────────────────────────────── */
.tt-footer *,
.tt-footer *::before,
.tt-footer *::after { box-sizing: border-box; }
.tt-footer { display: block; width: 100%; }
.tt-footer a { text-decoration: none; }
.tt-footer img { display: block; }

/* ── INNER CONTAINER ─────────────────────────────────── */
.tt-footer__inner {
  max-width: var(--tt-inner-max);
  margin: 0 auto;
  padding-left: var(--tt-pad-h);
  padding-right: var(--tt-pad-h);
}

/* ══════════════════════════════════════════════════════
   ZONE 1 — PRE-FOOTER CTA STRIP
   ══════════════════════════════════════════════════════ */
.tt-footer__cta-strip {
  background: var(--tt-navy-mid);
  border-top: 1px solid var(--tt-border-md);
  padding: 52px var(--tt-pad-h);
  text-align: center;
}
.tt-footer__eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-teal);
  margin: 0 0 12px;
}
.tt-footer__cta-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: normal;
  color: #ffffff !important;
  line-height: 1.25;
  margin: 0 0 8px;
}
.tt-footer__cta-sub {
  font-size: 13px;
  color: var(--tt-cream-dim);
  letter-spacing: 0.01em;
  margin: 0 0 8px;
}

/* ── GOOGLE REVIEWS BADGE ─────────────────────────────── */
.tt-footer__google-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid var(--tt-border-md);
  border-radius: 20px;
  padding: 7px 16px;
  margin-bottom: 24px;
  color: var(--tt-cream-dim) !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tt-footer__google-badge:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}
.tt-google-stars {
  display: inline-flex;
  gap: 1px;
  color: #FBBC05;
}
.tt-google-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--tt-cream);
  letter-spacing: 0.01em;
}
.tt-google-divider {
  font-size: 11px;
  color: rgba(242, 237, 226, 0.25);
  margin: 0 2px;
}
.tt-google-count {
  font-size: 11px;
  color: var(--tt-cream-dim);
  letter-spacing: 0.01em;
}
.tt-google-icon {
  flex-shrink: 0;
  margin-left: 2px;
}

.tt-footer__cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
	margin: 28px;
}

/* ── SHARED BUTTON STYLES ─────────────────────────────── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tt-btn--primary {
  background: var(--tt-gold);
  color: var(--tt-navy-dark);
  padding: 12px 22px;
  border: none;
}
.tt-btn--primary:hover { background: var(--tt-gold-lt); }
.tt-btn--secondary {
  background: transparent;
  color: var(--tt-cream-dim) !important;
  padding: 11px 20px;
  border: 0.5px solid var(--tt-border-md);
}
.tt-btn--secondary:hover {
  border-color: var(--tt-cream-dim);
  color: var(--tt-cream);
}

/* ══════════════════════════════════════════════════════
   ZONE 2 — MAIN FOOTER BODY
   ══════════════════════════════════════════════════════ */
.tt-footer__body {
  background: var(--tt-navy);
  padding: 56px 0 40px;
}
.tt-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

/* ── COLUMN LABEL ─────────────────────────────────────── */
.tt-footer__col-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tt-gold);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(196, 154, 60, 0.25);
}

/* ── BRAND COLUMN ─────────────────────────────────────── */
.tt-footer__logo-link { display: inline-block; margin-bottom: 14px; }
.tt-footer__logo { height: 40px !important; width: auto; }
.tt-footer__tagline {
  font-size: 12px;
  color: var(--tt-cream-dim);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 220px;
}
.tt-footer__social-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-cream-faint);
  margin: 0 0 12px;
}
.tt-footer__social { display: flex; gap: 10px; }
.tt-footer__social-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--tt-border-md);
  border-radius: 4px;
  color: var(--tt-cream-dim);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tt-footer__social-btn:hover {
  border-color: var(--tt-cream-dim);
  color: var(--tt-cream);
}

/* ── NAV LINKS ────────────────────────────────────────── */
.tt-footer__col nav {
  display: flex;
  flex-direction: column;
}
.tt-footer__link {
  font-size: 12.5px;
  color: var(--tt-cream-dim) !important;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.15s ease;
}
.tt-footer__link:hover { color: var(--tt-cream); }
.tt-footer__link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.tt-footer__link-row .tt-footer__link { margin-bottom: 0; }
.tt-new-pill {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(43, 122, 111, 0.22);
  color: var(--tt-teal);
  padding: 2px 6px;
  border-radius: 3px;
  border: 0.5px solid rgba(43, 122, 111, 0.4);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── LOCATION BLOCK ───────────────────────────────────── */
.tt-footer__location {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.07);
}
.tt-footer__location-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tt-cream-faint);
  margin: 0 0 8px;
}
.tt-footer__location-value {
  font-size: 12px;
  color: rgba(242, 237, 226, 0.45);
  line-height: 1.6;
  margin: 0;
}

/* ── CONTACT COLUMN ───────────────────────────────────── */
.tt-footer__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  color: var(--tt-gold);
  margin-bottom: 6px;
  transition: color 0.15s ease;
}
.tt-footer__phone:hover { color: var(--tt-gold-lt); }
.tt-footer__phone svg { flex-shrink: 0; }
.tt-footer__phone-sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-cream-faint);
  margin: 0 0 20px;
}
.tt-footer__email {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--tt-cream-dim);
    transition: color 0.15s ease;
    margin-bottom: 20px;
    align-content: center;
    flex-direction: row;
}
.tt-footer__email svg { flex-shrink: 0; margin-top: 1px; }
.tt-footer__email:hover { color: var(--tt-cream); }

/* ── SUBSCRIBE BLOCK ──────────────────────────────────── */
.tt-footer__subscribe {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 0.5px solid var(--tt-border);
}
.tt-footer__subscribe-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tt-cream-faint);
  margin: 0 0 10px;
}
/* Subscribe form wrapper — scopes form plugin output */
.tt-subscribe-form { display: flex; }
.tt-subscribe-form input[type="email"],
.tt-subscribe-form input[type="text"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid var(--tt-border-md);
  border-right: none;
  color: var(--tt-cream);
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 8px 0px 0px 8px !important;
  outline: none;
  min-width: 0;
}
.tt-subscribe-form input[type="email"]::placeholder,
.tt-subscribe-form input[type="text"]::placeholder {
  color: rgba(242, 237, 226, 0.30);
}
.tt-subscribe-form input[type="submit"],
.tt-subscribe-form button[type="submit"] {
  background: var(--tt-gold);
  color: var(--tt-navy-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 0 4px 4px 0;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tt-subscribe-form input[type="submit"]:hover,
.tt-subscribe-form button[type="submit"]:hover {
  background: var(--tt-gold-lt);
}
/* MC4WP form reset — strip plugin defaults inside footer */
.tt-subscribe-form .mc4wp-form,
.tt-subscribe-form .mc4wp-form-fields {
  display: flex;
  width: 100%;
}
.tt-subscribe-form .mc4wp-form p {
  display: contents;
  margin: 0;
}
.tt-subscribe-form .mc4wp-alert {
  font-size: 11px;
  margin-top: 6px;
  color: var(--tt-cream-dim);
}

/* ══════════════════════════════════════════════════════
   ZONE 3 — CREDENTIALS BAR
   ══════════════════════════════════════════════════════ */
.tt-footer__creds {
  background: var(--tt-navy-dark);
  border-top: 0.5px solid var(--tt-border);
  padding: 20px 0;
}
.tt-footer__creds-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tt-footer__logos {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tt-creds-item { display: flex; align-items: center; }
.tt-creds-logo {
  max-height: 28px;
  width: auto;
  opacity: 0.50;
  transition: opacity 0.15s ease;
}
.tt-creds-logo:hover { opacity: 0.75; }
.tt-creds-sep {
  display: block;
  width: 0.5px;
  height: 20px;
  background: var(--tt-border-md);
  flex-shrink: 0;
}
.tt-footer__creds-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.tt-footer__permit {
  font-size: 10.5px;
  color: rgba(242, 237, 226, 0.35);
  line-height: 1.5;
  text-align: right;
  max-width: 300px;
  margin: 0;
}

/* ── TRIPADVISOR EMBED ────────────────────────────────── */
.tt-tripadvisor {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid var(--tt-border);
  border-radius: 4px;
  padding: 5px 10px;
  flex-shrink: 0;
  overflow: hidden;
}

/*
 * The TripAdvisor async script replaces the static fallback HTML with a
 * full "Write a Review" form widget (.widWRL).  We hide everything the
 * script injects EXCEPT the branding logo, so the live page matches the
 * compact look seen in the Elementor preview.
 */

/* — Static fallback (before script loads) — */
.tt-tripadvisor .TA_cdswritereviewlgvi {
  display: flex;
  align-items: center;
}
.tt-tripadvisor .TA_links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.tt-tripadvisor .TA_links li {
  margin: 0;
  padding: 0;
  line-height: 1;
}
.tt-tripadvisor .TA_links a {
  display: block;
  line-height: 1;
}
.tt-tripadvisor .TA_links img {
  height: 20px;
  width: auto;
  display: block;
  opacity: 0.60;
  transition: opacity 0.15s ease;
  filter: brightness(1.2);
}
.tt-tripadvisor .TA_links img:hover {
  opacity: 0.85;
}

/* — Injected widget overrides (after script loads) — */
/* Reset the widget container */
.tt-tripadvisor .widWRL,
.tt-tripadvisor .widWRLContainer,
.tt-tripadvisor #CDSWIDWRL {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Hide the review form — textarea, stars, submit, helper text */
.tt-tripadvisor .widWRLReview,
.tt-tripadvisor .widWRLSubtitle,
.tt-tripadvisor .widWRLRating,
.tt-tripadvisor .widWRLTitle,
.tt-tripadvisor .widWRLNickname,
.tt-tripadvisor .widWRLEmail,
.tt-tripadvisor .widWRLSubmit,
.tt-tripadvisor .widWRLFooter,
.tt-tripadvisor .widWRLHeader h3,
.tt-tripadvisor .widWRLHeader p,
.tt-tripadvisor textarea,
.tt-tripadvisor input[type="text"],
.tt-tripadvisor input[type="email"],
.tt-tripadvisor input[type="submit"],
.tt-tripadvisor select,
.tt-tripadvisor .ui_star_rating,
.tt-tripadvisor .star-rating,
.tt-tripadvisor .prw_rup {
  display: none !important;
}

/* Reset the data panel — strip background/border but keep it visible for the logo */
.tt-tripadvisor .widWRLData {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide all children inside .widWRLData except branding elements */
.tt-tripadvisor .widWRLData > *:not(.widWRLBranding):not([class*="brand"]) {
  display: none !important;
}
/* Hide any stray link text / anchors that aren't wrapping the logo */
.tt-tripadvisor .widWRLData a:not(:has(img)) {
  display: none !important;
}
.tt-tripadvisor .widWRLData span,
.tt-tripadvisor .widWRLData p,
.tt-tripadvisor .widWRLData h3,
.tt-tripadvisor .widWRLData h4,
.tt-tripadvisor .widWRLData label {
  display: none !important;
}

/* Keep only the TripAdvisor branding logo */
.tt-tripadvisor .widWRLBranding {
  margin: 0 !important;
  padding: 0 !important;
}
.tt-tripadvisor .widWRLBranding dt,
.tt-tripadvisor .widWRLBranding dd {
  margin: 0;
  padding: 0;
}
.tt-tripadvisor .widWRLBranding dt img,
.tt-tripadvisor .cx_brand_refresh1 img {
  height: 20px;
  width: auto;
  opacity: 0.60;
  transition: opacity 0.15s ease;
  filter: brightness(1.2);
}
.tt-tripadvisor .widWRLBranding dt img:hover,
.tt-tripadvisor .cx_brand_refresh1 img:hover {
  opacity: 0.85;
}
/* Hide the "powered by" text, keep only the logo */
.tt-tripadvisor .widWRLBranding dd {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   ZONE 4 — LEGAL BAR
   ══════════════════════════════════════════════════════ */
.tt-footer__legal {
  background: var(--tt-navy-dark);
  border-top: 0.5px solid var(--tt-border);
  padding: 12px 0 14px;
}
.tt-footer__legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tt-footer__copyright {
  font-size: 11px;
  color: rgba(242, 237, 226, 0.30);
}
.tt-footer__legal-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tt-footer__legal-link {
  font-size: 11px;
  color: rgba(242, 237, 226, 0.35);
  transition: color 0.15s ease;
}
.tt-footer__legal-link:hover { color: var(--tt-cream-dim); }
.tt-legal-dot {
  font-size: 11px;
  color: rgba(242, 237, 226, 0.18);
  margin: 0 4px;
}
.tt-footer__credit {
  font-size: 11px;
  color: rgba(242, 237, 226, 0.28);
}
.tt-footer__credit-link {
  color: rgba(196, 154, 60, 0.70);
  transition: color 0.15s ease;
}
.tt-footer__credit-link:hover { color: var(--tt-gold); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .tt-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .tt-footer__creds-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tt-footer__creds-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .tt-footer__permit { text-align: left; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 767px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tt-footer { --tt-pad-h: 20px; }

  /* Zone 1 */
  .tt-footer__cta-strip { padding: 36px var(--tt-pad-h); }
  .tt-footer__cta-headline { font-size: 20px; }
  .tt-footer__cta-sub { margin-bottom: 20px; font-size: 12px; }
  .tt-footer__cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .tt-btn { justify-content: center; }

  /* Zone 2 — stack in conversion-priority order */
  .tt-footer__body { padding: 36px 0 28px; }
  .tt-footer__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Reorder columns: Brand > Contact > Trips+Explore > (subscribe inside contact) */
  .tt-footer__col--brand   { order: 1; padding-bottom: 28px; border-bottom: 0.5px solid var(--tt-border); margin-bottom: 28px; }
  .tt-footer__col--contact { order: 2; padding-bottom: 28px; border-bottom: 0.5px solid var(--tt-border); margin-bottom: 28px; }
  /* Trips and Explore sit side-by-side even on mobile */
  .tt-footer__col:not(.tt-footer__col--brand):not(.tt-footer__col--contact) {
    order: 3;
  }
  /* Two-column sub-grid for Trips + Explore */
  .tt-footer__grid .tt-footer__col:nth-child(2),
  .tt-footer__grid .tt-footer__col:nth-child(3) {
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
  }
  .tt-footer__grid .tt-footer__col:nth-child(2) { margin-right: 10px; }
  .tt-footer__grid .tt-footer__col:nth-child(3) { margin-left: 10px; }

  .tt-footer__tagline { max-width: 100%; }
  .tt-footer__phone { font-size: 22px; }

  /* Zone 3 */
  .tt-footer__creds { padding: 16px 0; }
  .tt-footer__logos { gap: 16px; }

  /* Zone 4 */
  .tt-footer__legal-inner {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
}