/* ============================================================
   THE CONFLUENCE COLLECTION: CSS CUSTOM PROPERTIES
   From theme-test.html prototype lines 26-81
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+3:wght@300;400;600&display=swap');

:root {
  /* === FOREST: this theme's PRIMARY background token family.
     Despite the name (inherited verbatim from MFL's clone, see
     ~/mfl/website/CLAUDE.md's "keep .mfl- / --forest class and
     variable names, redefine values" convention), --forest/--forest2/--forest3/--forest4/
     --forest-deep is what body{} and 54 rules in components.css
     actually consume as the site's real background scale: it is NOT
     scoped to "MFL-only" chrome. Redefining these 5 values (not their
     names) is what actually repaints the whole component library for
     Patagonia; a separate same-named alias family below exists only
     for semantic clarity in NEW Patagonia-authored code, it does not
     drive components.css.
     PATAGONIA: glacial water + Andean stone (was MFL's forest green) */
  --forest:       #0a171b;
  --forest2:      #102831;
  --forest3:      #16353f;
  --forest4:      #1d434e;
  --forest-deep:  #050c0e;

  /* === PATAGONIA: semantic alias for the family above, same values.
     Use this name in new Patagonia-authored templates/partials; use
     --forest* only where matching pre-existing cloned MFL code. === */
  --patagonia:       #0a171b;
  --patagonia2:      #102831;
  --patagonia3:      #16353f;
  --patagonia4:      #1d434e;
  --patagonia-deep:  #050c0e;

  /* === HYBRID / MARINE / BURGUNDY: inherited from the MFL clone,
     multi-property-umbrella concepts that don't apply to a single
     Patagonia site (5 partner LODGES share one site, not one lodge
     spanning multiple brand sub-identities like MFL/SFL/BFL do).
     Left defined (harmless, unused) rather than deleted, in case a
     later pass wants distinct per-partner-lodge accent scales. === */
  --hybrid:       #0d1218;
  --hybrid2:      #0f1e22;
  --hybrid3:      #121f25;
  --hybrid4:      #15252b;
  --hybrid-deep:  #080c10;

  --marine:       #060d12;
  --marine2:      #0a1a24;
  --marine3:      #102839;
  --marine4:      #16334a;
  --marine5:      #1c3f5a;

  /* === BURGUNDY: ACTIVATED 2026-08-25 for the per-property accent pass
     below (this is the "later pass" the prior comment anticipated).
     Values kept exactly as inherited from the MFL clone (a good, tasteful
     dark maroon-black scale needing no redesign), retitled to a real
     Patagonia reference: the ember-red of a quincho fire, the outdoor
     grill/asado structure Carrileufu's own content describes ("classic
     roasted lamb prepared in the quincho on weekends"). Used as the
     section background for Carrileufu and Futaleufu (both Lincoln's
     "Burgundy" family properties). See components.css's
     .pat-facts--carrileufu / .pat-facts--futaleufu rules. */
  --burgundy-deep:#080405;
  --burgundy:     #0f0709;  /* asado ember */
  --burgundy2:    #1a0c10;
  --burgundy3:    #261218;
  --burgundy4:    #311820;
  --burgundy5:    #3d1e28;  /* the undertone glow used behind Caridad's section */

  /* === SHARED ACCENTS: values swapped for Patagonia; MFL's were
     #c8b98a/#5c8a6e/#c87a6a. See docs/patagonia-property-content.md
     for the source material these colors were chosen to sit behind. */
  --gold:         #d8a94e;  /* coirón: Patagonian steppe bunchgrass in late sun, not Montana brass */
  --gold-lt:      #eec87b;
  --gold-dk:      #a87d2f;
  --sage:         #5f9e97;  /* glacial jade, the Futaleufú/Rivadavia meltwater color */
  --sage-lt:      #82c0b8;
  --sage-dk:      #3d7770;
  --copper:       #c0664e;  /* lenga-in-autumn / condor-rock rust */
  --copper-lt:    #d6836b;
  --copper-dk:    #8a4534;
  --olive:        #a6a05f;  /* guanaco hide: steppe scrub, added 2026-08-25 for the per-property accent pass */
  --olive-lt:     #c3bd85;
  --olive-dk:     #756f3f;
  --sky:          #7f9ec4;  /* Andean sky: Rivadavia's original accent before the 2026-08-25
                                reassignment above; reintroduced same day, scoped to the new
                                per-property lodge-card treatment below (content-lodge-cards.php)
                                rather than restoring the old --rivadavia-accent value site-wide. */
  --sky-lt:       #a3bcd9;
  --sky-dk:       #5c7a9e;
  --welsh-green:  #9db56b;  /* Welsh valley green: Trevelin's original accent before the
                                2026-08-25 reassignment, same treatment as --sky above. Used
                                instead of --olive for Trevelin's lodge-card accent specifically:
                                a brand-console-guardian pass found gold/olive (Caridad/Trevelin)
                                only 15° apart on the hue wheel, the tightest of the 5 pairs:
                                --welsh-green sits ~40° from gold, a much cleaner separation,
                                while --olive itself (Trevelin's own page-background identity,
                                "Olive Trail") is untouched everywhere else. */
  --welsh-green-lt: #bccf94;
  --welsh-green-dk: #6f8248;

  /* === OLIVE BACKGROUND: a new, distinct dark scale (not a redefinition
     of --forest) for Trevelin's own section background, added alongside
     --olive above. Structured identically to --forest (deep + 3 steps). */
  --olive-bg-deep: #0e0f08;
  --olive-bg:      #14150e;
  --olive-bg2:     #1c1e13;
  --olive-bg3:     #262819;

  /* === TEXT ===
     --cream-dim powers most body copy on dark forest backgrounds.
     Bumped 0.75 → 0.88 (2026-04-20) for readability on lodge cards
     and anywhere the muted cream was landing too soft against the
     forest gradients. Preserves visual hierarchy (still softer than
     full --cream) but restores contrast. Applied site-wide via the
     token cascade: no per-component edits needed beyond re-pointing
     a couple of hardcoded rgba() values to the variable. */
  --cream:        #e7e3d9;
  --cream-dim:    rgba(231,227,217,0.96);
  --cream-faint:  rgba(231,227,217,0.72);
  --cream-ghost:  var(--cream-faint);

  /* === BORDERS === */
  --line:         rgba(255,255,255,0.07);
  --line2:        rgba(255,255,255,0.12);

  /* === PROPERTY ACCENT COLORS: one per partner lodge. Keys match
     Lodge OS's own property slugs (docs/patagonia-property-content.md).
     Reassigned 2026-08-25 per Lincoln's 5-option-to-5-property mapping
     (each property's own section background, components.css's
     .pat-facts--{slug} rules, is what differentiates the 5 properties
     ON THEIR OWN PAGES now; 4 of 5 share the olive accent here BY
     DESIGN for that per-page use, matching 4 of the 5 approved
     options). Prior values (steppe gold / glacial jade / Andean sky
     #7f9ec4 / Welsh valley green #9db56b) are gone from THESE 5
     variables specifically. If any of those four are wanted back for
     a --{slug}-accent use, say so.
     RESOLVED 2026-08-26, one day after this note first went up: the
     "4 of 5 look alike" consequence flagged below was real for
     content-lodge-cards.php's "Our Lodges" grid specifically, and was
     fixed there, NOT here: that grid never reads --{slug}-accent at
     all (content-lodge-cards.php's own 2026-08-26 comment explains
     why), it uses dedicated .mfl-lodge-card.{slug}/.mfl-lodge-tag.
     {slug}/.mfl-lodge-link.{slug} rules in components.css, each wired
     to its own genuinely distinct color: --gold (Caridad), --sky
     (Rivadavia, the retired Andean-sky value above, reintroduced
     scoped to just this grid), --sage (Futaleufu), --copper
     (Carrileufu), --welsh-green (Trevelin, the retired Welsh-valley
     value above, reintroduced the same way; NOT --olive, specifically
     because a brand-console-guardian pass found gold/olive only 15°
     apart on the hue wheel, the tightest of the 5 pairs, while
     welsh-green sits ~40° from gold). Confirmed still live 2026-08-31
     by fetching the deployed CSS directly. Read this note's history
     as: the problem below was accurately reported the day it was
     written, then closed the very next day in a different file. A
     second Claude session (2026-08-31) trusted this comment's original
     "NOT distinguishable" wording without checking components.css
     first, and re-reported an already-fixed problem as open. Don't
     repeat that: check components.css's own per-slug rules directly
     before trusting this paragraph's history as current state. */
  --caridad-accent:    var(--olive);    /* Option 5, Three-Way Blend (was steppe gold) */
  --futaleufu-accent:  var(--olive);    /* Option 3, Burgundy × Olive (was glacial jade) */
  --rivadavia-accent:  var(--olive);    /* Option 4, Forest × Olive (was Andean sky #7f9ec4) */
  --carrileufu-accent: var(--copper);   /* Option 1, Burgundy Revival (unchanged, already copper) */
  --trevelin-accent:   var(--olive);    /* Option 2, Olive Trail (was Welsh valley green #9db56b) */

  /* === FONT FAMILIES === */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Source Sans 3', sans-serif;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Disable Chrome's native scroll-anchoring globally. Without this,
     when cross-page navigation lands on an anchor and THEN the hero
     image / webfont loads a moment later, the browser "helpfully"
     adjusts scroll to maintain the previously-visible content, which
     manifests as "land on anchor, pause, scroll further down." This
     is separate from CSS scroll-behavior. Applied at html (the
     scroll container) so the whole document behaves consistently. */
  overflow-anchor: none;
  /* DO NOT add `overflow-x: clip` here. Tried it 2026-05-01 (theme
     2.9.82) as a defensive iOS-Safari belt against horizontal
     overflow. Spec says clip should preserve `position:sticky` on
     descendants. Empirically Chrome + Safari break sticky anyway
     because of how they establish "containing block" for sticky
     descendants when html has any overflow value other than
     `visible`. Specifically broke `.mfl-nav { position:sticky }`:
     nav scrolled out of view instead of staying pinned at top.
     Reverted 2026-05-02. We don't need clip anyway: the mobile
     responsive audit (39/39 pages clean at 375px) already fixed
     every actual overflow culprit, and body's `overflow-x: hidden`
     below is the safety net for any new offenders. */
}

