/*
Theme Name: Lidalen Grustak AS
Theme URI: https://www.lidalen.no
Author: Elemental Web
Author URI: https://www.eleweb.no
Description: Block theme for lidalen.no: the site's tokens, logo, header/footer, templates and patterns. Shared functionality comes from the plugin elemental-core.
Requires at least: 6.6
Requires PHP: 8.1
Version: 0.6.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lidalen
*/

/* Design direction: decision 0006 "Lakken" (docs/decisions/0006-design-lakken.md, profile in
   docs/design-profile.md): the trucks' ultramarine as solid blocks, the logo's red only on the
   call button and the measurement bars, stone-dust ground, Schibsted Grotesk, hard edges. With
   decision 0007 "Fullskjerm": full-screen photos with very large white type, and one machine cut
   out of Lidalen's own photos, faint, per section. Tokens live in theme.json; this file holds the layout classes
   and what theme.json can't express. Spacing comes from the layout classes, never per block.
   Vocabulary: the Elemental Web design system (font roles display/body, spacing 20–80, custom
   line-height/letter-spacing/gutter/box/control tokens), and only these breakpoints, always as
   max-width (width − 1px):
     xs  360px   small phones                            @media (max-width: 360px)
     sm  600px   phone / tablet                          @media (max-width: 599px)
     md  782px   WordPress stacks columns below this     @media (max-width: 781px)
     lg  1024px  tablet / desktop                        @media (max-width: 1023px)
     xl  1280px  fluid type and spacing stop growing (theme.json typography.fluid) */

/* Schibsted Grotesk (theme.json) with a fallback: Arial resized to its metrics (upm 2048,
   ascender 2000, descender 528, average lowercase 0.526 em), so text keeps its size and line
   breaks while the font loads. */
@font-face {
	font-family: "Schibsted Grotesk Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
	size-adjust: 107.5%;
	ascent-override: 90.8%;
	descent-override: 24%;
	line-gap-override: 0%;
}

body {
	-webkit-text-size-adjust: 100%;
}

/* The header's height: the full-screen hero starts under it. */
:root {
	--lidalen-header-h: 96px;
}

@media (max-width: 599px) {
	:root {
		--lidalen-header-h: 68px;
	}
}

/* Numbers that line up: phone numbers, hours and fractions. */
.lidalen-tabular,
.lidalen-big-tel,
.lidalen-facts strong,
.lidalen-ruler {
	font-variant-numeric: tabular-nums;
}

/* Boxes inside columns and query loops are padded by the width of that column, not the screen:
   --wp--custom--box--padding uses cqi. Outside a container cqi measures the viewport. */
.wp-block-column,
.wp-block-post-template > li {
	container-type: inline-size;
}

/* Header, main and footer sit flush: sections bring their own spacing. So do full-width
   sections inside the page content (WordPress's flow layout would put 24px of the page ground
   between them). */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

h1,
h2 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

a {
	text-underline-offset: 3px;
}

/* A phone number never breaks across lines. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Visible keyboard focus everywhere: the logo red, which shows on dust, white and blue. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}

/* For a heading that's there for screen readers and search engines, not for the eye. */
.lidalen-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------------------
   Layout system. Templates and patterns use these classes instead of per-block padding.
   `.wp-block-group.` raises specificity above WordPress's layout rules.
   --------------------------------------------------------------------------------------- */

/* Full-width content section: spacing-80 top and bottom (fluid), gutter at the sides. */
.wp-block-group.lidalen-section {
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
}

/* Two sections in a row on the same ground read as one rhythm: the second doesn't add its own
   top spacing. A section with its own background (the blue delivery band) keeps it. */
.wp-block-group.lidalen-section:not(.has-background) + .wp-block-group.lidalen-section:not(.has-background) {
	padding-top: 0;
}

/* Plain pages (page.html, index, 404, the policies). */
.wp-block-group.lidalen-page {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) var(--wp--preset--spacing--80);
}

/* A section's heading row: the heading left (7/12) and a line of text right (5/12), on one
   baseline; stacked below 782px. */
.wp-block-group.lidalen-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	align-items: end;
}

.lidalen-split > * {
	margin: 0;
}

.lidalen-section__head {
	margin-bottom: var(--wp--preset--spacing--60);
}

