/* ============================================================
   MFL CONFLUENCE — Component Styles
   Lodge cards, river cards, badges, tags, etc.
   ============================================================ */

/* ============================================================
   LODGE CARDS — 2-column grid
   ============================================================ */
.mfl-lodges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line2);
  margin-top: 56px;
}
.mfl-lodge-card {
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.mfl-lodge-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.mfl-lodge-body {
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
}
.mfl-lodge-card.mfl { background: var(--forest); }
.mfl-lodge-card.mfl:hover { background: var(--forest2); }
.mfl-lodge-card.sfl { background: var(--marine2); }
.mfl-lodge-card.sfl:hover { background: var(--marine3); }
/* BFL DISABLED
.mfl-lodge-card.bfl { background: var(--burgundy2); }
.mfl-lodge-card.bfl:hover { background: var(--burgundy3); }
*/

/* Top accent bar */
.mfl-lodge-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.mfl-lodge-card.mfl::before {
  background: linear-gradient(90deg, var(--gold), rgba(216,169,78,0.2));
}
.mfl-lodge-card.sfl::before {
  background: linear-gradient(90deg, var(--sage), rgba(92,138,110,0.2));
}
/* BFL DISABLED
.mfl-lodge-card.bfl::before {
  background: linear-gradient(90deg, var(--copper), rgba(200,122,106,0.2));
}
*/

/* Background watermark number */
.mfl-lodge-bg-num {
  font-family: var(--font-display);
  font-size: 120px;
  position: absolute;
  bottom: -10px; right: 32px;
  line-height: 1;
  font-weight: 700;
  color: rgba(232,224,208,0.03);
  user-select: none;
  pointer-events: none;
}

/* Lodge tag */
.mfl-lodge-tag {
  font-size:  12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.mfl-lodge-tag.mfl { color: var(--gold); }
.mfl-lodge-tag.sfl { color: var(--sage); }
/* .mfl-lodge-tag.bfl { color: var(--copper); }  BFL DISABLED */

/* Lodge name */
.mfl-lodge-name {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--cream);
  margin-bottom: 16px;
  line-height: 1.15;
}

/* Lodge description — uses --cream-dim so the token (2026-04-20 bump
   to 0.88) cascades here too. Previously hardcoded at 0.8 which read
   too muted against the lodge-card forest gradient. */
.mfl-lodge-desc {
  font-size: 18px;
  line-height: 1.75;
  color: var(--cream-dim);
  /* Weight 400 (Regular) rather than 300 (Light). Light-weight
     Source Sans 3 renders too thin against the forest gradients
     for comfortable reading. User reported "text goes muted when
     font finishes loading" — that's the fallback-to-custom-font
     weight swap. 400 closes the perceived-brightness gap. */
  font-weight: 400;
  margin-bottom: 28px;
}

/* Stats grid */
.mfl-lodge-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-bottom: 28px;
}
.mfl-stat {
  background: rgba(0,0,0,0.15);
  padding: 16px 0;
  text-align: center;
}
.mfl-stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  display: block;
  margin-bottom: 4px;
}
.mfl-stat-label {
  /* Bumped 10px → 12px and alpha 0.35 → --cream-faint (0.72) for
     readability. Previously fading out of view on most viewports. */
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  font-weight: 600;
}

/* River chips */
.mfl-lodge-rivers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.mfl-river-chip {
  /* Bumped 10px → 12px, alpha 0.4 → --cream-dim (0.96), and border
     0.1 → 0.22 so the chip reads as actual interactive-looking
     content rather than a whispered decoration. */
  font-size: 12px;
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--cream-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Lodge link */
.mfl-lodge-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: gap 0.2s;
}
.mfl-lodge-link:hover { gap: 16px; }
.mfl-lodge-link.mfl { color: var(--gold); }
.mfl-lodge-link.sfl { color: var(--sage); }
/* .mfl-lodge-link.bfl { color: var(--copper); }  BFL DISABLED */

/* ============================================================
   RIVER CARDS — 4-column grid
   ============================================================ */
.mfl-rivers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
}
.mfl-river-card {
  padding: 36px 28px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
  display: block;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.mfl-river-card:nth-child(4n) {
  border-right: none;
}
.mfl-river-card.in-forest { background: var(--forest); }
.mfl-river-card.in-forest:hover {
  background: var(--forest2);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-river-card.in-marine { background: var(--marine2); }
.mfl-river-card.in-marine:hover {
  background: var(--marine3);
  box-shadow: inset 0 0 0 1px rgba(92,138,110,0.15), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
/* BFL DISABLED
.mfl-river-card.in-burgundy { background: var(--burgundy2); }
.mfl-river-card.in-burgundy:hover { background: var(--burgundy3); }
*/

/* River lodge badge */
.mfl-river-lodge-badge {
  font-size:  11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  margin-bottom: 20px;
  display: inline-block;
}
.mfl-river-lodge-badge + .mfl-river-lodge-badge {
  margin-left: 6px;
}
.mfl-river-lodge-badge.mfl {
  color: var(--gold);
  border: 1px solid rgba(216,169,78,0.25);
}
.mfl-river-lodge-badge.sfl {
  color: var(--sage);
  border: 1px solid rgba(92,138,110,0.25);
}
/* BFL DISABLED
.mfl-river-lodge-badge.bfl {
  color: var(--copper);
  border: 1px solid rgba(200,122,106,0.25);
}
*/

/* River name */
.mfl-river-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cream);
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color 0.3s;
}
.mfl-river-card:hover .mfl-river-name {
  color: var(--gold-lt);
}

/* River description */
.mfl-river-desc {
  /* Bumped 13px → 15px, weight 300 → 400, color cream-faint → cream-dim
     for readable body-copy treatment. Hover rule is now a no-op (same
     color both states) but kept for a future dim-on-default revisit. */
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 20px;
  transition: color 0.3s;
}
.mfl-river-card:hover .mfl-river-desc {
  color: var(--cream-dim);
}

/* Species tags */
.mfl-river-species {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mfl-species-tag {
  font-size:  11px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.05);
  color: var(--cream-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.mfl-river-card:hover .mfl-species-tag {
  background: rgba(216,169,78,0.10);
  color: var(--cream-faint);
}

/* ============================================================
   EXPERIENCE CARDS — 4-column grid (homepage)
   ============================================================ */
.mfl-experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-top: 56px;
}
.mfl-experience-card {
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.mfl-experience-card.in-forest { background: var(--forest); }
.mfl-experience-card.in-forest:hover {
  background: var(--forest2);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-experience-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.mfl-experience-card:hover .mfl-experience-name { color: var(--gold-lt); }
.mfl-experience-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cream-dim);
  flex: 1;
  margin-bottom: 20px;
}
.mfl-experience-card:hover .mfl-experience-desc { color: var(--cream); }
.mfl-experience-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  transition: gap 0.3s, color 0.3s;
}
.mfl-experience-card:hover .mfl-experience-link { color: var(--gold-lt); }

/* ============================================================
   PLANNING CARDS — 4-column grid (homepage)
   ============================================================ */
.mfl-planning-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-top: 56px;
}
.mfl-planning-card {
  padding: 44px 36px;
  background: var(--hybrid2);
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.mfl-planning-card:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-planning-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.mfl-planning-card:hover .mfl-planning-name { color: var(--gold-lt); }
.mfl-planning-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cream-dim);
  flex: 1;
  margin-bottom: 20px;
}
.mfl-planning-card:hover .mfl-planning-desc { color: var(--cream); }
.mfl-planning-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  transition: gap 0.3s, color 0.3s;
}
.mfl-planning-card:hover .mfl-planning-link { color: var(--gold-lt); }

