@charset "utf-8";
/* ============================================================
   Motorhome Life — header + footer
   Replaces header_footer.css (mobile menu breakpoint: 900px)
   Palette: brand blue, light gold on the blue header, gold credit bar retained
   (the violet accent was retired in 2.4.1 — Ben, 11 October 2026)
   ============================================================ */

:root {
	--header-height: 100px;
	--nav-font-size: 14px;
	--nav-font-size-fixed: 13px;

	/* motorhome life */
	--mhl-blue:#1657aa;
	--mhl-blue-dark:#0f3f7d;
	--mhl-blue-light:#3b83d8;
	/* ⚠ 2.4.1 (Ben): the violet accent — --mhl-accent #7c5cd6, --mhl-accent-light #a68ce8 —
	   is RETIRED. Hovers and the active item on the BLUE header are light gold; the footer's
	   accent is the secondary button's blue (--ft-accent below).
	   Light gold is also the hero eyebrow (.mwd-hero-content p.eyebrow). Until 2.4.2 that rule
	   read --mwd-gold-light, which no MHL stylesheet declares, so every hero eyebrow rendered
	   white; it reads this token since 2.4.2 (Ben, 12 October 2026). */
	--mhl-gold-light:#f2c35e;
	--mhl-ink:#20242b;				/* footer background */
	--mhl-ink-2:#181c22;
	--mhl-text:#d9e2ee;
	--mhl-muted:#8fa3ba;
	--mhl-line:rgba(255,255,255,.12);
	--mhl-field:rgba(255,255,255,.06);
	--mhl-filter-accent: brightness(0) saturate(100%) invert(58%) sepia(38%) saturate(1600%) hue-rotate(228deg);

	/* header background per state (19 September 2026)
	   The header no longer overlays the hero: it sits in the flow, white, and turns into the
	   blue gradient once it fixes on scroll. Both states are TOKENS — swap the value here and
	   every rule below follows. To try the sky photograph instead of the gradient, replace
	   --hd-bg-fixed (ONLY) with e.g.
	     url('/assets/images/hero/motorhomelife_motorhome_2021_01_full.jpg') center 22% / cover no-repeat;
	   and nothing else needs to change.
	   ⚠ --hd-bg-panel is the mobile drop-down menu and is DELIBERATELY a separate token: the
	   panel is full width and half the screen tall, so a photograph behind a list of links
	   reads very differently from a photograph in a 70px bar. Both point at --hd-gradient
	   today, so they stay in step until you decide otherwise. */
	--hd-gradient:linear-gradient(105deg, var(--mhl-blue-dark) 0%, var(--mhl-blue) 48%, var(--mhl-blue-light) 100%);
	--hd-bg-top:#ffffff;
	--hd-bg-fixed:var(--hd-gradient);
	--hd-bg-panel:var(--hd-gradient);

	/* footer accent — the top border, the column-heading rules, the social icons and the
	   search field's focus line. It IS the secondary button's colour (buttons.css), so the
	   footer follows if the buttons are recoloured (Ben, 11 October 2026). */
	--ft-accent:var(--btn-secondary-bg, #1657aa);
	--ft-accent-hover:var(--mhl-blue-light);

	/* the plain page header's colour when a page gives no tone — about's blue. Each page
	   type's own colour is set on its tone class ("plain header" below), 2.4.2. */
	--hero-plain-bg:linear-gradient(105deg, #0b2f5f 0%, #12488f 48%, #2a6cbf 100%);

	/* the posts colour — the journal header AND the post cards' bar (blog_listing.css), 2.4.4.
	   The one tone on :root, because it is the one used outside a header: change it here and
	   both follow (Ben: the bar is "a color that will be associated with posts").
	   2.5.2 (Ben, 20 October 2026): the LOGO BLUE going darker, in three stops, in place of the
	   dusk navy (105deg, #141a33 → #222d5a → #36478a). The header runs top-down from the logo
	   blue; the card bars (left to right) and the sidebar's posts-box head (top-down) run the
	   other way, from the deep end. The light stop is #0a74e6, one step below the logo's #007fff:
	   small white text on #007fff is only 3.8:1, on #0a74e6 it is 4.5:1. Text on all three is
	   white — light gold on this blue is 2.7:1. Change the three stops and everything follows. */
	--journal-light:#0a74e6;
	--journal-mid:#0861c4;
	--journal-deep:#054a99;
	--tone-journal:linear-gradient(180deg, var(--journal-light) 0%, var(--journal-mid) 55%, var(--journal-deep) 100%);
	--tone-journal-bar:linear-gradient(90deg, var(--journal-deep) 0%, var(--journal-mid) 45%, var(--journal-light) 100%);
	--tone-journal-box:linear-gradient(180deg, var(--journal-deep) 0%, var(--journal-mid) 45%, var(--journal-light) 100%);

	/* the reviews colour — 2.6.0 (DEV_PLAN_Stage3 §4.16, Ben, 22 October 2026: green 3, "Grass",
	   "everywhere"): the journal's pattern in green. The reviews header runs top-down from the
	   light end; the review cards' bar (left to right) and the sidebar's reviews-box head
	   (top-down) run from the deep end; search's review strip and label and the filter dot read
	   the stops (search.css, filter_bar.css). White text is 4.6 / 6.0 / 8.6:1 on the three stops,
	   as on the blue. --reviews-mid is also the cards' eyebrow, the stay type (6.0:1 on white).
	   Until 2.6.0 the reviews header was a darker forest green at 105deg, #12392a → #1c573f →
	   #2c7a56, and it was not on :root. Change the three stops and everything follows. */
	--reviews-light:#188721;
	--reviews-mid:#14731c;
	--reviews-deep:#105816;
	--tone-reviews:linear-gradient(180deg, var(--reviews-light) 0%, var(--reviews-mid) 55%, var(--reviews-deep) 100%);
	--tone-reviews-bar:linear-gradient(90deg, var(--reviews-deep) 0%, var(--reviews-mid) 45%, var(--reviews-light) 100%);
	--tone-reviews-box:linear-gradient(180deg, var(--reviews-deep) 0%, var(--reviews-mid) 45%, var(--reviews-light) 100%);

	/* credit bar (Marbella Website Design) */
	--mwd-gold:#d7a93b;
	/* 2.5.4.4 (DEV_PLAN_Stage3 §4.15, critique P6, Ben, 21 October 2026: "Every page"): THE TEXT
	   GOLD — every small gold text on a light background reads this token (the posts' breadcrumb,
	   "Our review", links in a post, the sidebar box titles and current item, the review page's
	   type and facts, Cancel reply / Leave another comment, eyebrows). #8a5a18 is 5.6:1 on white,
	   5.2:1 on the page background; it was #a5812f, 3.6:1 — below the 4.5:1 small text needs.
	   The same gold as the post's date and the Keep reading labels. The bright --mwd-gold stays
	   for buttons, rules and stars. Previous: "header_footer_v2 - v15 (pre-2.5.4.4).css". */
	--mwd-gold-dark:#8a5a18;
}

/* ------------------------------------------------------------
   header
------------------------------------------------------------ */
/* The header is IN THE FLOW (19 September 2026) — it no longer overlays the hero.
   min-height, not height: it keeps reserving the bar's space after .site-header goes
   fixed and leaves the flow, which is what stops the page jumping on scroll. */
#header {
	width:100%;
	min-height:var(--header-height);
	background:transparent;
	z-index:20;
}

/* Foreground colours are STATE TOKENS, set once here and again on .fixed; the link, logo,
   rule and language-switcher rules below all read them, so neither state needs its own
   copy of those rules. */
.site-header {
	--hd-fg:var(--mhl-ink);
	/* Ben 19 September 2026: the hover was --mhl-blue (#1657aa) and read too light on the
	   white bar. Darker. ⚠ Applies to the nav links AND the language pill — both read this
	   token — which is the point: one hover colour per state. */
	--hd-fg-hover:var(--mhl-blue-dark);
	--hd-line:rgba(16,32,56,.14);

	margin:0; padding:0;
	width:100%;
	background:var(--hd-bg-top);
	transition:box-shadow .25s ease;
}

/* ⚠ The gradient is a SEPARATE LAYER, not the element's own background: CSS cannot
   transition a colour into a gradient (or an image), so painting --hd-bg-fixed straight
   onto .site-header would snap. It fades instead. Sits behind the bar's content because
   ::before precedes .container in tree order. */
.site-header::before {
	content:"";
	position:absolute; inset:0;
	z-index:0;
	background:var(--hd-bg-fixed);
	opacity:0;
	pointer-events:none;
	transition:opacity .3s ease;
}

.site-header .container { max-width:none; }

.site-header.fixed {
	--hd-fg:#fff;
	--hd-fg-hover:var(--mhl-gold-light);		/* was the violet --mhl-accent-light (2.4.1) */
	--hd-line:rgba(255,255,255,.24);

	position:fixed;
	top:0;
	box-shadow:0 2px 12px rgba(6,26,54,.32);
	z-index:100;
}
/* ⚠ ASYMMETRIC ON PURPOSE — transition:0s going IN, the base rule's .3s coming OUT.
   .fixed is added at the moment the bar has scrolled off and is re-entering at the top of
   the viewport, so nobody sees the snap; but the logo swap (.logo-img--fixed, a display
   change) cannot animate, so a fade-in here would put the WHITE logo on a still-white bar
   for 300ms. Coming out, the bar is on screen and genuinely morphs blue -> white, and the
   fade is what you want. */
.site-header.fixed::before { opacity:1; transition:opacity 0s; }

.hd-nav {
	display:flex; flex-direction:row;
	justify-content:space-between; align-items:center;
	height:var(--header-height);
	font-size:var(--nav-font-size);
}
.site-header.fixed .hd-nav { font-size:var(--nav-font-size-fixed) !important; height:auto; }

.hd-nav-lt { flex-grow:0; width:300px; max-width:40vw; }
.hd-nav-rt { flex-grow:1; }
.site-header.fixed .hd-nav-lt { width:250px; }
.site-header.fixed .hd-nav-rt { padding:6px 0 4px !important; margin:0 !important; }

.logo, a.logo { display:block; margin:0 auto; text-decoration:none; }
.logo-img { display:block; width:100%; }
.logo-img--fixed { display:none; }
.site-header.fixed .logo-img--top { display:none; }
.site-header.fixed .logo-img--fixed { display:block; }

.hd-nav ul {
	display:flex; flex-direction:row; align-items:center; gap:2.6vw;
	list-style:none; padding:0; margin:0; line-height:100%;
}
.hd-nav-lt ul { justify-content:flex-start; }
.hd-nav-rt ul { justify-content:flex-end; }
.hd-nav ul > li { padding:0; margin:0; text-align:center; }

#mainNav.hd-nav { padding:2px 0 1px; }
.site-header.fixed #mainNav.hd-nav { padding:5px 0; }

#mainNav.hd-nav ul > li.nav-link a {
	display:inline-block;
	padding:.7em 0;
	color:var(--hd-fg);
	font-size:1em; font-weight:500;
	letter-spacing:.04em; text-transform:uppercase;
	text-decoration:none;
	border-bottom:2px solid transparent;
	opacity:.96;
	transition:color .2s ease, border-color .2s ease;
}
@media only screen and (min-width:901px) {
	.site-header.fixed #mainNav.hd-nav ul > li.nav-link:not(.nav-btn) a { padding:.3em 0; font-size:.9em; border-width:1px; }
}
#mainNav.hd-nav ul > li.nav-link:not(.nav-btn) > a:hover,
#mainNav.hd-nav ul > li.nav-link.selected:not(.nav-btn) > a {
	color:var(--hd-fg-hover) !important;
	border-bottom-color:var(--hd-fg-hover);
}
#mainNav.hd-nav ul > li.nav-link.selected:not(.nav-btn) > a { font-weight:700; }