body {
  font-family: var(--font-body);
  background: var(--forest);
  color: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(216,169,78,0.3);
  color: var(--cream);
}

a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
}
picture {
  display: block;
}
picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   NAV: Hybrid palette (brand umbrella), centered logo layout
   ============================================================ */
.mfl-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  height: 88px;
  background: rgba(5,12,14,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  gap: 40px;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.mfl-nav.is-scrolled {
  background: rgba(5,12,14,0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid transparent;
}
/* Logo swap on scroll */
.mfl-logo-scroll {
  display: none !important;
  height: 50px;
  width: auto;
  object-fit: contain;
}
.mfl-nav.is-scrolled .mfl-logo-full {
  display: none !important;
}
.mfl-nav.is-scrolled .mfl-logo-scroll {
  display: block !important;
}

/* Homepage: hide nav logo at top, hero logo takes over */
/* Hide nav logo at top on all pages (hero logo takes over) */
.mfl-nav:not(.is-scrolled) .mfl-nav-logo {
  opacity: 0;
  pointer-events: none;
}
.mfl-nav.is-scrolled .mfl-nav-logo {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease;
}

/* Hero row: flex layout, text left, logo right */
.mfl-hero-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  gap: 48px;
  margin-top: 60px;
}

/* Hero logo: right side on desktop */
.mfl-hero-logo {
  flex-shrink: 0;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}
.mfl-hero-logo img {
  height: 260px;
  width: auto;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
}

/* Hero content: no extra margin needed with flex row */
.mfl-hero--video .mfl-hero-content {
  margin-top: 0;
}

/* Logo: centered */
.mfl-nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  order: 2;
}
.mfl-nav-logo img {
  height: 64px;
  width: auto;
}