/* ============================================================
   TESTIMONIAL SECTION
   ============================================================ */
.mfl-testimonial-section {
  padding: 80px 48px;
  text-align: center;
  background: var(--hybrid4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mfl-testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.5;
  color: var(--cream);
  font-style: italic;
  max-width: 720px;
  margin: 0 auto 20px;
}
.mfl-testimonial-attr {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-faint);
  font-weight: 600;
}

/* ============================================================
   ORVIS CREDENTIAL PILL
   The "Top 3 in the U.S. — 2024 Orvis Endorsed Lodge of the
   Year" credential, rendered by [mfl_orvis_credential]
   shortcode. Reads as a certification element, distinct from
   the gold action buttons. Renders both full + short text
   spans in the markup; CSS swaps visibility based on viewport.
   ============================================================ */
.mfl-orvis-credential {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8b98a;
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid rgba(200, 185, 138, 0.4);
  border-radius: 999px;
  background: rgba(200, 185, 138, 0.05);
  line-height: 1.3;
  max-width: 100%;
  text-align: center;
  white-space: normal;
}
.mfl-orvis-credential__full {
  display: inline;
}
.mfl-orvis-credential__short {
  display: none;
}

/* Mobile / narrow viewport — swap full → short text + tighten
   the pill so it sits comfortably on one line at smaller sizes. */
@media (max-width: 768px) {
  .mfl-orvis-credential {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 8px 14px;
  }
  .mfl-orvis-credential__full {
    display: none;
  }
  .mfl-orvis-credential__short {
    display: inline;
  }
}

/* Hero-context wrapper — uniform vertical spacing when the
   credential sits between .mfl-hero-sub and .mfl-hero-actions. */
.mfl-hero-credential {
  margin-top: 18px;
  margin-bottom: 8px;
}

/* Lift the pill off the photo background with frosted dark glass —
   same pattern as .mfl-hero-actions .btn-ghost above. */
.mfl-hero-credential .mfl-orvis-credential {
  background: rgba(8, 15, 11, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(200, 185, 138, 0.65);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* Footer-context wrapper — small breathing room between the
   reviews badge above and the Outfitter Licenses block below. */
.mfl-footer-credential {
  margin: 12px 0;
}
.mfl-footer-credential .mfl-orvis-credential {
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
}

/* ============================================================
   BOOKING CTA
   ============================================================ */
.mfl-booking-section {
  padding: 100px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mfl-booking-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(216,169,78,0.06) 0%, transparent 70%),
    linear-gradient(160deg, var(--hybrid) 0%, var(--hybrid2) 100%);
}
.mfl-booking-inner {
  position: relative;
  z-index: 2;
}
.mfl-booking-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  color: var(--cream);
  margin-bottom: 16px;
}
.mfl-booking-title em {
  color: var(--gold);
  font-style: italic;
}
.mfl-booking-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  max-width: 480px;
  margin: 0 auto 36px;
}
.mfl-booking-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.mfl-ornament {
  font-size: 20px;
  color: var(--gold-dk);
  letter-spacing: 0.4em;
  margin: 40px 0 20px;
  opacity: 0.5;
}

/* ============================================================
   AMENITIES COMPARISON — 3-column lodge split
   ============================================================ */
.mfl-amenities-split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line2);
  margin-top: 56px;
}
.mfl-amenity-col {
  padding: 48px 40px;
  cursor: pointer;
  transition: background 0.25s;
}
.mfl-amenity-col.mfl { background: var(--forest); }
.mfl-amenity-col.mfl:hover { background: var(--forest2); }
.mfl-amenity-col.sfl { background: var(--marine2); }
.mfl-amenity-col.sfl:hover { background: var(--marine3); }
/* BFL DISABLED
.mfl-amenity-col.bfl { background: var(--burgundy2); }
.mfl-amenity-col.bfl:hover { background: var(--burgundy3); }
*/
.mfl-amenity-col-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cream);
  margin-bottom: 8px;
}
.mfl-amenity-col-sub {
  font-size:  12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 28px;
}
.mfl-amenity-col.mfl .mfl-amenity-col-sub { color: var(--gold-dk); }
.mfl-amenity-col.sfl .mfl-amenity-col-sub { color: var(--sage); }
/* .mfl-amenity-col.bfl .mfl-amenity-col-sub { color: var(--copper); }  BFL DISABLED */
.mfl-amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mfl-amenity-list li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--cream-dim);
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  padding-left: 16px;
  position: relative;
}
.mfl-amenity-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 15px;
}
.mfl-amenity-col.mfl .mfl-amenity-list li::before { background: var(--gold-dk); }
.mfl-amenity-col.sfl .mfl-amenity-list li::before { background: var(--sage-dk); }
/* .mfl-amenity-col.bfl .mfl-amenity-list li::before { background: var(--copper-dk); }  BFL DISABLED */

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mfl-mobile-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5,12,14,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.mfl-mobile-menu.is-open {
  transform: translateX(0);
}
.mfl-mobile-menu-inner {
  padding: 32px 24px;
}
.mfl-mobile-nav-links {
  list-style: none;
  padding: 0;
}
.mfl-mobile-nav-links li {
  border-bottom: 1px solid var(--line);
}
.mfl-mobile-nav-links li.menu-item-has-children {
  position: relative;
}
.mfl-mobile-nav-links a {
  display: block;
  padding: 14px 0;
  font-size: 13px;
  line-height: 16px; /* explicit so the row height (44px) is deterministic — the chevron toggle relies on it lining up exactly */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.mfl-mobile-nav-links a:hover {
  color: var(--gold);
}
.mfl-mobile-nav-links li.menu-item-has-children > a {
  padding-right: 44px;
}
/* Accordion toggle — separate tap target from the item's own link, so
   parent pages (Fly Fishing, Accommodations, etc.) stay navigable while
   the chevron expands/collapses just that branch of the submenu. */
.mfl-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px; /* matches the top-level row: 14px padding + 14px padding + 16px line-height */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mfl-submenu-toggle:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -2px;
}
.mfl-submenu-toggle span {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.mfl-mobile-nav-links li.is-expanded > .mfl-submenu-toggle span {
  transform: rotate(-135deg);
}
.mfl-mobile-nav-links .sub-menu {
  list-style: none;
  padding: 0 0 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mfl-mobile-nav-links .sub-menu.is-open {
  max-height: 1000px;
}
.mfl-mobile-nav-links .sub-menu a {
  font-size: 11px;
  padding: 10px 0;
  line-height: 14px; /* explicit so nested rows (34px) match the nested chevron below */
  color: var(--cream-faint);
}
.mfl-mobile-nav-links .sub-menu .mfl-submenu-toggle {
  height: 34px; /* matches the nested row: 10px padding + 10px padding + 14px line-height */
}
.mfl-mobile-nav-secondary {
  margin-top: 8px;
}

/* ============================================================
   CONFLUENCE SECTION WRAPPER (for homepage sections)
   ============================================================ */
.mfl-confluence-section {
  padding: 100px 48px;
  position: relative;
  overflow: hidden;
}
.mfl-confluence-section .mfl-section-bg {
  /* Hybrid gradient for confluence-style sections (two-lodge, alternating-color pattern).
     This default replaces ~20+ inline-style duplicates across page templates. */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 60% 30%, rgba(10,26,36,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 40% 70%, rgba(92,138,110,0.07) 0%, transparent 50%),
    linear-gradient(160deg, var(--hybrid) 0%, var(--hybrid2) 50%, var(--hybrid3) 100%);
}
.mfl-confluence-section .mfl-section-texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(216,169,78,0.025) 0px, rgba(216,169,78,0.025) 1px,
      transparent 1px, transparent 48px),
    repeating-linear-gradient(-45deg,
      rgba(216,169,78,0.015) 0px, rgba(216,169,78,0.015) 1px,
      transparent 1px, transparent 48px);
  pointer-events: none;
}
.mfl-confluence-section .mfl-section-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
}