.lidalen-section__head > p {
	max-width: 36em;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.wp-block-group.lidalen-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------------------
   One machine per section (decision 0007): Lidalen's own machines cut out of the 2023 photos
   (brand/tools/cutout.py), large and faint, never tiled and never repeated on a page. The WebP
   files in assets/images are masks (white with alpha); the colour comes from here: blue on the
   dust ground, white on blue. assets/js/lidalen.js sets --drift so they move slowly as the page
   scrolls (a tenth of the scroll distance; still with reduced motion).
   --------------------------------------------------------------------------------------- */

.lidalen-machine {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.lidalen-machine::before {
	content: "";
	position: absolute;
	z-index: -1;
	background: var(--wp--preset--color--accent);
	opacity: 0.085;
	-webkit-mask: var(--machine) center / contain no-repeat;
	mask: var(--machine) center / contain no-repeat;
	transform: translate3d(0, var(--drift, 0px), 0);
	pointer-events: none;
}

.lidalen-machine.has-accent-background-color::before {
	background: var(--wp--preset--color--white);
}

/* The Volvo loader on the gravel pile (from 300_DSC6896, media 593): behind the products and
   the page heroes, running off the right edge. */
.lidalen-machine--loader::before {
	--machine: url("assets/images/machine-loader.webp");
	top: 2%;
	right: -22vw;
	width: min(1500px, 120vw);
	aspect-ratio: 1600 / 632;
}

/* Lidalen's tipper truck (from media 937): across the delivery band, cab and all, its rear
   running off the left of the band's right half. */
.lidalen-machine--truck::before {
	--machine: url("assets/images/machine-truck.webp");
	right: max(-4vw, calc(50% - 760px));
	bottom: -2%;
	width: min(1150px, 78vw);
	aspect-ratio: 718 / 389;
	opacity: 0.1;
}

@media (max-width: 781px) {
	.lidalen-machine--loader::before {
		top: 1%;
		right: -90vw;
		width: 180vw;
	}

	.lidalen-machine--truck::before {
		right: -30vw;
		width: 150vw;
	}
}

/* ---------------------------------------------------------------------------------------
   Hero: the headline and a few lines on the dust ground, the photo at full width under them,
   and a row of facts. Pages use the same, without the facts.
   --------------------------------------------------------------------------------------- */

.wp-block-group.lidalen-hero {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) 0;
}

.wp-block-group.lidalen-hero__top {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	align-items: end;
}

.lidalen-hero__top > * {
	margin: 0;
}

.lidalen-hero .lidalen-hero__title {
	max-width: 11ch;
	margin: 0;
}

.lidalen-hero__side > * {
	margin-block: 0;
}

.lidalen-hero__lead {
	color: var(--wp--preset--color--muted);
}

.lidalen-hero__lead strong {
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.wp-block-buttons.lidalen-hero__actions {
	margin-block-start: var(--wp--preset--spacing--40);
	gap: 10px;
}

.lidalen-hero .wp-block-image.lidalen-hero__photo {
	margin: var(--wp--preset--spacing--70) 0 0;
}

.lidalen-hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 2.35 / 1;
	object-fit: cover;
}

/* A page hero without a photo ends with the same spacing as a section. */
.wp-block-group.lidalen-hero--page:not(:has(.lidalen-hero__photo img)) {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ---------------------------------------------------------------------------------------
   Full-screen photos (decision 0007): cover blocks with `lidalen-cover`. The photo runs edge to
   edge under a gradient of the dark truck blue; the text is white and very large. The front-page
   hero (`lidalen-hero--full`) fills the screen and starts under the header; the statement
   (`lidalen-statement`) is nearly as tall; the contact section (`lidalen-visit`) is as tall as
   its content. The gradient replaces the cover's own overlay, so editors only change the photo.
   --------------------------------------------------------------------------------------- */

.wp-block-cover.lidalen-cover {
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
	color: var(--wp--preset--color--on-dark);
	overflow: clip;
}

/* The text column lines up with the other sections (1200px, centred). WordPress's rules for a
   positioned cover set margin 0 and width auto with five classes, hence !important. */
.wp-block-cover.lidalen-cover > .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: 1200px;
	margin-inline: auto !important;
	color: inherit;
}

.lidalen-cover > .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.wp-block-cover.lidalen-cover h1,
.wp-block-cover.lidalen-cover h2 {
	color: inherit;
}

/* An outline button on a photo needs a firmer line. */
.lidalen-cover .is-style-line .wp-block-button__link {
	border-color: rgb(255 255 255 / 0.6);
}

.wp-block-cover.lidalen-cover > .wp-block-cover__background {
	opacity: 1 !important;
	background: var(--lidalen-shade) !important;
}

/* The front-page hero. */
.wp-block-cover.lidalen-hero--full {
	--lidalen-shade: linear-gradient(180deg, rgb(18 26 85 / 0.55) 0, rgb(18 26 85 / 0) 22%), linear-gradient(0deg, rgb(18 26 85 / 0.9) 0, rgb(18 26 85 / 0.68) 30%, rgb(18 26 85 / 0.42) 58%, rgb(18 26 85 / 0) 86%);
	min-height: 100svh;
	margin-top: calc(-1 * var(--lidalen-header-h));
	padding-top: calc(var(--lidalen-header-h) + var(--wp--preset--spacing--70));
	padding-bottom: clamp(32px, 5vw, 56px);
}

.lidalen-hero--full .lidalen-hero__title {
	font-size: clamp(56px, 10.5vw, 168px);
	line-height: 0.9;
	letter-spacing: var(--wp--custom--letter-spacing--tighter);
	/* The headline crosses pale rock and machines: the shade reaches up behind it, and a wide
	   soft shadow holds the letters' edges. */
	text-shadow: 0 2px 4px rgb(18 26 85 / 0.3), 0 0 48px rgb(18 26 85 / 0.55);
}

.wp-block-group.lidalen-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px 48px;
	margin-top: clamp(24px, 3vw, 40px);
}

