/*
 * Ferme Les Prises -- the theme's only stylesheet.
 *
 * Design tokens are NOT defined here. They live in theme.json, which emits them
 * as --wp--preset--* custom properties, and this file consumes those. One
 * definition, one place: a token duplicated here would drift from the one the
 * block editor's colour and size pickers offer the client.
 *
 * What lives here is everything theme.json cannot express: the navigation
 * overlay behaviour, the hero, grid and card layout, focus states, print.
 */

/* --------------------------------------------------------------------------
 * Derived values
 *
 * Only values that need calc() or that a media query must read. Note that a
 * custom property CANNOT be used in a media-query condition, so the nav
 * breakpoint below is repeated as a literal; the two are kept adjacent.
 * ----------------------------------------------------------------------- */
:root {
	--flp-nav-breakpoint: 56.25rem;   /* keep in sync with the @media literal */
	--flp-hero-min: clamp(18rem, 42vw, 30rem);
}

/* --------------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Measure is governed by theme.json's contentSize (42rem), NOT by a max-width
 * here. An earlier `.flp-main :where(p, li) { max-width: 65ch }` looked correct
 * in isolation but has specificity (0,1,0), while core's constrained-layout cap
 * is written with :where() at (0,0,0) -- so it overrode the layout and every
 * paragraph became as wide as 65 characters of ITS OWN font size. The result
 * was a lead paragraph 908px wide sitting above a body paragraph 672px wide,
 * with the headings aligned to neither.
 *
 * 42rem is roughly 65ch at the body size, so the intent is preserved and the
 * block editor shows the same width the front end does.
 */

/* Visible focus everywhere. The old theme relied on the browser default, which
   Embla then removed with outline:none on the menu toggle. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.flp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.flp-skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
 * Header and navigation
 *
 * The rule this whole project exists to never write again:
 *
 *   .main-navigation ul li:nth-child(n+5) { display: none }
 *
 * Embla hid menu items by index below 1280px, so on every laptop window that
 * was not maximised the Contact link simply did not exist. Nothing in this
 * file may hide a navigation item at any width. tools/check-css.py fails the
 * build on any nth-child selector to keep it that way.
 * ----------------------------------------------------------------------- */
.flp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* The sticky header sits over content, so it needs its own opaque ground. */
	background: var(--wp--preset--color--base);
}

.flp-header__bar {
	align-items: center;
}

.flp-header__brand .wp-block-site-title {
	margin: 0;
	line-height: 1.1;
}

.flp-header__brand .wp-block-site-tagline {
	margin: 0.15em 0 0;
}

/*
 * Core's Navigation block switches to its overlay at a hardcoded 600px that
 * theme.json cannot change. Between 600px and the width where six labels fit
 * on one line (~900px), the bar would otherwise overflow horizontally. Let it
 * wrap onto a second row instead: no item is ever hidden, and no core internals
 * are reimplemented.
 */
.wp-block-navigation__container {
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--20);
	column-gap: var(--wp--preset--spacing--30);
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35em;
	border-bottom: 2px solid transparent;
	transition: border-color 120ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--primary);
}

/* The overlay is a dark full-screen sheet; give its items room to be tapped. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.6em;
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Submenus on wide screens, styled after the SDS prototype's dropdown. Core
 * owns the behaviour: a submenu opens on hover or keyboard focus, and the
 * chevron toggles it for touch. The drawer has its own submenu rules in the
 * mobile section below, so these stay at the width where the bar is a bar.
 */
@media (min-width: 600px) {
	.wp-block-navigation .wp-block-navigation-submenu__toggle {
		padding-inline: 0.2em 0;
	}

	.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
		transition: transform 150ms ease;
	}

	.wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* The menu is right-justified, and core hangs dropdowns of such a menu
	   from the parent's right edge (left:auto; right:0). Like the prototype,
	   the dropdown starts at the parent's left edge instead. One class more
	   than core's rule. */
	.flp-header .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
		left: 0;
		right: auto;
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		padding: var(--wp--preset--spacing--20);
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius-sm);
		box-shadow: var(--wp--custom--shadow-soft);
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.5em 0.75em;
		border-bottom: 0;
		border-radius: var(--wp--custom--radius-sm);
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--base-2);
	}
}

/* --------------------------------------------------------------------------
 * Language switcher
 * ----------------------------------------------------------------------- */
.flp-lang__list {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
}

.flp-lang__link {
	display: inline-block;
	padding: 0.3em 0.55em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-sm);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	font-weight: 600;
}