/* mfl-hero-logo / mfl-nav-logo used to wrap a text-based wordmark
   placeholder (pat_wordmark(), since removed: see git history) before
   Lincoln's real logo file (assets/img/patagonia-logo-white.png /
   patagonia-logo-text-white.png) replaced it everywhere 2026-08-16.
   Kept as a harmless belt-and-suspenders rule; an <img> ignores
   text-decoration anyway, but this covers the alt-text fallback case
   (image blocked/fails to load) rendering as a plain underlined link. */
.mfl-hero-logo,
.mfl-nav-logo {
  text-decoration: none;
}

/* Nav menus: left and right of logo */
.mfl-nav-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  align-items: center;
}
/* Scrolled-header overflow, 901-1100px (2026-09-26, closing the
   docs/MFL_Website_Followups.md WARN of the same name -- confirmed live
   on both this theme's own staging site and mfl-confluence production,
   which share this identical nav markup/CSS): .mfl-nav-left and
   .mfl-nav-right are both flex:1 boxes splitting whatever width is left
   after the centered, flex-shrink:0 logo. Their <a> links are
   white-space:nowrap (no wrapping to shrink into), so once the logo
   grows wide enough in its scrolled state, the two menus' own natural,
   un-shrinkable content width exceeds what's left for them and the page
   gains horizontal scroll -- measured live at up to 110px of overflow at
   901px, the narrowest width before the 900px breakpoint's mobile
   hamburger takes over instead. Verified (live, both the browser's own
   layout math via getBoundingClientRect() and a visual screenshot at
   901px) that gap:8px / letter-spacing:0.04em / font-size:0.72rem closes
   the overflow to 0 at 901px and stays comfortably readable; scoped to
   the scrolled state only, since unscrolled has enough room across this
   whole range already. Widened 1100px->1120px the same night
   (uxui-platform-expert vet finding, headless-Chromium-measured): the
   un-shrunk nav genuinely doesn't fit until ~1108-1115px, so the
   original hard 1100px cutoff left a real, if narrow, residual overflow
   sliver (up to 3px on this theme) between 1101-1109px -- 1120px gives
   clean headroom past the measured boundary on both themes. */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-scrolled .mfl-nav-menu {
    gap: 8px;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
  }
}
.mfl-nav-left {
  order: 1;
  justify-content: flex-end;
  flex: 1;
}
.mfl-nav-right {
  order: 3;
  justify-content: flex-start;
  flex: 1;
}
.mfl-nav-menu a {
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.mfl-nav-menu a:hover,
.mfl-nav-menu .current-menu-item > a,
.mfl-nav-menu .current-menu-ancestor > a {
  color: var(--gold);
}

/* Dropdown caret */
.mfl-nav-menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.6;
}