.lidalen-hero__row > * {
	margin: 0;
}

/* The lighter shade leaves the machines their colours; a soft shadow keeps the small text
   readable where it crosses them. */
.lidalen-hero--full .lidalen-hero__lead,
.lidalen-facts,
.lidalen-statement p {
	text-shadow: 0 1px 14px rgb(18 26 85 / 0.7);
}

.lidalen-hero--full .lidalen-hero__lead {
	max-width: 34ch;
	color: rgb(255 255 255 / 0.92);
}

.lidalen-hero--full .wp-block-buttons.lidalen-hero__actions {
	margin: 0;
}

/* On desktop nobody taps a number to call: the call button goes, the number stays in the facts
   below and in the header, and the remaining button is filled. */
@media (min-width: 782px) {
	.lidalen-hero__actions .wp-block-button.is-style-call {
		display: none;
	}

	.lidalen-hero--full .lidalen-hero__actions .wp-block-button.is-style-line .wp-block-button__link {
		background: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--text);
	}

	.lidalen-hero--full .lidalen-hero__actions .wp-block-button.is-style-line .wp-block-button__link:hover {
		background: var(--wp--preset--color--accent);
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--on-accent);
	}
}

/* The facts: four short pairs at the foot of the photo, under a hairline. */
.wp-block-group.lidalen-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: clamp(40px, 6vw, 72px);
	border-top: 1px solid rgb(255 255 255 / 0.28);
}

.lidalen-facts > .wp-block-group {
	margin: 0;
	padding: 20px 24px 0 0;
}

.lidalen-facts p {
	margin: 0;
}

.lidalen-facts strong {
	display: block;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	line-height: 1.1;
}

.lidalen-facts a {
	display: inline-block;
	margin-block: -8px;
	padding-block: 8px;
	color: inherit;
	text-decoration: none;
}

.lidalen-facts a:hover {
	text-decoration: underline;
}

.lidalen-facts p + p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--on-dark-muted);
}

