/* ============================================================
   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;
}
/* Odd property count, 2026-09-29 (a sitewide grid-stretch sweep, same
   family as .mfl-property-stats's own odd-count fix a few sections
   below in this file): content-lodge-cards.php loops over
   pat_all_properties() -- 5 Patagonia partner lodges today, an ODD
   number in this always-2-column grid, on the HOMEPAGE. The last card
   (Trevelin) landed alone in the final row with nothing beside it --
   confirmed live: a ~456x816px void next to it. Corrected same day:
   this grid's own background (var(--line2), a translucent white tint)
   DOES paint that empty cell -- it's just faint enough against the
   dark --forest card backgrounds to read as "blank" at a glance; this
   is NOT the "genuinely no background at all" case an earlier version
   of this comment claimed (a code-reuse-engineer/brand-console-
   guardian catch). Either way the empty cell reads as a missing card,
   not a deliberate design choice, so the fix stands regardless of
   exactly how visible the gap was. Now a shared rule (consolidated
   same day after this exact selector was hand-copied a 3rd time for
   .mfl-lodge-btn below): see .mfl-property-stat:last-child:nth-child
   (odd)'s own comment, further down this file, for the full technique
   and all three call sites. A future property count is entirely
   data-driven (pat_all_properties()), so this can't be hand-fixed
   per-count the way it might be tempting to for a one-off page --
   also correct if a 6th partner lodge is ever added (6 is even, rule
   stops matching that grid specifically). */
.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));
}
*/

/* Patagonia's 5 real partner-lodge cards (2026-08-26): the .mfl/.sfl/.bfl
   trio above differentiates separate MFL-umbrella BRANDS and doesn't apply
   here (Patagonia is one brand, 5 partner lodges); this reuses the same
   top-accent-bar mechanism instead of inventing a parallel one, keyed off
   each property's own slug (content-lodge-cards.php adds it as a class on
   .mfl-lodge-card/.mfl-lodge-tag/.mfl-lodge-link, replacing the inline
   accent_var styling that previously left 4 of 5 cards sharing one color:
   see variables.css's own PROPERTY ACCENT COLORS note). Card background
   deliberately left uniform (not per-property): the top bar + tag + link
   color is enough real distinction without also needing a 5th transition-
   zone bridge for a per-card background seam. */
.mfl-lodge-card.caridad::before {
  background: linear-gradient(90deg, var(--gold), rgba(216,169,78,0.2));
}
.mfl-lodge-tag.caridad { color: var(--gold); }
.mfl-lodge-link.caridad { color: var(--gold); }

.mfl-lodge-card.rivadavia::before {
  background: linear-gradient(90deg, var(--sky), rgba(127,158,196,0.2));
}
.mfl-lodge-tag.rivadavia { color: var(--sky); }
.mfl-lodge-link.rivadavia { color: var(--sky); }

.mfl-lodge-card.futaleufu::before {
  background: linear-gradient(90deg, var(--sage), rgba(95,158,151,0.2));
}
.mfl-lodge-tag.futaleufu { color: var(--sage); }
.mfl-lodge-link.futaleufu { color: var(--sage); }

.mfl-lodge-card.carrileufu::before {
  background: linear-gradient(90deg, var(--copper), rgba(192,102,78,0.2));
}
.mfl-lodge-tag.carrileufu { color: var(--copper); }
.mfl-lodge-link.carrileufu { color: var(--copper); }

.mfl-lodge-card.trevelin::before {
  background: linear-gradient(90deg, var(--welsh-green), rgba(157,181,107,0.2));
}
.mfl-lodge-tag.trevelin { color: var(--welsh-green); }
.mfl-lodge-link.trevelin { color: var(--welsh-green); }

/* 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. auto-fit (not a fixed repeat(3,...)) so the row always
   sizes to however many .mfl-stat children are actually rendered (1-3,
   see content-property-facts.php / content-lodge-cards.php) instead of
   leaving a leftover empty cell whenever fewer than 3 stats exist —
   which was every lodge, on every page, until 2026-09-26 (Lincoln:
   "it is empty on all the lodge pages... looks unfinished"). See
   responsive.css for the mobile override forcing 1-per-row instead,
   so a 3rd stat never wraps alone next to an empty 2nd mobile column. */
.mfl-lodge-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: center; /* a value that wraps to 2 lines (a long season
    range on a stale-cache fallback, see content-property-facts.php's
    comment) would otherwise stretch that grid track and leave its
    top-pinned, single-line siblings looking misaligned against it. */
  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-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -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;
}

/* ============================================================
   PER-PROPERTY SECTION BACKGROUNDS (2026-08-25)
   ============================================================
   Applied via the .pat-facts--{slug} modifier class
   template-parts/content-property-facts.php adds alongside
   .mfl-confluence-section, overriding that shared rule's default
   --hybrid gradient above with each property's own assigned option
   (see variables.css's "PROPERTY ACCENT COLORS" block for the
   accent half of each pairing). Five distinct rules, even where two
   share a color family (Carrileufu/Futaleufu both use --burgundy),
   so each property's specific tint stays independently adjustable.
*/
/* Rivadavia (Option 4, Forest × Olive): the site's own forest scale,
   olive-tinted glow instead of the default sage-adjacent one. */
.pat-facts--rivadavia .mfl-section-bg {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(10,26,36,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 40% 70%, rgba(166,160,95,0.08) 0%, transparent 50%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 50%, var(--forest3) 100%);
}
/* Trevelin (Option 2, Olive Trail): a wholly distinct olive-black scale. */
.pat-facts--trevelin .mfl-section-bg {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--olive-bg) 0%, var(--olive-bg2) 50%, var(--olive-bg3) 100%);
}
/* Carrileufu (Option 1, Burgundy Revival): pure burgundy, copper-tinted glow. */
.pat-facts--carrileufu .mfl-section-bg {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(192,102,78,0.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--burgundy) 0%, var(--burgundy2) 50%, var(--burgundy3) 100%);
}
/* Futaleufu (Option 3, Burgundy × Olive): burgundy structure, olive-tinted glow. */
.pat-facts--futaleufu .mfl-section-bg {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--burgundy) 0%, var(--burgundy2) 50%, var(--burgundy3) 100%);
}
/* Caridad (Option 5, Three-Way Blend): forest structure with a burgundy
   undertone glow (bottom-right) plus the olive tint, the richest of the
   five, matching its flagship/top-tier position. */
.pat-facts--caridad .mfl-section-bg {
  background:
    radial-gradient(ellipse at 100% 100%, rgba(61,30,40,0.5) 0%, transparent 62%),
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.08) 0%, transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 50%, var(--forest3) 100%);
}

