/*
 * LG — utility classes and block refinements.
 *
 * Every value here is a token from theme.json (var(--wp--…)). Nothing in this
 * file introduces a colour, size or spacing of its own. Loaded on the front end
 * and inside the editor by functions.php.
 */

/* --- Two-tone headings ------------------------------------------------
 * The reference sets a second line of most headings in italic and the accent
 * colour ("Men sådan har det ikke altid været."). Wrapping that line in <em>
 * inside any heading does the same here. It sits slightly smaller than the
 * upright line, as on the reference.
 */
:where(h1, h2, h3, h4, .wp-block-post-title) em {
	font-style: italic;
	font-weight: inherit;
	color: var(--wp--preset--color--accent);
	font-size: 0.8em;
	line-height: 1.15;
}

/* Balanced line breaks: headings wrap into lines of roughly equal length,
 * so a narrow viewport never leaves a single word on the last line. Browsers
 * without text-wrap support ignore it. Chromium skips balancing any block
 * that contains a forced <br>, so the two-tone second line becomes its own
 * block and balances on its own; the <br> before it then adds no height. */
:where(h1, h2, h3, h4, .wp-block-post-title) {
	text-wrap: balance;
}

:where(h1, h2, h3, h4, .wp-block-post-title) br + em {
	display: block;
}

/* Headings that are links (card titles) keep the heading colour. */
:where(h1, h2, h3, h4) a {
	color: inherit;
}

:where(h1, h2, h3, h4) a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* --- Handwritten note -------------------------------------------------
 * The red pen-written asides in the margins ("Modet til at tage ordet…"), with
 * a hand-drawn swash beneath. Class on a Paragraph. The swash is a mask so its
 * colour is the accent token, not a value baked into an image.
 */
.lg-note {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--accent);
	transform: rotate(var(--wp--custom--tilt));
	transform-origin: left center;
	max-width: 14em;
	padding-bottom: 0.9em;
	position: relative;
}

.lg-note::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 6.5em;
	height: 0.6em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12' preserveAspectRatio='none'><path d='M2 9 C 30 2, 70 3, 128 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat left center / 100% 100%;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12' preserveAspectRatio='none'><path d='M2 9 C 30 2, 70 3, 128 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat left center / 100% 100%;
}

/* --- Text link button -------------------------------------------------
 * "LÆS MERE →": a Button block in the "Text link" style. Same type as a
 * button, no box. Colour comes from the button's text colour setting; the
 * pattern sets accent (or base on the accent band).
 */
.wp-block-button.is-style-text-link .wp-block-button__link {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--accent);
	text-align: left;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover,
.wp-block-button.is-style-text-link .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* --- Hairline rules between columns -----------------------------------
 * A Columns block with this class draws the reference's thin vertical rule
 * between its columns (stats column, testimonials, principles). The rule is
 * currentColor at low alpha (the `line` token), so it works on the accent band
 * as well as on the page. When the columns stack the rule turns horizontal.
 */
.wp-block-columns.lg-rules > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--custom--line);
	padding-left: var(--wp--preset--spacing--sm);
}

@media (max-width: 781px) {
	.wp-block-columns.lg-rules:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--wp--custom--line);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--sm);
	}
}

/* --- Filling images ---------------------------------------------------
 * An Image that fills the full height of its column (the bio and principles
 * photos, which run edge to edge on the reference). The column becomes a
 * flex column so the figure has a definite height to fill; when the image is
 * the tallest thing in the row it keeps its natural aspect ratio.
 */
.wp-block-column:has(> .wp-block-image.lg-fill) {
	display: flex;
	flex-direction: column;
}

.wp-block-image.lg-fill {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
	width: 100%;
}

.wp-block-image.lg-fill img {
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	align-self: stretch;
	object-fit: cover;
}

/* --- Vertically centred column ----------------------------------------
 * A Column that keeps its full (stretched) height — so a background fills the
 * row — but centres its content. Core's own vertical alignment would shrink
 * the column to its content instead.
 */
.wp-block-column.lg-vcenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Service tile -----------------------------------------------------
 * The numbered service blocks: a text panel beside a tall photo, sharing one
 * height. A Group with this class holding exactly two children (a Group and an
 * Image). Proportions are the `tile` tokens.
 */
.wp-block-group.lg-tile {
	display: grid;
	grid-template-columns: var(--wp--custom--tile--text) var(--wp--custom--tile--image);
	gap: 0;
	height: 100%;
}