/* The hero's text rises once on load: the only motion on arrival. */
.lidalen-hero--full > .wp-block-cover__inner-container > * {
	animation: lidalen-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.lidalen-hero--full > .wp-block-cover__inner-container > :nth-child(2) {
	animation-delay: 0.15s;
}

.lidalen-hero--full > .wp-block-cover__inner-container > :nth-child(3) {
	animation-delay: 0.3s;
}

.lidalen-hero--full > .wp-block-cover__image-background {
	animation: lidalen-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes lidalen-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

@keyframes lidalen-settle {
	from {
		transform: scale(1.06);
	}
}

/* The statement: one claim over a photo. */
.wp-block-cover.lidalen-statement {
	--lidalen-shade: linear-gradient(0deg, rgb(18 26 85 / 0.85) 0, rgb(18 26 85 / 0.3) 32%, rgb(18 26 85 / 0) 55%);
	min-height: 92svh;
	padding-bottom: clamp(48px, 7vw, 96px);
}

.lidalen-statement h2 {
	max-width: 13ch;
	font-size: clamp(44px, 7.5vw, 120px);
	line-height: 0.92;
	letter-spacing: var(--wp--custom--letter-spacing--tighter);
}

.lidalen-statement > .wp-block-cover__inner-container > h2 + p {
	max-width: 46ch;
	margin-top: 24px;
	color: rgb(255 255 255 / 0.9);
}

/* Photos settle into place (108 % to 100 %) as they come into view: assets/js/lidalen.js adds
   `is-in`. Without the script they simply stand still. */
.lidalen-js .lidalen-settle img {
	transform: scale(1.08);
	transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lidalen-js .lidalen-settle.is-in img {
	transform: none;
}

.wp-block-image.lidalen-settle {
	overflow: clip;
}

@media (max-width: 781px) {
	.wp-block-group.lidalen-hero {
		padding-top: var(--wp--preset--spacing--60);
	}

	.wp-block-group.lidalen-hero__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.lidalen-hero .wp-block-image.lidalen-hero__photo {
		margin: var(--wp--preset--spacing--60) calc(-1 * var(--wp--custom--gutter)) 0;
	}

	.lidalen-hero__photo img {
		aspect-ratio: 4 / 3;
	}

	.wp-block-group.lidalen-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lidalen-facts > .wp-block-group {
		padding-top: 16px;
	}

	/* On phones the text covers most of the photo: an even shade keeps it readable. */
	.wp-block-cover.lidalen-hero--full {
		--lidalen-shade: linear-gradient(180deg, rgb(18 26 85 / 0.55) 0, rgb(18 26 85 / 0) 14%), linear-gradient(0deg, rgb(18 26 85 / 0.92) 0, rgb(18 26 85 / 0.72) 55%, rgb(18 26 85 / 0.3) 100%);
	}

	.wp-block-cover.lidalen-statement {
		min-height: 78svh;
	}
}

@media (max-width: 599px) {
	.lidalen-hero__actions > .wp-block-button {
		flex: 1 1 100%;
	}

	.lidalen-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.wp-block-group.lidalen-hero__row,
	.lidalen-hero--full .wp-block-buttons.lidalen-hero__actions {
		width: 100%;
	}
}

/* Image edges: no image sits on the page as a bare rectangle. Every image uses one of
   - the edge line (cards, photos on the dust ground: `.lidalen-edge`; on blue
     `.lidalen-edge--light`), or
   - full width in its section (the page hero photo, which runs to the edge on phones), or
   - full bleed under a gradient (the covers: front-page hero, statement, contact).
   No fades (decision 0006). Logos and icons are cut-outs and need none. */

.lidalen-edge {
	position: relative;
}

.lidalen-edge::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: var(--wp--preset--shadow--edge);
	pointer-events: none;
}

.lidalen-edge--light::after {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

/* ---------------------------------------------------------------------------------------
   Buttons: pills. Blue by default; `call` (the logo red with a phone icon: the call button
   only), `line` (an outline that takes the text colour), `light` (white, on photos). 52px
   tall: a comfortable tap target.
   --------------------------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	box-sizing: border-box;
	border: 1.5px solid transparent;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, filter 0.1s;
}

/* Pressed: phones have no hover, so a tap shows itself here (100ms; no scale with reduced
   motion). */
.wp-block-button__link:active {
	transform: scale(0.97);
	filter: brightness(0.92);
	transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:active {
		transform: none;
	}
}

.wp-block-button.is-style-call .wp-block-button__link {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--on-signal);
}

.wp-block-button.is-style-call .wp-block-button__link:hover {
	background: #A51824;
	color: var(--wp--preset--color--on-signal);
}

/* The phone icon, drawn in the text colour. */
.wp-block-button.is-style-call .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-button.is-style-line .wp-block-button__link {
	background: transparent;
	border-color: color-mix(in srgb, currentColor 40%, transparent);
	color: inherit;
}

.wp-block-button.is-style-line .wp-block-button__link:hover {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* ---------------------------------------------------------------------------------------
   Products: cards with a photo, the use, the certificate and the sieve ruler (decision 0006,
   inc/fractions.php). Three across, two on tablets, one on phones.
   --------------------------------------------------------------------------------------- */

.wp-block-post-template.lidalen-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lidalen-cards > li {
	display: flex;
	margin: 0;
}

.wp-block-group.lidalen-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	background: var(--wp--preset--color--surface);
}

.lidalen-card > * {
	margin: 0;
}

.lidalen-card .wp-block-post-featured-image {
	margin: 0;
}

.lidalen-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wp-block-group.lidalen-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 26px;
}

.lidalen-card__body > * {
	margin: 0;
}

.lidalen-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.lidalen-card .wp-block-post-excerpt,
.lidalen-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

.lidalen-card__cert {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}

/* The sieve ruler: a log scale with the sieve sizes 2–128 mm (each double the last), 0 at
   the left edge. Each fraction is a red bar; a range that overlaps another goes up a row. */
.lidalen-ruler {
	position: relative;
	height: calc(48px + var(--rows, 1) * 24px);
	margin-top: auto;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.lidalen-ruler__axis {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	border-top: 1px solid var(--wp--preset--color--text);
}

.lidalen-ruler__tick {
	position: absolute;
	bottom: 0;
	transform: translateX(-50%);
	line-height: 1;
}

.lidalen-ruler__tick::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 19px;
	height: 6px;
	border-left: 1px solid var(--wp--preset--color--text);
}

.lidalen-ruler__tick--start {
	transform: none;
}

.lidalen-ruler__tick--start::before {
	left: 0;
}

.lidalen-ruler__tick--end {
	transform: translateX(-100%);
}

.lidalen-ruler__tick--end::before {
	left: 100%;
}

.lidalen-ruler__bar {
	position: absolute;
	bottom: calc(27px + var(--row, 0) * 24px);
	height: 8px;
	box-sizing: border-box;
	background: var(--wp--preset--color--signal);
	border-right: 2px solid var(--wp--preset--color--surface);
}

.lidalen-ruler__mm {
	position: absolute;
	left: 0;
	bottom: 11px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--text);
	white-space: nowrap;
}

.wp-block-group.lidalen-products__foot {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: 12px 18px;
}

.lidalen-products__foot > * {
	margin: 0;
}

.lidalen-products__foot > p {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1023px) {
	.wp-block-post-template.lidalen-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The front page shows three: two fit, the third waits for the products page. */
	.lidalen-products--front .lidalen-cards > li:nth-child(3) {
		display: none;
	}
}

@media (max-width: 781px) {
	.wp-block-post-template.lidalen-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.lidalen-products--front .lidalen-cards > li:nth-child(3) {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------------------
   Delivery: a blue band with the truck cut out behind it (decision 0007). The heading row, then
   the services as a large list in two columns (one on phones).
   --------------------------------------------------------------------------------------- */

.lidalen-deliver h2 {
	color: var(--wp--preset--color--on-dark);
}

.lidalen-deliver .lidalen-section__head > p {
	color: var(--wp--preset--color--on-dark-muted);
}

.lidalen-deliver .wp-block-list.lidalen-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgb(255 255 255 / 0.3);
}

.lidalen-services li {
	padding: 22px 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.3);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	line-height: 1.15;
}