/* Per-property feature-card + photo-strip backgrounds (2026-08-27):
   closes the rest of Lincoln's "the palette doesn't start until the
   bottom of the page" report: the room/building-grid cards
   (content-named-card-grid.php) and the photo strip
   (pat_photo_strip()) both sat between the hero and the property-facts
   section wearing the SHARED default color (--hybrid2 / --forest-deep)
   no matter which lodge the page was for, so only the last section
   before the footer ever showed a distinct palette. Same
   ".pat-facts--{slug}" modifier class, now also reachable on
   .mfl-feature-card (nested inside a .pat-facts--{slug} section, via
   descendant selector) and directly on .mfl-photo-strip itself (no
   .mfl-section-bg child to target there). Mirrors each family's own
   default-shape pairing exactly: .mfl-feature-card's default is
   --hybrid2, the SAME token used as the .mfl-section-bg gradient's own
   50% stop above, so each override below uses that family's "2" step
   too, not a new value. .mfl-photo-strip's default is --forest-deep,
   the darkest neutral in the whole palette; each override below uses
   that family's own "-deep" step, same structural role, just
   re-hued. Rivadavia gained its own room-grid and photo-strip 2026-09-09
   (see page-rivadavia.php); its rules below follow the same Forest-family
   pairing as Caridad's, just with Rivadavia's own Forest×Olive glow.

   Each rule below also carries the SAME radial-gradient glow layer its
   property's own .pat-facts--{slug} .mfl-section-bg rule (above) already
   uses (a hospitality-domain-sentinel finding, same day): Carrileufu and
   Futaleufu share one --burgundy base (a real, independent-lodges pair:
   one unpriced/rustic, one $9,600/angler with a spa, see
   includes/properties.php), and without their own glow these two new
   surfaces would render byte-identical between them, which is exactly
   the "pages don't look different enough" complaint this whole fix
   exists to close. The glow is what already differentiates their facts
   sections (copper for Carrileufu, olive for Futaleufu); carrying it
   here keeps every newly-tinted surface as distinct as the one that was
   already correct. Caridad/Trevelin get their own single-glow treatment
   for the same consistency, not because a gap was reported for them. */
.pat-facts--caridad .mfl-feature-card {
  background:
    radial-gradient(ellipse at 100% 100%, rgba(61,30,40,0.5) 0%, transparent 62%),
    var(--forest2);
}
.pat-facts--caridad .mfl-feature-card:hover {
  background:
    radial-gradient(ellipse at 100% 100%, rgba(61,30,40,0.5) 0%, transparent 62%),
    var(--forest3);
}
.mfl-photo-strip.pat-facts--caridad {
  background:
    radial-gradient(ellipse at 100% 100%, rgba(61,30,40,0.5) 0%, transparent 62%),
    var(--forest-deep);
}
.pat-facts--rivadavia .mfl-feature-card {
  background:
    radial-gradient(ellipse at 40% 70%, rgba(166,160,95,0.08) 0%, transparent 50%),
    var(--forest2);
}
.pat-facts--rivadavia .mfl-feature-card:hover {
  background:
    radial-gradient(ellipse at 40% 70%, rgba(166,160,95,0.08) 0%, transparent 50%),
    var(--forest3);
}
.mfl-photo-strip.pat-facts--rivadavia {
  background:
    radial-gradient(ellipse at 40% 70%, rgba(166,160,95,0.08) 0%, transparent 50%),
    var(--forest-deep);
}
.pat-facts--carrileufu .mfl-feature-card {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(192,102,78,0.10) 0%, transparent 55%),
    var(--burgundy2);
}
.pat-facts--carrileufu .mfl-feature-card:hover {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(192,102,78,0.10) 0%, transparent 55%),
    var(--burgundy3);
}
.mfl-photo-strip.pat-facts--carrileufu {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(192,102,78,0.10) 0%, transparent 55%),
    var(--burgundy-deep);
}
.pat-facts--futaleufu .mfl-feature-card {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.10) 0%, transparent 55%),
    var(--burgundy2);
}
.pat-facts--futaleufu .mfl-feature-card:hover {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.10) 0%, transparent 55%),
    var(--burgundy3);
}
.mfl-photo-strip.pat-facts--futaleufu {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.10) 0%, transparent 55%),
    var(--burgundy-deep);
}
.pat-facts--trevelin .mfl-feature-card {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.12) 0%, transparent 55%),
    var(--olive-bg2);
}
.pat-facts--trevelin .mfl-feature-card:hover {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.12) 0%, transparent 55%),
    var(--olive-bg3);
}
.mfl-photo-strip.pat-facts--trevelin {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(166,160,95,0.12) 0%, transparent 55%),
    var(--olive-bg-deep);
}