/* language switch in the header */
.hd-lang { display:flex; align-items:center; gap:.55em; }
.hd-lang a {
	color:#dbe6f4; font-size:.95em; letter-spacing:.04em;
	text-transform:uppercase; text-decoration:none;
}
.hd-lang a:hover { color:#fff; }
.hd-lang a.selected { color:var(--mhl-gold-light); font-weight:700; }
.hd-lang span { color:rgba(255,255,255,.35); }

/* header call to action — Subscribe (19 September 2026)
   The gold .btn from buttons.css, the same button as the footer's Subscribe CTA, so the two
   ends of the page match. The anchor carries "btn btn--xs nav-cta" (components/navigation.php)
   and this block only tightens it for the bar: .btn's own padding leaves room for the ►, which
   is too wide at nav size. Written at the same specificity as the plain-link rule above and
   placed after it, so it wins without !important. It stays gold in BOTH header states. */
#mainNav.hd-nav ul > li.nav-btn > a {
	padding:.68em 1.85em .68em 1.25em;
	border:1px solid #c89b3f;
	border-radius:30px;
	color:#111;
	font-weight:700; letter-spacing:.06em;
	opacity:1;
	font-size:calc(1em - 2px);		/* Ben 19 Sep 2026 — 2px under the nav links */
}
/* Ben's screenshot: the ► had drifted away from the word and read as detached. The gap is
   right-padding minus the arrow's own offset and width, so it closes from both sides — the
   right padding came in from 2.1em and the arrow out from .95em to .8em. */
#mainNav.hd-nav ul > li.nav-btn > a::after { right:.8em; font-size:.7em; }
#mainNav.hd-nav ul > li.nav-btn > a:hover { color:#111; }

/* header search (icon toggle -> inline field) */
.hd-search { display:flex; align-items:center; }
.hd-search input {
	width:0; padding:0; border:0; opacity:0;
	background:var(--mhl-field); color:#fff;
	border-radius:20px;
	transition:width .3s ease, padding .3s ease, opacity .2s ease;
}
.hd-search.open input,
.hd-search:focus-within input {
	width:190px; padding:.55em .9em; opacity:1;
	border:1px solid var(--mhl-line); outline:none;
}
.hd-search button {
	width:2.2em; height:2.2em; padding:0;
	background:none; border:0; box-shadow:none;
	color:#fff; cursor:pointer;
}
.hd-search button::after { display:none; }

.hd-nav ul > li.social a { width:2em; height:2em; margin-left:.2em; padding:0; }

/* The rule under the bar: a quiet line on the white header, the original white/blue
   gradient on the fixed blue one. */