.lidalen-deliver .wp-block-buttons.lidalen-deliver__actions {
	margin-top: 40px;
}

@media (max-width: 781px) {
	.lidalen-deliver .wp-block-list.lidalen-services {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------------------
   Family: the owners' photo (7/12) and "1977" with a few lines (5/12); stacked below 1024px.
   --------------------------------------------------------------------------------------- */

.wp-block-group.lidalen-family__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px clamp(40px, 5vw, 72px);
	align-items: center;
}

.lidalen-family__grid > *,
.lidalen-family__text > * {
	margin-block: 0;
}

.lidalen-family .wp-block-image.lidalen-family__photo {
	margin: 0;
}

.lidalen-family__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

/* The edge line goes round the photo, not the caption under it. */
.lidalen-family__photo.lidalen-edge::after {
	bottom: auto;
	aspect-ratio: 5 / 4;
}

.lidalen-family__photo figcaption {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.lidalen-family .lidalen-family__since {
	margin-bottom: 20px;
	font-size: clamp(88px, 13vw, 200px);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.8;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.lidalen-family__text > h2 + p {
	max-width: 38ch;
	margin-top: 28px;
	color: var(--wp--preset--color--muted);
}

.lidalen-family__text > .wp-block-buttons {
	margin-top: 32px;
}

.lidalen-family .is-style-line .wp-block-button__link {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 1023px) {
	.wp-block-group.lidalen-family__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------------------
   Visit and contact over the view from the pit (decision 0007): the phone number very large,
   hours and address, the directions link (no embedded map, so no Google cookies), the form on
   white.
   --------------------------------------------------------------------------------------- */

.wp-block-cover.lidalen-visit {
	--lidalen-shade: linear-gradient(90deg, rgb(18 26 85 / 0.9) 0, rgb(18 26 85 / 0.7) 40%, rgb(18 26 85 / 0.15) 72%, rgb(18 26 85 / 0) 100%);
	min-height: 0;
}

.wp-block-group.lidalen-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--60) clamp(40px, 5vw, 88px);
	align-items: start;
}

.lidalen-visit__grid > *,
.lidalen-visit__info > * {
	margin-block: 0;
}

.lidalen-big-tel {
	margin-block: 28px 40px;
	font-size: clamp(52px, 8vw, 112px);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--tighter);
	line-height: 1;
}

.lidalen-big-tel a {
	color: inherit;
	text-decoration: none;
}

.lidalen-big-tel a:hover {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 10px;
}

/* Hours and address side by side under a hairline; stacked on phones. */
.wp-block-group.lidalen-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
	max-width: 620px;
	margin-bottom: 36px;
	padding-top: 24px;
	border-top: 1px solid rgb(255 255 255 / 0.3);
}

.lidalen-details > * {
	margin: 0;
}

.lidalen-details p {
	margin: 0;
	font-size: 17px;
}

.lidalen-details a {
	display: inline-block;
	margin-block: -11px;
	padding-block: 11px;
	color: inherit;
}

.lidalen-details .lidalen-details__label {
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--on-dark-muted);
}

.wp-block-group.lidalen-form-card {
	padding: clamp(28px, 3vw, 44px);
	color: var(--wp--preset--color--text);
}

.lidalen-form-card > * {
	margin-block: 0;
}

.lidalen-form-card > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.lidalen-form-card > p {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

/* The contact form (JetFormBuilder "Kontaktskjema", form 1061; theme 0.6.2): one column, the
   label above each field, one wide send button, the answer under the field that's wrong, and
   the message after sending in the card itself. */
.lidalen-form-card form.jet-form-builder {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.lidalen-form-card .jet-form-builder-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.lidalen-form-card .jet-form-builder__label,
.lidalen-form-card .jet-form-builder__field-wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.lidalen-form-card .jet-form-builder__label-text {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

/* Every field is needed except the one whose label says "(valgfritt)". */
.lidalen-form-card .jet-form-builder__required {
	display: none;
}

.lidalen-form-card ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Wrong: the logo red (the focus colour too) on the field, and what to do right under it. */
.lidalen-form-card .field-has-error input,
.lidalen-form-card .field-has-error textarea {
	border-color: var(--wp--preset--color--signal);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--signal);
}

.lidalen-form-card .error-message {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--signal);
}

/* Send: the theme's button, as wide as the card; dimmed while the form is being sent. */
.lidalen-form-card .jet-form-builder__action-button-wrapper {
	margin: 0;
}

.lidalen-form-card .jet-form-builder__action-button {
	width: 100%;
	min-height: 52px;
	padding: var(--wp--custom--control--padding-block) var(--wp--custom--control--padding-inline);
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	justify-content: center;
	cursor: pointer;
}

.lidalen-form-card .jet-form-builder__action-button:hover {
	background: var(--wp--preset--color--accent-hover);
}

.lidalen-form-card .jet-form-builder__action-button:disabled,
.lidalen-form-card form.is-loading .jet-form-builder__action-button {
	opacity: 0.6;
	cursor: progress;
}

/* After sending: a blue edge for "sent", the red one when it failed. */
.lidalen-form-card .jet-form-builder-messages-wrap:empty {
	display: none;
}

.lidalen-form-card .jet-form-builder-messages-wrap > div {
	margin: 0;
	padding: var(--wp--custom--box--padding-compact);
	border: 0;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 0;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-align: start;
}

.lidalen-form-card .jet-form-builder-messages-wrap > [class*="error"] {
	border-left-color: var(--wp--preset--color--signal);
}

.lidalen-form-card > p.lidalen-form-note {
	font-size: var(--wp--preset--font-size--small);
}

/* Form fields (JetFormBuilder and core): 52px tall, 18px text (no zoom on iPhones), a 3:1
   border. */
.lidalen-form-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.lidalen-form-card textarea,
.lidalen-form-card select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: var(--wp--custom--control--field-padding);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: 18px;
}