/* ============================================================
   PROPERTY PAGE — Overview (prose + stats)
   ============================================================ */
.mfl-property-overview {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  margin-top: 48px;
  align-items: start;
}
.mfl-property-prose p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cream-dim);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}
.mfl-property-prose p:last-child {
  margin-bottom: 0;
}
.mfl-property-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mfl-property-stat {
  padding: 28px 24px;
  background: var(--forest2);
}
.mfl-property-stat-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 6px;
}
.mfl-property-stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream-dim);
}

/* ============================================================
   PROPERTY PAGE — Feature Grid (3-column cards)
   ============================================================ */
.mfl-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
/* Modifier for feature grids that follow a section-lead paragraph
   directly (tighter top gap than the 48px default) — see
   template-parts/content-shared-waters.php. */
.mfl-feature-grid--waters {
  margin-top: 32px;
}
.mfl-feature-card {
  padding: 40px 32px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.mfl-feature-card:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
/* ============================================================
   GOLD LINK UTILITY — Replaces dozens of inline color:var(--gold) styles
   in prose, feature cards, FAQ content, etc.
   Scoped to content contexts where gold links read as clean inline accents.
   ============================================================ */
.mfl-property-prose a:not(.btn-primary):not(.btn-ghost),
.mfl-feature-desc a:not(.btn-primary):not(.btn-ghost),
.mfl-feature-title a,
.mfl-faq-a a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,169,78,0.35);
  transition: border-color 0.2s, color 0.2s;
}
.mfl-property-prose a:hover,
.mfl-feature-desc a:hover,
.mfl-feature-title a:hover,
.mfl-faq-a a:hover {
  border-color: var(--gold);
  color: var(--gold-lt);
}

.mfl-feature-title {
  /* h3 as feature-card title — reset browser h3 defaults so visual parity with old div-based version */
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 16px;
  transition: color 0.3s;
}
.mfl-feature-card:hover .mfl-feature-title {
  color: var(--gold-lt);
}
.mfl-feature-card:hover .mfl-feature-title a {
  color: var(--gold-lt) !important;
}
.mfl-feature-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  transition: color 0.3s;
}
.mfl-feature-desc p {
  margin: 0 0 6px;
}
.mfl-feature-desc p:last-child {
  margin: 0;
}
.mfl-feature-card:hover .mfl-feature-desc {
  color: var(--cream);
}

/* ============================================================
   PROPERTY PAGE — Amenities List (2-column)
   ============================================================ */
.mfl-amenities-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mfl-amenity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--cream-dim);
  font-weight: 400;
  padding: 20px 24px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s;
}
.mfl-amenity-item:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.10);
}
.mfl-amenity-item:hover::before {
  color: var(--gold-lt);
}
.mfl-amenity-item::before {
  content: '\2726';
  color: var(--gold);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: color 0.3s;
}
/* Forest section context — dining "Evenings" etc. */
.mfl-section .mfl-amenity-item {
  background: var(--forest2);
}
.mfl-section .mfl-amenity-item:hover {
  background: var(--forest3);
}
/* Nested inside booking-option containers (forest2 parent) */
.mfl-booking-option .mfl-amenities-list {
  margin-top: 20px;
  border: none;
}
.mfl-booking-option .mfl-amenity-item {
  background: var(--forest3);
}
.mfl-booking-option .mfl-amenity-item:hover {
  background: var(--forest4);
}
.mfl-booking-option:hover .mfl-amenity-item {
  background: var(--forest4);
}
.mfl-booking-option:hover .mfl-amenity-item:hover {
  background: rgba(34,61,42,0.85);
}

/* ============================================================
   GUIDE CARDS — Fly Fishing Team page
   ============================================================ */
.mfl-guides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-guide-card {
  background: var(--forest2);
  overflow: hidden;
  transition: background 0.3s;
}
.mfl-guide-card:hover {
  background: var(--forest3);
}
.mfl-guide-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.mfl-guide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.3s, transform 0.4s;
}
.mfl-guide-card:hover .mfl-guide-photo img {
  filter: grayscale(0%);
  transform: scale(1.03);
}
.mfl-guide-info {
  padding: 28px 24px;
}
.mfl-guide-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.mfl-guide-title {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--cream-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mfl-guide-bio-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.mfl-guide-bio-btn:hover {
  background: var(--gold);
  color: var(--forest);
}

/* ============================================================
   BIO MODAL — Guide bio popup
   ============================================================ */
.mfl-bio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,15,11,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.mfl-bio-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.mfl-bio-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(92,138,110,0.08) 0%, transparent 60%),
    linear-gradient(160deg, var(--forest2) 0%, var(--forest3) 100%);
  border: 1px solid var(--line);
  max-width: 640px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 48px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.mfl-bio-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.mfl-bio-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  z-index: 1;
}
.mfl-bio-close:hover {
  color: var(--gold);
}
.mfl-bio-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.mfl-bio-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.mfl-bio-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.mfl-bio-title {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.mfl-bio-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 16px;
}
.mfl-bio-text p:last-child {
  margin-bottom: 0;
}

/* Scrollbar styling for modal */
.mfl-bio-modal::-webkit-scrollbar {
  width: 6px;
}
.mfl-bio-modal::-webkit-scrollbar-track {
  background: transparent;
}
.mfl-bio-modal::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* ============================================================
   BOOKING OPTIONS — Book Now page lodge cards
   ============================================================ */
/* ============================================================
   BOOK-NOW ROUTER PATHS
   Three-card decision router on /book-now/. Each card = one intent
   path (direct book / inquiry / phone). Middle card is featured
   because inquiry is the most common high-ticket path.
   ============================================================ */