/* ============================================================
   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;
  /* Deliberately left at the grid default (stretch), 2026-09-29 -- see
     .mfl-property-stat below for the real fix. A same-day first attempt
     put `align-items: center` HERE instead, matching .mfl-lodge-stats's
     own identical-looking rule (components.css:162) -- but a
     code-reuse-engineer vet pass built an actual browser reproduction
     (three renders: default stretch, align-self:start, align-items:
     center) and proved the claim that centering "keeps every cell in a
     row the same height" was wrong: ANY align-items value other than
     stretch (start, center, or end) shrinks a grid item's box to its
     own content height instead of filling the row -- centering just
     splits the resulting gap top+bottom instead of leaving it at the
     bottom, it doesn't remove it. On this grid's visible bordered/
     graph-paper background, that gap is a genuinely visible `--line`
     colored sliver above AND below a shorter cell (confirmed in a
     real-palette render) -- a real, if subtle, artifact that a
     "same height" claim shouldn't have shipped alongside. gap: 1px /
     border: 1px solid var(--line) below are UNCHANGED and still do
     their job; only align-items was reverted. */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* Odd item count in a fixed 2-column grid (2026-09-29, a vet finding;
   generalized 2026-09-29 same day into one shared rule after a
   code-reuse-engineer pass caught this exact selector+declaration
   hand-copied a 2nd and 3rd time verbatim for .mfl-lodge-card and
   .mfl-lodge-btn below -- this codebase already has precedent for
   consolidating once a fix recurs, see pat_feature_grid_modifier()'s
   own generalization history, functions.php): an odd number of
   children in a fixed-2-column grid leaves the last one alone in its
   own row next to an empty cell -- the same orphaned-cell shape
   .mfl-lodge-stats's own mobile fix above exists to avoid, but
   reachable here at ANY width, not just mobile, since these grids are
   a fixed 2 columns regardless of viewport. Spans the trailing item
   across both columns instead, the same "widen the leftover trailing
   card" technique this file's own .mfl-feature-grid--pairs/
   --trailing-pair rules already use for 3-column card grids (see
   pat_feature_grid_modifier(), functions.php) -- a wide highlighted
   cell reads as intentional; an empty bordered cell reads as broken.
   :last-child:nth-child(odd) matches only when the last item's own
   position is odd, i.e. only when the total count is odd (1, 3, 5,
   ...); an even count is untouched (last item's position is even,
   rule doesn't match) -- so this rule self-limits per grid, correctly
   firing on .mfl-property-stat only when ITS OWN count is odd, same
   for .mfl-lodge-card and .mfl-lodge-btn independently, regardless of
   what the other two grids' counts happen to be. Harmless at any
   single-column breakpoint too: spanning both columns is a no-op once
   there's only one column to span.
   Three call sites, one shared rule:
   - .mfl-property-stat (page-travel-planner.php: exactly 3 stats, not
     4 like this grid's other 5 users -- see includes/properties.php).
   - .mfl-lodge-card (.mfl-lodges-grid, front-page.php's "Our Lodges":
     5 partner lodges via pat_all_properties() -- see that grid's own
     section, this file, for the live-verified before/after).
   - .mfl-lodge-btn (.mfl-lodge-switcher, page-packages.php's "Choose
     your lodge" tab bar: the same 5-property loop, a different grid). */
.mfl-property-stat:last-child:nth-child(odd),
.mfl-lodge-card:last-child:nth-child(odd),
.mfl-lodge-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.mfl-property-stat {
  padding: 28px 24px;
  background: var(--forest2);
  /* flex column + justify-content: center, 2026-09-29 (replaces an
     align-items: center on the PARENT .mfl-property-stats grid --
     see its own comment above for why that approach was reverted):
     this grid's rows can pair a 3-line-wrapped label against a
     1- or 2-line one (e.g. "Southern Hemisphere Season" next to
     "Riverside Lunch Included"). Because .mfl-property-stats itself
     is left at the grid default (stretch), every cell's own box
     still fills its full shared row height -- genuinely uniform,
     no exposed background sliver on either side, ever. Centering the
     CONTENT inside that already-full-height box (rather than
     shrinking the box itself and centering IT) gets the same visual
     goal -- a shorter stat's text no longer top-pins with dead space
     below it -- without the artifact the reverted approach had. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.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;
}
/* Mixed photo/no-photo grids, 2026-09-28: a photo card
   (.mfl-feature-card--photo, ~430-490px with its fixed 200px image) can
   land in the same row as a shorter no-photo card -- either
   .mfl-feature-card--link with neither 'image' nor 'accent_class' set
   (content-shared-waters.php: 3 of 14 waters have no usable photo), or
   a fully plain, unlinked .mfl-feature-card via pat_render_named_card()
   (content-experience-cards.php: an array/string item with no matching
   pat_nearby_experience() slug, e.g. Non-Angling Adventures' "Museo
   Leleque", mixed with 5 real, photo-opted-in experience slugs).
   .mfl-feature-grid has no align-items override, so the default grid
   stretch made every no-photo card match its row's tallest photo-card
   neighbor -- confirmed live on BOTH grids before this rule existed:
   Shared Waters' Corcovado card stretched to 485.6px against ~272px of
   actual content (a uxui-platform-expert vet finding on the Shared
   Waters ship); Non-Angling Adventures' Museo Leleque card stretched
   to the identical 485.6px against only ~239.6px of content, an even
   larger gap, found by checking this same grid pattern elsewhere after
   fixing the first one. Written as a general :has() rule rather than
   scoped to one grid's own class (as the first, narrower version of
   this fix was) specifically so it also covers this second, structurally
   identical case with no second rule, and so a third combination
   anywhere else in the theme self-heals rather than needing its own
   vet-panel catch. :has(.mfl-feature-card--photo) means the selector
   only ever matches a grid that actually contains a photo card --
   inert (matches nothing) on every other .mfl-feature-grid in the
   theme, including content-lodge-links-grid.php's stay-card grid
   (every lodge always has a photo, so :not(--photo) never matches
   there) and every mixed-but-photo-less grid (e.g. Rivadavia's own
   "Nearby Experiences", which hasn't opted into show_images). */
.mfl-feature-grid:has(.mfl-feature-card--photo) .mfl-feature-card:not(.mfl-feature-card--photo) {
  align-self: start;
}
/* Grid-size modifiers below are chosen by card count in
   pat_feature_grid_modifier() (functions.php), the one place that maps a
   count to a class, so the default 3-column grid never shows an empty,
   visibly-outlined cell.

   One card: the default repeat(3, 1fr) otherwise leaves two empty tracks
   beside a lone card at any width above the 900px breakpoint. Caps the
   single card at a readable width instead of stretching it across all
   three columns. */
.mfl-feature-grid--single {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}
/* ...and shrinks the box itself to that card (2026-09-24): otherwise the
   box stays full width and its own --line background shows as a lighter
   band on both sides of the card (measured on Rivadavia's 1-card room
   grid at a 1024px viewport: box 48-961px, card 264-744px). fit-content
   sizes the box to the 480px track plus its border. Desktop only, so the
   900px breakpoint's full-width one-column layout is untouched. */
@media (min-width: 901px) {
  .mfl-feature-grid--single {
    width: fit-content;
    margin-inline: auto;
  }
}
/* Two or four cards: two full-width columns. Replaces the former --double
   modifier (removed 2026-09-24; its last user was Rivadavia's "Nearby
   Experiences" grid), which capped each track at 480px and centered them,
   so on any section wider than ~962px the grid's own --line background
   showed as a lighter band on both sides of the cards (measured on
   Rivadavia at 1280px: box 48-1217px, cards 152-1113px). 1fr tracks fill
   the box, so there's no leftover to show. The 900px breakpoint's
   single-column rule in responsive.css (loaded after this file) still
   overrides this on small screens. */
.mfl-feature-grid--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Six-track system for any card count the default 3-per-row grid can't
   fill evenly (pat_feature_grid_modifier(), functions.php, generalized
   2026-09-26 from the original --fives rule, which only worked at
   exactly 5 cards because it keyed on :nth-child(n+4) -- the ABSOLUTE
   child position -- rather than :nth-last-child(), which is why 8, 11,
   and 14-card grids (docs/MFL_Website_Followups.md's "More feature grids
   leave empty cells" WARN) needed a real fix, not just a reused class
   name. Every card spans two of six tracks by default (three per row,
   same visual size as the plain 3-column grid); the trailing cards that
   would otherwise leave a gap widen to span three instead, keyed off the
   END of the list so this works at any total that lands on the same
   remainder. Desktop only, same as the modifiers above; below 901px
   responsive.css's one-column rule applies, and because the spans live
   inside this same media query, none is left over there to create extra
   implicit columns. */
@media (min-width: 901px) {
  .mfl-feature-grid--trailing-pair,
  .mfl-feature-grid--trailing-quad {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mfl-feature-grid--trailing-pair > *,
  .mfl-feature-grid--trailing-quad > * {
    grid-column: span 2;
  }
  /* Count % 3 == 2 (5, 8, 11, 14...): the trailing two cards widen to
     fill the last row -- three across, then two wider. */
  .mfl-feature-grid--trailing-pair > :nth-last-child(-n+2) {
    grid-column: span 3;
  }
  /* Count % 3 == 1 and > 4 (7, 10, 13...; 4 itself uses --pairs above,
     a simpler two-column override with the identical end result): the
     trailing four cards widen to span three each, forming a 2x2 block
     instead of stranding a lone card on its own row. */
  .mfl-feature-grid--trailing-quad > :nth-last-child(-n+4) {
    grid-column: span 3;
  }
}
.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);
}
/* Whole-card click target (2026-09-24, Nearby Experience cards, see
   template-parts/content-experience-cards.php; since 2026-09-25 also the
   lodge cards on Accommodations, content-lodge-links-grid.php's stay cards;
   both render through pat_render_linked_card() in functions.php): the
   card's title link gets a transparent ::after stretched over the entire
   card (the card is already position:relative), so a click anywhere on the
   card follows the link while the <a> stays the single focusable, announced
   element. Opt-in modifier, not a change to every .mfl-feature-card: the
   other title-linked grids (Shared Waters, the water pages' Other Home
   Waters, and on Fly Fishing both the lodge links and How We Fish) keep
   title-only links.
   Keyboard focus draws the ring around the whole card instead of just the
   title text; both rules key on :focus-visible, so a browser without it
   keeps its default focus outline on the link.
   Accepted tradeoff, the usual cost of this pattern: the ::after sits over
   the card's text, so its italic line and summary can't be drag-selected.
   Screen readers still read that text in order, and the link's
   aria-describedby announces it when the link is focused. */
.mfl-feature-card--link .mfl-feature-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.mfl-feature-card--link .mfl-feature-title a:focus-visible {
  outline: none;
}
.mfl-feature-card--link .mfl-feature-title a:focus-visible::after {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
/* In a grid that mixes linked and plain cards (2026-09-24: Non-Angling
   Adventures' "Excursions", Rivadavia's "Nearby Experiences"), a plain
   card doesn't lift, glow, or turn its title gold on hover, because those
   are the linked cards' click cues and a plain card has nowhere to go.
   Its subtle background tint and text brightening stay (the tint's
   colors vary by lodge section).
   Grids of only plain cards keep the full hover; a browser without :has()
   keeps it everywhere. */
.mfl-feature-grid:has(.mfl-feature-card--link) .mfl-feature-card:not(.mfl-feature-card--link):hover {
  box-shadow: none;
  transform: none;
}
.mfl-feature-grid:has(.mfl-feature-card--link) .mfl-feature-card:not(.mfl-feature-card--link):hover .mfl-feature-title {
  color: var(--cream);
}
/* ============================================================
   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-section-lead added 2026-09-24: inline links in lead paragraphs
   (Contact, Fly Fishing, Shared Waters, the experience pages) had no rule
   at all and rendered browser-default blue, rgb(0,0,238), on dark forest.
   ============================================================ */
.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-section-lead a:not(.btn-primary):not(.btn-ghost),
.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-section-lead a:not(.btn-primary):not(.btn-ghost):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);
}

/* ============================================================
   PATAGONIA STAY CARD ACCENTS: photo + top bar for
   pat_render_linked_card()'s optional 'image'/'accent_class'
   (2026-09-26, originally Accommodations-only, Lincoln's request; see
   functions.php and content-lodge-links-grid.php). Extended 2026-09-28
   to the Shared Waters grid (content-shared-waters.php, rendered on
   /fishing/, /caridad/, /rivadavia/, and /futaleufu/) via the new
   .pat-stay-card--water rule below. Opt-in modifiers on
   .mfl-feature-card--link, same shape as that modifier itself: the
   experience cards never set 'image'/'accent_class', so they never get
   this class pair and render exactly as before.

   --photo removes the card's own padding so mfl-feature-img can sit
   flush against all four edges, moving that padding onto a new
   .mfl-feature-card-body wrapper around the title/description (the
   ONLY structural difference from a plain linked card; see
   pat_render_linked_card()'s own docblock for why a non-photo card's
   markup is untouched, not just visually equivalent).

   The accent bar re-lights .mfl-lodge-card.{slug}::before
   (content-lodge-cards.php's "Our Lodges" grid, components.css above)
   verbatim: same 5 colors, same rgba twins, same 90deg gradient. Two
   grids, one color-per-lodge mapping; keep them in sync if either
   changes. That grid's own image is 280px tall on a uniform 2-column
   layout; this one is a shorter 200px, sized for the 5-lodge grid's
   (--trailing-pair modifier) narrower top-row cards (which still carry
   a title, italic tagline
   and stay_summary below the photo, unlike that grid's larger cards). */
.mfl-feature-card--photo {
  padding: 0;
}
.mfl-feature-card-body {
  padding: 40px 32px;
}
.mfl-feature-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.mfl-feature-card--photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  /* Decorative only: never intercepts the whole-card click target
     (.mfl-feature-card--link's own title-link ::after, stretched with
     inset:0 over the same card) even where the two 3px-tall regions
     overlap at the very top edge. */
  pointer-events: none;
}
.pat-stay-card--caridad::before {
  background: linear-gradient(90deg, var(--gold), rgba(216,169,78,0.2));
}
.pat-stay-card--rivadavia::before {
  background: linear-gradient(90deg, var(--sky), rgba(127,158,196,0.2));
}
.pat-stay-card--futaleufu::before {
  background: linear-gradient(90deg, var(--sage), rgba(95,158,151,0.2));
}
.pat-stay-card--carrileufu::before {
  background: linear-gradient(90deg, var(--copper), rgba(192,102,78,0.2));
}
.pat-stay-card--trevelin::before {
  background: linear-gradient(90deg, var(--welsh-green), rgba(157,181,107,0.2));
}
/* Shared Waters cards (content-shared-waters.php, 2026-09-28): unlike
   the 5 lodges, individual rivers/lakes have no established per-water
   brand color in this theme's data model, so every water photo card
   shares one accent -- the site's universal gold, same recipe as
   Caridad's above -- rather than inventing 14 arbitrary colors with no
   real identity behind them. */
.pat-stay-card--water::before {
  background: linear-gradient(90deg, var(--gold), rgba(216,169,78,0.2));
}

/* ============================================================
   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);
}
/* Per-property context (2026-08-27): the "What's Included"/"Not
   Included"/"Unique to This Lodge"/"Add-Ons" rows inside
   template-parts/content-property-facts.php sit INSIDE the very
   .pat-facts--{slug} section the rest of this file's per-property
   rules already tint, but this component predates that work
   (2026-08-25) and was never given its own override, so it kept
   showing the generic --hybrid2/--hybrid3 pair regardless of which
   lodge's page it was on, same failure shape the rest of this ship
   fixes elsewhere (uxui-platform-expert finding, same day: a live,
   visible color clash on Futaleufu/Trevelin specifically, since a cool
   hybrid-blue row inside a warm burgundy/olive section reads as
   "wrong," not just "generic": see the ".mfl-section .mfl-amenity-item"
   /".mfl-booking-option .mfl-amenity-item" rules above for the
   existing, pre-2026-08-25 precedent this mirrors exactly: a
   context-scoped override on the same base component, not a new
   mechanism. */
.pat-facts--caridad .mfl-amenity-item {
  background: var(--forest2);
}
.pat-facts--caridad .mfl-amenity-item:hover {
  background: var(--forest3);
}
.pat-facts--carrileufu .mfl-amenity-item,
.pat-facts--futaleufu .mfl-amenity-item {
  background: var(--burgundy2);
}
.pat-facts--carrileufu .mfl-amenity-item:hover,
.pat-facts--futaleufu .mfl-amenity-item:hover {
  background: var(--burgundy3);
}
.pat-facts--trevelin .mfl-amenity-item {
  background: var(--olive-bg2);
}
.pat-facts--trevelin .mfl-amenity-item:hover {
  background: var(--olive-bg3);
}

/* ============================================================
   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;
  /* Fixed at 2 columns, not repeat(3, 1fr), 2026-09-29: both of this
     grid's only two callers (page-contact-us.php, page-book-now.php)
     hardcode exactly 2 .mfl-contact-card children ("Call Us" and
     "Email," never a loop over dynamic data) -- a 3-column grid
     definition permanently leaves a 3rd, empty bordered cell on EVERY
     page load, not an edge case like an odd COUNT in a grid built for
     variable content. Confirmed live before this fix: the grid's own
     graph-paper background (var(--line)) showed through that empty
     cell as a visibly lighter rectangle beside "Email," on both pages.
     If a genuine 3rd contact method is ever added to BOTH call sites,
     change this back to repeat(3, 1fr) at the same time. */
  grid-template-columns: repeat(2, 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 {
  /* var(--gold-light) corrected to the theme's real var(--gold-lt),
     2026-09-29 (sitewide accessibility sweep, part 2): this theme never
     defines --gold-light (only MFL's own Dark Forest palette uses that
     full-word spelling; this fork's own token is the abbreviated
     --gold-lt, already the established hover-brighten color at 13+
     other sites in this file, e.g. .mfl-experience-card:hover
     .mfl-experience-name / .mfl-season-card:hover .mfl-season-title).
     No fallback was ever present, so this was invalid at computed-value
     time on an inherited property (color) -- on hover it silently fell
     back to whatever color this link's ancestor (.mfl-contact-card)
     inherits, not the intended brightened gold. Reachable on both
     page-contact-us.php and page-book-now.php. */
  color: var(--gold-lt);
}
.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);
}
/* Trevelin's "Meet Your Hosts" founder cards are the only current
   consumer of .mfl-team-card (grepped 2026-08-27: no other page uses
   it), so the base rule above's --forest2 was never neutral for it:
   it's a specific WRONG family's color under an olive-tinted page,
   not just a generic mismatch (uxui-platform-expert finding, same
   day). Scoped override rather than changing the base rule itself, which
   keeps .mfl-team-card's own default intact for a future non-Trevelin
   reuse, matching this file's own established
   ".pat-facts--{slug} .mfl-feature-card"/".mfl-amenity-item" pattern. */
.pat-facts--trevelin .mfl-team-card {
  background: var(--olive-bg2);
}
.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/video background with dark overlay
   ============================================================
   Applied to .mfl-hero--subpage.mfl-hero--photo. The hero-bg div gets an
   absolutely-positioned <img> (pat_hero_photo_bg()) or, since 2026-09-09,
   a <video> (pat_hero_video_bg()) per template -- both fill the box the
   same way (position:absolute;inset:0;object-fit:cover), so this
   selector doesn't care which one it is. The overlay is handled here via
   a pseudo-element so the media remains visible but text stays legible
   on the dark forest brand palette. (This comment previously said
   "inline background-image" -- stale since both helpers switched to a
   real element long before this file was last touched; corrected while
   pat_hero_video_bg()'s own docblock was already citing this exact
   selector, so the two should stay in sync.)
*/
/* 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;
}
/* Rivadavia's hero plays a real 1920x1080 video (pat_hero_video_bg(),
   this theme's first video hero -- page-rivadavia.php) instead of a
   still photo, and the 420px floor above -- shared by every OTHER
   subpage's hand-cropped still photo -- crops far more of a video
   frame than any of those photos ever lose. object-fit:cover crops
   top+bottom whenever the box is relatively wider than the media: at
   a common 1280px-wide desktop viewport this hero's ~2.5:1 box vs.
   the video's native 1.78:1 threw away ~28% of the vertical frame,
   clipping most of the establishing sky/mountain view visible in
   assets/video/lodges/rivadavia/hero-poster.jpg down to a tight
   middle band (Lincoln, 2026-09-10: "zoom out a bit on the video...
   or make that hero section background larger" -- taller IS the zoom
   fix here; a CSS transform can't reveal pixels object-fit:cover
   already cropped away, only a taller box gives the video more room
   before cover has to crop). 640px cuts that crop to ~10% at the same
   viewport width. Scoped to this one page via .pat-hero--rivadavia
   (the .pat-facts--{slug} naming convention already used elsewhere in
   this file) rather than raising .mfl-hero--photo's own floor, so no
   other subpage's already-well-cropped still-photo hero is affected.

   Deliberately a SINGLE-class selector, not `.mfl-hero--photo.pat-hero--
   rivadavia` -- that compound form was tried first and shipped a real
   regression, caught live via a mobile-viewport check right after
   deploy: its higher specificity (0,0,2,0) beat responsive.css's
   ≤900px/≤600px `.mfl-hero--subpage`/`.mfl-hero` overrides (each
   0,0,1,0) at EVERY viewport width, since specificity comparison
   isn't scoped by media query -- 640px was winning on a 375px phone
   too. Kept single-class (0,0,1,0, tying `.mfl-hero--photo` above) so
   the win is by cascade ORDER instead: this file loads before
   responsive.css (functions.php's wp_enqueue_style() deps chain --
   mfl-responsive depends on mfl-components), so responsive.css's
   narrower-width rules still legitimately out-cascade this one at
   ≤900px/≤600px, restoring the smaller floors there. Don't "clean
   this up" into a compound selector without re-adding matching
   ≤900px/≤600px overrides in responsive.css first.

   Not mirrored into those narrower breakpoints on purpose, not just
   left alone by omission: at those widths the hero box is already
   TALLER relative to its width than the video (portrait-ish), so
   cover crops the video's SIDES instead of its top/bottom -- the full
   vertical frame already shows there, and raising the height further
   would only narrow the box's aspect ratio more and crop MORE off the
   sides, the opposite of what this fix is for. */
.pat-hero--rivadavia {
  min-height: 640px;
}
.mfl-hero--photo .mfl-hero-texture {
  opacity: 0.4; /* subtle linen over photo, not competing */
}
/* Dark outline + glow on hero copy over a photo background. The gradient
   overlay above guarantees AVERAGE contrast holds, but a photo's luminance
   varies pixel-to-pixel: a bright cloud/sky/water highlight directly
   behind an individual glyph can still measure well under WCAG's 3:1
   large-text floor even where the region-average passes comfortably
   (2026-09-03 vet finding, uxui-platform-expert: worst-pixel sampling
   found contrast as low as 1.58:1 against --cream despite an
   average-based reading of 3.45-7.82:1 at the same widths, and the overlay
   gradient's own weakest point, 30% opacity at 40% down, lands almost
   exactly where the H1 sits).
   A FIRST attempt here used only a soft blurred drop-shadow
   (0 1px 3px + 0 4px 20px). Re-verified against the live page and found
   INSUFFICIENT: a blurred shadow's opacity falls off with distance from
   the glyph and is centered mostly behind the glyph itself rather than
   forming a solid ring at the edge, so it still measured as low as
   2.14:1 (cream) and 1.40:1 (gold "Rates") at some widths, still under
   the 3:1 floor it was meant to fix.
   Fixed by adding a genuine solid outline: four zero-blur, high-opacity
   shadows offset in each cardinal direction form a true dark ring
   immediately touching every glyph edge, at essentially full opacity
   (no blur falloff to dilute it), which holds regardless of what's
   behind that pixel, so unlike raising the overlay's opacity it doesn't
   need re-tuning per photo. The original soft shadow/glow is kept
   underneath for depth so the outline doesn't read as a hard sticker
   edge. Applies to every .mfl-hero--photo hero, --subpage or not, since
   the .mfl-hero-sub frosted-chip background below is --subpage-only and
   never covers .mfl-hero-eyebrow/-h1 either way.
   A SECOND round of scrutiny (brand-console-guardian, real screenshots
   at desktop/mobile/6x macro zoom on the two brightest hero photos in
   the fleet) found this outline, at full 0.85 opacity and zero blur,
   reads fine at normal browsing scale but resolves at close inspection
   into a hard, continuous black ring around each glyph: more "decal/
   coloring-book" than the halo WCAG's own G18/G148 technique calls
   for, and out of step with this brand's documented "elevated,
   authentic Montana, not resort Montana" positioning. TWO successive
   attempts to soften it (0.6px blur/0.6 opacity, then 0.35px blur/0.72
   opacity) were each re-verified with the same worst-pixel methodology
   and each measurably eroded the safety margin instead of holding it:
   the first left the gold "Rates" em at a razor 3.30-3.33:1 on this
   theme's own Packages photo (only ~10% above the floor), and the
   second, meant to compensate, actually dropped below 3:1 outright at
   2 widths (2.75-2.86:1) on the SAME photo/breakpoint pair, because
   less blur reaches less far under a thin stroke (a serif "t"
   crossbar, an italic "e") than the opacity increase could make up
   for. This isn't a fixed constant to tune once; it's photo- and
   glyph-shape-dependent, and a soft-shadow-only reformulation didn't
   converge on a value both safe AND visibly soft across the real
   photos this fix has to survive. Reverted to the full-strength values
   below (already independently re-verified at 9.0-16.4:1 on this site
   and 6.7-13.9:1 on the MFL sibling before any softening was
   attempted) rather than ship a self-measured accessibility
   regression for a subjective visual preference. The brand concern is
   real and disclosed, not silently dropped: softening this further
   safely would need a different lever than the outline's own
   opacity/blur, e.g. a stronger glow underneath (the two layers below
   already do that job, just not enough on their own) or moving the
   crop/photo choice off this specific bright patch, not a blind
   pixel-value cut. */
.mfl-hero--photo .mfl-hero-owner,
.mfl-hero--photo .mfl-hero-eyebrow,
.mfl-hero--photo .mfl-hero-h1,
.mfl-hero--photo .mfl-hero-sub {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85),
     1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85),
     1px  1px 0 rgba(0,0,0,0.85),
     0     0  6px rgba(0,0,0,0.6),
     0     4px 20px rgba(0,0,0,0.45);
}