.flp-lang__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.flp-lang__link.is-current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
 * Buttons rendered by the theme's own dynamic blocks
 *
 * theme.json styles core/button; these are the same shape for markup that is
 * not a core button block.
 * ----------------------------------------------------------------------- */
.flp-btn {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius-sm);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}

.flp-btn--primary { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.flp-btn--primary:hover { background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--base); }
.flp-btn--accent  { background: var(--wp--preset--color--accent);  color: var(--wp--preset--color--base); }
.flp-btn--accent:hover { background: var(--wp--preset--color--accent-dark); color: var(--wp--preset--color--base); }

.flp-btn--outline {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}
.flp-btn--outline:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }

/* --------------------------------------------------------------------------
 * Hero
 *
 * The watercolour is 4032x896 (4.5:1). At phone widths a 4.5:1 band is a
 * letterbox slice, so the image is cropped by object-fit against a minimum
 * height rather than being allowed to dictate one.
 *
 * The hero is core blocks at the top of the home page's content, and
 * flp_hero_media() adds the image on the front end only. The dark ground keeps
 * the white text readable in the editor, and shows while the image loads.
 * ----------------------------------------------------------------------- */
.flp-hero {
	position: relative;
	isolation: isolate;
	background: var(--wp--preset--color--contrast);
}

.flp-main--front .flp-hero > .flp-hero__overlay,
.flp-main--front .flp-hero__inner > .flp-hero__title {
	margin-block: 0;
}

.flp-main--front .flp-hero + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.flp-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.flp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The farmhouse and the grazing cows both sit left of centre; a centred
	   crop loses the barn on narrow viewports. */
	object-position: 40% 50%;
	display: block;
	border-radius: 0;
}

.flp-hero__overlay {
	display: flex;
	align-items: flex-end;
	min-height: var(--flp-hero-min);
	/* Dark wash so white text clears AA over the meadow's bright greens. */
	background: linear-gradient(
		to top,
		rgb(46 36 24 / 0.78) 0%,
		rgb(46 36 24 / 0.45) 45%,
		rgb(46 36 24 / 0.10) 100%
	);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.flp-hero__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.flp-hero__title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1.05;
	text-wrap: balance;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
}

.flp-hero__lead {
	margin: 0.6em 0 0;
	max-width: 38rem;
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
}

.flp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Both buttons carry the same 2px border so they line up at the same height. */
.flp-hero__actions .wp-block-button__link {
	border: 2px solid transparent;
	line-height: 1.2;
}

.flp-hero__ghost .wp-block-button__link,
.flp-hero__ghost .wp-block-button__link:focus,
.flp-hero__ghost .wp-block-button__link:active {
	border-color: currentColor;
	color: #fff;
	background: rgb(0 0 0 / 0.25);
	backdrop-filter: blur(2px);
}
.flp-hero__ghost .wp-block-button__link:hover { background: rgb(0 0 0 / 0.45); color: #fff; }

/* --------------------------------------------------------------------------
 * Activity cards
 * ----------------------------------------------------------------------- */
/*
 * The grid itself comes from core: the cards are a core/group with
 * layout {"type":"grid","minimumColumnWidth":"18rem"}, so the columns, the gap
 * and the responsive collapse are core's and stay editable in the block editor.
 * Only the spacing above and below is ours.
 */
.flp-cards {
	margin-block: var(--wp--preset--spacing--50);
}

.flp-card {
	display: flex;
	flex-direction: column;
	/* core/group's grid children stretch; without this the shorter cards in a
	   row would not reach the bottom of the tallest one. */
	height: 100%;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.flp-card:hover,
.flp-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow-soft);
}

/* core/image renders a <figure>, so the crop has to be applied to the <img>
   inside it rather than to the element carrying the class. */
.flp-card__media {
	margin: 0;
	line-height: 0;
}

.flp-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* The image link points at the same page as the heading link below it and is
   marked aria-hidden, so it must not take focus or show a ring of its own. */
.flp-card__media a:focus-visible {
	outline: none;
}

.flp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--40);
	flex: 1;
}

/* core/group emits its own margins between children; the flex gap above is
   what should space them. */
.flp-card__body > * {
	margin-block: 0;
}

.flp-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}

.flp-card__title a { text-decoration: none; }
.flp-card__title a:hover { text-decoration: underline; }