.mfl-router-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.mfl-router-path {
  background: var(--forest2);
  border: 1px solid var(--forest4);
  border-radius: 12px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.mfl-router-path:hover {
  background: var(--forest3);
  border-color: rgba(216,169,78,0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.mfl-router-path--featured {
  background: linear-gradient(160deg, rgba(92,138,110,0.10) 0%, rgba(216,169,78,0.10) 100%);
  border-color: rgba(216,169,78,0.35);
}
.mfl-router-path-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.mfl-router-path-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.mfl-router-path-title em {
  color: var(--gold);
  font-style: italic;
}
.mfl-router-path-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0 0 20px;
}
.mfl-router-path-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}
.mfl-router-path-bullets li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream-faint);
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.45;
}
.mfl-router-path-bullets li::before {
  content: "◈";
  position: absolute;
  left: 0;
  color: var(--gold-dk);
  font-size: 0.7rem;
  top: 8px;
}
.mfl-router-path-cta {
  text-align: center;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.82rem;
}
@media (max-width: 900px) {
  .mfl-router-paths {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mfl-router-path {
    padding: 28px 24px;
  }
}

.mfl-booking-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-booking-option {
  padding: 48px 40px;
  background: var(--forest2);
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s;
}
.mfl-booking-option:hover {
  background: var(--forest3);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.10);
}
.mfl-booking-option-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  transition: color 0.3s;
}
.mfl-booking-option:hover .mfl-booking-option-title {
  color: var(--gold-lt);
}
.mfl-booking-option-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 24px;
  flex: 1;
}
.mfl-booking-option-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.mfl-booking-option-details span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: rgba(216,169,78,0.04);
}

/* ============================================================
   CONTACT CARDS — Book Now / Contact pages
   ============================================================ */
.mfl-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-contact-card {
  padding: 40px 32px;
  background: var(--forest2);
  text-align: center;
  /* Belt + suspenders for narrow viewports — without these, a long
     email like lincoln@montanaflyfishinglodge.com forces the card's
     min-content width past a 375px viewport. The .mfl-contact-card-value
     rule below also has overflow-wrap: anywhere; this min-width:0 is
     the flex/grid-item escape hatch that lets that wrapping kick in
     when the card is a grid child. */
  min-width: 0;
}
.mfl-contact-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 12px;
}
.mfl-contact-card-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  transition: color 0.2s;
  /* Long emails (lincoln@montanaflyfishinglodge.com is 35 chars) need
     to break across lines on narrow viewports rather than force the
     card past the viewport's right edge. anywhere is the modern
     non-blocking break; word-break is the older Safari fallback. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mfl-contact-card-value:hover {
  color: var(--gold-light);
}
.mfl-contact-card-note {
  font-size: 0.85rem;
  color: var(--cream-faint);
  font-weight: 400;
}

/* ============================================================
   FAQ — Card-based Q&A items
   ============================================================ */
.mfl-booking-faq,
.mfl-faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 48px;
}
.mfl-faq-item {
  padding: 32px 36px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s;
}
.mfl-faq-item:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.10);
}
.mfl-faq-q {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.mfl-faq-item:hover .mfl-faq-q {
  color: var(--gold-lt);
}
.mfl-faq-a {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  transition: color 0.3s;
}
.mfl-faq-item:hover .mfl-faq-a {
  color: var(--cream);
}
/* Forest section context */
.mfl-section .mfl-faq-item {
  background: var(--forest2);
}
.mfl-section .mfl-faq-item:hover {
  background: var(--forest3);
}
/* Nested inside booking-option containers */
.mfl-booking-option .mfl-faq-list {
  border: none;
  margin-top: 24px;
}
.mfl-booking-option .mfl-faq-item {
  background: var(--forest3);
}
.mfl-booking-option .mfl-faq-item:hover {
  background: var(--forest4);
}

/* ============================================================
   POLICY GRID — 2×2 cards for booking policies
   ============================================================ */
.mfl-policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-policy-card {
  padding: 40px 36px;
  background: var(--forest2);
}
.mfl-policy-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.mfl-policy-detail {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
}

/* ============================================================
   WATERS COLUMNS — 3-col link list for rivers/creeks
   ============================================================ */
.mfl-waters-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-waters-col {
  padding: 36px 32px;
  background: var(--forest2);
}
.mfl-waters-col-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.mfl-water-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--cream);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s;
}
.mfl-water-link:last-child {
  border-bottom: none;
}
a.mfl-water-link:hover {
  color: var(--gold);
}
.mfl-water-link.no-link {
  color: var(--cream-dim);
}

/* ============================================================
   SEASON GRID — 3-col seasonal fishing cards
   ============================================================ */