/* Dropdown menus */
.mfl-nav-menu .menu-item-has-children {
  position: relative;
}
.mfl-nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  background: var(--hybrid3);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(216,169,78,0.08);
  padding: 12px 0;
  min-width: 220px;
  list-style: none;
  z-index: 200;
}
.mfl-nav-menu .menu-item-has-children:hover > .sub-menu,
.mfl-nav-menu .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}
.mfl-nav-menu .sub-menu li {
  padding: 0;
}
.mfl-nav-menu .sub-menu a {
  display: block;
  padding: 8px 24px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--cream);
}
.mfl-nav-menu .sub-menu a::after {
  display: none;
}
.mfl-nav-menu .sub-menu a:hover {
  color: var(--gold);
  background: var(--hybrid4);
}

/* Mobile hamburger */
.mfl-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  order: 4;
}
.mfl-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  transition: all 0.3s;
}

/* ============================================================
   FLOATING ACTION BUTTONS: pinned below nav
   ============================================================ */
.mfl-fab {
  position: fixed;
  top: 120px;
  z-index: 100;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(5,12,14,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Combined transition: earlier we had TWO `transition` declarations
     on this rule (top, then background+color) and the second silently
     clobbered the first per CSS overwrite semantics. Combined here so
     all three properties animate as intended. opacity added 2026-09-09
     for the dropdown-collision fix below (.mfl-fab-left's fade). */
  transition: top 0.3s ease, background 0.2s, color 0.2s, opacity 0.15s ease;
}
.mfl-fab:hover {
  background: var(--gold);
  color: var(--hybrid);
}
.mfl-fab-left {
  left: 24px;
  border-radius: 4px;
}
.nav-scrolled .mfl-fab {
  top: 82px;
}
/* WP admin bar pushes everything down ~46px */
.admin-bar .mfl-fab {
  top: 166px;
}
.admin-bar .nav-scrolled .mfl-fab {
  top: 128px;
}
.mfl-fab-right {
  right: 24px;
  border-radius: 4px;
}

/* Hide the left FAB while a primary-left dropdown is open. Found live
   2026-09-09: the "Fly Fishing" flyout (the leftmost primary-left item,
   closest to .mfl-fab-left) grew from 1 child to 5 (Drift Boat/Rafting/
   Walk & Wade/Guide Team), and at that height its flyout now reaches
   down into .mfl-fab-left's fixed position. The flyout's higher z-index
   (200 vs. this button's 100) means it wasn't just a visual overlap —
   it was swallowing the button's clicks too while open, not just
   covering it. Scoped to .mfl-nav-left specifically (not -right, which
   sits at the opposite edge and never collides with any left-nav
   flyout) and to :hover/:focus-within so a keyboard user tabbing into
   the dropdown gets the same fix as a mouse user. Also fires, harmlessly,
   for the Accommodations flyout (which has never actually reached far
   enough to overlap) rather than being narrowed to Fly Fishing alone —
   deliberate, so a future primary-left item that grows past a few
   entries doesn't reintroduce this same bug silently. Verified live: no
   effect on .mfl-fab-right ("Plan Your Stay"), no effect on non-hover
   states, restores the instant the pointer/focus leaves. */
.mfl-nav:has(.mfl-nav-left .menu-item-has-children:hover) ~ .mfl-fab-left,
.mfl-nav:has(.mfl-nav-left .menu-item-has-children:focus-within) ~ .mfl-fab-left {
  opacity: 0;
  pointer-events: none;
}

/* Phone popover (desktop) */
.mfl-fab-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--forest3);
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 10px 16px;
  border-radius: 4px;
  white-space: nowrap;
}
.mfl-fab-popover.is-visible {
  display: block;
}