.header-border {
	height:0;
	border-bottom:1px solid var(--hd-line);
}
.site-header.fixed .header-border {
	border-bottom-color:transparent;
	border-image:linear-gradient(110deg, rgba(255,255,255,.5) 0%, var(--mhl-blue-light) 80%, rgba(255,255,255,.5) 100%) 1;
	opacity:.85;
}

#menuBtn { display:none; }


/* ------------------------------------------------------------
   main
------------------------------------------------------------ */
/* ⚠ No padding-top any more: the header is in the flow, so nothing has to be pushed clear
   of it (19 September 2026). home.css still sets padding-top:0 here — now a no-op, kept. */
main,
#main {
	min-height:450px;
	line-height:150%;
	text-align:left;
	z-index:3;
}
#main .noJs { color:#FFF; }
#main .noJs a.btn {
	background:#FFF;
	border-color:#FFF;
	color:#333;
}
#main p {
	line-height:1.72;
}


/* hero
   ⚠ The padding-top that cleared the overlaying header is gone, but the min-heights below
   KEEP their "+ var(--header-height)" — the hero band stays the size it is today and the
   page simply grows by the header (Ben, 19 September 2026). */
.mwd-hero {
	display:flex;
	align-items:center;
	overflow:hidden;
	background-color:#0b0b0b;
	background-image:var(--hero-img-desktop);
	background-size:cover;
	background-position:var(--hero-position-desktop, center center);
	background-repeat:no-repeat;
	color:rgba(255,255,255,.92);
}
/* 
.mwd-hero-img {position: absolute; top:0;left:0;width: 100%; height:100%; line-height:0;}
.mwd-hero-img img { display:block; width:100%; height:100%; object-fit:cover; } 
*/

.mwd-hero h1 { color:#fff; font-weight:400; margin:0; letter-spacing: -.03em; }

/* The hero's heading size. Moved here from home.css in 2.4.2 so the plain headers on pages
   that do not load home.css (legal, listings, posts…) get it too — page_hero always adds
   .mwd-hero-home. Same selector and values, so home, country and the 404 are unchanged. */
.mwd-hero-home h1 {
  font-size:clamp(2.9rem,5.2vw,4.9rem);
  letter-spacing:-.03em;
}
@media only screen and (max-width: 600px) {
  .mwd-hero-home h1 {
    font-size: clamp(2.2rem,6.5vw,2.9rem);
    letter-spacing: -.03em;
  }
}

/* hero overlay — 2.4.0.2 (Ben, 11 October 2026)
   ONE gradient per screen range, written once below; the variants only change the values
   it reads, so a variant keeps its strength at every width. Two kinds, which combine:
     tint      --ov-rgb                 base = neutral black · --cool blue-black · --warm brown
     strength  --ov-a1/-a2/-a3/-top/-mid (over 500px) and --ov-p1/-p2/-p3 (500px and below)
                                        --light · default · --dark
   e.g. class="mwd-hero-overlay mwd-hero-overlay--cool mwd-hero-overlay--light"
   page_hero always uses --cool and takes 'overlay' => 'light' | 'dark' for the strength.
   The default strength is the old --cool's, so the homepage and country pages look the same
   over 500px. Under 500px it is lighter than before (the old phone overlay was 75% dark
   across the top quarter, which hid the photo). Before 2.4.0.2 each variant was written out
   in full, twice, and the phone values were not in step: --cool was the lightest on a
   desktop and the darkest on a phone. Old rules: header_footer_v2 - v2 (pre-overlays).css. */
.mwd-hero-overlay {
  --ov-rgb: 0, 0, 0;
  /* over 500px: across, from the text side (105deg), plus a top-down shade (165deg) */
  --ov-a1: .30;  --ov-a2: .25;  --ov-a3: .15;
  --ov-top: .19; --ov-mid: .06;
  /* 500px and below: top-down (175deg) — the text sits at the top, the photo below it */
  --ov-p1: .45;  --ov-p2: .30;  --ov-p3: .10;
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(105deg,
      rgba(var(--ov-rgb), var(--ov-a1)) 0%,
      rgba(var(--ov-rgb), var(--ov-a2)) 28%,
      rgba(var(--ov-rgb), var(--ov-a3)) 55%,
      rgba(var(--ov-rgb), 0) 80%),
    linear-gradient(165deg,
      rgba(var(--ov-rgb), var(--ov-top)) 0%,
      rgba(var(--ov-rgb), var(--ov-mid)) 38%,
      rgba(var(--ov-rgb), 0) 80%);
}
/* tint */
.mwd-hero-overlay--cool { --ov-rgb: 7, 17, 26; }
.mwd-hero-overlay--warm { --ov-rgb: 26, 21, 7; }
/* strength — default is in .mwd-hero-overlay above */
.mwd-hero-overlay--light {
  --ov-a1: .18;  --ov-a2: .14;  --ov-a3: .08;
  --ov-top: .12; --ov-mid: .04;
  --ov-p1: .30;  --ov-p2: .18;  --ov-p3: .05;
}
.mwd-hero-overlay--dark {
  --ov-a1: .58;  --ov-a2: .49;  --ov-a3: .35;
  --ov-top: .19; --ov-mid: .06;
  --ov-p1: .70;  --ov-p2: .55;  --ov-p3: .18;
}

.mwd-hero .container { z-index:2; width:100%; }
.mwd-hero-content { width:52%; width:var(--hero-text-width, 60%);  padding: 1% 1% 1.5%; }	/* the column is a setting since 2.4.7 — see "plain header" below */

.mwd-hero-content p {
  width: 90%;
  max-width:560px;
  font-size:clamp(1.1rem, calc(0.5rem + 0.8vw), 1.25rem);
}
.mwd-hero-content p.eyebrow { width:100%; color:var(--mhl-gold-light); }	/* was the undeclared --mwd-gold-light, so white (2.4.2) */

.mwd-hero-content .btn-row {
	margin-top: clamp(1em, 2vw, 2.2em);
	font-size: clamp(12px, calc(0.4rem + 0.8vw), 17px);
}

@media only screen and (min-width:1101px) {
	.mwd-hero {
		min-height:calc(500px + var(--header-height));
		background-image:var(--hero-img-desktop);
		background-size:cover;
		background-position:var(--hero-position-desktop, center center);
		background-repeat:no-repeat;
	}
}
@media only screen and (min-width:801px) and (max-width:1100px) {
	.mwd-hero {
		min-height:calc(360px + var(--header-height));
		background-image:var(--hero-img-tablet, var(--hero-img-desktop));
		background-position:var(--hero-position-tablet, var(--hero-position-desktop, center center));
	}
	.mwd-hero-content p:not(.eyebrow) { width:85%; }
}

@media only screen and (max-width:800px) {
	.mwd-hero {
		background-image:var(--hero-img-mobile, var(--hero-img-tablet, var(--hero-img-desktop)));
		background-position:var(--hero-position-mobile, var(--hero-position-tablet, center center));
	}
    .mwd-hero-content { width:var(--hero-text-width-sm, 65%); max-width:var(--hero-text-max-sm, 440px); padding: 2% 1% 3%; }
    .mwd-hero-content p:not(.eyebrow) { width:80%; text-shadow: 0 1px 5px rgba(0,63,114,.3); }
}
@media only screen and (max-width:500px) {
    .mwd-hero {
        background-image:var(--hero-img-mobile-xs, var(--hero-img-mobile-xs));
        background-size: 100% auto;
        background-position: center bottom;
    }
    /* the phone overlay — the same tokens, top-down (see "hero overlay" above) */
    .mwd-hero-overlay {
		background:
			linear-gradient(175deg,
				rgba(var(--ov-rgb), var(--ov-p1)) 25%,
				rgba(var(--ov-rgb), var(--ov-p2)) 45%,
				rgba(var(--ov-rgb), var(--ov-p3)) 60%,
				rgba(var(--ov-rgb), 0) 80%);
    }
    .mwd-hero-content { width:97%; max-width:none; padding-bottom: 58%; }
    .mwd-hero-content p:not(.eyebrow) { width:85%; }
}
@media only screen and (max-width:350px) {
    .mwd-hero-content p { font-size: 1rem; }
}

/* white wave at the bottom of the hero */
.mwd-hero-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;                 /* -1px kills a hairline gap at some zoom levels */
  height: clamp(40px, 7vw, 110px);
  background: url('/assets/images/hero/hero-curve-wht.svg') no-repeat bottom center;
  background-size: 100% 100%;   /* stretch edge-to-edge; pairs with preserveAspectRatio="none" */
  pointer-events: none;
}

