/*
 * Fernhollow Bakehouse: the site's values for the parent's --wu-* slots. Every
 * parent block reads them; the defaults (the neutral register) are in the
 * parent's assets/css/sections.css and CONTRACT.md lists them all. Set the
 * ones the design sheet (docs/DESIGN.md) decides; leave the rest out.
 *
 * Warm and quiet: flour, dough, crust and the dark of the oven.
 */

:root {
	/* Colour: the palette in theme.json, named for the slots. */
	--wu-ground: #FBF6EE;
	--wu-surface: #F4ECDF;
	--wu-surface-2: #EADCC6;
	--wu-line: #E3D6C3;
	--wu-line-strong: #CDBBA3;
	--wu-text: #2B2118;
	--wu-muted: #5F4F3F;
	--wu-accent: #8A4B21;
	--wu-ground-alt: #F1E6D4;
	--wu-inverse-ground: #2B2118;
	--wu-inverse-text: #FBF6EE;

	/* Type: a book serif for headings at a regular weight, the system sans for reading. */
	--wu-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--wu-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wu-heading-weight: 400;
	--wu-heading-tracking: 0;

	/* Shape and width. */
	--wu-wrap: 1120px;
	--wu-radius: 10px;
	--wu-card-radius: 10px;
	--wu-image-radius: 10px;
	--wu-card-shadow: none;

	/* Buttons: filled crust, cream words, gently rounded, no arrows. */
	--wu-button-face: #8A4B21;
	--wu-button-text: #FBF6EE;
	--wu-button-radius: 6px;
	--wu-button-arrow: none;

	/* The eyebrow: a short crust rule before the label. */
	--wu-label-rule: #8A4B21;
	--wu-label-rule-length: 28px;
	--wu-label-rule-width: 2px;

	/* Hero. */
	--wu-hero-title-weight: 400;
	--wu-hero-title-tracking: 0;
	--wu-hero-title-line: 1.1;
	--wu-hero-note-max: 60ch;
	--wu-hero-strip-h: clamp(240px, 28vw, 340px);

	/* Cards: flat paper-bag faces. */
	--wu-cards-face: #F4ECDF;
	--wu-cards-border: 1px solid #E3D6C3;
	--wu-cards-title-weight: 400;

	/* Prices: the list's names and figures. */
	--wu-prices-name-weight: 400;
	--wu-prices-row-name-size: 21px;
	--wu-prices-row-figure-font: 400 21px/1.3 var(--wu-display);

	/* Steps: the number on a crust badge. */
	--wu-steps-badge-face: #8A4B21;
	--wu-steps-badge-text: #FBF6EE;
	--wu-steps-badge-radius: 999px;
	--wu-steps-badge-font: 400 19px/1 var(--wu-display);
	--wu-steps-title-weight: 400;

	/* Split: ticks in the crust colour. */
	--wu-split-tick: #8A4B21;

	/* Quote: Mira's words in the serif, not bold. */
	--wu-quote-attributed-font: 400 clamp(26px, 3.4vw, 40px)/1.25 var(--wu-display);
	--wu-quote-attributed-tracking: 0;

	/* Questions. */
	--wu-faq-q-font: 600 18px/1.4 var(--wu-body);

	/* Contact. */
	--wu-contact-title-font: 400 22px/1.3 var(--wu-display);

	/* No coloured glows: the glow slots stay transparent on purpose. */
}

/* The closing heading has a fixed weight in the parent: the serif reads calmer at 400. */
.wu-cta__title {
	font-weight: 400;
}

/* The header (parts/header.html): the name, the four pages and the call button. */
.fh-header {
	background: var(--wu-ground);
	border-bottom: 1px solid var(--wu-line);
}

.fh-header__bar {
	gap: 16px;
	padding-block: 14px;
}

.fh-header__name {
	margin: 0;
	font-family: var(--wu-display);
	font-size: 22px;
	line-height: 1.2;
}

.fh-header__name a {
	color: var(--wu-text);
	text-decoration: none;
}

.fh-header__end {
	gap: 24px;
}

.fh-nav a {
	color: var(--wu-text);
	text-decoration: none;
	font-weight: 500;
}

.fh-nav a:hover,
.fh-nav a:focus-visible,
.fh-nav .current-menu-item > a,
.fh-nav a[aria-current="page"] {
	color: var(--wu-accent);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* On small phones the call button gives way to the menu; every page leads with the phone number. */
@media (max-width: 479px) {
	.fh-header__end > :not(.fh-nav) {
		display: none;
	}

	.fh-header__name {
		font-size: 20px;
	}
}

/* The footer (parts/footer.html): where, when, how to order, and the test-site line. */
.fh-footer {
	background: var(--wu-inverse-ground);
	color: var(--wu-inverse-text);
	padding-block: 56px 32px;
	font-size: 16px;
}

.fh-footer a {
	color: var(--wu-inverse-text);
	text-underline-offset: 3px;
}

.fh-footer__name {
	margin: 0 0 8px;
	font-family: var(--wu-display);
	font-size: 24px;
}

.fh-footer__name a {
	text-decoration: none;
}

.fh-footer__h {
	margin: 0 0 8px;
	color: var(--wu-inverse-text);
	font-family: var(--wu-display);
	font-size: 20px;
}

.fh-footer__cols {
	gap: 32px;
}

.fh-footer__small {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(251, 246, 238, 0.2);
	font-size: 14px;
	opacity: 0.85;
}