.mfl-season-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-season-card {
  padding: 40px 32px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.mfl-season-card:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(216,169,78,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-section .mfl-season-card { background: var(--forest2); }
.mfl-section .mfl-season-card:hover { background: var(--forest3); }
.mfl-season-card:hover .mfl-season-title { color: var(--gold-lt); }
.mfl-season-card:hover .mfl-season-desc { color: var(--cream); }
.mfl-season-month {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.mfl-season-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  transition: color 0.3s;
}
.mfl-season-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 400;
  transition: color 0.3s;
}

/* ============================================================
   TEAM GRID — Lodge Team page
   ============================================================ */
.mfl-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-team-card {
  padding: 40px 36px;
  background: var(--forest2);
}
.mfl-team-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.mfl-team-role {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.mfl-team-bio {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 400;
}

/* Founder-page link on the owner cards (GEO Wave 2.3) */
.mfl-team-readmore {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mfl-team-readmore:hover {
  color: var(--gold-lt);
}

/* ============================================================
   GALLERY GRID — Guest Gallery page
   ============================================================ */
.mfl-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-gallery-placeholder {
  padding: 60px 36px;
  background: var(--forest2);
  text-align: center;
  transition: background 0.3s;
}
.mfl-gallery-placeholder:hover {
  background: var(--forest3);
}
.mfl-gallery-placeholder-icon {
  color: var(--gold-dk);
  margin-bottom: 20px;
}
.mfl-gallery-placeholder-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 8px;
}
.mfl-gallery-placeholder-sub {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cream-dim);
  font-weight: 400;
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================================
   FLOATING ORVIS BADGE — site-wide, bottom-left
   ============================================================ */
.mfl-orvis-badge {
  position: fixed;
  left: 28px;
  bottom: 28px;
  width: 180px;
  height: 107px;
  z-index: 9998;
  display: block;
  perspective: 1200px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  transition: transform 0.3s ease;
}
.mfl-orvis-badge:hover {
  transform: scale(1.06);
}
.mfl-orvis-badge-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: mfl-orvis-flip 6s infinite linear;
}
.mfl-orvis-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.mfl-orvis-face.back {
  transform: rotateY(180deg);
}
@keyframes mfl-orvis-flip {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
/* Pause animation on hover so user can read */
.mfl-orvis-badge:hover .mfl-orvis-badge-flipper {
  animation-play-state: paused;
}
@media (max-width: 768px) {
  .mfl-orvis-badge {
    width: 120px;
    height: 71px;
    left: 16px;
    bottom: 16px;
    /* Smooth hide-when-scrolled, mirroring the FAB convention in
       responsive.css. The badge is a trust signal; staying glued to
       the corner above form CTAs / package CTAs / footer content
       is a worse UX than letting it fade after the user scrolls
       past the hero. body.nav-scrolled is added by header scroll
       listener (assets/js/navigation.js) once the user scrolls past
       the navbar threshold. */
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  /* Shrink-instead-of-hide on mobile scroll — Lincoln 2026-05-09.
     Previous behavior fully faded the badge via opacity:0 +
     pointer-events:none. The credential is too valuable to hide
     entirely; shrinking to 60% keeps it visible + clickable
     through to Orvis without obscuring content. Anchored to the
     bottom-left corner so the shrink pulls toward the edge,
     not toward the middle of the viewport. */
  .nav-scrolled .mfl-orvis-badge {
    transform: scale(0.6);
    transform-origin: left bottom;
  }
  .nav-scrolled .mfl-orvis-badge:hover {
    transform: scale(0.66);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mfl-orvis-badge-flipper {
    animation: none;
  }
}
@media print {
  .mfl-orvis-badge { display: none; }
}

/* ============================================================
   RIVER HERO — photo background with dark overlay
   ============================================================
   Applied to .mfl-hero--subpage.mfl-hero--photo. The hero-bg div
   gets an inline background-image per template; the overlay is
   handled here via a pseudo-element so the photo remains visible
   but text stays legible on the dark forest brand palette.
*/
/* Ghost button in hero context — needs more contrast against photo backgrounds.
   The base .btn-ghost uses transparent bg + 20%-opacity cream border, which
   reads beautifully over flat dark sections but vanishes against busy photo
   hero backgrounds. Here we give it a frosted-glass backdrop + stronger border
   so the text stays legible without losing the secondary-CTA character. */
.mfl-hero-actions .btn-ghost {
  background: rgba(10,23,27,0.4);
  border-color: var(--cream-dim);
  color: var(--cream);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mfl-hero-actions .btn-ghost:hover {
  background: rgba(216,169,78,0.15);
  border-color: var(--gold);
  color: var(--cream);
}

/* Single canonical photo-hero overlay. Applied to any .mfl-hero--photo hero
   (not just subpages) so text stays legible on the dark-forest brand
   palette. Previously this overlay lived in TWO places (here + inline div
   in the mfl_river_hero_img helper), causing visible darkening on pages
   using .mfl-hero--photo. One source now.
   Was scoped to .mfl-hero--subpage only, which happened to cover every
   photo hero in mfl-confluence (MFL's homepage used a video hero, never a
   photo one). Patagonia's homepage introduced the first bare
   .mfl-hero--photo (no --subpage) — with the old subpage-only scoping it
   got zero overlay, and its bright water/sky photo washed the near-white
   headline text down to ~1.3:1 contrast (2026-08-16 vet panel finding,
   measured via pixel-luminance sampling of the actual hero photo). Keyed
   on --photo directly now, matching the rule's real intent. Safe for
   every current subpage user (all pair --subpage with --photo); home.php's
   .mfl-hero--subpage-only hero has an empty, photo-less .mfl-hero-bg, so it
   never relied on this scrim either way. */
.mfl-hero--photo .mfl-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,23,27,0.45) 0%,
    rgba(10,23,27,0.30) 40%,
    rgba(10,23,27,0.60) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.mfl-hero--photo {
  min-height: 420px;
}
.mfl-hero--photo .mfl-hero-texture {
  opacity: 0.4; /* subtle linen over photo, not competing */
}

/* ============================================================
   PHOTO STRIP — horizontal scrollable river gallery
   ============================================================
   Sits between prose sections. Dark forest background, gold
   accents, cream captions. A single horizontal scroll row at all
   breakpoints (the container is keyboard-focusable; arrow keys
   scroll it once focused).
*/
.mfl-photo-strip {
  padding: 48px 0;
  background: var(--forest-deep, #080f0b);
  position: relative;
  overflow: hidden;
}
.mfl-photo-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216,169,78,0.04) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(92,138,110,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.mfl-photo-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.mfl-photo-strip-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.mfl-photo-strip-eyebrow {
  font-family: var(--font-body);
  font-size:  12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark, #9e8f5f);
}
.mfl-photo-strip-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  white-space: nowrap;
}
.mfl-photo-strip-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--cream, #e8e0d0);
  margin-bottom: 24px;
}
.mfl-photo-strip-title em {
  font-style: italic;
  color: var(--gold, #c8b98a);
}
.mfl-photo-strip-scroll-wrap {
  position: relative;
}
/* Right/left edge fades hint that more photos are offscreen.
   Baseline (no JS needed): left fade hidden, right fade shown — a
   safe default since every strip scrolls left-to-right from a true
   start. JS (assets/js/photo-strip.js) then adds/removes is-scrolled
   and is-at-end as the user actually moves through the strip, so the
   fades track the real scroll position instead of a static guess. A
   strip that doesn't overflow at all gets is-at-end immediately on
   load and never shows a right fade either. */
.mfl-photo-strip-scroll-wrap::before,
.mfl-photo-strip-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.mfl-photo-strip-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to left, transparent, var(--forest-deep, #080f0b));
}
.mfl-photo-strip-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to right, transparent, var(--forest-deep, #080f0b));
  opacity: 1;
}
.mfl-photo-strip-scroll-wrap.is-scrolled::before {
  opacity: 1;
}
.mfl-photo-strip-scroll-wrap.is-at-end::after {
  opacity: 0;
}
.mfl-photo-strip-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,169,78,0.3) transparent;
}
.mfl-photo-strip-scroll:focus-visible {
  outline: 2px solid var(--gold, #c8b98a);
  outline-offset: 4px;
}
.mfl-photo-strip-scroll::-webkit-scrollbar {
  height: 4px;
}
.mfl-photo-strip-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.mfl-photo-strip-scroll::-webkit-scrollbar-thumb {
  background: rgba(216,169,78,0.3);
  border-radius: 2px;
}
.mfl-photo-card {
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(216,169,78,0.12);
  background: var(--forest2, #142b1c);
  transition: border-color 0.3s;
}
.mfl-photo-card:hover {
  border-color: rgba(216,169,78,0.3);
}
.mfl-photo-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.mfl-photo-card-caption {
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
}
/* Desktop: larger cards */
@media (min-width: 768px) {
  .mfl-photo-card {
    width: 380px;
  }
  .mfl-photo-card img {
    height: 260px;
  }
}

/* ============================================================
   NATIVE FORMS — inquiry + contact forms on WordPress pages
   ============================================================
   These replace the old iframe embeds. Form inputs styled to match
   the dark forest brand palette. All form state is handled by
   vanilla JS that POSTs directly to the Lodge OS API — no iframe,
   no cross-domain cookie issues, gclid/UTM captured natively.
*/
.mfl-form-label {
  display: block;
  font-family: var(--font-body);
  font-size:  12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.mfl-form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--forest);
  border: 1px solid var(--forest4);
  border-radius: 4px;
  color: var(--cream);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  /* Tell the browser this input lives on a dark surface so its native
     UI (date-picker calendar icon, select arrows, autofill chip) renders
     with light foreground colors. Without this, the WebKit/Blink date-
     picker icon is dark-on-dark and effectively invisible — that was
     "you can't see the calendar date picker" on /contact-us/ at cutover. */
  color-scheme: dark;
}
.mfl-form-input:focus {
  border-color: var(--gold-dark);
}
.mfl-form-input::placeholder {
  color: var(--cream-faint);
}
.mfl-form-input option {
  background: var(--forest2);
  color: var(--cream);
}
/* Calendar picker icon contrast.
 *
 * GOTCHA: this used to apply `filter: invert(...)` to the picker
 * indicator, which produced a DARKER icon, not a lighter one. Why:
 * `.mfl-form-input` above already sets `color-scheme: dark`, which
 * tells the browser to render the native calendar icon for a dark
 * surface — Chrome/Safari/Edge produce a clean white icon. Layering
 * `filter: invert(1)` on top then re-inverted that white icon back
 * to black. Removing the filter entirely is the fix; the browser's
 * native dark-mode rendering is correct and crisp.
 *
 * Hover ramp uses a subtle gold tint (sepia + hue-rotate of the
 * already-light icon) to match the form's gold accent. No invert
 * here either — same reason. */
.mfl-form-input[type="date"]::-webkit-calendar-picker-indicator,
.mfl-form-input[type="time"]::-webkit-calendar-picker-indicator,
.mfl-form-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.mfl-form-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.mfl-form-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.mfl-form-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: sepia(0.5) saturate(3) hue-rotate(15deg) brightness(1.15);
}

/* Visually-hidden text — read by screen readers, invisible on screen. */
.mfl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Field label + inline "i" info-toggle button, and the mini tooltip
   panel it reveals. Used on the required inquiry-form fields where
   guests are most likely to guess wrong (length of stay, arrival
   date, angler counts) — a click reveals a short explanation instead
   of guests abandoning the form or submitting a wrong default. */
.mfl-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.mfl-field-label-row .mfl-form-label {
  margin-bottom: 0;
}
.mfl-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-dk);
  background: transparent;
  color: var(--gold-dk);
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mfl-info-btn:hover,
.mfl-info-btn:focus-visible,
.mfl-info-btn[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--gold);
}
.mfl-info-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.mfl-field-tooltip {
  background: var(--forest);
  border: 1px solid var(--forest4);
  border-left: 2px solid var(--gold-dk);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 6px 0 10px;
  color: var(--cream-dim);
  font-size: 12px;
  line-height: 1.6;
}