/* ============================================================
   SHARED TYPOGRAPHY
   ============================================================ */
.mfl-section-eyebrow {
  font-size:  12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  /* flex-start, not center: on a single-line eyebrow (49 of 49 prior
     usages) the two look identical, but once content wraps to 2+ lines
     `center` vertically centers the gold rule mark against the whole
     block instead of aligning it with the first line — confirmed via
     headless-Chromium render, 2026-09-22 PFL SEO P1 vet panel. */
  align-items: flex-start;
  gap: 14px;
}
.mfl-section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.mfl-section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 20px;
}
.mfl-section-title em {
  color: var(--gold);
  font-style: italic;
}

.mfl-section-lead {
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--cream);
  font-weight: 600;
  max-width: 560px;
}

/* Companion to .mfl-section-lead for a follow-up paragraph of regular
   body copy: same reading-width cap, without the lead's bold weight
   (stacking two bold paragraphs reads heavy). */
.mfl-section-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  max-width: 560px;
}

/* ============================================================
   HERO
   ============================================================ */
.mfl-hero {
  display: flex;
  align-items: flex-start;
  padding: 80px 48px 72px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.mfl-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(10,26,36,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(92,138,110,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(216,169,78,0.06) 0%, transparent 50%),
    linear-gradient(160deg, var(--hybrid) 0%, var(--hybrid2) 40%, var(--hybrid3) 100%);
}
.mfl-hero-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;
}

/* Hero video background */
.mfl-hero--video {
  min-height: 85vh;
  align-items: center;
}
.mfl-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mfl-hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,23,27,0.55) 0%, rgba(10,23,27,0.35) 40%, rgba(10,23,27,0.6) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(10,26,36,0.3) 0%, transparent 55%);
}
.mfl-hero-rule {
  position: absolute;
  top: 0;
  right: 200px;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent,
    rgba(216,169,78,0.12) 30%, rgba(216,169,78,0.12) 70%, transparent);
}
.mfl-hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
/* Frosted-glass backdrop on subpage hero content: same treatment as hero
   ghost-button but softer. Keeps headline + subtitle legible against busy
   photo backgrounds without looking like an opaque card. */
/* Frosted-glass backdrop ONLY behind the hero subtitle paragraph.
   Keeps the H1 and CTAs visually clean against the photo, while giving
   the small body text the contrast it needs for legibility. */