.flp-card__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.flp-card__price {
	margin: auto 0 0;
	padding-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
 * Tables
 *
 * Prices on the old site were space-padded prose that collapsed to one
 * unreadable line on a phone. These are real tables, and they scroll inside
 * their own container rather than making the page scroll sideways.
 * ----------------------------------------------------------------------- */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	padding: 0.65em 0.9em;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.wp-block-table thead th {
	background: var(--wp--preset--color--base-2);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	border-bottom-width: 2px;
}

.wp-block-table tbody tr:last-child :where(th, td) {
	border-bottom: none;
}

/* Prices read better right-aligned; the last column is always the price. */
.wp-block-table :where(td, th):last-child {
	text-align: right;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Callout
 * ----------------------------------------------------------------------- */
.flp-callout {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-2);
	border-left: 4px solid var(--wp--preset--color--highlight);
	border-radius: var(--wp--custom--radius-sm);
}

.flp-callout > :first-child { margin-top: 0; }
.flp-callout > :last-child  { margin-bottom: 0; }

/* --------------------------------------------------------------------------
 * Contact band and footer
 * ----------------------------------------------------------------------- */
.flp-band__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	text-align: center;
}

.flp-band__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
}

.flp-band__lead {
	margin: 0.6em auto 0;
	max-width: 42rem;
}

.flp-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.flp-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
}

.flp-footer__heading {
	margin: 0 0 0.6em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--base-2);
}

.flp-footer__address {
	font-style: normal;
	line-height: 1.7;
}

.flp-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2;
}

/* Links set apart by colour alone, underlined only on hover. Straw is 8.0:1
   on the dark footer, against 12.7:1 for the cream body text, so the two read
   as different without either falling below AAA. */
.flp-footer :where(a) {
	color: var(--wp--preset--color--highlight);
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.flp-footer :where(a):hover {
	text-decoration: underline;
	text-decoration-color: currentColor;
}

.flp-footer :where(a):focus-visible {
	outline-color: var(--wp--preset--color--highlight);
}

.flp-footer__rule {
	margin-block: var(--wp--preset--spacing--50);
	border-color: rgb(243 234 219 / 0.2);
}

.flp-footer__colophon {
	margin: 0;
	color: rgb(243 234 219 / 0.75);
}

/* --------------------------------------------------------------------------
 * Contact form
 *
 * WPForms ships its own stylesheet; these rules rebind it to the palette
 * rather than fight it, so the form inherits the theme instead of looking
 * bolted on. Scoped to the plugin's own container so nothing else is touched.
 * ----------------------------------------------------------------------- */
.wpforms-container .wpforms-field-label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

.wpforms-container :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-sm);
	background: var(--wp--preset--color--base);
	padding: 0.6em 0.8em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.wpforms-container :where(input, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.wpforms-container button[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius-sm);
	padding: 0.7em 1.6em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.wpforms-container button[type="submit"]:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* --------------------------------------------------------------------------
 * Images
 * ----------------------------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
}

figure.wp-block-image img {
	border-radius: var(--wp--custom--radius);
}

/*
 * Gallery photos are thumbnails that open in the lightbox, so they keep one
 * size. Core lets the photos of a short last row grow to fill it, which made
 * the fourth of four photos a 672px banner under three 207px tiles.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

/* --------------------------------------------------------------------------
 * Print
 *
 * Replaces Embla's separate print.css: one fewer request, and the prices and
 * phone number are what anyone actually prints.
 * ----------------------------------------------------------------------- */
