/**
 * The site's header (templates/header.php, assets/js/header.js), drawn in
 * design-reference/mockups/home/54-picks-light-2.html (the kit's header with
 * round 4's chapter device and 54's fixed slot) and measured there.
 *
 * It stays at the top of the screen and never changes size (Guillem, 2 Oct
 * 2026: "sticky ... and it doesn't change size"): 72px on a laptop, 56 under
 * 1024 (since 1.16.0; 89 and 65 before), the logo 56 and 42 high throughout. The bar is fixed over the
 * header's own box, so nothing under it moves; and being fixed, a focus
 * inside it never scrolls the page (a sticky bar inside the page's
 * scroll-padding would). "More info" opens a card (menu mockup 06); the
 * phone's panel shows the same groups, every one open. The root is .yec-section, one of
 * the roots the old pages' CSS leaves out (README "The front end"); every
 * text and control sets its own type, and every button undoes the theme's
 * button styles.
 *
 * Breakpoints: 1280 and 1200 (laptop widths), 1024 (the full header), 768
 * (where the chapter sits), 375 (the smallest phones).
 */

/* ---- What sits under the header knows how tall it is ---------------------- */

/* One height at every scroll position: --yec-hdr-min (the header once the
   page has moved, read by header.js and the trip page) is the full one. */
body.yec-hdr-on {
	--yec-hdr-top: var(--wp-admin--admin-bar--height, 0px); /* the admin bar, when there is one */
	--yec-hdr-full: 56px; /* the header's box */
	--yec-hdr-min: 56px;  /* once the page has moved: the same */
	--yec-hdr-h: 56px;    /* now: the same */
}

@media (min-width: 1024px) {
	body.yec-hdr-on {
		--yec-hdr-full: 72px;
		--yec-hdr-min: 72px;
		--yec-hdr-h: 72px;
	}
}

/* Under 601px WordPress's admin bar scrolls away with the page: the script
   follows it (header.js), from 46px at the top to 0. */

/* An anchor, a focused field, scrollIntoView(): they land under the header. */
html:has(> body.yec-hdr-on) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 56px);
}

@media (min-width: 1024px) {
	html:has(> body.yec-hdr-on) {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px);
	}
}

/* The plugin's own sticky parts sit under it: the trip page's bar of
   chapters, the head of the availability calendar, a form page's side. */
body.yec-hdr-on .yec-mix__bar,
body.yec-hdr-on .yec-avail__sticky {
	top: calc(var(--yec-hdr-top) + var(--yec-hdr-h));
	transition: top .2s cubic-bezier(.4, 0, .2, 1);
}

body.yec-hdr-on .yec-fpage__side {
	top: calc(var(--yec-hdr-top) + var(--yec-hdr-h) + 32px);
}

/* ---- It stays at the top on the homepage only --------------------------------
   Guillem, 2 Oct 2026: "make the menu non sticky in all pages except homepage.
   in trip pages then the progress bar would be the only sticky thing". On every
   other page (body.yec-hdr-static, YEC_Header::sticky()) the bar is laid in the
   header's own box and scrolls away with the page; what sat under it sticks at
   the very top, and nothing lands under a header that is no longer there. */
body.yec-hdr-static .yec-hdr__bar {
	position: absolute;
	top: 0;
}

body.yec-hdr-static .yec-mix__bar,
body.yec-hdr-static .yec-avail__sticky {
	top: var(--yec-hdr-top, 0px);
}

body.yec-hdr-static .yec-fpage__side {
	top: calc(var(--yec-hdr-top, 0px) + 32px);
}

html:has(> body.yec-hdr-static) {
	scroll-padding-top: var(--wp-admin--admin-bar--height, 0px);
}

/* ---- Its face ---------------------------------------------------------------
   Roboto Condensed comes from Google Fonts (YEC_Header::enqueue()). Until it
   has arrived - or if it never does - the header's words are set in a face
   the device has, scaled to Roboto Condensed's width (measured 1 Oct 2026:
   Arial Bold is 1.23 times as wide, Roboto 1.13), so nothing in the header
   moves when it arrives and nothing overlaps without it. */
@font-face {
	font-family: "YEC Condensed Arial";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 700;
	size-adjust: 81.2%;
}