.mfl-hero--subpage .mfl-hero-sub {
  background: rgba(10,23,27,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 18px 24px;
  border-left: 1px solid rgba(216,169,78,0.15);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .mfl-hero--subpage .mfl-hero-sub {
    padding: 14px 18px;
  }
}
.mfl-hero-owner {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--gold);
  font-weight: 500;
  max-width: 36em;
  margin-bottom: 18px;
}
.mfl-hero-owner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.mfl-hero-owner a:hover {
  color: var(--cream);
}
.mfl-hero-eyebrow {
  font-size:  12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mfl-hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.mfl-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 76px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
}
.mfl-hero-h1 em {
  color: var(--gold);
  font-style: italic;
}
.mfl-hero-sub {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 500px;
  margin-bottom: 40px;
}
/* Homepage-only override (2026-05-03): tighten the gap between
   subtext + CTA so the Orvis 2024 Finalist floating badge has more
   breathing room beneath the CTA. Subpage heroes keep the original
   40px to preserve their existing rhythm (body.home is set by
   WordPress automatically on the front page). */
body.home .mfl-hero-sub {
  margin-bottom: 16px;
}
.mfl-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Section subtitle */
.mfl-section-subtitle {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-top: -8px;
  margin-bottom: 32px;
}
.mfl-section-subtitle em {
  color: var(--gold);
  font-style: italic;
}

/* About section: video background */
.mfl-about-video-section {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mfl-about-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mfl-about-video-section.is-playing .mfl-about-video {
  opacity: 1;
}
.mfl-about-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mfl-about-video-section.is-playing .mfl-about-poster {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mfl-about-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,23,27,0.7) 0%, rgba(10,23,27,0.5) 40%, rgba(10,23,27,0.7) 100%);
  transition: opacity 0.6s ease;
}
.mfl-about-video-section.is-playing .mfl-about-video-overlay {
  opacity: 0.6;
}
.mfl-about-video-section .mfl-section-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mfl-about-video-section.is-playing .mfl-section-inner {
  opacity: 1;
}

/* Play button */
.mfl-video-play-btn {
  position: relative;
  margin: 40px auto 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}
.mfl-video-play-btn:hover {
  color: var(--gold-lt);
  transform: scale(1.05);
}
.mfl-video-play-btn svg {
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}
.mfl-video-play-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.mfl-about-video-section.is-playing .mfl-video-play-btn {
  opacity: 1;
}

/* About section content */
.mfl-about-section {
  text-align: left;
}
.mfl-about-content {
  max-width: 600px;
}
.mfl-about-content p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cream-dim);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.mfl-about-content p:last-child {
  margin-bottom: 0;
}
.mfl-about-tagline {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--cream);
  margin-top: 24px;
  white-space: nowrap;
}
.mfl-about-content--hero p {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.7;
}

/* Sub-page hero: shorter, no background image */
.mfl-hero--subpage {
  min-height: 340px;
  padding-top: 100px;
}
.mfl-hero--subpage .mfl-hero-h1 {
  font-size: clamp(36px, 5vw, 56px);
}
.mfl-hero--subpage .mfl-hero-row {
  margin-top: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--gold);
  color: var(--hybrid);
  padding: 14px 36px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--gold-lt);
}

.btn-ghost {
  background: transparent;
  color: var(--cream-dim);
  padding: 14px 36px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--cream-faint);
  font-family: var(--font-body);
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover {
  border-color: var(--cream-dim);
  color: var(--cream);
}

/* ============================================================
   SECTIONS: Forest palette (default for MFL pages)
   ============================================================ */
.mfl-section {
  padding: 100px 48px;
  position: relative;
  overflow: hidden;
}
.mfl-section-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(92,138,110,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(216,169,78,0.06) 0%, transparent 50%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 50%, #0a1610 100%);
}
.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-section-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
}

/* Hybrid section variant */
.mfl-section.hybrid .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(92,138,110,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(216,169,78,0.04) 0%, transparent 50%),
    linear-gradient(160deg, var(--hybrid) 0%, var(--hybrid2) 50%, var(--hybrid3) 100%);
}

/* ============================================================
   TRANSITION ZONES
   ============================================================ */