.wp-block-group.lg-tile > .wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.wp-block-group.lg-tile > .wp-block-image,
.wp-block-group.lg-tile > .wp-block-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	margin: 0;
}

/* Text link at the bottom of a tile regardless of copy length. */
.wp-block-group.lg-tile > .wp-block-group > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--xs);
}

/* --- Icons ------------------------------------------------------------
 * Line icons are inline SVGs in an HTML block (assets/icons/*.svg holds the
 * set) so they inherit the colour of their container. Size is the token.
 */
.lg-icon svg {
	display: block;
	width: var(--wp--custom--icon);
	height: var(--wp--custom--icon);
	stroke: currentColor;
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Checklist --------------------------------------------------------
 * A List with accent ticks instead of bullets ("Det får du" on an e-book).
 */
ul.wp-block-list.lg-checklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

ul.wp-block-list.lg-checklist > li {
	position: relative;
	padding-left: calc(var(--wp--preset--spacing--sm) + 4px);
}

ul.wp-block-list.lg-checklist > li + li {
	margin-top: var(--wp--preset--spacing--xxs);
}

ul.wp-block-list.lg-checklist > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 14px;
	height: 7px;
	border-left: 1.5px solid var(--wp--preset--color--accent);
	border-bottom: 1.5px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

/* --- Plain list -------------------------------------------------------
 * A List used as navigation (footer): no markers, no indent, label type.
 */
ul.wp-block-list.lg-plain-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 2.2;
}

ul.wp-block-list.lg-plain-list a {
	color: inherit;
}

ul.wp-block-list.lg-plain-list a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* --- Long-form column -------------------------------------------------
 * A constrained Group with this class narrows its children to the reading
 * measure (`prose` token). Wide-aligned children get the full content width.
 */
.wp-block-group.lg-prose > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	max-width: var(--wp--custom--prose);
}

.wp-block-group.lg-prose > .alignwide {
	max-width: var(--wp--style--global--content-size);
}

.wp-block-group.lg-prose .wp-block-pullquote {
	text-align: left;
}

/* --- Edge inset --------------------------------------------------------
 * A column that would otherwise bleed to the viewport edge stops at the
 * content edge instead (the intro-photo portrait, Simon 2026-08-23). Only
 * while the columns sit side by side; stacked below core's 782px breakpoint
 * the photo bleeds full-width again.
 */
@media (min-width: 782px) {
	.wp-block-column.lg-edge-inset {
		padding-right: var(--wp--custom--edge);
	}
}

/* --- Stacked gutter ----------------------------------------------------
 * A column that sits beside a full-bleed photo carries inline padding for the
 * air between the two. Once the columns stack (below core's 782px) that
 * padding indents the text away from the page gutter every other section
 * starts at, so here it falls back to the gutter token. The inline style the
 * block saves can only be beaten with !important — see the exceptions in
 * CLAUDE.md §6.
 */
@media (max-width: 781px) {
	.wp-block-column.lg-stack-gutter {
		padding-left: var(--wp--custom--gutter) !important;
		padding-right: var(--wp--custom--gutter) !important;
	}
}

/* --- Product card -----------------------------------------------------
 * Grid cells stretch to the tallest card in the row; the card becomes a
 * column and the price (and the buttons after it) sit on the bottom edge, so
 * price, Køb and Læs mere align across the row however long the copy above
 * runs.
 */
.wp-block-group.lg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wp-block-group.lg-card > .lg-price {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--xs);
}

/* --- Card grids -------------------------------------------------------
 * WordPress escapes CSS custom properties inside the Grid layout's
 * minimumColumnWidth attribute, so patterns carry a literal for the editor
 * preview and these classes put the token in charge on the front end.
 */
.wp-block-group.lg-grid-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--wp--custom--grid--card), 100%), 1fr));
}

/* The logo wall's column sizing comes from the block's own grid layout
 * settings (Minimum column width + Max columns in the editor), so those
 * controls actually work. This rule must NOT set grid-template-columns —
 * `.wp-block-group.lg-grid-logos` outranks core's generated
 * `.wp-container-core-group-is-layout-*` rule and would silently override
 * whatever is set in the editor (Simon, 2026-09-04). */
.wp-block-group.lg-grid-logos {
	align-items: start;
}