/* hero sizes — 2.4.0.1 (Ben, 11 October 2026)
   Chosen per page with page_hero's 'size' => 'min' | 'mid'; no modifier is the default above
   (homepage, country pages), which is unchanged:
     default  min-height 500px + header (> 1100px), 360px + header (801–1100px), the content
              below that, and a photo strip of 58% of the width under the text on phones
     --mid    min-height 450px (> 1100px), 340px (801–1100px), the content below that, 45% strip
     --min    no min-height at any width — the content and its padding set the height — and
              a 35% strip on phones
   ⚠ .mwd-hero.mwd-hero--min / --mid are two classes on purpose: (0,2,0) beats the media
     queries' single-class .mwd-hero min-heights above, whatever the order.
   ⚠ The --min padding below applies at EVERY width, so it would also replace the phones'
     58% photo strip; the max-width:500px block restores a strip, and must stay AFTER it.
   ⚠ The wave (.mwd-hero-wave::after, up to 110px) sits over the bottom of the hero. Without
     a min-height only the bottom padding keeps the text clear of it. */
.mwd-hero.mwd-hero--min { min-height:0; }
.mwd-hero--min .mwd-hero-content { padding:1% 1% 1.5%; }
.mwd-hero--mid .mwd-hero-content { padding:2.5% 1% 3%; }


@media only screen and (max-width:500px) {
	.mwd-hero--mid .mwd-hero-content,
	.mwd-hero--min .mwd-hero-content { padding-top:1%; }
	.mwd-hero--mid .mwd-hero-content { padding-bottom:45%; }
	.mwd-hero--min .mwd-hero-content { padding-bottom:35%; }
}

/* plain header — 2.4.2 (Ben, 12 October 2026)
   Every page WITHOUT a photo hero: page_hero with no 'images' adds .mwd-hero--plain, and its
   'tone' adds .mwd-hero--tone-{page type}. A colour gradient instead of a photo — 105deg,
   darkest on the text side — with no overlay, the same wave, and the 'min' size.
   ONE COLOUR PER PAGE TYPE (Ben): a tone sets only --hero-plain-bg, so the colours are
   tokens and the class names are roles. No tone = about's blue, declared on :root above.
   Approved on the Claude Design canvas, 12 October 2026 ("4 · Page header colours").
   Contrast: white text >= 4.6:1 on every stop; the light-gold eyebrow >= 4.7:1 on the left
   and middle stops, where the text sits. ⚠ EXCEPT the journal tone since 2.5.2: the logo blue
   is lightest at the top (180deg, white 4.5:1) and light gold fails there, so its eyebrow is
   white (the rule after the tones).
   ⚠ The PAGE HEADERS only — the scrolled top bar keeps --hd-gradient (Ben).
   ⚠ Two classes in each rule: they must beat the single-class .mwd-hero background,
   overlay and per-width rules above, whatever the order. */
.mwd-hero.mwd-hero--plain { background:var(--hero-plain-bg); }
.mwd-hero--plain .mwd-hero-overlay { background:none; }	/* no photo to shade; the wave on ::after stays */
.mwd-hero.mwd-hero--plain .mwd-hero-content { padding-left:0; padding-right:0; }	/* text on the body's left edge */

/* The text column's width — 2.4.7 (Ben, 14 October 2026: "general and then tweak as need per
   page/hero"). Photo heroes keep 60% (65%, at most 440px, from 800px down) so the text stays
   on the shaded side, off the photo's subject. A plain header has no photo, so its column is
   the container's FULL width: until 2.4.7 the 60% made 21 of 26 measured titles wrap at
   1440px (the heading grows to ~78px, the column stopped at ~590–700px); now every page title
   fits one line at desktop widths and only long post titles take two. Paragraphs, the eyebrow
   and the search box keep their own max-widths. Phones (≤500px) are unchanged: 97%.
   TWEAK one page type with a rule that has TWO classes, so it wins over this one whatever
   the order, e.g. .mwd-hero--plain.mwd-hero--tone-legal { --hero-text-width:80%; }
   Measured with the real CSS: scratchpad measure_titles.php. */
.mwd-hero--plain { --hero-text-width:100%; --hero-text-width-sm:100%; --hero-text-max-sm:none; }