/* ============================================================
   SIBLING PAGE NAVIGATION
   Lateral nav buttons between related pages in the same group.
   ============================================================ */
.mfl-sibling-nav {
  position: relative;
  padding: 56px 0 64px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(92,138,110,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest2) 100%);
}
.mfl-sibling-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.mfl-sibling-nav-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 24px;
}
.mfl-sibling-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.mfl-sibling-nav-buttons .btn-ghost {
  padding: 10px 24px;
  font-size: 0.75rem;
}
@media (max-width: 600px) {
  .mfl-sibling-nav-buttons {
    gap: 8px;
  }
  .mfl-sibling-nav-buttons .btn-ghost {
    padding: 10px 16px;
    font-size: 0.7rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Packages page — Choose Your Package (rewritten 2026-04-22)
   Cards + Dual Lodge detail + Single-Lodge unified calc + Compare accordion
   ════════════════════════════════════════════════════════════════════ */

/* ─── Section shared ─────────────────────────────────────────────── */
.mfl-pkg-picker {
  padding-top: 48px;
  padding-bottom: 32px;
}
.mfl-pkg-picker-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px !important;
  text-align: center;
}
.mfl-section-transition {
  height: 60px;
  position: relative;
}
.mfl-section-transition-rule {
  position: absolute;
  left: 50%;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(216,169,78,0.3) 50%, transparent);
}
.mfl-section-divider {
  max-width: 1000px;
  margin: 40px auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(216,169,78,0.2), transparent);
}