/* ============================================================
   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;
  /* var(--gold-dark) corrected to the theme's real var(--gold-dk),
     2026-09-29 (an accessibility sweep finding, see .mfl-form-input:
     focus below for the more serious sibling instance of this same
     typo): this theme never defines --gold-dark (only MFL's own Dark
     Forest palette does -- a copy/paste leftover), so this rule was
     silently falling back to MFL's #9e8f5f shade rather than
     Patagonia's own --gold-dk (#a87d2f) or failing outright. */
  color: var(--gold-dk);
}
.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;
  }
}

/* Optional CC/third-party attribution line, pat_photo_strip()'s
   $credit_html param (2026-09-27). Kept as small, muted fine print --
   present only when a strip mixes in photography that isn't the lodge's
   own confirmed-rights sourcing and needs a visible credit. */
.mfl-photo-strip-credit {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  text-align: right;
}
.mfl-photo-strip-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(200,185,138,0.4);
  text-underline-offset: 2px;
}
.mfl-photo-strip-credit a:hover,
.mfl-photo-strip-credit a:focus-visible {
  color: var(--gold, #c8b98a);
}

/* ============================================================
   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, ad click id/UTM captured natively.
*/
.mfl-form-label {
  display: block;
  font-family: var(--font-body);
  font-size:  12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* var(--gold-dark) corrected to var(--gold), 2026-09-29 (accessibility
     sweep). The undefined var had no fallback, so this declaration was
     invalid at computed-value time and (color being an inherited
     property) fell back to the inherited --cream instead of gold.
     The direct swap would be --gold-dk (the var this typo clearly meant
     -- it's the fix used everywhere else in this sweep), but --gold-dk
     on this form's --forest2 background computes to only ~4.1:1 for
     this 12px/400-weight text -- just under the 4.5:1 AA floor (WCAG
     1.4.3). --gold computes to ~7.1:1 here, so it's used instead;
     --gold-dk remains the correct token at the other, higher-contrast
     call sites this sweep touched. */
  color: var(--gold);
  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 {
  /* var(--gold-dark) corrected to the real var(--gold-dk), 2026-09-29
     (accessibility sweep, WCAG 2.4.7 Focus Visible). The undefined var
     had no fallback, so this declaration was invalid at computed-value
     time; border-color (non-inherited, initial value currentcolor)
     fell back to this input's own text color instead. Confirmed live
     in a real browser (not just read from spec) that the border DID
     change on focus -- from resting --forest4 to an ACCIDENTAL
     near-white cream (matching --cream, this input's `color`) -- so
     the pre-fix defect was a wrong, unbranded, fragile focus color
     (silently tied to whatever `color` happens to be), not a fully
     absent one. Real getComputedStyle checks of this exact rule must
     wait out the 0.2s transition above before reading -- reading
     synchronously after .focus() captures the transition's start
     value, not its target, and produces a false "unchanged" result. */
  border-color: var(--gold-dk);
}
.mfl-form-input:focus-visible {
  /* Added 2026-09-29 alongside the fix above: a single 1px border
     recolor is thinner than every other focus-visible treatment in
     this file (.mfl-info-btn, .mfl-lodge-pill, .mfl-photo-strip-scroll
     all pair their gold border/outline change with a real 2px ring).
     Matches that convention so the now-correctly-branded focus signal
     on this form's fields is unambiguous, not just technically present. */
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.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;
  }
}
/* Left-aligned variant (2026-09-24): the experience pages' back-link row
   (page-templates/experience-detail.php) reuses this wrapping row and its
   phone-size buttons, aligned with the prose above it instead of
   centered. */
.mfl-sibling-nav-buttons--start {
  justify-content: flex-start;
}

/* ════════════════════════════════════════════════════════════════════
   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;
}
/* Odd-remainder property count, 2026-09-29 (same sweep, same family as
   .mfl-lodges-grid's fix a few sections up in this file): this grid's
   sole caller (content-package-cards.php, via the .pat-pkg-cards--
   singles modifier below) loops over pat_all_properties() too -- 5
   lodges today, which % 3 leaves 2 in the final row of this 3-column
   grid, stranding the 5th card alone with an empty bordered slot
   beside it (confirmed live on page-packages.php: .mfl-pkg-card has
   its own solid background/border, so the gap read as a visibly
   missing 3rd card, not just a subtle tint).
   This theme already has a general solution for "a fixed N-column
   grid whose item count isn't a clean multiple of N" --
   pat_feature_grid_modifier() / .mfl-feature-grid--trailing-pair
   (functions.php, further down this file) -- which handles this exact
   remainder (count % 3 == 2) by switching the WHOLE grid to 6 tracks
   and giving the trailing TWO cards an even split (:nth-last-child
   (-n+2) { grid-column: span 3 }, each getting half the remaining
   space). Deliberately NOT reused verbatim here, for two reasons: (1)
   the base .mfl-pkg-cards rule above declares an asymmetric
   1fr/1.15fr/1fr "wider middle tier" layout (for a DIFFERENT, still-
   dead caller -- content-calculator.php's unwired "Signature Multi-
   Lodge Package" -- see that file), which the 6-track approach would
   flatten on every full row; (2) even setting that aside,
   .pat-pkg-cards--singles (the modifier this grid's one LIVE caller
   actually uses, a few rules down) overrides the base columns to
   uniform repeat(3, 1fr) specifically because "none of these 5 need"
   a featured middle card (that modifier's own comment) -- so for the
   live case there'd be nothing asymmetric to preserve, but reusing
   the exact 6-track/even-split mechanism was still judged unnecessary
   complexity for one grid. Instead: :last-child:nth-child(3n+2) gives
   ONLY the trailing card a double-width span (the 2nd-to-last stays
   at its normal single-column width) -- a deliberate 1:2 split, not
   an even one, chosen because it live-verified (page-packages.php) as
   reading like an intentional "featured last card" treatment, the
   same positive result .mfl-lodges-grid's identical asymmetric
   treatment produced. This identifies "the final card, when the total
   count leaves a remainder of 2" (5, 8, 11...) the same way .mfl-
   property-stat's own :last-child:nth-child(odd) identifies an odd
   total in a 2-column grid -- no PHP count check needed, self-heals
   if a 6th partner lodge is ever added (6 % 3 = 0, rule stops
   matching). The 3n+1 sibling rule below covers the OTHER remainder
   shape (a single lone trailing card, e.g. 4 or 7 properties) for the
   same reason pat_feature_grid_modifier() handles both cases --
   unreached by today's count of 5, kept for whenever the roster
   changes again. */
.mfl-pkg-card:last-child:nth-child(3n+1) {
  grid-column: 1 / -1;
}
/* min-width: 901px guard on the span-2 rule ONLY, 2026-09-29 (a
   verification-skeptic BLOCK, reproduced in real headless Chrome
   before this fix): unlike `grid-column: 1 / -1` above (safe at any
   column count -- -1 resolves to whatever the LAST explicit line is,
   so in the 1-column mobile grid it just occupies that one column,
   confirmed empirically), `grid-column: span 2` unconditionally asks
   for 2 tracks. At the <=900px breakpoint both .mfl-pkg-cards and its
   .pat-pkg-cards--singles override collapse to a single explicit
   column (this file, .mfl-pkg-cards; also mirrored in responsive.css)
   -- with only 1 explicit track, `span 2` forces the grid to create a
   2nd, IMPLICIT column to satisfy it, and that implicit column then
   exists for every row, not just the trailing one: cards 1-4 (which
   have no explicit grid-column of their own) auto-place two-per-row
   into it instead of each stacking full width. Reproduced: without
   this guard, 5 cards render as two paired rows (316px+164px each)
   plus one full-width trailing card, instead of 5 clean full-width
   stacked cards. Exactly the reason .mfl-feature-grid--trailing-pair/
   --trailing-quad (further down this file) already wrap their own
   `span` rules in this same breakpoint -- that precedent was cited
   when this rule was first written, but its OWN media guard wasn't
   copied along with it. Fixed by copying it now. */
@media (min-width: 901px) {
  .mfl-pkg-card:last-child:nth-child(3n+2) {
    grid-column: span 2;
  }
}
.mfl-pkg-card {
  /* var(--forest-3) corrected to the real var(--forest3), 2026-09-29
     (sitewide accessibility sweep, part 2): this theme never defines
     --forest-3 (only MFL's own Dark Forest palette uses that hyphenated
     spelling). The fallback hex was ALSO MFL's own --forest3 value
     (#1a3523, a dark green) rather than this theme's real --forest3
     (#16353f, a dark teal) -- so this rule rendered, it just rendered
     the wrong brand color on every package card on page-packages.php.
     --forest3 is already used bare (no fallback needed) elsewhere in
     this file paired with cream text, e.g. variables.css:555 -- kept a
     fallback here only to match this block's own existing
     var(--gold-dk, #9e8f5f) convention two lines down. */
  background: var(--forest3, #16353f);
  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 below carries the identical --forest-3 typo
   (investigated 2026-09-29, same sweep) but is NOT fixed here: this
   class, and every .mfl-compare- or .mfl-lodge-btn[data-lodge=] rule
   further down this file, is applied ONLY by template-parts/
   content-calculator.php -- confirmed via a repo-wide grep for
   get_template_part( 'template-parts/content-calculator' ) to have
   zero call sites anywhere in this theme. That file is MFL's own
   original, unconverted "Packages & Rates" calculator (its own
   docblock: "three editorial decision cards (MFL . Dual . SFL)",
   hardcoded data-lodge="mfl"/"sfl" -- Montana properties, not any of
   Patagonia's five lodges) kept only as the pattern content-single-
   lodge-calculator.php (the real, live calculator) was modeled after;
   it is never rendered on any live page, the same already-documented
   category as assets/css/yotpo-brand.css (see the 1.0.24 changelog
   entry in functions.php). Left untouched rather than folded into an
   accessibility sweep, matching that same precedent. */
.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%;
  }
}

/* ─── Patagonia Packages page: static card grid ────────────────────
   Reuses every .mfl-pkg-card* rule above (MFL's 3-card picker) as-is.
   These are additive layout overrides ONLY: MFL's own 3-card
   1fr/1.15fr/1fr grid is untouched. See
   template-parts/content-package-cards.php.
   ────────────────────────────────────────────────────────────────── */
.pat-pkg-section { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pat-pkg-group + .pat-pkg-group { margin-top: 8px; }
.pat-pkg-intro { max-width: 720px; }

/* 5 single-lodge cards: 3 across, wrapping to a 2-card second row,
   deliberately NOT MFL's 1fr/1.15fr/1fr (that ratio exists only to
   widen a single signature/center card; none of these 5 need it). */
.pat-pkg-cards--singles {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .pat-pkg-cards--singles {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* Per-lodge card-image tint: same gradient TREATMENT as MFL's .mfl/
   .sfl/.dual variants (no photography, just a darkened forest-palette
   gradient behind the kicker/name label), tinted per lodge via each
   property's own already-defined --{slug}-accent custom property
   (assets/css/variables.css) rather than 5 new hardcoded hex pairs. */
.mfl-pkg-card-img[class*="pat-pkg-card-img--"] {
  background:
    linear-gradient(180deg, rgba(10,23,27,0.1) 40%, rgba(10,23,27,0.92) 100%),
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
}
.pat-pkg-card-img--caridad    { background-color: var(--caridad-accent); }
.pat-pkg-card-img--rivadavia  { background-color: var(--rivadavia-accent); }
.pat-pkg-card-img--futaleufu  { background-color: var(--futaleufu-accent); }
.pat-pkg-card-img--carrileufu { background-color: var(--carrileufu-accent); }
.pat-pkg-card-img--trevelin   { background-color: var(--trevelin-accent); }

.pat-pkg-custom-note {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.95rem;
  line-height: 1.7;
}
.pat-pkg-custom-note a { color: var(--gold, #c8b98a); text-decoration: underline; }

/* ─── 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); }

/* Multi-lodge picker (page-contact-us.php) — same button-pill visual
   idiom as .mfl-nights-btn above (this theme has no checkbox/multi-select
   component anywhere), but a SEPARATE class: .mfl-nights-btn's own JS
   clears .active from every sibling on click (single-select); these pills
   need several simultaneously active (multi-select, 2+ of 5 lodges). */
.mfl-lodge-pill-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mfl-lodge-pill {
  padding: 10px 18px;
  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;
}
.mfl-lodge-pill:hover {
  background: rgba(216,169,78,0.12);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-lodge-pill:focus-visible {
  outline: 2px solid var(--gold, #c8b98a);
  outline-offset: 2px;
}
.mfl-lodge-pill.active,
.mfl-lodge-pill[aria-pressed="true"] {
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  border-color: var(--gold, #c8b98a);
  font-weight: 600;
}
.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;
}
/* Odd property count, 2026-09-29 (same sweep and family as .mfl-
   lodges-grid's and .mfl-pkg-cards' fixes elsewhere in this file):
   content-single-lodge-calculator.php's "Choose your lodge" tab
   switcher also loops over pat_all_properties() (5 today) in this
   fixed 2-column grid, leaving Trevelin alone in the final row.
   .mfl-lodge-btn is background:transparent by default (only tinted on
   :hover/.active), so this one doesn't leak a stray line-colored
   rectangle the way the bordered card grids did -- confirmed live,
   the empty slot just shows this switcher's own uniform pill
   background, no color-mismatch seam. Still visibly a lone, unpaired
   button versus its paired siblings above it, so it gets the same fix
   for consistency, now consolidated (same day) into the shared rule
   at .mfl-property-stat:last-child:nth-child(odd) further up this
   file -- see that comment for the full technique. */
.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; }
}

/* ─── Patagonia FFL: 5-lodge switcher + per-lodge accent overrides ──
   MFL's .mfl-lodge-switcher/.mfl-lodge-btn (above) are reused verbatim
   for structure/hover/active states; these rules only (a) widen the
   switcher's grid from MFL's fixed 2-up to a 5-lodge-friendly wrap, and
   (b) supply the per-lodge accent color MFL's own [data-lodge="mfl"] /
   [data-lodge="sfl"] mark-color rules can't, since Patagonia's slugs
   never match those two literal values. Colors reuse the SAME
   --{slug}-accent vars already defined in variables.css for
   content-package-cards.php's .pat-pkg-card-img--{slug} — one accent
   per lodge, not five new hex pairs. See
   template-parts/content-single-lodge-calculator.php. */
.pat-lodge-switcher {
  /* 330px, not MFL's audited 260px minimum (components.css, "Single-
     Lodge switcher" mobile-audit comment above): Patagonia's button
     content runs longer than MFL's bare "MFL"/"SFL" + short sub-line
     (a full lodge name, a longer tagline, and a "Rates on request"
     price string that can't wrap), so it needs the same ~330px/button
     floor that comment already established for less content than this. */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  justify-content: center;
}
@media (max-width: 700px) {
  .pat-lodge-switcher { grid-template-columns: 1fr; }
}

.pat-lodge-btn-mark--caridad,
.pat-lodge-btn-mark--carrileufu,
.pat-lodge-btn-mark--futaleufu,
.pat-lodge-btn-mark--rivadavia,
.pat-lodge-btn-mark--trevelin {
  color: var(--cream, #e8e0d0);
  border: 1px solid rgba(232,224,208,0.25);
}
.pat-lodge-btn-mark--caridad    { background: linear-gradient(135deg, var(--caridad-accent), rgba(8,15,11,0.55)); }
.pat-lodge-btn-mark--carrileufu { background: linear-gradient(135deg, var(--carrileufu-accent), rgba(8,15,11,0.55)); }
.pat-lodge-btn-mark--futaleufu  { background: linear-gradient(135deg, var(--futaleufu-accent), rgba(8,15,11,0.55)); }
.pat-lodge-btn-mark--rivadavia  { background: linear-gradient(135deg, var(--rivadavia-accent), rgba(8,15,11,0.55)); }
.pat-lodge-btn-mark--trevelin   { background: linear-gradient(135deg, var(--trevelin-accent), rgba(8,15,11,0.55)); }
.mfl-lodge-btn.active [class*="pat-lodge-btn-mark--"] {
  border-color: var(--gold, #c8b98a);
}

/* Calculator-panel badge + title accent, mirroring .mfl-calc-badge.mfl/
   .mfl-calc-title.sfl (calculator.css) for lodges whose slug isn't
   literally "mfl"/"sfl". */
.pat-lodge-badge--caridad,
.pat-lodge-badge--carrileufu,
.pat-lodge-badge--futaleufu,
.pat-lodge-badge--rivadavia,
.pat-lodge-badge--trevelin {
  background: rgba(232,224,208,0.06);
}
.pat-lodge-badge--caridad    { color: var(--caridad-accent);    border: 1px solid var(--caridad-accent); }
/* --carrileufu-accent (--copper, #c0664e) measures 4.02:1 against this
   badge's own composited background — below WCAG AA's 4.5:1 floor for
   normal-size text (confirmed live via PageSpeed Insights + a direct
   getComputedStyle contrast check, 2026-09-22 SEO audit). --copper-lt
   is the theme's own existing lighter variant of the same color family
   (5.61:1, passes) — not a new color. Both text AND border use
   --copper-lt here (a 2026-09-22 vet-panel follow-up: an earlier pass
   kept the border at the darker --carrileufu-accent to preserve "the
   true brand accent," which correctly cleared WCAG's separate, lower
   3:1 non-text floor, but produced a visibly two-tone badge — the only
   one of the 5 lodges whose text and border colors don't match. Since
   --copper-lt clears the text floor with margin (well above the border's
   3:1 requirement too), using it for both restores the single-tone
   pattern every other lodge badge already follows). No other lodge's
   badge needed a contrast override — carrileufu is the only one of the
   5 using --copper here; the other 4 share --olive, which already
   passes at 5.99:1. */
.pat-lodge-badge--carrileufu { color: var(--copper-lt); border: 1px solid var(--copper-lt); }
.pat-lodge-badge--futaleufu  { color: var(--futaleufu-accent);  border: 1px solid var(--futaleufu-accent); }
.pat-lodge-badge--rivadavia  { color: var(--rivadavia-accent);  border: 1px solid var(--rivadavia-accent); }
.pat-lodge-badge--trevelin   { color: var(--trevelin-accent);   border: 1px solid var(--trevelin-accent); }

.pat-lodge-title--caridad em    { color: var(--caridad-accent); }
.pat-lodge-title--carrileufu em { color: var(--carrileufu-accent); }
.pat-lodge-title--futaleufu em  { color: var(--futaleufu-accent); }
.pat-lodge-title--rivadavia em  { color: var(--rivadavia-accent); }
.pat-lodge-title--trevelin em   { color: var(--trevelin-accent); }

/* ─── Patagonia FFL: Multi-Lodge Experience illustrative-length tags ─
   Used by template-parts/content-multi-lodge-experience.php for the
   10N/14N lengths, which are genuinely illustrative (not yet vetted
   with partner lodges the way the 7N pairing is) — see that file's own
   docblock. */
.pat-ml-illustrative-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  background: rgba(216,169,78,0.1);
  border: 1px solid rgba(216,169,78,0.3);
  border-radius: 100px;
  vertical-align: middle;
}
.pat-ml-alt-note {
  margin-top: 28px;
  padding: 16px 20px;
  background: rgba(216,169,78,0.05);
  border: 1px solid rgba(216,169,78,0.2);
  border-left: 3px solid var(--gold-dk, #9e8f5f);
  border-radius: 4px;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.9rem;
  line-height: 1.65;
}
.pat-ml-alt-note strong { color: var(--gold, #c8b98a); }

/* Multi-Lodge Experience timeline: per-leg step coloring. Mirrors
   calculator.css's own .ctx-sfl/.ctx-mfl/.ctx-transfer pattern (step
   background + hover + node border-color + lodge-label text color),
   which ONLY covers MFL's two fixed lodges — content-multi-lodge-
   experience.php's ctx values are positional (1st/2nd/3rd/4th leg of
   an itinerary), not tied to one specific lodge across all 3 lengths
   (e.g. ctx-a is Futaleufu in the 7N variant but Caridad in the 10N
   variant), so these 4 colors are a generic sequence for visual
   distinction between legs, not a lodge-identity palette. */
.mfl-t-step.ctx-a { background: var(--forest2, #102831); }
.mfl-t-step.ctx-a:hover { background: var(--forest3, #16353f); }
.mfl-t-step.ctx-b { background: var(--marine2, #0a1a24); }
.mfl-t-step.ctx-b:hover { background: var(--marine3, #102839); }
.mfl-t-step.ctx-c { background: var(--olive-bg, #14150e); }
.mfl-t-step.ctx-c:hover { background: var(--olive-bg2, #1c1e13); }
.mfl-t-step.ctx-d { background: var(--burgundy2, #1a0c10); }
.mfl-t-step.ctx-d:hover { background: var(--burgundy3, #261218); }
.mfl-t-step.ctx-a .mfl-t-node { border-color: var(--gold, #c8b98a); }
.mfl-t-step.ctx-b .mfl-t-node { border-color: var(--sage, #5c8a6e); }
.mfl-t-step.ctx-c .mfl-t-node { border-color: var(--copper, #c0664e); }
.mfl-t-step.ctx-d .mfl-t-node { border-color: var(--olive-lt, #c3bd85); }
.mfl-t-lodge.a { color: var(--gold, #c8b98a); }
.mfl-t-lodge.b { color: var(--sage, #5c8a6e); }
.mfl-t-lodge.c { color: var(--copper, #c0664e); }
.mfl-t-lodge.d { color: var(--olive-lt, #c3bd85); }

/* ─── 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;
}
#shared-waters {
  scroll-margin-top: 100px;
}
#where-youll-stay {
  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;
}