@media print {
	.flp-header,
	.flp-band,
	.flp-hero__actions,
	.wp-block-navigation,
	.flp-lang {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.flp-footer {
		background: #fff !important;
		color: #000 !important;
	}

	.flp-footer :where(a, .flp-footer__heading) {
		color: #000 !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	a[href^="tel:"]::after,
	a[href^="#"]::after {
		content: "";
	}
}

/* --------------------------------------------------------------------------
 * Chips
 *
 * The animal list was a single 240-character sentence on the old home page --
 * the most charming content on the site, and the least readable.
 * ----------------------------------------------------------------------- */
.flp-chips.wp-block-list,
.flp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flp-chips li {
	padding: 0.35em 0.9em;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	/* Chips are not prose; the global measure cap would wrap them oddly. */
	max-width: none;
}

/* --------------------------------------------------------------------------
 * Price tables
 *
 * .flp-prices marks the tables that replaced space-padded price prose such as
 * "30 a 45 min.          25.- CHF", which collapsed to one unreadable line on
 * a phone.
 * ----------------------------------------------------------------------- */
.flp-prices table {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-sm);
	overflow: hidden;
}

/* Row-header tables (the birthday formulas) label the left column instead of
   the top row, so the label must not be right-aligned like a price. */
.flp-prices tbody th[scope="row"] {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	white-space: normal;
	text-align: left;
}

.flp-prices :where(td):last-child {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
 * Contact page
 * ----------------------------------------------------------------------- */
.flp-contact__address {
	font-style: normal;
	margin-block: 0 var(--wp--preset--spacing--40);
	line-height: 1.8;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius-sm);
}

/* Columns stack below the prose width rather than at core's 782px default,
   which left the form squeezed to about 40 characters on a tablet. */
@media (max-width: 48rem) {
	.flp-contact.wp-block-columns {
		flex-wrap: wrap;
	}
	.flp-contact .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
 * Media-text sections
 * ----------------------------------------------------------------------- */
.wp-block-media-text .wp-block-media-text__media img {
	border-radius: var(--wp--custom--radius);
}

.wp-block-media-text .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Wide blocks
 *
 * core/post-content carries align:wide in the templates, which is what actually
 * gives these blocks room: post-content sits inside a constrained group, so
 * without it post-content was itself capped at contentSize and nothing inside
 * could be wider -- max-width cannot make a block exceed its containing block.
 * The card grid rendered at 42rem and showed two cards on a 1440px screen.
 *
 * These rules then centre the two blocks inside that wide column. Core's
 * constrained rules use :where(), which has zero specificity, so a plain class
 * selector is enough and no !important is needed.
 * ----------------------------------------------------------------------- */
.flp-cards-wrap,
.flp-contact.wp-block-columns {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Mobile navigation drawer
 *
 * Modelled on the SDS website prototype (social-development/apps/
 * website-prototyping, assets/css/site.css, the .nav rules under
 * @media (max-width: 79.9em)), which is the behaviour the family asked for:
 *
 *   - a full-height panel slides in from the right edge, over the header
 *     too, 300ms ease;
 *   - everything behind it dims, header included, 300ms ease;
 *   - the burger turns into an X in place and stays on top of the panel;
 *   - the X, the backdrop and Escape close it;
 *   - the page cannot scroll while the drawer is open.
 *
 * 1.5.3 anchored the panel BELOW the header instead. That read the prototype
 * wrong: its .nav is position:fixed with top:0, and the family preferred the
 * full-height drawer 9a788a9 had.
 *
 * Core keeps ownership of the overlay, the Escape handler and the scroll lock.
 * inc/blocks.php makes two changes to its markup: the close button is lifted
 * out of the dialog into the burger's slot, and a backdrop element carrying
 * core's close directive is added. The thing that slides is the innermost
 * content div; if the slide were on a wrapper that still contained the X, the
 * transform would become its containing block.
 *
 * The backdrop colour is on that element, not on the container: core forces
 * `background-color: inherit !important` on the CLOSED container, and with the
 * colour there the backdrop flashed cream for the 300ms slide-out.
 *
 * 599.98px, not 600px, because that is where core's own overlay breakpoint sits
 * and the two must not disagree by a pixel.
 * ----------------------------------------------------------------------- */
@media (max-width: 599.98px) {
	/*
	 * Below this width the header bar wraps and this group lands on its own
	 * row. It was shrink-to-fit, so it sat flush LEFT at 275px of a 350px row
	 * and its justify-content: flex-end had nothing to push against -- measured,
	 * the hamburger's right edge was at x=295 on a 390px viewport with 95px of
	 * dead space beside it. Taking the whole row is what makes flex-end mean
	 * anything.
	 */
	.flp-header__right {
		flex: 1 1 100%;
	}

	/* The hamburger last in the header, so it sits hard against the right edge
	   with the language switcher and the phone button to its left. */
	.flp-header__right > .flp-lang            { order: 1; }
	.flp-header__right > .wp-block-buttons    { order: 2; }
	.flp-header__right > .wp-block-navigation { order: 3; }

	/* --- burger <-> X, same slot ----------------------------------------- */
	/* Both buttons take the same grid cell and one is shown at a time. */
	.flp-header__right > .wp-block-navigation {
		display: grid;
	}

	.flp-header__right > .wp-block-navigation > .wp-block-navigation__responsive-container-open,
	.flp-header__right > .wp-block-navigation > .wp-block-navigation__responsive-container-close {
		grid-area: 1 / 1;
	}

	.flp-header__right > .wp-block-navigation > .wp-block-navigation__responsive-container-close {
		/* Core positions it absolute at top:0 right:0, its place inside the
		   dialog. Out here that sent the X to the viewport's top-right corner.
		   Relative keeps it in the burger's cell, and the z-index lifts it over
		   the overlay (core's 100000), as the prototype's burger sits over its
		   panel. Both share the sticky header's stacking context. */
		position: relative;
		z-index: 100001;
		display: grid;
		place-items: center;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--base);
		cursor: pointer;
		visibility: hidden;
	}

	.flp-header__right > .wp-block-navigation:has(.is-menu-open) > .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	.flp-header__right > .wp-block-navigation:has(.is-menu-open) > .wp-block-navigation__responsive-container-close {
		visibility: visible;
	}

	/* --- the overlay: the whole viewport -------------------------------- */
	/*
	 * Core already makes it position:fixed with inset:0. Over-specified because
	 * core sets display:flex, flex-direction:column and padding once it is open,
	 * at up to (0,2,0); in a column the panel landed bottom-left.
	 */
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding: 0;
		margin: 0;
		/* clip, not hidden. Core focuses the first menu link on open, and a
		   hidden-overflow box is still a scroll container: the browser scrolled
		   it 319px sideways to reveal the off-screen link, so the panel was in
		   place by the second frame and the slide never showed. clip hides the
		   parked panel the same way but cannot be scrolled. */
		overflow: clip;
		z-index: 100000;
		/* Stays rendered so the panel can transition; hidden and inert until
		   opened. On close, the visibility flip waits for the slide-out. */
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 300ms;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		visibility: visible;
		pointer-events: auto;
		transition: none;
	}

	/* Core paints the open overlay white with this selector at (0,5,0). Under
	   the backdrop that left a flat grey instead of the dimmed page. */
	.flp-header .wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: transparent;
	}

	/* --- backdrop -------------------------------------------------------- */
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container > .flp-nav-backdrop {
		position: absolute;
		inset: 0;
		/* The prototype's value. */
		background: rgb(45 45 45 / 0.4);
		opacity: 0;
		transition: opacity 300ms ease;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > .flp-nav-backdrop {
		opacity: 1;
	}

	/* --- panel: the content div slides; the two wrappers are pass-through -- */
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__responsive-close,
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__responsive-dialog {
		position: relative;
		margin: 0;
		margin-left: auto;
		padding: 0;
		width: min(360px, 85vw);
		max-width: none;
		height: 100%;
		background: transparent;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__responsive-container-content {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		/* The X sits in the header's second row, its bottom edge at 112-114px
		   (measured at 320, 390 and 599px, French and German). 8rem starts the
		   list just under it, the same gap the prototype leaves below its X. */
		padding: 8rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		box-shadow: -8px 0 24px rgb(0 0 0 / 0.25);
		transform: translateX(100%);
		transition: transform 300ms ease;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		transform: none;
	}

	/* --- scroll lock ------------------------------------------------------ */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) {
		overflow: hidden;
	}

	/* --- the list inside the panel --------------------------------------- */
	/*
	 * State-independent, because the panel is still on screen for the 300ms
	 * slide-out after core drops .is-menu-open. Scoped to the open state (as
	 * in 1.5.3), the list fell back to the desktop row mid-slide and the panel
	 * emptied as it left.
	 *
	 * Four classes, loaded after core, is what beats core's open-state rule
	 * for .wp-block-navigation-item__content, also four classes:
	 *
	 *   .wp-block-navigation__responsive-container.is-menu-open
	 *   :where(:not(.disable-default-overlay))
	 *   .wp-block-navigation__responsive-container-content
	 *   .wp-block-navigation-item__content { padding: 0 }
	 *
	 * Three lost to it: item padding went from 15.21px to 0 (8ddfbcd).
	 */
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__container,
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__container.items-justified-right {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		gap: 0;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__container > .wp-block-navigation-item {
		display: block;
		width: 100%;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding-block: 0.75em;
		/* The global open-state rule sets this too; repeated here so the
		   labels do not shrink during the slide-out. */
		font-size: var(--wp--preset--font-size--large);
		border-bottom: 1px solid rgb(243 234 219 / 0.15);
		color: var(--wp--preset--color--base);
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation-item__content:hover,
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.current-menu-item > .wp-block-navigation-item__content,
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.current-menu-ancestor > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--highlight);
		border-bottom-color: var(--wp--preset--color--highlight);
	}

	/* --- submenus in the drawer: an accordion, as in the prototype -------- */
	/*
	 * Core shows every submenu expanded in the overlay and hides its chevron.
	 * Here the parent link and the chevron share a row, and the submenu folds
	 * open below them, indented behind a rule.
	 *
	 * The fold keys on aria-expanded="false", which only exists once core's
	 * script has run. Without JavaScript every submenu stays open, so no item
	 * is ever out of reach. tools/check-css.py allows hiding a submenu only in
	 * exactly that state.
	 *
	 * Five classes, so these beat core's open-state submenu rules at four, and
	 * state-independent like the list above, so a submenu does not jump back
	 * to its desktop dropdown during the slide-out.
	 */
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.wp-block-navigation__container > .wp-block-navigation-item.has-child {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child > .wp-block-navigation-submenu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		width: 3rem;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-bottom: 1px solid rgb(243 234 219 / 0.15);
		color: var(--wp--preset--color--base);
		cursor: pointer;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child > .wp-block-navigation-submenu__toggle svg {
		width: 1rem;
		height: 1rem;
		transition: transform 150ms ease;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child > .wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
		position: static;
		visibility: visible;
		opacity: 1;
		width: auto;
		min-width: 0;
		height: auto;
		overflow: visible;
		margin: 0;
		padding: 0 0 0 var(--wp--preset--spacing--30);
		background: none;
		border: 0;
		border-left: 2px solid rgb(243 234 219 / 0.25);
		border-radius: 0;
		box-shadow: none;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="false"] + .wp-block-navigation__submenu-container {
		display: none;
	}

	/* Core lays a submenu item out as a column aligned to the menu's right
	   justification and pads its link 1em at the sides, so the full-width link
	   spilled 17px out to the left. One more class than core's rule, at five. */
	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
		width: 100%;
	}

	.flp-header .wp-block-navigation .wp-block-navigation__responsive-container
	.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--medium);
		padding: 0.6em 0;
	}
}