/* ─── Decision Cards (Picker) ───────────────────────────────────── */
.mfl-pkg-cards {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.mfl-pkg-card {
  background: var(--forest-3, #1a3523);
  border: 1px solid rgba(216,169,78,0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.mfl-pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dk, #9e8f5f);
  box-shadow: 0 16px 32px rgba(0,0,0,0.3);
}
.mfl-pkg-card.signature {
  border-color: var(--gold-dk, #9e8f5f);
  background: linear-gradient(180deg, var(--forest-3, #1a3523) 0%, #1d3a27 100%);
}
.mfl-pkg-card.signature:hover { border-color: var(--gold, #c8b98a); }

.mfl-pkg-card-img {
  /* 150px (was 220px, 2026-05-01): the label sits at bottom:20px and
     uses ~60-70px of vertical space (kicker line + name line). The
     SIGNATURE badge sits at top:14px and is ~24px tall. 150px leaves
     a comfortable ~30px gap between badge and label while removing
     ~70px of empty gradient space Lincoln flagged. */
  height: 150px;
  position: relative;
  overflow: hidden;
}
.mfl-pkg-card-img.sfl {
  background:
    linear-gradient(180deg, rgba(10,23,27,0.1) 40%, rgba(10,23,27,0.92) 100%),
    linear-gradient(135deg, #2a3a24 0%, #1a3523 100%);
}
.mfl-pkg-card-img.mfl {
  background:
    linear-gradient(180deg, rgba(10,23,27,0.1) 40%, rgba(10,23,27,0.92) 100%),
    linear-gradient(135deg, #1e3a28 0%, #0d1a14 100%);
}
.mfl-pkg-card-img.dual {
  background:
    linear-gradient(180deg, rgba(10,23,27,0.1) 40%, rgba(10,23,27,0.92) 100%),
    linear-gradient(135deg, #264a34 0%, #2a3a24 50%, #1a3523 100%);
}
.mfl-signature-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mfl-pkg-card-img-label {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
}
.mfl-pkg-card-img-label .kicker {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  margin-bottom: 6px;
}
.mfl-pkg-card.signature .mfl-pkg-card-img-label .kicker { color: var(--gold, #c8b98a); }
.mfl-pkg-card-img-label .name {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--cream, #e8e0d0);
  font-weight: 700;
  line-height: 1.2;
}
.mfl-pkg-card-img-label .name em { color: var(--gold, #c8b98a); font-style: italic; }

.mfl-pkg-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mfl-pkg-card-desc {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 20px;
  min-height: 76px;
}
.mfl-pkg-card-stats {
  margin-bottom: 20px;
  padding-top: 4px;
  border-top: 1px solid rgba(216,169,78,0.1);
}
.mfl-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(216,169,78,0.08);
  font-size: 0.85rem;
  gap: 12px;
}
.mfl-stat-row:last-child { border-bottom: none; }
.mfl-stat-label { color: var(--cream-dim, rgba(232,224,208,0.6)); flex-shrink: 0; }
.mfl-stat-value {
  color: var(--cream, #e8e0d0);
  font-weight: 600;
  text-align: right;
}
.mfl-stat-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--cream-faint, rgba(232,224,208,0.28));
  margin-top: 3px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.mfl-pkg-card-price-block {
  padding: 16px 0 4px;
  border-top: 1px solid rgba(216,169,78,0.15);
  margin-bottom: 20px;
}
.mfl-pkg-card-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold, #c8b98a);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.mfl-pkg-card-price-sub {
  color: var(--cream-faint, rgba(232,224,208,0.28));
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.mfl-pkg-card-cta {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.mfl-pkg-card-btn { flex: 1; text-align: center; }
.mfl-pkg-card-btn-ghost { flex-shrink: 0; }

@media (max-width: 900px) {
  .mfl-pkg-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* At narrow viewports the two CTAs in a package card (e.g. "See the
   Experience" + "Itinerary") don't both fit horizontally — the ghost
   button's flex-shrink:0 + 36px button padding pushes its text past
   the card's right edge ("Itinera…" clipped). Stack them vertically.
   Matches the established convention used by .mfl-hero-actions and
   .mfl-booking-actions at the same breakpoint. */
@media (max-width: 600px) {
  .mfl-pkg-card-cta {
    flex-direction: column;
    gap: 10px;
  }
  .mfl-pkg-card-btn-ghost {
    flex-shrink: 1;
    text-align: center;
  }
  .mfl-pkg-card-btn,
  .mfl-pkg-card-btn-ghost {
    width: 100%;
  }
}

/* ─── Detail sections ───────────────────────────────────────────── */
.mfl-detail-section {
  padding: 64px 24px;
  position: relative;
  z-index: 1;
  scroll-margin-top: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.mfl-detail-inner { max-width: 1200px; margin: 0 auto; }
.mfl-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(216,169,78,0.15);
}
.mfl-detail-header-text { flex: 1; min-width: 300px; }
.mfl-detail-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  margin-bottom: 6px;
}
.mfl-detail-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--cream, #e8e0d0);
  line-height: 1.15;
  margin: 0;
}
.mfl-detail-title em { color: var(--gold, #c8b98a); font-style: italic; }
.mfl-jump-to-top {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-faint, rgba(232,224,208,0.28));
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(216,169,78,0.15);
  border-radius: 2px;
  transition: all 0.2s;
}
.mfl-jump-to-top:hover {
  color: var(--gold, #c8b98a);
  border-color: var(--gold-dk, #9e8f5f);
}

/* ─── Dual Lodge detail ─────────────────────────────────────────── */
.mfl-dual-detail-header {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 48px;
}
.mfl-dual-detail-intro .mfl-ctrl-label { margin-top: 20px; display: block; }
.mfl-nights-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mfl-nights-btn {
  padding: 12px 22px;
  background: rgba(232,224,208,0.06);
  border: 1px solid rgba(216,169,78,0.25);
  border-radius: 4px;
  color: var(--cream, #e8e0d0);
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  text-align: left;
}
.mfl-nights-btn:hover {
  background: rgba(216,169,78,0.12);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-nights-btn.active {
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  border-color: var(--gold, #c8b98a);
  font-weight: 600;
}
.mfl-nights-btn .sub {
  display: block;
  font-size: 0.7rem;
  margin-top: 2px;
  opacity: 0.8;
}
.mfl-nights-btn .ext-tag {
  color: var(--gold, #c8b98a);
  font-style: normal;
  margin-left: 4px;
}
.mfl-nights-btn.active .ext-tag { color: var(--forest-deep, #080f0b); }
.mfl-package-lead {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 16px;
}
.mfl-package-stats {
  color: var(--cream, #e8e0d0);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  font-weight: 300;
}
.mfl-package-badge {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(216,169,78,0.12);
  color: var(--gold, #c8b98a);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(216,169,78,0.3);
  border-radius: 2px;
  margin-bottom: 16px;
}
.mfl-dual-price-block {
  background: linear-gradient(180deg, rgba(26,53,35,0.9) 0%, rgba(20,43,28,0.9) 100%);
  border: 1px solid rgba(216,169,78,0.3);
  border-radius: 4px;
  padding: 28px;
  text-align: center;
}
.mfl-dual-price-from {
  color: var(--gold-dk, #9e8f5f);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mfl-dual-price-val {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--gold, #c8b98a);
  font-weight: 700;
  line-height: 1;
}
.mfl-dual-price-per {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.82rem;
  margin-top: 8px;
  margin-bottom: 20px;
}
.mfl-dual-cta { display: inline-block; width: 100%; }
.mfl-dual-footer-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 20px;
}

@media (max-width: 900px) {
  .mfl-dual-detail-header { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Lodge Switcher (Single-Lodge Stay) ────────────────────────── */
.mfl-lodge-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 36px;
  padding: 8px;
  background: rgba(20,43,28,0.5);
  border: 1px solid rgba(216,169,78,0.15);
  border-radius: 6px;
}
.mfl-lodge-btn {
  padding: 20px 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.mfl-lodge-btn:hover:not(.active) {
  background: rgba(216,169,78,0.04);
  border-color: rgba(216,169,78,0.2);
  color: var(--cream, #e8e0d0);
}
.mfl-lodge-btn.active {
  background: linear-gradient(135deg, rgba(216,169,78,0.12), rgba(216,169,78,0.04));
  border-color: var(--gold-dk, #9e8f5f);
  color: var(--cream, #e8e0d0);
}
.mfl-lodge-btn-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.25s;
}
.mfl-lodge-btn[data-lodge="mfl"] .mfl-lodge-btn-mark {
  background: linear-gradient(135deg, #1e3a28, #0d1a14);
  color: var(--gold-dk, #9e8f5f);
  border: 1px solid rgba(216,169,78,0.3);
}
.mfl-lodge-btn[data-lodge="sfl"] .mfl-lodge-btn-mark {
  background: linear-gradient(135deg, #2a3a24, #1a3523);
  color: var(--sage-light, #7aab8a);
  border: 1px solid rgba(122,171,138,0.3);
}
.mfl-lodge-btn.active .mfl-lodge-btn-mark {
  color: var(--gold, #c8b98a);
  border-color: var(--gold, #c8b98a);
}
.mfl-lodge-btn-text { flex: 1; }
.mfl-lodge-btn-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 3px;
  display: block;
  color: inherit;
}
.mfl-lodge-btn-name em { color: var(--gold, #c8b98a); font-style: italic; }
.mfl-lodge-btn-sub {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-faint, rgba(232,224,208,0.28));
  display: block;
}
.mfl-lodge-btn.active .mfl-lodge-btn-sub { color: var(--gold-dk, #9e8f5f); }
.mfl-lodge-btn-price {
  color: var(--gold, #c8b98a);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Single-Lodge switcher — stack to 1 column at mobile. The default
   2-col grid + each button's content (40px circular mark + 18px gap +
   Playfair name + sub + nowrap price) needs ~330px per button to lay
   out cleanly; on a 375px viewport that splits into ~149px tracks and
   the contents overflow the right edge by ~12px (caught at 2026-05-01
   mobile audit). Stacking gives each button the full row width. */
@media (max-width: 600px) {
  .mfl-lodge-switcher {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mfl-lodge-btn {
    padding: 16px 18px;
    gap: 14px;
  }
}

.mfl-lodge-btn-checkmark {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.mfl-lodge-btn.active .mfl-lodge-btn-checkmark { display: flex; }

@media (max-width: 700px) {
  .mfl-lodge-switcher { grid-template-columns: 1fr; }
}

/* ─── Compare accordion (Decision Help) ─────────────────────────── */
.mfl-decision-help {
  padding: 64px 24px 48px;
  position: relative;
  z-index: 1;
}
.mfl-decision-help .mfl-detail-inner { max-width: 1200px; }
.mfl-compare-wrapper { max-width: 1200px; margin: 0 auto; }
.mfl-compare-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(26,53,35,0.5);
  border: 1px solid rgba(216,169,78,0.2);
  border-radius: 4px;
  color: var(--cream, #e8e0d0);
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.mfl-compare-toggle:hover {
  background: rgba(26,53,35,0.8);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-compare-toggle-label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mfl-compare-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(216,169,78,0.1);
  border: 1px solid rgba(216,169,78,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #c8b98a);
  font-size: 1rem;
}
.mfl-compare-text { text-align: left; }
.mfl-compare-primary {
  color: var(--cream, #e8e0d0);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mfl-compare-secondary {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.78rem;
  margin-top: 2px;
}
.mfl-compare-chevron {
  color: var(--gold, #c8b98a);
  font-size: 0.85rem;
  transition: transform 0.3s;
}
.mfl-compare-toggle.open .mfl-compare-chevron { transform: rotate(180deg); }
.mfl-compare-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
}
.mfl-compare-panel.open { max-height: 2400px; }
.mfl-compare-table {
  margin-top: 24px;
  background: var(--forest-3, #1a3523);
  border: 1px solid rgba(216,169,78,0.15);
  border-radius: 4px;
  overflow: hidden;
}
.mfl-compare-row {
  display: grid;
  grid-template-columns: 200px 1fr 1.15fr 1fr;
  border-bottom: 1px solid rgba(216,169,78,0.08);
}
.mfl-compare-row.header {
  background: var(--forest-2, #142b1c);
  border-bottom: 1px solid rgba(216,169,78,0.2);
}
.mfl-compare-row:last-child { border-bottom: none; }
.mfl-compare-cell {
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  text-align: center;
}
.mfl-compare-cell:first-child {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  font-weight: 600;
  background: rgba(20,43,28,0.5);
}
.mfl-compare-row.header .mfl-compare-cell { padding: 22px 20px; }
.mfl-compare-cell.signature {
  background: linear-gradient(180deg, rgba(216,169,78,0.06), transparent);
  position: relative;
}
.mfl-compare-row.header .mfl-compare-cell.signature::before {
  content: "\25C6 SIGNATURE";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--gold, #c8b98a);
}
.mfl-compare-header-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--cream, #e8e0d0);
  margin-bottom: 3px;
}
.mfl-compare-header-title em {
  color: var(--gold, #c8b98a);
  font-style: italic;
}
.mfl-compare-header-sub {
  font-size: 0.72rem;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mfl-compare-cell .ck { color: var(--sage-light, #7aab8a); }
.mfl-compare-cell .dash { color: var(--cream-faint, rgba(232,224,208,0.28)); }
.mfl-compare-cell .hl { color: var(--gold, #c8b98a); font-weight: 600; }
.mfl-compare-footer {
  display: grid;
  grid-template-columns: 200px 1fr 1.15fr 1fr;
  padding: 20px 0;
}
.mfl-compare-footer-cell { padding: 8px 20px; text-align: center; }

@media (max-width: 900px) {
  .mfl-compare-row.header { display: none; }
  .mfl-compare-row { grid-template-columns: 1fr 1fr; }
  .mfl-compare-cell:first-child {
    grid-column: span 2;
    text-align: center;
    background: var(--forest-2, #142b1c);
  }
  .mfl-compare-footer { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Still Deciding helper strip ───────────────────────────────── */
.mfl-help-strip {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 28px 32px;
  background: rgba(26,53,35,0.4);
  border: 1px solid rgba(216,169,78,0.15);
  border-radius: 4px;
  text-align: center;
}
.mfl-help-strip-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  margin-bottom: 8px;
}
.mfl-help-strip p {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.95rem;
  margin: 0 auto 16px;
  line-height: 1.6;
  max-width: 600px;
}

/* ─── Collapsible WP content section ────────────────────────────── */
.mfl-wp-content-collapse {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.mfl-wp-content-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  background: rgba(26,53,35,0.6);
  border: 1px solid rgba(216,169,78,0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  list-style: none;
  gap: 16px;
}
.mfl-wp-content-summary::-webkit-details-marker { display: none; }
.mfl-wp-content-summary::marker { content: ""; }
.mfl-wp-content-summary:hover {
  background: rgba(26,53,35,0.85);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-wp-content-summary-label {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--cream, #e8e0d0);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mfl-wp-content-summary-hint {
  flex: 1;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.82rem;
  font-style: italic;
}
.mfl-wp-content-summary-chevron {
  color: var(--gold, #c8b98a);
  font-size: 1rem;
  transition: transform 0.3s;
}
.mfl-wp-content-collapse[open] .mfl-wp-content-summary-chevron {
  transform: rotate(180deg);
}
.mfl-wp-content-body {
  margin-top: 32px;
  padding: 0 24px;
}

@media (max-width: 700px) {
  .mfl-wp-content-summary { padding: 18px 20px; }
  .mfl-wp-content-summary-hint { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Packages page — anchor & layout fixes (2026-04-23)

   1. `.mfl-timeline.cols-8` — Dual Lodge 7N timeline needs 8 columns.
      Without this the calculator.css `.mfl-timeline { grid-template-
      columns: repeat(6, 1fr) }` wins and the 7th/8th cards wrap to a
      second row. Mobile (≤900px) still stacks all cards vertically
      via the earlier responsive rule.

   2. Scroll landing fix for /packages/#mfl-pkg-calculator and the
      internal #mfl-dual-detail / #mfl-single-detail anchors — cross-
      page navigation was landing on the picker then the browser's
      scroll-anchoring was re-adjusting after images/fonts loaded,
      giving the impression of "jump, pause, scroll down." Explicit
      scroll-margin-top pins the anchor target, and overflow-anchor:
      none on the section disables post-layout re-adjustment.
   ──────────────────────────────────────────────────────────────── */
.mfl-timeline.cols-8 {
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 900px) {
  .mfl-timeline.cols-8 {
    grid-template-columns: 1fr;
  }
}

.mfl-packages-section {
  overflow-anchor: none;
}
#mfl-pkg-calculator {
  scroll-margin-top: 100px;
}
#mfl-dual-detail,
#mfl-single-detail {
  scroll-margin-top: 100px;
}

/* Compact section variant — used for the page-bottom Still Deciding
   block so it doesn't need the full 100px top/bottom padding of a
   regular content section. */
.mfl-section.mfl-section--compact {
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}
.mfl-section.mfl-section--compact .mfl-help-strip {
  position: relative;
  z-index: 2;
}

/* Italic gold "Defined" in the All-Inclusive Defined accordion label —
   matches the brand pattern used in section titles like "Make the
   <em>Right Call</em>". */
.mfl-wp-content-summary-label em {
  color: var(--gold, #c8b98a);
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-left: 4px;
}