.wp-block-group.lg-grid-logos img {
	filter: grayscale(1);
	opacity: 0.8;
}

.wp-block-group.lg-grid-logos figcaption {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- Forms ------------------------------------------------------------
 * Core has no form block. Forms are HTML blocks with these fields, styled
 * from the tokens; they do not submit until wired up (see PLAN.md).
 */
.lg-form {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
}

.lg-form--inline {
	grid-template-columns: minmax(200px, 1fr) auto;
	align-items: stretch;
}

@media (max-width: 599px) {
	.lg-form--inline {
		grid-template-columns: 1fr;
	}
}

.lg-field {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 12px 16px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius);
}

.lg-field::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.lg-field:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

textarea.lg-field {
	min-height: 140px;
	resize: vertical;
}

/* Two fields side by side (contact form rows) once there is room. */
.lg-form--pair {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

select.lg-field {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

/* A submit button inside an HTML-block form, dressed as the theme button. */
.lg-form .wp-element-button {
	cursor: pointer;
	white-space: nowrap;
}

/* --- Stacked (single-column) widths -----------------------------------
 * Below 782px core stacks Columns. Photos that filled a column beside text
 * would then run full-width at their desktop aspect ratio (a 1:2 photo at
 * 768px wide is 1536px tall), so stacked they take the `stackedRatio` token
 * instead. Inline aspect ratios need !important to override.
 */
@media (max-width: 781px) {
	.wp-block-image.lg-fill img,
	.wp-block-group.lg-tile > .wp-block-image img {
		aspect-ratio: var(--wp--custom--stacked-ratio) !important;
	}

	.wp-block-image.lg-fill {
		flex: 0 0 auto;
	}

	/* Service tile: narrower photo and lighter panel padding so the uppercase
	   serif title has room. The pattern's inline padding needs !important. */
	.wp-block-group.lg-tile {
		grid-template-columns: var(--wp--custom--tile--text) var(--wp--custom--tile--image-stacked);
	}

	.wp-block-group.lg-tile > .wp-block-group {
		padding: var(--wp--preset--spacing--sm) !important;
	}
}

/* --- Book cover -------------------------------------------------------
 * A 2:3 cover Image capped at the `cover` tokens so it never dominates the
 * column (free e-book band, e-book detail).
 */
.wp-block-image.lg-cover {
	max-width: var(--wp--custom--cover--wide);
}

@media (max-width: 781px) {
	.wp-block-image.lg-cover {
		max-width: var(--wp--custom--cover--narrow);
	}
}

/* --- Header call to action --------------------------------------------
 * The last nav item ("Kontakt") is dressed as the accent button, in the
 * desktop row and in the mobile overlay alike. No hover underline on it.
 */
.wp-block-navigation .wp-block-navigation-item.lg-nav-cta > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius);
	padding: 11px 22px;
	transition: background-color 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item.lg-nav-cta > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.lg-nav-cta > .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation .wp-block-navigation-item.lg-nav-cta > .wp-block-navigation-item__content::after {
	display: none;
}

/* A little more air before the button in the desktop row — only where the
 * row actually is a row (see the breakpoint below). */
@media (min-width: 1014px) {
	.wp-block-navigation .wp-block-navigation-item.lg-nav-cta {
		margin-left: var(--wp--preset--spacing--xs);
	}
}

/* --- Header nav breakpoint --------------------------------------------
 * Core switches the navigation from the overlay to the inline row at 600px,
 * but the wordmark, the six labels and the Kontakt button only share one
 * line from 1014px (measured 2026-09-18: below 837px the button dropped to
 * its own line, between 837 and 1013px the nav sat on a second row under
 * the wordmark). The inline row is shown only where it is one line, so the
 * overlay keeps the header up to 1013px and core's 600px rules are reverted
 * for that range. 1014px is the theme's header breakpoint — the one
 * media-query width besides core's 782px (CLAUDE.md §7).
 */
@media (min-width: 600px) and (max-width: 1013px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* --- Separator --------------------------------------------------------
 * Core draws a 2px rule; the theme's hairline is 1px everywhere.
 */
hr.wp-block-separator {
	border-bottom-width: 1px;
}

/* --- Search block -----------------------------------------------------*/
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--base);
	padding: 12px 16px;
	font-family: inherit;
}

.wp-block-search__button {
	border-radius: var(--wp--custom--radius);
}