/* inc/blocks.php moves the close button out of the overlay and next to the
   burger. Core's rule that hid it on wide screens was scoped to inside the
   overlay, so it needs hiding here; the phone rules above show it when open. */
@media (min-width: 600px) {
	.wp-block-navigation > .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* The global prefers-reduced-motion block collapses transition durations too,
   so the drawer appears in place rather than sliding for people who asked for
   that. That is the correct behaviour, not a bug. */

/* The whole card image is a link to the same page as its heading. It carries
   aria-hidden and tabindex=-1, so it must not show a focus ring of its own --
   the heading link below it is the real, focusable one, and .flp-card already
   lifts on :focus-within. */
.flp-card__media {
	display: block;
	line-height: 0;
}

.flp-card__media:focus-visible {
	outline: none;
}

/* --------------------------------------------------------------------------
 * Stacked media-text
 *
 * The birthday page pairs each formule's photo with its text in a
 * core/media-text. Side by side the grid gap separates them, but once the block
 * stacks the two cells sit in the same column with nothing between: measured at
 * 390px, the text baseline began at exactly the pixel the image ended, on all
 * four blocks.
 *
 * 600px is core's own stacking breakpoint for is-stacked-on-mobile, and core
 * always puts the media in row 1 when stacked, so this works for the blocks with
 * the media on the right as well.
 * ----------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
 * Address links
 *
 * The postal address links to Google Maps everywhere it appears. A plain link
 * is not the same trade-off as the embedded map this design deliberately avoids:
 * nothing is requested from Google until the visitor clicks, so there are no
 * third-party cookies and no consent question on page load.
 *
 * On the contact page it is styled to stay quiet: a multi-line address rendered
 * in full link colour reads as a block of coloured text rather than an address.
 * The footer's address link follows the footer link style instead, so every
 * footer link looks the same.
 * ----------------------------------------------------------------------- */
.flp-contact__address a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
}

.flp-contact__address a:hover {
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
 * Brand mark
 *
 * The galloping horse sits to the left of the wordmark, sized to the two text
 * lines beside it, in the same terracotta as the site title. It is a link to
 * the front page with tabindex=-1: the site title right next to it is already
 * that link, and a second tab stop to the same place helps nobody.
 * ----------------------------------------------------------------------- */
.flp-brand {
	align-items: center;
}

.flp-brand__link {
	display: block;
	line-height: 0;
	color: var(--wp--preset--color--primary);
}

.flp-brand__link:focus-visible {
	outline: none;
}

.flp-brand__mark {
	width: 3rem;
	height: 3rem;
	display: block;
}

@media (max-width: 599.98px) {
	.flp-brand__mark {
		width: 2.6rem;
		height: 2.6rem;
	}
}