.mfl-transition-zone {
  height: 80px;
  position: relative;
  overflow: hidden;
}
.mfl-transition-zone.forest-to-hybrid {
  background: linear-gradient(180deg,
    var(--forest2) 0%, #0e1c1a 30%,
    var(--hybrid2) 70%, var(--hybrid) 100%);
}
.mfl-transition-zone.hybrid-to-forest {
  background: linear-gradient(180deg,
    var(--hybrid) 0%, var(--hybrid2) 30%,
    #0e1c1a 70%, var(--forest2) 100%);
}
/* Bridges into/out of the per-property .pat-facts--{slug} backgrounds
   (added 2026-08-25, see components.css): mirror the forest/hybrid
   pairs above exactly (same 0/30/70/100 stop shape), swapped to the
   burgundy/olive families so Carrileufu, Trevelin, and Futaleufu don't
   hard-cut into their own section color with no bridge (a real seam a
   uxui-platform-expert vet pass caught live: a full hue inversion in a
   single pixel row at each of those 3 pages' facts-section boundary). */
.mfl-transition-zone.hybrid-to-burgundy {
  background: linear-gradient(180deg,
    var(--hybrid) 0%, var(--hybrid2) 30%,
    #141519 70%, var(--burgundy2) 100%);
}
.mfl-transition-zone.burgundy-to-hybrid {
  background: linear-gradient(180deg,
    var(--burgundy) 0%, var(--burgundy2) 30%,
    #141519 70%, var(--hybrid2) 100%);
}
.mfl-transition-zone.hybrid-to-olive {
  background: linear-gradient(180deg,
    var(--hybrid) 0%, var(--hybrid2) 30%,
    #151e1a 70%, var(--olive-bg2) 100%);
}
.mfl-transition-zone.forest-to-burgundy {
  background: linear-gradient(180deg,
    var(--forest2) 0%, #151a20 30%,
    var(--burgundy2) 70%, var(--burgundy) 100%);
}
/* Same-family bridges (added 2026-08-27), for the stretch BETWEEN two
   sections that now share one property's own family (page-caridad.php's
   room-grid → its own .pat-facts--caridad section, and the equivalent
   for Carrileufu/Futaleufu/Trevelin), mirroring .hybrid-to-hybrid's own
   "hold a light→dark→light arc so the 80px strip reads as one continuous
   atmosphere, not a color shift" shape exactly, just re-keyed to each
   family's own 2/base/2 steps. See components.css's ".pat-facts--{slug}"
   rules for why these sections now share one family in the first place. */
.mfl-transition-zone.forest-to-forest {
  background: linear-gradient(180deg,
    var(--forest2) 0%, var(--forest) 50%, var(--forest2) 100%);
}
.mfl-transition-zone.burgundy-to-burgundy {
  background: linear-gradient(180deg,
    var(--burgundy2) 0%, var(--burgundy) 50%, var(--burgundy2) 100%);
}
.mfl-transition-zone.olive-to-olive {
  background: linear-gradient(180deg,
    var(--olive-bg2) 0%, var(--olive-bg) 50%, var(--olive-bg2) 100%);
}
.mfl-transition-zone.hybrid-to-hybrid {
  /* Same-family transition: hero (hybrid) → calculator (hybrid).
     Holds hybrid2 → hybrid → hybrid2 so the 80px strip reads as a
     continuous atmosphere, not a color shift. */
  background: linear-gradient(180deg,
    var(--hybrid2) 0%, var(--hybrid) 50%, var(--hybrid2) 100%);
}
.mfl-transition-zone.hybrid-to-hybrid4 {
  background: linear-gradient(180deg,
    var(--hybrid) 0%, var(--hybrid3) 40%,
    var(--hybrid4) 100%);
}
.mfl-transition-zone.hybrid4-to-hybrid {
  background: linear-gradient(180deg,
    var(--hybrid4) 0%, var(--hybrid3) 60%,
    var(--hybrid) 100%);
}
.mfl-transition-zone.forest-to-marine {
  background: linear-gradient(180deg,
    var(--forest2) 0%, #0f2220 20%,
    var(--hybrid2) 50%, #0c1c28 80%,
    var(--marine2) 100%);
}
.mfl-transition-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(216,169,78,0.015) 0px, rgba(216,169,78,0.015) 1px,
      transparent 1px, transparent 48px),
    repeating-linear-gradient(-45deg,
      rgba(216,169,78,0.01) 0px, rgba(216,169,78,0.01) 1px,
      transparent 1px, transparent 48px);
}
.mfl-transition-rule {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom,
    transparent, rgba(216,169,78,0.08), transparent);
}

/* ============================================================
   PAGE CONTENT: Styling for the_content() output
   ============================================================ */
.mfl-page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 48px 80px;
}
/* When nested inside a .mfl-section, let the section provide vertical padding.
   Prevents stacked 100px (section) + 60px (content) = 160px above the first element. */