.lidalen-form-card textarea {
	min-height: 120px;
	resize: vertical;
}

@media (max-width: 781px) {
	.wp-block-group.lidalen-visit__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-cover.lidalen-visit {
		--lidalen-shade: linear-gradient(180deg, rgb(18 26 85 / 0.9) 0, rgb(18 26 85 / 0.82) 100%);
	}
}

@media (max-width: 599px) {
	.wp-block-group.lidalen-details {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------------------
   Inner pages (theme 0.5.0): the text section, the staff cards and the Kontakt page's contact
   section. Same ground, type and edges as the front page.
   --------------------------------------------------------------------------------------- */

/* A page hero without a photo (Kontakt, Nyheter) already ends with a section's spacing: the next
   section doesn't add its own on top. */
.wp-block-group.lidalen-hero--page:not(:has(.lidalen-hero__photo img)) + .wp-block-group.lidalen-section {
	padding-top: 0;
}

/* On phones the page hero's photo runs to the screen edges (its edge, "Image edges" above).
   WordPress's constrained layout centres children with !important margins. */
@media (max-width: 781px) {
	.lidalen-hero.is-layout-constrained > .wp-block-image.lidalen-hero__photo {
		margin-left: calc(-1 * var(--wp--custom--gutter)) !important;
		margin-right: calc(-1 * var(--wp--custom--gutter)) !important;
		max-width: none;
	}
}

/* Plain pages (the policies): a heading starts a new part, so it has more room above than
   below. */
.lidalen-page .wp-block-post-content {
	--wp--style--global--content-size: 680px; /* about 75 characters a line */
}

.lidalen-page .wp-block-post-content > h2 {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

.lidalen-page .wp-block-post-content > h2 + * {
	margin-block-start: 0;
}

/* Text section: the heading left (5/12), the paragraphs right (7/12); stacked below 782px. */
.wp-block-group.lidalen-text__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	align-items: start;
}

.lidalen-text__grid > *,
.lidalen-text__body > * {
	margin-block: 0;
}

.lidalen-text__body {
	max-width: 40em;
}

.lidalen-text__body > * + * {
	margin-block-start: 1em;
}

.lidalen-text__body > .wp-block-buttons,
.lidalen-text__body > .wp-block-list + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.lidalen-text .is-style-line .wp-block-button__link {
	color: var(--wp--preset--color--accent);
}

/* A band reused on an inner page may start with a call button and a link. */
.lidalen-deliver .wp-block-buttons.lidalen-deliver__actions {
	gap: 12px;
}

@media (max-width: 781px) {
	.wp-block-group.lidalen-text__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Timeline (Historie): the year large in blue on the left (3/12), the heading and text on the
   right, each step under a hairline in the text colour like the sieve ruler's axis. Stacked
   below 782px, the year above the heading. */
.lidalen-timeline__step {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--text);
}

.lidalen-timeline__step:last-child {
	padding-bottom: 0;
}

.lidalen-timeline__step > *,
.lidalen-timeline__body > * {
	margin-block: 0;
}

.lidalen-timeline__year {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.lidalen-timeline__body {
	max-width: 40em;
}

.lidalen-timeline__body > * + * {
	margin-block-start: 0.75em;
}

@media (max-width: 781px) {
	.lidalen-timeline__step {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Staff: portrait cards, four across, two on tablets and phones. */
.lidalen-staff .wp-block-post-template.lidalen-cards {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lidalen-staff .lidalen-card .wp-block-post-featured-image img {
	aspect-ratio: 4 / 5;
}

.lidalen-staff .lidalen-card__body {
	gap: 4px;
	padding: 18px 20px 22px;
}

.lidalen-staff .lidalen-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

.lidalen-staff__role {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

/* The number sits at the foot of the card, so the numbers line up when a name takes two lines. */
.lidalen-staff__tel {
	margin-top: auto !important;
	padding-top: 8px;
	font-weight: 600;
}

.lidalen-staff__tel a {
	display: inline-block;
	margin-block: -11px;
	padding-block: 11px;
	color: var(--wp--preset--color--accent);
}

@media (max-width: 1023px) {
	.lidalen-staff .wp-block-post-template.lidalen-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.lidalen-staff .wp-block-post-template.lidalen-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.lidalen-staff .lidalen-card__body {
		padding: 14px 14px 18px;
	}
}

/* Contact on the dust ground (Kontakt page): the visit section's layout in the text colours. */
.lidalen-contact .lidalen-big-tel {
	color: var(--wp--preset--color--accent);
}

.lidalen-contact .wp-block-group.lidalen-details {
	border-top-color: var(--wp--preset--color--border);
}

.lidalen-contact .lidalen-details .lidalen-details__label {
	color: var(--wp--preset--color--muted);
}

.lidalen-contact .is-style-line .wp-block-button__link {
	color: var(--wp--preset--color--accent);
}

.lidalen-contact .wp-block-group.lidalen-form-card {
	box-shadow: var(--wp--preset--shadow--edge);
}

/* ---------------------------------------------------------------------------------------
   News (theme 0.6.0, decision 0008): post cards on the Nyheter page, the front page's
   "Siste nytt" and the category archives, and the post page (templates/single.html). The cards
   are the product cards; the whole card is the link (the title's link stretches over it).
   --------------------------------------------------------------------------------------- */

.wp-block-group.lidalen-news__card {
	position: relative;
}

.lidalen-news__card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.lidalen-news__card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.lidalen-news__card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}

/* The focus ring goes round the whole card, not the title. */
.lidalen-news__card .wp-block-post-title a:focus-visible {
	outline: none;
}

.lidalen-news__card:has(.wp-block-post-title a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}

.lidalen-news__date {
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

.lidalen-news .lidalen-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* "Siste nytt": two cards. */
.wp-block-post-template.lidalen-cards--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lidalen-news__all {
	justify-self: end;
	font-weight: 600;
}

.lidalen-news__all a,
.lidalen-post__back a {
	color: var(--wp--preset--color--accent);
}

.wp-block-query-pagination.lidalen-news__pages {
	margin-block-start: var(--wp--preset--spacing--60);
	font-weight: 600;
}

/* The post page: the title at section size (titles are sentences, not one word), the date and
   category beside it, the photo at full width under them, the text at the policies' measure. */
.lidalen-hero--post .lidalen-hero__title {
	max-width: 22ch;
}

.lidalen-post__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-self: end;
	text-align: right;
}

.lidalen-post__cat {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.lidalen-post__cat a {
	display: inline-block;
	margin-block: -12px;
	padding-block: 12px;
	color: inherit;
	text-decoration: none;
}

.lidalen-post__cat a:hover {
	text-decoration: underline;
}

.lidalen-hero .wp-block-post-featured-image.lidalen-hero__photo {
	margin: var(--wp--preset--spacing--70) 0 0;
}

.lidalen-post__body .wp-block-post-content > * + * {
	margin-block-start: 1.1em;
}

.lidalen-post__body .wp-block-post-content > :is(h2, h3) {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

.lidalen-post__body .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

/* The first paragraph is the lead. */
.lidalen-post__body .wp-block-post-content > p:first-child {
	font-size: var(--wp--preset--font-size--lead);
}

.lidalen-post__body > .lidalen-post__back {
	margin-block-start: var(--wp--preset--spacing--60);
	font-weight: 600;
}

/* Posts imported from Facebook (elemental-social, decision 0009): the gallery's photos get the
   edge line, the video link and the source line sit under the text, small and muted. */
.lidalen-post__body .wp-block-gallery {
	gap: 12px;
}

.lidalen-post__body .wp-block-gallery .wp-block-image {
	position: relative;
}

.lidalen-post__body .wp-block-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: var(--wp--preset--shadow--edge);
	pointer-events: none;
}

.lidalen-post__body .elemental-social-video a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.lidalen-post__body .wp-block-post-content > .elemental-social-source {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.elemental-social-source a {
	color: inherit;
}

@media (max-width: 781px) {
	.wp-block-post-template.lidalen-cards--two {
		grid-template-columns: minmax(0, 1fr);
	}

	.lidalen-news__all,
	.lidalen-post__meta {
		justify-self: start;
		text-align: left;
	}

	.lidalen-post__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 16px;
	}

	.lidalen-hero.is-layout-constrained > .wp-block-post-featured-image.lidalen-hero__photo {
		margin-left: calc(-1 * var(--wp--custom--gutter)) !important;
		margin-right: calc(-1 * var(--wp--custom--gutter)) !important;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------------------
   Header on the truck blue: the white logo, the menu, the phone number (text on desktop, the red
   call button on phones). The menu folds into
   the blue overlay below 782px (WordPress folds it below 600px; the rules for 600–781px fold
   it earlier). On phones the call button shrinks to its icon next to the menu button.
   The header stays at the top while the page scrolls. Over the front page's full-screen photo it
   is transparent until the photo has scrolled past (assets/js/lidalen.js adds `is-solid`).
   --------------------------------------------------------------------------------------- */

.wp-site-blocks > .wp-block-template-part:has(> .lidalen-header) {
	position: sticky;
	top: 0;
	z-index: 20;
}

@media (min-width: 600px) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .lidalen-header) {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.wp-block-group.lidalen-header {
	position: relative;
	z-index: 10;
	box-sizing: border-box;
	min-height: var(--lidalen-header-h);
	padding-block: 16px;
	transition: background-color 0.3s;
}

body:has(.lidalen-hero--full) .lidalen-header:not(.is-solid) {
	background-color: transparent !important;
}

.lidalen-header__bar {
	gap: var(--wp--preset--spacing--40);
	min-height: 48px;
}

.wp-block-group.lidalen-header__menu {
	gap: 30px;
}

.lidalen-logo,
.lidalen-logo a {
	display: block;
	margin: 0;
}

.lidalen-logo a {
	min-height: 44px;
}

.lidalen-logo img {
	display: block;
	width: 200px !important;
	height: auto;
}

.lidalen-header .wp-block-navigation-item__content {
	padding-block: 12px;
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
}

.lidalen-header .wp-block-navigation-item__content:hover,
.lidalen-header .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 6px;
}

.lidalen-header .lidalen-header__call {
	margin: 0;
}

.lidalen-header__call .wp-block-button__link {
	min-height: 44px;
	padding: 0 20px;
	font-size: 16px;
}

/* On desktop the number is text, not a button: white and bold with the phone icon. It is still a
   link, for those who call from the computer. */
@media (min-width: 782px) {
	.lidalen-header__call .wp-block-button.is-style-call .wp-block-button__link,
	.lidalen-header__call .wp-block-button.is-style-call .wp-block-button__link:hover {
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--on-dark);
		font-size: 18px;
		font-weight: 800;
		letter-spacing: var(--wp--custom--letter-spacing--snug);
	}

	.lidalen-header__call .wp-block-button.is-style-call .wp-block-button__link:hover {
		text-decoration: underline;
		text-decoration-thickness: 1.5px;
		text-underline-offset: 6px;
	}
}

/* The phone menu buttons get a 44px tap target. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	box-sizing: content-box;
	padding: 10px;
}

.lidalen-header .wp-block-navigation__responsive-container-open {
	border: 1.5px solid rgb(255 255 255 / 0.45);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--on-dark);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--wp--custom--gutter);
}

.lidalen-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.lidalen-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.lidalen-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--snug);
}

/* Five menu items on one line from 782px: tighter gaps and a smaller logo up to 1023px. */
@media (min-width: 782px) and (max-width: 1023px) {
	.lidalen-header .wp-block-navigation,
	.lidalen-header .wp-block-navigation__container {
		gap: 18px !important;
	}

	.wp-block-group.lidalen-header__menu {
		gap: 18px;
	}

	.lidalen-logo img {
		width: 160px !important;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.lidalen-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lidalen-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 781px) {
	.wp-block-group.lidalen-header__menu {
		gap: 10px;
	}

	/* Only the phone icon, a round 44px button; the number is its accessible name. */
	.lidalen-header__call .wp-block-button__link {
		width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;
		font-size: 0;
	}
}

@media (max-width: 599px) {
	.wp-block-group.lidalen-header {
		padding-block: 10px;
	}

	.lidalen-logo img {
		width: 140px !important;
	}
}

/* ---------------------------------------------------------------------------------------
   Footer on the dark blue: the brand, contact, hours and pages; two columns on tablets, one
   on phones.
   --------------------------------------------------------------------------------------- */

.wp-block-group.lidalen-footer {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) var(--wp--preset--spacing--50);
}

.lidalen-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.lidalen-footer-grid > * {
	margin-block: 0;
}

.lidalen-footer .wp-block-group > p {
	margin: 0;
}

.lidalen-footer__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

.lidalen-footer a {
	display: inline-block;
	margin-block: -7px;
	padding-block: 11px;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.lidalen-footer a:hover,
.lidalen-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The bottom line: copyright; privacy, cookies and the maker side by side, small. */
.wp-block-group.lidalen-footer__base {
	gap: 8px var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgb(255 255 255 / 0.14);
}

.lidalen-footer__base > * {
	margin: 0;
}

.lidalen-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--30);
}

.lidalen-footer .lidalen-footer__legal a {
	color: var(--wp--preset--color--on-dark-muted);
}

@media (max-width: 1023px) {
	.lidalen-footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lidalen-footer-grid > .lidalen-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.lidalen-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.lidalen-header,
	.lidalen-js .lidalen-settle img {
		transition: none;
	}

	.lidalen-hero--full > .wp-block-cover__inner-container > *,
	.lidalen-hero--full > .wp-block-cover__image-background {
		animation: none;
	}

	.lidalen-js .lidalen-settle img,
	.lidalen-machine::before {
		transform: none;
	}
}