@font-face {
	font-family: "YEC Condensed Roboto";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 600 700;
	size-adjust: 88.1%;
}

/* ---- The header ------------------------------------------------------------ */

.yec-hdr.yec-section {
	--yec-hdr-bg: var(--global-palette9, #fff);              /* surface */
	--yec-hdr-line: var(--global-palette7, #edf2f7);         /* divider, hairline */
	--yec-hdr-soft: var(--global-palette8, #f7fafc);         /* hover, chosen chapter */
	--yec-hdr-ink: var(--global-palette3, #1a202c);          /* text, focus ring */
	--yec-hdr-muted: var(--global-palette5, #4a5568);        /* the chapter's words, small print */
	--yec-hdr-past: var(--global-palette4, #2d3748);         /* chapters already read */
	--yec-hdr-action: var(--global-palette1, #f89c00);       /* Book now, the hairline's fill */
	--yec-hdr-action-hover: var(--global-palette2, #fed620); /* Book now pressed */
	--yec-hdr-accent-ink: #9a5c00;                           /* the menu's icons: the orange darkened to 4.5:1, as on the new pages */
	--yec-hdr-paper: #f4efe5;                                /* the line to talk to the club: the trip page's warm paper */
	--yec-hdr-font: "Roboto Condensed", "YEC Condensed Arial", "YEC Condensed Roboto", var(--global-body-font-family, sans-serif);
	--yec-hdr-body: var(--global-body-font-family, sans-serif);
	--yec-hdr-gutter: 20px;
	--yec-hdr-ease: cubic-bezier(.4, 0, .2, 1);
	position: relative;
	z-index: 1000;
	display: block;
	/* The room the bar takes in the page: its first height, whatever it is now. */
	height: var(--yec-hdr-full, 56px);
	margin: 0;
	padding: 0;
	background: none;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

@media (min-width: 1200px) {
	.yec-hdr.yec-section {
		--yec-hdr-gutter: 56px;
	}
}

.yec-hdr *,
.yec-hdr *::before,
.yec-hdr *::after {
	box-sizing: border-box;
}

.yec-hdr ul,
.yec-hdr ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yec-hdr li,
.yec-hdr p {
	margin: 0;
	padding: 0;
}

.yec-hdr svg {
	display: block;
	flex: none;
}

.yec-hdr__bar {
	position: fixed;
	top: var(--yec-hdr-top, 0px);
	right: 0;
	left: 0;
	height: var(--yec-hdr-full, 56px);
	border-bottom: 1px solid var(--yec-hdr-line);
	background: var(--yec-hdr-bg);
}

/* Until 1.13.0 the bar shrank to 65px once a laptop's page had moved; it no
   longer does. header.js still marks html.yec-hdr-compact, which nothing
   draws. The card of "More info" is placed against this box. */
.yec-hdr__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--yec-hdr-gutter);
}

.yec-hdr__left,
.yec-hdr__right {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

/* The right side fills its column, packed to the end: a side wider than its
   column reaches into the gap by the logo rather than past the edge. */
.yec-hdr__right {
	justify-content: flex-end;
}

/* Nothing in the sides is squeezed: where a side is tight (1280 wide, the
   logo at full size) it reaches into the gap by the logo, and the chapter's
   slot keeps its width in the hero and in every chapter. */
.yec-hdr__left > *,
.yec-hdr__right > * {
	flex: none;
}

/* A laptop: MORE INFO, the chapter's slot and BOOK NOW a step closer. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.yec-hdr__right {
		gap: 16px;
	}
}
/* ---- The words: the site's button face, in capitals ------------------------ */

.yec-hdr.yec-section .yec-hdr__link,
.yec-hdr.yec-section .yec-hdr__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .03em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.yec-hdr.yec-section .yec-hdr__link:hover,
.yec-hdr.yec-section .yec-hdr__btn:hover,
.yec-hdr.yec-section .yec-hdr__btn:focus,
.yec-hdr.yec-section .yec-hdr__btn:active {
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-ink);
}

.yec-hdr.yec-section .yec-hdr__link:hover,
.yec-hdr.yec-section .yec-hdr__btn:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.yec-hdr__btn .yec-icon--chevron-down {
	transition: transform .2s var(--yec-hdr-ease);
}

.yec-hdr__btn[aria-expanded="true"] .yec-icon--chevron-down {
	transform: rotate(180deg);
}

.yec-hdr.yec-section a:focus-visible,
.yec-hdr.yec-section button:focus-visible {
	outline: 2px solid var(--yec-hdr-ink);
	outline-offset: 3px;
}

.yec-hdr__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* ---- The logo --------------------------------------------------------------- */

.yec-hdr.yec-section .yec-hdr__logo {
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* 56px on a laptop since 1.16.0 (menu mockup 11 B, Guillem, 3 Oct 2026: a
   slightly thinner header), the same at every scroll position. */
.yec-hdr.yec-section .yec-hdr__logoimg {
	display: block;
	width: auto;
	max-width: none;
	height: 56px;
}

.yec-hdr__logotext {
	display: block;
	color: var(--yec-hdr-ink);
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
}

/* ---- The menus: the languages, More info ------------------------------------ */

.yec-hdr__drop {
	position: relative;
}

.yec-hdr__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	display: grid;
	min-width: 260px;
	padding: 12px 0;
	border: 1px solid var(--yec-hdr-line);
	border-radius: 8px;
	background: var(--yec-hdr-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.yec-hdr__panel[hidden] {
	display: none;
}

/* The gap over a menu belongs to it, so a pointer crossing it keeps it open. */
.yec-hdr__panel::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 9px;
}

.yec-hdr__panel--lang {
	right: auto;
	left: 0;
	min-width: 180px;
}

.yec-hdr.yec-section .yec-hdr__panel--lang a {
	display: flex;
	align-items: center;
	padding: 8px 20px;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .03em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.yec-hdr.yec-section .yec-hdr__panel--lang a:hover {
	color: var(--yec-hdr-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.yec-hdr.yec-section .yec-hdr__panel--lang a:focus-visible {
	outline-offset: -2px;
}

/* The language being read (not in the mockup). */
.yec-hdr.yec-section .yec-hdr__panel--lang a[aria-current] {
	box-shadow: inset 3px 0 0 var(--yec-hdr-action);
}

/* Without the script: a menu opens while the pointer or the focus is in it. */
html:not(.yec-hdr-js) .yec-hdr__drop:hover > .yec-hdr__panel[hidden],
html:not(.yec-hdr-js) .yec-hdr__drop:focus-within > .yec-hdr__panel[hidden] {
	display: grid;
}

html:not(.yec-hdr-js) .yec-hdr__drop:hover > .yec-hdr__card[hidden],
html:not(.yec-hdr-js) .yec-hdr__drop:focus-within > .yec-hdr__card[hidden] {
	display: block;
}

/* ---- "More info": a card under the header (menu mockup 06) ------------------
   Hung against the header's own box (.yec-hdr__in), its right edge on "Book
   now"'s: the menu's groups side by side, then the line to talk to the club.
   Measured in design-archive/mockups/menu/menu-06-compact-card.html. */

.yec-hdr__drop--more {
	position: static;
}

.yec-hdr.yec-section .yec-hdr__card {
	top: calc(100% + 8px);
	right: var(--yec-hdr-gutter);
	left: auto;
	display: block;
	width: 800px;
	max-width: calc(100vw - 2 * var(--yec-hdr-gutter));
	padding: 22px 24px 20px;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(12, 33, 55, .14);
	text-transform: none;
	animation: yec-hdr-in .2s var(--yec-hdr-ease);
}

.yec-hdr.yec-section .yec-hdr__card--2 {
	width: 560px;
}

.yec-hdr.yec-section .yec-hdr__card--1 {
	width: 340px;
}

.yec-hdr.yec-section .yec-hdr__card[hidden] {
	display: none;
}

.yec-hdr__groups {
	display: grid;
	grid-template-columns: repeat(var(--yec-hdr-cols, 1), minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 18px;
}

.yec-hdr__card--2 .yec-hdr__groups {
	--yec-hdr-cols: 2;
}

/* Three groups as the mockup has them: the camps a little wider. */
.yec-hdr__card--3 .yec-hdr__groups {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
}

.yec-hdr .yec-hdr__gh {
	margin: 0 0 6px;
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* A link: its icon in the darker orange, the name, the ages as a small note. */
.yec-hdr.yec-section .yec-hdr__links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-body);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

.yec-hdr__links .yec-icon {
	color: var(--yec-hdr-accent-ink);
}

.yec-hdr__links small {
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.yec-hdr.yec-section .yec-hdr__links a:hover {
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

.yec-hdr.yec-section .yec-hdr__links a:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The page being read (not in the mockup). */
.yec-hdr.yec-section .yec-hdr__links a[aria-current] span {
	text-decoration: underline;
	text-decoration-color: var(--yec-hdr-action);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* The line to talk to the club, on the warm paper of the new pages. */
.yec-hdr__talk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* 24px, not the mockup's 26: the site's Nunito sets "WhatsApp" and "Video
	   call" 3px wider than the mockup's, which pushed "Contact page" onto a
	   second row of the 800px card. */
	gap: 4px 24px;
	padding: 10px 20px;
	border-radius: 12px;
	background: var(--yec-hdr-paper);
}

.yec-hdr .yec-hdr__talkh {
	margin: 0 2px 0 0;
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.yec-hdr.yec-section .yec-hdr__way {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

.yec-hdr.yec-section .yec-hdr__way:hover {
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

.yec-hdr.yec-section .yec-hdr__way:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yec-hdr.yec-section .yec-hdr__contact {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	margin-left: auto;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .06em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.yec-hdr.yec-section .yec-hdr__contact:hover {
	color: var(--yec-hdr-accent-ink);
}

/* ---- The brochure, the languages and More info, made visible ----------------
   Menu mockup 11 B (design-archive/mockups/menu/menu-11-thinner.html, Guillem,
   3 Oct 2026: "make the more info and download brochure more visible and the
   language selector also"): the brochure and More info on the warm paper, the
   brochure with an orange disc; every language on show, the one being read
   dark. Every control 36px high, Book now included. */

.yec-hdr.yec-section .yec-hdr__bro,
.yec-hdr.yec-section .yec-hdr__more {
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border-radius: 18px;
	background: var(--yec-hdr-paper);
	transition: background-color .2s var(--yec-hdr-ease);
}

.yec-hdr.yec-section .yec-hdr__bro {
	padding-left: 5px;
}

.yec-hdr.yec-section .yec-hdr__bro:hover,
.yec-hdr.yec-section .yec-hdr__more:hover,
.yec-hdr.yec-section .yec-hdr__more:focus,
.yec-hdr.yec-section .yec-hdr__more[aria-expanded="true"] {
	background: #ebe3d3; /* the paper a step darker */
	text-decoration: none;
}

.yec-hdr__disc {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--yec-hdr-action);
	color: var(--yec-hdr-ink);
}

.yec-hdr.yec-section .yec-hdr__more {
	gap: 6px;
}

/* The languages: a pill of two-letter codes. */
.yec-hdr.yec-section .yec-hdr__langbar {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 36px;
	padding: 3px;
	border: 1px solid var(--yec-hdr-line);
	border-radius: 18px;
}

.yec-hdr.yec-section .yec-hdr__langbar a {
	display: grid;
	place-items: center;
	min-width: 34px;
	height: 28px;
	padding: 0 6px;
	border-radius: 14px;
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s var(--yec-hdr-ease), color .2s var(--yec-hdr-ease);
}

.yec-hdr.yec-section .yec-hdr__langbar a:hover {
	background: var(--yec-hdr-soft);
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

.yec-hdr.yec-section .yec-hdr__langbar a[aria-current] {
	background: var(--yec-hdr-ink);
	color: var(--yec-hdr-bg);
}

.yec-hdr.yec-section .yec-hdr__langbar a:focus-visible {
	outline-offset: 1px;
}

/* 1024-1279: the left side a step tighter, so it never reaches the logo. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.yec-hdr__left {
		gap: 12px;
	}

	.yec-hdr.yec-section .yec-hdr__bro {
		padding-right: 12px;
		font-size: 13px;
		letter-spacing: .02em;
	}

	.yec-hdr.yec-section .yec-hdr__langbar a {
		min-width: 30px;
		padding: 0 4px;
	}
}

/* A tablet and a phone: the language beside Book now. A laptop has the bar. */
.yec-hdr.yec-section .yec-hdr__mlang {
	gap: 2px;
	height: 32px;
	padding: 0 8px 0 10px;
	border-radius: 16px;
	background: var(--yec-hdr-paper);
	font-size: 13px;
	letter-spacing: .06em;
}

.yec-hdr.yec-section .yec-hdr__mlang:hover,
.yec-hdr.yec-section .yec-hdr__mlang[aria-expanded="true"] {
	background: #ebe3d3;
	text-decoration: none;
}

.yec-hdr__drop--mlang .yec-hdr__panel--lang {
	right: 0;
	left: auto;
}

@media (min-width: 1024px) {
	.yec-hdr__drop--mlang {
		display: none;
	}
}

/* ---- Book now --------------------------------------------------------------- */

.yec-hdr.yec-section .yec-hdr__book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	margin: 0;
	padding: 0 35px;
	border: 0;
	border-radius: 18px;
	background: var(--yec-hdr-action);
	box-shadow: none;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 14px;
	line-height: 22.4px;
	font-weight: 600;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s var(--yec-hdr-ease), color .2s var(--yec-hdr-ease), transform .2s var(--yec-hdr-ease);
}

.yec-hdr.yec-section .yec-hdr__book:hover,
.yec-hdr.yec-section .yec-hdr__book:focus {
	background: var(--yec-hdr-action-hover);
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

.yec-hdr.yec-section .yec-hdr__book:active {
	transform: scale(.97);
}

/* 1024-1439: BOOK NOW 7px narrower each side, which gives back to the
   chapter's slot what the larger logo (68px since 1.13.0) took: in English
   no chapter name gives way at 1280. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.yec-hdr.yec-section .yec-hdr__right > .yec-hdr__book {
		padding-right: 28px;
		padding-left: 28px;
	}
}

/* ---- The menu button and its panel (under 1024) ------------------------------ */

/* A laptop has no menu button: it takes no room (nor a gap) beside BOOK NOW. */
@media (min-width: 1024px) {
	.yec-hdr__menu {
		display: none;
	}
}

.yec-hdr.yec-section .yec-hdr__burger {
	display: none;
	place-items: center;
	width: 44px;
	min-width: 0;
	height: 44px;
	min-height: 0;
	margin: 0 -10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-ink);
	cursor: pointer;
}

.yec-hdr.yec-section .yec-hdr__burger:hover,
.yec-hdr.yec-section .yec-hdr__burger:focus,
.yec-hdr.yec-section .yec-hdr__burger:active {
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-ink);
}

.yec-hdr__burger .yec-hdr__close,
.yec-hdr__burger[aria-expanded="true"] .yec-hdr__open {
	display: none;
}

.yec-hdr__burger[aria-expanded="true"] .yec-hdr__close {
	display: block;
}

.yec-hdr__sheet {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 60;
	max-height: calc(100vh - var(--yec-hdr-top, 0px) - var(--yec-hdr-h, 56px));
	max-height: calc(100dvh - var(--yec-hdr-top, 0px) - var(--yec-hdr-h, 56px));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px var(--yec-hdr-gutter) 20px;
	border-top: 1px solid var(--yec-hdr-line);
	background: var(--yec-hdr-bg);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.yec-hdr__sheet[hidden] {
	display: none;
}

.yec-hdr__sheet:not([hidden]) {
	animation: yec-hdr-in .2s var(--yec-hdr-ease);
}

@keyframes yec-hdr-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The menu's groups, every one open: a group's heading folds it. */
.yec-hdr__sgroup {
	border-bottom: 1px solid var(--yec-hdr-line);
}

.yec-hdr.yec-section .yec-hdr__fold {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .03em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.yec-hdr.yec-section .yec-hdr__fold:hover,
.yec-hdr.yec-section .yec-hdr__fold:focus,
.yec-hdr.yec-section .yec-hdr__fold:active {
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-ink);
}

.yec-hdr__fold .yec-icon {
	transform: rotate(180deg);
	transition: transform .2s var(--yec-hdr-ease);
}

.yec-hdr__fold[aria-expanded="false"] .yec-icon {
	transform: none;
}

/* Without the script nothing folds: the headings are just headings. */
html:not(.yec-hdr-js) .yec-hdr__fold {
	cursor: default;
}

html:not(.yec-hdr-js) .yec-hdr__fold .yec-icon {
	display: none;
}

.yec-hdr__sheet .yec-hdr__links {
	padding-bottom: 12px;
}

.yec-hdr__sheet .yec-hdr__fold + .yec-hdr__links {
	padding-top: 6px;
}

.yec-hdr__sheet .yec-hdr__links[hidden] {
	display: none;
}

.yec-hdr.yec-section .yec-hdr__sheet .yec-hdr__links a {
	padding: 9px 0;
}

/* A menu made before 1.13.0 has no headings: one list with no fold. */
.yec-hdr__sgroup:first-child > .yec-hdr__links:first-child {
	padding-top: 8px;
}

.yec-hdr__sheet .yec-hdr__talk {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
	margin-top: 16px;
	padding: 12px 16px;
}

.yec-hdr__sheet .yec-hdr__talkh {
	grid-column: 1 / -1;
}

.yec-hdr.yec-section .yec-hdr__sheet .yec-hdr__contact {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 2px 0 0;
}

.yec-hdr.yec-section .yec-hdr__sbro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin-top: 20px;
	padding: 10px 24px;
	border: 0;
	border-radius: 0;
	background: var(--yec-hdr-bg);
	box-shadow: inset 0 0 0 1px var(--yec-hdr-ink);
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: uppercase;
	transition: box-shadow .2s var(--yec-hdr-ease);
}

.yec-hdr.yec-section .yec-hdr__sbro:hover {
	box-shadow: inset 0 0 0 2px var(--yec-hdr-action);
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

/* The languages, as chips: the one being read dark. */
.yec-hdr__langs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 16px;
}

.yec-hdr.yec-section .yec-hdr__langs a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--yec-hdr-line);
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

.yec-hdr.yec-section .yec-hdr__langs a:hover {
	box-shadow: inset 0 0 0 1px var(--yec-hdr-action);
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

.yec-hdr.yec-section .yec-hdr__langs a[aria-current] {
	background: var(--yec-hdr-ink);
	box-shadow: none;
	color: var(--yec-hdr-bg);
}

/* A tablet: the links in two columns, the line on one row. */
@media (min-width: 600px) and (max-width: 1023px) {
	.yec-hdr__sheet .yec-hdr__links {
		columns: 2;
		column-gap: 24px;
	}

	.yec-hdr__sheet .yec-hdr__links li {
		break-inside: avoid;
	}

	.yec-hdr__sheet .yec-hdr__talk {
		grid-template-columns: repeat(4, auto);
		justify-content: start;
		column-gap: 28px;
	}
}

/* Without the script: the panel shows while the focus is in the menu. */
html:not(.yec-hdr-js) .yec-hdr__menu:focus-within > .yec-hdr__sheet[hidden] {
	display: block;
}

/* While the panel is open the page under it does not scroll. */
html.yec-hdr-locked,
html.yec-hdr-locked body {
	overflow: hidden;
}

/* ---- The chapter being read (pages with [data-chapter] sections) ------------- */

.yec-hdr__where {
	position: relative;
}

@media (min-width: 768px) {
	.yec-hdr__where {
		padding-left: 16px;
		border-left: 1px solid var(--yec-hdr-line);
	}
}

/* The live name and, unseen in the same cell, every name it can show: the
   slot is as wide as the longest, so MORE INFO and BOOK NOW never move. */
.yec-hdr.yec-section .yec-hdr__wbtn {
	display: inline-grid;
	align-items: center;
	width: auto;
	min-height: 32px;
	margin: 0 -8px;
	padding: 4px 8px;
	border: 0;
	border-radius: 4px;
	background: none;
	box-shadow: none;
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: .12em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.yec-hdr.yec-section .yec-hdr__wbtn:hover,
.yec-hdr.yec-section .yec-hdr__where[data-open] .yec-hdr__wbtn {
	background: var(--yec-hdr-soft);
	box-shadow: none;
	color: var(--yec-hdr-ink);
}

.yec-hdr.yec-section .yec-hdr__wbtn:focus-visible {
	outline-offset: 1px;
}

.yec-hdr__wbtn b {
	color: var(--yec-hdr-ink);
	font-weight: 700;
}

.yec-hdr__live,
.yec-hdr__sizer {
	grid-area: 1 / 1;
	min-width: 0;
}

.yec-hdr__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.yec-hdr__live .yec-icon {
	transition: transform .2s var(--yec-hdr-ease);
}

.yec-hdr__where[data-open] .yec-hdr__live .yec-icon {
	transform: rotate(180deg);
}

.yec-hdr__sizer {
	display: grid;
	visibility: hidden;
	pointer-events: none;
}

.yec-hdr__sizer > * {
	grid-area: 1 / 1;
	padding-right: 20px;
}

.yec-hdr__sizer > .yec-hdr__sz--short {
	display: none;
}

/* 1024-1279: the number over the short name. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.yec-hdr__sizer > .yec-hdr__sz--full {
		display: none;
	}

	.yec-hdr__sizer > .yec-hdr__sz--short {
		display: grid;
	}

	.yec-hdr__now {
		display: grid;
		font-size: 11px;
		line-height: 14px;
	}

	.yec-hdr__sep {
		display: none;
	}
}

/* A laptop, in a language whose names run long (French, German, Spanish):
   the right side may reach 8px into the gap by the logo, never further. If
   MORE INFO, the slot and BOOK NOW still do not fit, the slot gives way - by
   the same amount at every chapter, so nothing moves - and a name too long
   for it ends in an ellipsis. In English nothing gives way. */
@media (min-width: 1024px) {
	.yec-hdr__right {
		margin-left: -8px;
	}

	.yec-hdr__right > .yec-hdr__where {
		flex: 0 1 auto;
		min-width: 0;
	}

	.yec-hdr.yec-section .yec-hdr__wbtn {
		max-width: calc(100% + 16px);
		overflow: hidden;
	}

	.yec-hdr__live {
		max-width: 100%;
	}

	.yec-hdr__live .yec-icon {
		flex: none;
	}

	.yec-hdr__live .yec-hdr__now,
	.yec-hdr__now > span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.yec-hdr__wpanel {
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	z-index: 60;
	width: 300px;
	max-height: calc(100vh - 96px);
	overflow-y: auto;
	padding: 12px 0 8px;
	border: 1px solid var(--yec-hdr-line);
	border-radius: 12px;
	background: var(--yec-hdr-bg);
	box-shadow: 0 12px 32px rgba(12, 33, 55, .14);
	letter-spacing: 0;
	text-transform: none;
}

.yec-hdr__wpanel[hidden] {
	display: none;
}

.yec-hdr .yec-hdr__wtitle {
	padding: 0 16px 8px;
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.yec-hdr.yec-section .yec-hdr__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	padding: 8px 16px 8px 13px;
	border-left: 3px solid transparent;
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-body);
	font-size: 15px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

.yec-hdr.yec-section .yec-hdr__list a:hover {
	background: var(--yec-hdr-soft);
	color: var(--yec-hdr-ink);
	text-decoration: none;
}

.yec-hdr.yec-section .yec-hdr__list a:focus-visible {
	outline-offset: -2px;
}

.yec-hdr__n {
	flex: none;
	min-width: 20px;
	color: var(--yec-hdr-muted);
	font-family: var(--yec-hdr-font);
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: .1em;
}

.yec-hdr__list [data-state="past"] .yec-hdr__label {
	color: var(--yec-hdr-past);
}

.yec-hdr.yec-section .yec-hdr__list a[aria-current] {
	border-left-color: var(--yec-hdr-action);
	background: var(--yec-hdr-soft);
	font-weight: 700;
}

.yec-hdr__list a[aria-current] .yec-hdr__n {
	color: var(--yec-hdr-ink);
}

.yec-hdr__nextl {
	display: none;
	margin-left: auto;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--yec-hdr-line);
	color: var(--yec-hdr-ink);
	font-family: var(--yec-hdr-font);
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.yec-hdr__list [data-state="next"] .yec-hdr__nextl {
	display: inline-block;
}

/* The 2px hairline along the foot, filling with orange as you read, one
   segment per chapter. */
.yec-hdr__hair {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--yec-hdr-line);
	pointer-events: none;
}

.yec-hdr__hair::before,
.yec-hdr__hair::after {
	content: "";
	position: absolute;
	inset: 0;
}

.yec-hdr__hair::before {
	background: var(--yec-hdr-action);
	transform: scaleX(var(--wf-fill, 0));
	transform-origin: 0 50%;
}

.yec-hdr__hair::after {
	background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--wf-count, 9) - 2px), var(--yec-hdr-bg) 0 calc(100% / var(--wf-count, 9)));
}

/* ---- A tablet and a phone: the logo left, a menu button --------------------- */

@media (max-width: 1023px) {
	.yec-hdr__in {
		grid-template-columns: auto 1fr;
	}

	.yec-hdr__left,
	.yec-hdr__drop--more {
		display: none;
	}

	.yec-hdr__logo {
		grid-row: 1;
		grid-column: 1;
	}

	.yec-hdr.yec-section .yec-hdr__logoimg {
		height: 42px;
	}

	.yec-hdr__right {
		gap: 12px;
	}

	.yec-hdr.yec-section .yec-hdr__burger {
		display: grid;
	}

	.yec-hdr.yec-section .yec-hdr__book {
		height: 32px;
		padding: 0 16px;
		border-radius: 16px;
		font-size: 13px;
		line-height: 20px;
	}
}

/* A phone: the logo, the chapter (the room left, whatever its name), BOOK NOW
   and the menu button, on one row. The chapter shows once the chapters begin,
   the number over the short name, which takes a second line when it needs
   one; the logo keeps its size (until 1.13.0 it shrank to 30px). */
@media (max-width: 767px) {
	.yec-hdr__in {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 10px;
		row-gap: 0;
	}

	.yec-hdr__logo {
		grid-area: 1 / 1;
		align-self: center;
	}

	.yec-hdr__where {
		display: none;
		grid-area: 1 / 2;
		align-self: center;
		justify-self: stretch;
		min-width: 0;
	}

	html.yec-hdr-in .yec-hdr__where {
		display: block;
	}

	.yec-hdr__right {
		grid-area: 1 / 3;
		gap: 8px;
	}

	.yec-hdr.yec-section .yec-hdr__book {
		padding: 0 12px;
	}

	/* The button fills the slot: its box is the same at every chapter too,
	   46px high whether the name takes one line or two, the number at the
	   same place (since 1.13.0). */
	.yec-hdr.yec-section .yec-hdr__wbtn {
		align-items: start;
		align-content: start;
		width: calc(100% + 12px);
		height: 46px;
		min-height: 46px;
		margin: 0 -6px;
		padding: 2px 6px;
		font-size: 11px;
		line-height: 14px;
		letter-spacing: .08em;
	}

	.yec-hdr__sizer {
		display: none;
	}

	.yec-hdr__live {
		gap: 4px;
		max-width: 100%;
	}

	.yec-hdr__now {
		display: grid;
		min-width: 0;
	}

	.yec-hdr__now > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The name: two lines at most, so it never pushes the logo. */
	.yec-hdr__now > span:last-child {
		display: -webkit-box;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.yec-hdr__sep {
		display: none;
	}

	.yec-hdr__wpanel {
		position: fixed;
		top: calc(var(--yec-hdr-top, 0px) + var(--yec-hdr-h, 56px) + 8px);
		right: auto;
		left: 12px;
		width: min(320px, calc(100vw - 24px));
		max-height: calc(100vh - var(--yec-hdr-top, 0px) - var(--yec-hdr-h, 56px) - 24px);
	}
}

@media (max-width: 374px) {
	.yec-hdr__in {
		column-gap: 8px;
	}

	.yec-hdr.yec-section .yec-hdr__logoimg {
		height: 36px;
	}

	.yec-hdr.yec-section .yec-hdr__book {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 12px;
	}
}

/* ---- Reduced motion: nothing glides, shrinks or turns ----------------------- */

@media (prefers-reduced-motion: reduce) {
	.yec-hdr__bar,
	.yec-hdr__in,
	.yec-hdr.yec-section .yec-hdr__logoimg,
	.yec-hdr.yec-section .yec-hdr__book,
	.yec-hdr__btn .yec-icon--chevron-down,
	.yec-hdr__live .yec-icon,
	body.yec-hdr-on .yec-mix__bar,
	body.yec-hdr-on .yec-avail__sticky {
		transition: none;
	}

	.yec-hdr__sheet:not([hidden]),
	.yec-hdr.yec-section .yec-hdr__card {
		animation: none;
	}

	.yec-hdr__fold .yec-icon {
		transition: none;
	}

	.yec-hdr.yec-section .yec-hdr__book:active {
		transform: none;
	}
}