.mfl-section .mfl-page-content {
  padding-top: 0;
  padding-bottom: 0;
}

.mfl-page-content h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 24px;
}

.mfl-page-content h2 {
  font-family: var(--font-display);
  /* Matches .mfl-section-title so WP-content H2s look like hardcoded section titles */
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--cream);
  margin-top: 48px;
  margin-bottom: 20px;
}
.mfl-page-content > h2:first-child,
.mfl-page-content > h2:first-of-type {
  margin-top: 0; /* lead headline shouldn't stack on top of section padding */
}
.mfl-page-content h2 em {
  color: var(--gold);
  font-style: italic;
}

.mfl-page-content h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  color: var(--cream);
  margin-top: 36px;
  margin-bottom: 12px;
}

.mfl-page-content h4 {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-top: 32px;
  margin-bottom: 12px;
}

.mfl-page-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 20px;
}

.mfl-page-content a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,169,78,0.3);
  transition: border-color 0.2s;
}
.mfl-page-content a:hover {
  border-color: var(--gold);
}

.mfl-page-content ul,
.mfl-page-content ol {
  margin: 0 0 20px 24px;
  color: var(--cream-dim);
  font-weight: 400;
  line-height: 1.75;
}

.mfl-page-content li {
  margin-bottom: 8px;
}

.mfl-page-content img {
  border-radius: 0;
  margin: 24px 0;
}

.mfl-page-content blockquote {
  border-left: 3px solid var(--gold-dk);
  padding: 16px 24px;
  margin: 24px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--cream);
  background: rgba(216,169,78,0.04);
}

/* Wide content variant (for pages with grids/cards) */
.mfl-page-content.wide {
  max-width: 1300px;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.mfl-breadcrumb {
  font-size:  12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream-faint);
  margin-bottom: 24px;
  /* Visually hidden but accessible to screen readers & search engines */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mfl-breadcrumb a {
  color: var(--cream-faint);
  text-decoration: none;
  transition: color 0.2s;
}
.mfl-breadcrumb a:hover {
  color: var(--gold);
}
.mfl-breadcrumb .separator {
  margin: 0 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.mfl-footer {
  background: var(--forest-deep);
  border-top: 1px solid var(--line);
  padding: 60px 48px 40px;
}

.mfl-footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}

.mfl-footer-brand {
  margin-bottom: 20px;
}
.mfl-footer-brand img {
  max-width: 200px;
  height: auto;
}
.mfl-footer-brand-text {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mfl-footer-brand-sub {
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--gold-dk);
  font-weight: 400;
  text-transform: uppercase;
}

.mfl-footer-social {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
.mfl-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mfl-footer-social a svg rect {
  transition: fill 0.2s;
}
.mfl-footer-social a:hover svg rect {
  fill: var(--gold-lt);
}

.mfl-footer-licenses {
  font-size: 12px;
  line-height: 1.6;
  color: var(--cream-faint);
  font-weight: 400;
}
.mfl-footer-licenses a {
  color: var(--cream-faint);
  text-decoration: none;
}
.mfl-footer-licenses a:hover {
  color: var(--gold);
}

.mfl-footer h4,
.mfl-footer h3.mfl-footer-h {
  /* Footer column heads (demoted from <h4> to <h3> 2026-05-24 to fix
     heading-hierarchy skip per SEO_AUDIT P2-5; visual treatment
     preserved verbatim, same monospace small-caps gold-on-forest). */
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 20px;
}

.mfl-footer-links {
  list-style: none;
  padding: 0;
}
.mfl-footer-links li {
  margin-bottom: 10px;
}
.mfl-footer-links a {
  font-size: 13px;
  color: var(--cream-faint);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s;
}
.mfl-footer-links a:hover {
  color: var(--gold);
}

.mfl-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--cream-faint);
  font-weight: 400;
}
.mfl-footer-contact-item a {
  color: var(--cream-faint);
  text-decoration: none;
  transition: color 0.2s;
}
.mfl-footer-contact-item a:hover {
  color: var(--gold);
}
.mfl-footer-contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.mfl-footer-bottom {
  max-width: 1300px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--cream-faint);
  font-weight: 400;
}