.mwd-hero--tone-about     { --hero-plain-bg:linear-gradient(105deg, #0b2f5f 0%, #12488f 48%, #2a6cbf 100%); }	/* brand blue, one step darker */
.mwd-hero--tone-journal   { --hero-plain-bg:var(--tone-journal); }	/* the posts colour — posts listings, a post (navy until 2.5.2, the logo blue since; swapped with map, 2.4.3, Ben); the token is on :root since 2.4.4 */
.mwd-hero--tone-journal .mwd-hero-content p.eyebrow { color:#ffffff; }	/* 2.5.2: light gold on the logo blue is 2.7:1 — white is 4.5:1 or better (a contrast fix; the post's date leaves the header in 2.5.2.1) */
.mwd-hero--tone-reviews   { --hero-plain-bg:var(--tone-reviews); }	/* the reviews colour — reviews listing, a review (2.6.0: "Grass", top-down like the journal's; was the forest green at 105deg); the token is on :root */
.mwd-hero--tone-reviews .mwd-hero-content p.eyebrow { color:#ffffff; }	/* 2.6.0: as the journal's — light gold fails on the light green at the top; white is 4.6:1 or better */
.mwd-hero--tone-map       { --hero-plain-bg:linear-gradient(105deg, #0a3a40 0%, #0e5960 48%, #1b8187 100%); }	/* sea teal — Map (was journal's; swapped, 2.4.3, Ben) */
.mwd-hero--tone-search    { --hero-plain-bg:linear-gradient(105deg, #12384a 0%, #1b5571 48%, #2f7aa0 100%); }	/* steel blue */
.mwd-hero--tone-contact   { --hero-plain-bg:linear-gradient(105deg, #4a2312 0%, #763619 48%, #a44f26 100%); }	/* terracotta sunset */
.mwd-hero--tone-subscribe { --hero-plain-bg:linear-gradient(105deg, #3d2c0c 0%, #6b4e17 48%, #94702a 100%); }	/* amber — subscribe, confirm, unsubscribe */
.mwd-hero--tone-legal     { --hero-plain-bg:linear-gradient(105deg, #1c2129 0%, #2a313c 48%, #3e4756 100%); }	/* ink slate — privacy, terms, cookies */

/* Alignment: the header's text starts where the page's body text starts, so each page type's
   header takes its body container's width (and, for listings and posts, its side padding).
     1100px, the usual sides  about, legal, map, subscribe   (legal.css .mwd-legal-section)
     1200px, the usual sides  search                         (search.css .search-header)
     1200px, 1.25rem sides    journal, reviews               (.blog-listing, .post-page)
     contact keeps the default container — its sections use it too.
   2.5.3.1: the title UNDER a band (.page-title, page_hero) takes the same widths, from this one
   table — .page-title--tone-{tone} .page-title__wrap beside each hero selector. */
.mwd-hero--tone-about .mwd-hero-content-wrap,
.mwd-hero--tone-legal .mwd-hero-content-wrap,
.mwd-hero--tone-map .mwd-hero-content-wrap,
.mwd-hero--tone-subscribe .mwd-hero-content-wrap,
.page-title--tone-about .page-title__wrap,
.page-title--tone-legal .page-title__wrap,
.page-title--tone-map .page-title__wrap,
.page-title--tone-subscribe .page-title__wrap { max-width:1100px; }
.mwd-hero--tone-search .mwd-hero-content-wrap,
.mwd-hero--tone-journal .mwd-hero-content-wrap,
.mwd-hero--tone-reviews .mwd-hero-content-wrap,
.page-title--tone-search .page-title__wrap,
.page-title--tone-journal .page-title__wrap,
.page-title--tone-reviews .page-title__wrap { max-width:1200px; }
.mwd-hero--tone-journal .mwd-hero-content-wrap,
.mwd-hero--tone-reviews .mwd-hero-content-wrap,
.mwd-hero--tone-search .mwd-hero-content-wrap,
.page-title--tone-journal .page-title__wrap,
.page-title--tone-reviews .page-title__wrap,
.page-title--tone-search .page-title__wrap { padding-left:1.25rem; padding-right:1.25rem; }	/* search since 2.4.5: its results are a .blog-listing too, so the header lines up with them (it sat 39px in) */

@media only screen and (max-width:500px) {
	/* no photo, so no photo strip under the text — just room to clear the wave */
	.mwd-hero.mwd-hero--plain .mwd-hero-content { padding-bottom:3.5rem; }
}

/* post header — 2.5.2.1 (DEV_PLAN_Stage3 §4.15 item 1, Ben, 20 October 2026)
   page_hero with NO TEXT — the page draws its title under it (components/title_block.php, the
   "title block" rules below):
     .mwd-hero--photos            the post's first three gallery photos across the top (board E)
     + .mwd-hero--single          its featured image instead, when one is set (board C)
     .mwd-hero--band              fewer than three photos: the slim band (board A) — a plain
                                  header, so its tone gives the colour
   Heights are the approved boards' at 1440px and 390px, scaled between them: three photos
   300px → 200px, one photo 320px → 230px, the band 96px → 60px (its wave 60px → 37px).
   The photos are <img>s, not the photo hero's background images: they come from the post, not
   from four files of the page's own. No overlay — nothing sits on them. The 4px gaps show the
   page background. ⚠ Two classes on the height rules: they must beat the media queries'
   single-class .mwd-hero min-heights above, whatever the order. */
.mwd-hero.mwd-hero--photos,
.mwd-hero.mwd-hero--band   { min-height:0; }
.mwd-hero.mwd-hero--photos { height:clamp(200px, 21vw, 360px); background:var(--page-bg, #f3f5f9); }
.mwd-hero.mwd-hero--single { height:clamp(230px, 22.2vw, 400px); }
.mwd-hero.mwd-hero--band   { height:clamp(60px, 6.7vw, 96px); }
.mwd-hero--photos .mwd-hero-overlay  { background:none; }
.mwd-hero--band .mwd-hero-wave::after { height:clamp(37px, 4.2vw, 60px); }	/* the boards' band wave, 62% of the band */
.mwd-hero__photos {
	position:absolute;
	inset:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	grid-template-rows:minmax(0, 1fr);	/* ⚠ a DEFINITE row: without it the photos keep their own height and the hero cuts off their bottoms (seen in the 2.5.2.1 preview) */
	gap:4px;
}
.mwd-hero--single .mwd-hero__photos { grid-template-columns:1fr; }
.mwd-hero__photo {
	display:block;
	width:100%;
	max-width:none;
	height:100%;
	min-height:0;
	object-fit:cover;
	object-position:50% 40%;	/* a little above the middle, where the boards' subjects sat */
}
@media only screen and (max-width:500px) {
	.mwd-hero__photos { gap:3px; }
}

/* title block — 2.5.2.1 (DEV_PLAN_Stage3 §4.15 item 1): the eyebrow, the H1 and the gold rule IN
   THE PAGE, under a hero with no text (components/title_block.php). The approved boards' values:
   the eyebrow 14px in #8a5a18 (5.6:1 on white — the hero's light gold is for dark headers only),
   the H1 52px at 1440px → 34px at 390px, the rule 72px → 64px. Here, not in blog_post.css,
   because every page loads this file and the other pages' headers are to follow (§4.15 item 6).
   ⚠ The rule is .title-block__rule, not .accent-line: blog_post.css still has a
   .post__header .accent-line rule from before 2.4.2, which would win on load order.
   ⚠ rem is 16px over 1024px, 15px to 769px and 14px at 768px and below (core base.css
   --rem-font-size), so the phone values below are the boards' pixels over 14. */
.title-block__eyebrow {
	margin:1.9rem 0 .6rem;
	color:#8a5a18;
	font-size:.875rem;
	font-weight:700;
	letter-spacing:.16rem;
	line-height:1.4;
	text-transform:uppercase;
}
.title-block__title {
	margin:0;
	color:#20242b;
	font-size:clamp(2.43rem, 3.6vw, 3.25rem);	/* 34px on a phone (14px rem), 52px at 1440px */
	font-weight:500;
	line-height:1.15;
	letter-spacing:-.02em;
}
.title-block__rule {
	display:block;
	width:72px;
	height:2px;
	margin:1.25rem 0 1.4rem;
	background:var(--mwd-gold, #d7a93b);
}
@media only screen and (max-width:768px) {	/* 768px, not 600px: where rem becomes 14px — 601–768px would otherwise shrink the eyebrow to 12.25px */
	.title-block__eyebrow { margin:1.45rem 0 .58rem; font-size:.93rem; letter-spacing:.14em; }	/* 13px; 20px / 8px */
	.title-block__rule    { width:64px; margin:1.15rem 0 1.3rem; }	/* 16px / 18px */
}
/* A line under the rule — the contact page's (content/contact/hero, 2.5.3.1). */
.title-block__lead {
	max-width:640px;
	margin:0;
	color:#3f4449;
	font-size:1.1rem;
}

/* page title — 2.5.3.1 (DEV_PLAN_Stage3 §4.15 item 6, Ben, 20 October 2026)
   Every other page's header follows the post's: the slim band (page_hero 'size' => 'band'), then
   .page-title — the title block (or contact's content file) and, on the search page, the search
   box — in a container as wide as the page's body (the alignment table above). The band → title
   gap is the post's (the boards' 28–30px; 16px on a phone), so the eyebrow's own top margin goes.
   The first section after it starts close under the gold rule: its own top space is cut by the
   ".page-title + …" rules below — the sections' classes come from their own files (legal.css,
   blog_listing.css, contact.css), but the cut belongs to this pattern, so it lives here.
   Pages: about, the three legal pages, map, subscribe / confirm / unsubscribe, message (its body
   is 1100px wide although its colour is contact's — message.css), search, contact, the posts
   and reviews listings. A post and a review draw their title themselves, beside the sidebar. */
.page-title { padding-top:1.9rem; }	/* ⚠ on .page-title, not __wrap: core's .padding-x sets padding-top:0 !important */
.page-title .title-block__eyebrow { margin-top:0; }
@media only screen and (max-width:768px) {
	.page-title { padding-top:1.15rem; }	/* 16px */
}
.page-title + .mwd-legal-section > .container.margin { margin-top:.75rem; }	/* was core .margin's clamp(50px … 110px) */
.page-title + .blog-listing { padding-top:.75rem; }	/* was 3rem */
.page-title + #contactInfo > .container.padding { padding-top:.75rem; }	/* was core .padding's clamp(14px … 110px) */

/* The search box under the title, on the page background (the search page): the hero's white
   pill needs an edge here, and a focus ring that shows on light — the hero's light gold is
   under 3:1 on #f3f5f9. */
.page-title .hero-search {
	margin-top:.25rem;
	border:1px solid #dfe3ea;
	box-shadow:0 2px 8px rgba(16,32,56,.06);
}
.page-title .hero-search:focus-within { outline-color:var(--journal-mid, #0861c4); }
.page-title .hero-search__alt { margin:.8em 0 0; font-size:1rem; }
.page-title .hero-search__alt .btn-txt { color:var(--mhl-blue, #1657aa); text-shadow:none; }

/* hero search — 2.4.5 (DEV_PLAN_Stage3 §4.1 decision 10, Ben, 13 October 2026)
   components/page_hero.php 'search': the homepage hero and the search page's header. One
   white pill holding the input and the site's main gold button, inset with a small gap (Ben
   chose inset over flush on the canvas). Under it, optionally, a white text link.
   ⚠ The input has no border, so the PILL shows the keyboard focus (:focus-within), in the
   light gold the header already uses for focus.
   ⚠ .mwd-hero-content p sets a width and a font size on every <p> in a hero, so the link's
   <p> resets both. */
.hero-search {
	display:flex;
	align-items:center;
	gap:6px;
	max-width:600px;
	margin:clamp(1.2em, 2vw, 1.8em) 0 0;
	padding:6px;
	border-radius:999px;
	background:#fff;
	box-shadow:0 6px 22px rgba(3,7,11,.25);
}
.hero-search:focus-within { outline:3px solid var(--mhl-gold-light); outline-offset:3px; }
.hero-search__input {
	flex:1;
	min-width:0;
	min-height:46px;
	box-sizing:border-box;
	padding:0 12px 0 20px;
	border:0;
	border-radius:999px;
	background:transparent;
	color:#20242b;
	font:inherit;
	font-size:17px;
}
.hero-search__input:focus { outline:none; }	/* the pill draws the ring */
.hero-search__input::placeholder { color:#5f6775; }
.hero-search .hero-search__button { flex:0 0 auto; white-space:nowrap; }

.mwd-hero-content p.hero-search__alt { width:auto; margin:.8em 0 0; font-size:1rem; }
.hero-search__alt .btn-txt { color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.45); }
.hero-search__alt .btn-txt:hover,
.hero-search__alt .btn-txt:focus-visible { color:var(--mhl-gold-light); }

@media only screen and (max-width:500px) {
	.hero-search { padding:5px; gap:4px; }
	.hero-search__input { min-height:42px; padding:0 6px 0 14px; font-size:16px; }	/* 16px: iOS zooms in on anything smaller */
	.hero-search .btn.hero-search__button { font-size:.74em; padding-left:1.5em; padding-right:2.7em; }
	.hero-search .btn.hero-search__button::after { right:1.1em; }
}
/* 2.4.5.1 (Ben's test 19, 13 October 2026): at 320px the placeholder was cut to "Town,
   campsite, c…". 16px is the smallest the input may be (iOS zooms in below it), and the
   button took a third of the pill. So up to 400px the button goes UNDER the input, full
   width, in the same white box. 400, not 360: the homepage's photo hero has a narrower text
   column than the search header, and clipped the placeholder up to 390px. */
@media only screen and (max-width:400px) {
	.hero-search { flex-wrap:wrap; gap:6px; padding:6px; border-radius:24px; }
	.hero-search__input { flex:1 1 100%; min-height:46px; padding:0 16px; }
	.hero-search .btn.hero-search__button { flex:1 1 100%; font-size:.8em; padding-left:2.7em; padding-right:2.7em; }
}

/* ------------------------------------------------------------
   footer
------------------------------------------------------------ */
/* ⚠ .site-footer, not "footer" (2.4.4, Ben): the bare element rule also painted every
   <footer> INSIDE the content — the post cards' bar was dark ink because of it. The class is
   on the layout's footer (layouts/default.php); this file and the layout go up TOGETHER, or
   the site footer loses its background. */
.site-footer { background:var(--mhl-ink); color:var(--mhl-text); z-index:2; }

#ftMain {
	background:
		radial-gradient(circle at top left, rgba(59,131,216,.12), transparent 38%),	/* was violet (2.4.1) */
		radial-gradient(circle at 80% 0%, rgba(22,87,170,.18), transparent 42%),
		var(--mhl-ink);
	border-top:4px solid transparent;
	border-image:linear-gradient(90deg, var(--ft-accent) 0%, var(--mhl-blue-light) 100%) 1;
}

.ft-grid {
	display:grid;
	grid-template-columns:1.6fr 1fr 1.15fr 1.15fr;
	gap:56px;
}

/* brand column */
.ft-logo { display:block; margin:0 0 1.1em; text-decoration:none; }
.ft-logo img { display:block; width:100%; max-width:340px; margin-left:-2%; }

.ft-tagline {
	max-width:34ch;
	margin:0 0 1.6em;
	color:var(--mhl-muted);
	font-size:.95rem;
	line-height:1.65;
	text-wrap:pretty;
}

/* search */
.ft-search {
	display:flex;
	max-width:360px;
	margin:0 0 1.3em;
	border:1px solid var(--mhl-line);
	border-radius:6px;
	background:var(--mhl-field);
	overflow:hidden;
}
.ft-search input[type="search"] {
	flex:1 1 auto; min-width:0;
	padding:.72em .9em;
	background:transparent; border:0;
	color:#fff; font-size:.95rem;
}
.ft-search input[type="search"]::placeholder { color:#7f92a8; }
.ft-search input[type="search"]:focus { outline:none; }
/* The button is the site's secondary, "btn btn-secondary ft-search-btn" (2.4.1): its colour,
   hover and lack of a ► come from buttons.css. This rule only fits it to the bar — flush,
   square and without a shadow. It was violet until 2.4.1. */
.ft-search .ft-search-btn {
	flex:0 0 auto;
	padding:0 1.1em;
	border:0; border-radius:0;
	box-shadow:none;
	font-size:.9rem; font-weight:700;
	letter-spacing:.02em;
}
.ft-search:focus-within { border-color:rgba(59,131,216,.6); }

/* language + social row */
.ft-utils { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 1.6em; }

.ft-lang select {
	appearance:none; -webkit-appearance:none;
	padding:.62em 2.2em .62em .9em;
	border:1px solid var(--mhl-line); border-radius:6px;
	background:var(--mhl-field) url(../../core_assets/icons/chevron-down.svg) no-repeat right .8em center;
	background-size:.7em;
	color:var(--mhl-text); font-family:inherit; font-size:.9rem;
	cursor:pointer;
}
.ft-lang select:hover { border-color:rgba(255,255,255,.28); }
.ft-lang select option { color:#222; }

.ft-social { display:flex; gap:8px; list-style:none; padding:0; margin:0; }
.ft-social li { margin:0; }
/* Social icons (14 September 2026). The SVG is used as a MASK on ::after and painted with
   currentColor, so the plain black icon files show white on the dark footer — a
   background-image cannot be recoloured. The circle stays on the link's own background.
   Links with no URL in site_vars are not output at all (SiteLinks::social()).
   ⚠ instagram.svg, youtube.svg and x-twitter.svg do not exist in core/assets/icons/ yet —
   add each file before its URL goes into site_vars. */
.ft-social a {
	display:block; position:relative; width:38px; height:38px;
	border-radius:50%;
	background-color:var(--ft-accent);
	color:#fff;
	transition:background-color .2s ease, transform .2s ease;
}
/* Hover and keyboard focus: the footer accent's lighter blue (violet until 2.4.1). */
.ft-social a:hover,
.ft-social a:focus-visible {
	background-color:var(--ft-accent-hover);
	transform:translateY(-2px);
}
.ft-social a:focus-visible { outline:2px solid var(--ft-accent-hover); outline-offset:2px; }
.ft-social a::after {
	content:"";
	position:absolute; top:0; left:0; width:100%; height:100%;
	background-color:currentColor;
	-webkit-mask:var(--ft-social-icon) center / 44% no-repeat;
	        mask:var(--ft-social-icon) center / 44% no-repeat;
}
.ft-social-facebook  { --ft-social-icon:url(/core_assets/icons/facebook-f.svg); }
.ft-social-instagram { --ft-social-icon:url(/core_assets/icons/instagram.svg); }
.ft-social-youtube   { --ft-social-icon:url(/core_assets/icons/youtube.svg); }
.ft-social-x         { --ft-social-icon:url(/core_assets/icons/x-twitter.svg); }

.ft-cta { margin:0; }

/* column headings */
.ft-col h3,
.ft-brand h3 {
	margin:0 0 .5em;
	color:#fff;
	font-size:1.02rem; font-weight:600;
	letter-spacing:.08em; text-transform:uppercase;
}
.ft-col h3::after,
.ft-brand h3::after {
	content:""; display:block;
	width:34px; height:3px;
	margin:.7em 0 1.1em;
	background:linear-gradient(90deg, var(--ft-accent), var(--mhl-blue-light));
}
.ft-col-hd--2 { margin-top:2.2em !important; }

/* link lists */
.ft-list { list-style:none; padding:0; margin:0; }
.ft-list li { margin:.8em 0; }
.ft-list li,
.ft-list li a { color:#e4ebf4; font-weight:350; text-decoration:none; }
.ft-list li a:hover { color:#fff; text-decoration:underline; transition:.2s; }

.ft-list--posts li { margin:1em 0; line-height:1.4; }
.ft-meta {
	display:block; margin-top:.25em;
	color:var(--mhl-muted);
	font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
}

/* country chips */
.ft-tags { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0; }
.ft-tags li { margin:0; }
.ft-tags a {
	display:inline-block;
	padding:.32em .8em;
	border:1px solid var(--mhl-line); border-radius:999px;
	color:#cfe0f7; font-size:.85rem; text-decoration:none;
}
.ft-tags a:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; }

/* placeholder note (reviews in build) */
.ft-note {
	margin:0;
	padding:.9em 1em;
	border:1px dashed rgba(255,255,255,.2); border-radius:6px;
	color:var(--mhl-muted); font-size:.9rem; line-height:1.55;
}
a.txt-link--ft { color:#fff; text-decoration-color:rgba(255,255,255,.5); }
a.txt-link--ft:hover { color:#fff !important; text-decoration-color:#fff !important; }

/* icon list (kept from the MWD footer, recoloured) */
ul.ft-list li.icon { padding-left:1.6em; }
ul.ft-list li.icon:before {
	content:" "; position:absolute; top:5px; left:0;
	width:.9em; height:.9em;
	filter:var(--mhl-filter-accent);
	background:url(../../core_assets/icons/circle-arrow-right-solid.svg) center no-repeat;
	background-size:contain;
}
ul.ft-list li.icon-call:before  { background:url(../../core_assets/icons/mobile-solid-01.svg) center no-repeat; background-size:contain; }
ul.ft-list li.icon-email:before { background:url(../../core_assets/icons/envelope-solid.svg) center no-repeat; background-size:contain; }
ul.ft-list li.icon-pin:before,
ul.ft-list li.icon-directions:before { background:url(../../core_assets/icons/geo-pin-solid.svg) center no-repeat; background-size:contain; }

/* ------------------------------------------------------------
   credit bar — gold, unchanged from the MWD template
------------------------------------------------------------ */
#ftBtm {
	width:100%;
	background:linear-gradient(105deg, #d7a43a 0%, #e1bf63 38%, #f5e4a0 62%, #e0bb5a 82%, #cb9734 100%);
	padding:1rem 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:clamp(12px,1.1vw,15px);
	color:#333;
	z-index:3;
}
.ft-btm-row {
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:space-between;
	gap:4px 24px;
}
#ftBtm p { padding:0; margin:0; }
#ftBtm a { color:#222; font-weight:700; text-decoration:none; }
#ftBtm a:hover { color:#000; text-decoration:underline; }

/* ------------------------------------------------------------
   responsive
------------------------------------------------------------ */
@media only screen and (max-width:1400px) {
	:root { --header-height:90px; }
	.ft-grid { gap:48px 40px; }
}
@media only screen and (min-width:901px) and (max-width:1350px) {
	:root { --header-height:80px; }
}
@media only screen and (min-width:901px) and (max-width:1200px) {
	:root { --header-height:75px; --nav-font-size:13px; }
	.hd-nav ul { gap:2.2vw; }
	.ft-grid { grid-template-columns:1.5fr 1fr 1.1fr 1.1fr; gap:40px 32px; }
	.hd-search.open input, .hd-search:focus-within input { width:150px; }
}
@media only screen and (max-width:1000px) {
	:root { --header-height:65px; --nav-font-size:12px; }
	.site-header.fixed .hd-nav { font-size:11px !important; }
	.hd-nav ul { gap:2vw; }
}
/* 2.7.5 (Ben, 6 November 2026): "Where we stayed" / "Dónde paramos" (was "Reviews") wrapped onto two
   lines between 901px and ~1100px (Spanish worst, at the 13px of 1001–1200px) — a smaller logo and
   gap keep the menu on one line; checked in both languages at 901 / 1001 / 1050 / 1101px. The fixed
   bar keeps its own 250px logo (.site-header.fixed .hd-nav-lt, more specific). */
@media only screen and (min-width:901px) and (max-width:1100px) {
	.hd-nav-lt { width:260px; }
	.hd-nav ul { gap:1.8vw; }
}

/* tablet + mobile menu */
@media only screen and (max-width:900px) {
	:root { --header-height:70px; }

	/* ⚠ Was position:fixed with a dark translucent bar. It is now in the flow and white,
	   like the desktop header (19 September 2026). Note the JS only fixes the bar above
	   900px, so below that the header scrolls away with the page. */
	.site-header { height:auto; }
	header .container { padding:0 !important; }
	#mainNav.hd-nav { height:var(--header-height); padding:0; }
	#header .hd-nav-lt { margin-left:clamp(14px,4vw,28px); width:170px; }

	#menuBtn {
		display:flex; flex-direction:column; justify-content:center; gap:5px;
		width:46px; height:46px; padding:0;
		margin-left:auto; margin-right:clamp(18px,4vw,28px);
		background:transparent; border:0; box-shadow:none;
	}
	#menuBtn::after { display:none; }
	#menuBtn .bar {
		display:block; width:26px; height:2px; margin:0 auto;
		background:var(--hd-fg); border-radius:2px;
		transition:transform .25s ease, opacity .25s ease;
	}
	#header.open #menuBtn .bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
	#header.open #menuBtn .bar:nth-child(2) { opacity:0; }
	#header.open #menuBtn .bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

	/* The drop-down panel carries the fixed bar's blue gradient, so it REDEFINES the state
	   tokens for everything inside it — that is all the link and language-switcher colours
	   need to flip to white here. */
	.hd-nav-rt {
		--hd-fg:#fff;
		--hd-fg-hover:var(--mhl-gold-light);		/* was violet (2.4.1) */
		--hd-line:rgba(255,255,255,.24);

		position:absolute; top:var(--header-height); left:0;
		width:100% !important;
		max-height:0; opacity:0; overflow:hidden;
		background:var(--hd-bg-panel);
		border-bottom:2px solid var(--mhl-blue-dark);		/* was violet (2.4.1) */
		transform:translateY(-12px);
		transition:max-height .45s ease, opacity .28s ease, transform .35s ease;
	}
	#header.open .hd-nav-rt { max-height:none; opacity:1; transform:translateY(0); }

	header .hd-nav-rt ul {
		display:block;
		padding:0; margin:1.6em clamp(18px,5vw,34px);
		border-top:1px solid rgba(255,255,255,.15);
		opacity:0; transform:translateY(-8px);
		transition:opacity .2s ease .2s, transform .2s ease .2s;
	}
	#header.open .hd-nav-rt ul { opacity:1; transform:translateY(0); }
	header .hd-nav-rt ul > li {
		padding:1px; text-align:left;
		border-bottom:1px solid rgba(255,255,255,.15);
	}
	#mainNav.hd-nav ul > li.nav-link:not(.nav-btn) a {
		display:block; padding:1.05em 0;
		font-size:.92rem; letter-spacing:.06em;
		border-bottom:0;
	}
	/* The phone menu does NOT mark the current page (Ben, 11 October 2026, 2.4.1.2): every
	   item is the same white, as on a page with no current item. The desktop bar keeps its
	   light-gold, bold current item. ⚠ !important, the same selector and later in the file
	   are all needed: the rule it overrides (top of this file) is !important too. */
	#mainNav.hd-nav ul > li.nav-link.selected:not(.nav-btn) > a {
		color:var(--hd-fg) !important;
		font-weight:500;
	}
	/* ⚠ The CTA is excluded from the rule above: it would flatten the gold button to
	   "padding:1.05em 0" and leave it with no side padding at all. */
	/* Subscribe and the language pill — option C (Ben, 11 October 2026, 2.4.1.3): the same
	   two pills, but each at least 44px tall (a finger-sized target), the language at full
	   strength instead of language_switcher.css's 72%, and room above, between and below.
	   The pill's side padding stays the one at the top of this file; only its height
	   changes. `.hd-nav-rt .lang-switch__btn` is two classes so it beats
	   language_switcher.css, which loads after this file. */
	#mainNav.hd-nav ul > li.nav-btn { border-bottom:0; padding:1.4em 0 .5em; }
	#mainNav.hd-nav ul > li.nav-btn > a {
		display:inline-flex; align-items:center;
		box-sizing:border-box; min-height:44px;
		padding-top:0; padding-bottom:0;
		font-size:.92rem;
	}
	#mainNav.hd-nav ul > li.nav-link--lang { padding:.5em 0 1.4em; }
	.hd-nav-rt .lang-switch__btn {
		box-sizing:border-box; min-height:44px;
		padding:0 18px;
		opacity:1;
	}
	.hd-lang { padding:1em 0; justify-content:flex-start; }
	.hd-search { padding:1em 0; }
	.hd-search input { width:100% !important; padding:.7em .9em !important; opacity:1 !important; border:1px solid var(--mhl-line); }
	body.menu-open { overflow:hidden; }

	/* footer — tablet */
	.ft-grid { grid-template-columns:repeat(3,1fr); gap:40px 32px; }
	.ft-brand {
		grid-column:1 / -1;
		padding-bottom:2.2em; margin-bottom:.4em;
		border-bottom:1px solid rgba(255,255,255,.1);
	}
	.ft-brand .ft-tagline { max-width:52ch; }
	.ft-search { margin-bottom:1.1em; }
}

@media only screen and (max-width:700px) {
	.ft-grid { grid-template-columns:repeat(2,1fr); gap:0 28px; }
	.ft-brand { padding-bottom:1.8em; }
	.ft-col { padding:1.8em 0; border-bottom:1px solid rgba(255,255,255,.1); }
	.ft-col:last-child { border-bottom:0; }
}

@media only screen and (max-width:600px) {
	.ft-grid { grid-template-columns:1fr; gap:0; }
	.ft-brand,
	.ft-col { padding:1.9em 0; border-bottom:1px solid rgba(255,255,255,.1); }
	.ft-brand { padding-top:.6rem; }
	.ft-col:last-child { border-bottom:0; padding-bottom:0; }
	.ft-col h3 { font-size:.95rem; }
	.ft-col h3::after { margin:.6em 0 .9em; }
	.ft-list li { margin:.65em 0; }
	.ft-search { max-width:none; }
	.ft-utils { gap:12px; }
	.ft-cta { display:block; width:100%; text-align:center; }
	.ft-btm-row { justify-content:center; text-align:center; gap:2px 16px; }
}

@media only screen and (max-width:380px) {
	.ft-logo img { max-width:200px; }
	.ft-social a { width:34px; height:34px; }
}