/* --- Header ---------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-inline: var(--wp--custom--gutter);
}

/* Header nav underline on hover — a hairline in the accent colour that grows
 * out from the centre. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* --- Buttons ---------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* --- Contact form (Contact Form 7 + WP Armour, TODO 3) -----------------
 * The Kontakt page's form is a CF7 form (bin/setup-contact.php). These rules
 * carry the hand-built form's look onto CF7's markup: the <form> is the same
 * grid the `.lg-form` wrapper used to be, `.lg-field` and `.wp-element-button`
 * come from the form-tags themselves, and CF7's validation and response
 * messages are dressed in the theme's tokens (the accent for anything that has
 * gone wrong, muted for the neutral state). Scoped to `.lg-contact-form` — the
 * class the shortcode's `html_class` puts on the <form> element.
 *
 * A few of these repeat what CF7's own stylesheet does. That is deliberate:
 * inc/contact.php only loads CF7's stylesheet on the page that has the form,
 * and the form must still be right if it is ever dropped altogether.
 */

/* Hidden labels: the design shows placeholders only, but every control keeps a
   real label. Out of flow, so a row's grid items stay the two fields. */
.lg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lg-contact-form {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
}

/* CF7 runs the form template through autop, so the contents of each row
   arrive wrapped in a <p>. `display: contents` hands the row's grid back its
   two fields; if CF7 ever stops adding the <p>, the rule simply stops
   matching and the fields are the grid items directly. */
.lg-contact-form p {
	margin: 0;
}

.lg-contact-form .lg-form--pair > p {
	display: contents;
}

.lg-contact-form .hidden-fields-container,
.lg-contact-form .wpa_hidden_field {
	display: none;
}

.lg-contact-form .screen-reader-response,
.lg-contact-form .altEmail_container {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* CF7 wraps every control in an inline <span>; make it the field's box so
   `.lg-field`'s width resolves against the row's grid cell. */
.lg-contact-form .wpcf7-form-control-wrap {
	display: block;
}

.lg-contact-form .wp-element-button {
	cursor: pointer;
	white-space: nowrap;
}

/* Validation: the tip under a field, and the field it belongs to. */
.lg-contact-form .wpcf7-not-valid-tip {
	margin-top: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
}

.lg-contact-form .lg-field.wpcf7-not-valid {
	border-color: var(--wp--preset--color--accent);
}

/* The line under the form: "thanks" after a send, the error after a failure.
   CF7's own rule is `.wpcf7 form .wpcf7-response-output`, so these carry the
   same weight plus one class to be sure they win. */
.wpcf7 form.lg-contact-form .wpcf7-response-output {
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wpcf7 form.lg-contact-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wpcf7 form.lg-contact-form.invalid .wpcf7-response-output,
.wpcf7 form.lg-contact-form.unaccepted .wpcf7-response-output,
.wpcf7 form.lg-contact-form.spam .wpcf7-response-output,
.wpcf7 form.lg-contact-form.failed .wpcf7-response-output,
.wpcf7 form.lg-contact-form.aborted .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* CF7's submit spinner sits beside the button while the form is sending. */
.lg-contact-form .wpcf7-spinner {
	margin: 0 0 0 var(--wp--preset--spacing--xs);
	background-color: var(--wp--preset--color--muted);
}

/* --- Order received: downloads table ------------------------------------
 * The "Hent" column is the whole delivery path for a guest order, and the
 * table's four columns (~460px) are wider than a phone, which pushed the
 * download link off-screen. Below the stacking breakpoint the two
 * informational columns (remaining downloads, expiry — both repeated in the
 * order mail) are dropped so product + link fit in the column.
 */
@media (max-width: 781px) {
	.wc-block-order-confirmation-downloads__table {
		width: 100%;
		font-size: var(--wp--preset--font-size--x-small);
	}

	.wc-block-order-confirmation-downloads__table th,
	.wc-block-order-confirmation-downloads__table td {
		padding-left: var(--wp--preset--spacing--xxs);
		padding-right: var(--wp--preset--spacing--xxs);
	}

	.wc-block-order-confirmation-downloads__table th:nth-child(2),
	.wc-block-order-confirmation-downloads__table th:nth-child(3),
	.wc-block-order-confirmation-downloads__table td:nth-child(2),
	.wc-block-order-confirmation-downloads__table td:nth-child(3) {
		display: none;
	}
}