/*
Theme Name: Lykkewal fuger
Theme URI: https://fluxconsulting.dk
Author: Flux Consulting
Author URI: https://fluxconsulting.dk
Description: Blokbaseret WordPress-tema til Lykkewal fuger ApS, bygget efter Figma-designet. Full Site Editing uden sidebyggere. Farver, typografi og afstande ligger i theme.json, sektionerne ligger som blokmønstre, og skrifttyperne er indlejret lokalt af hensyn til GDPR.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flux-lykkewal
Tags: block-templates, block-patterns, full-site-editing, translation-ready, custom-colors, custom-logo, custom-menu, editor-style, featured-images, wide-blocks, accessibility-ready
*/

/*
 * Her ligger kun det, theme.json ikke kan udtrykke.
 * Alt andet hører hjemme i theme.json, så kunden kan se det i editoren.
 * Klasserne herunder sættes på blokke i mønstrene under "Avanceret > CSS-klasse".
 */

/* ---------------------------------------------------------------------
   1. Tilgængelighed
   ------------------------------------------------------------------ */

.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	left: 8px;
	top: 8px;
	width: auto;
	z-index: 100000;
	padding: 12px 20px;
	background-color: #fcf9f8;
	color: #1c1b1b;
	text-decoration: underline;
}

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------
   2. Sidehoved: aktivt menupunkt
   Designet understreger den aktuelle side. Navigationsblokken har ingen
   indstilling for det, så det sker her.
   ------------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current_page_parent > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding-bottom: 6px;
}

/* Knappen i sidehovedet er mindre end knapper i indholdet. */
.lw-header-knap .wp-block-button__link {
	padding: 0.75rem 1.5rem;
}

/* ---------------------------------------------------------------------
   2b. Undermenu i sidehovedet
   WordPress tegner undermenuen som en hvid kasse med en sort streg om og
   sort tekst. Den hører ikke til i det her design. Reglerne herunder er
   skrevet med nok vægt til at slå kernens egne, og de gælder kun, når
   overlay-menuen er lukket, så mobilmenuen ikke får en kasse indeni.
   ------------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container {
	gap: 0;
	min-width: 264px;
	padding: 0.375rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(28, 27, 27, 0.12);
	color: var(--wp--preset--color--body);
	margin-top: 0.25rem;
}

/* Usynlig bro over luften, så musen ikke taber undermenuen på vejen ned. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset: -0.5rem 0 100% 0;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--body);
	white-space: nowrap;
	transition: background-color 0.12s linear, color 0.12s linear;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

/*
 * Den aktuelle side er understreget i topmenuen. Inde i en kasse ser en
 * understregning forkert ud, så der markeres med baggrund i stedet.
 */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--base-2);
	border-bottom: 0;
	padding-bottom: 0.5rem;
}

/* Pilen ved siden af menupunktet med undermenu. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	margin-left: 0.25em;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	width: 0.7em;
	height: 0.7em;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   3. Hero med glaspanel
   Cover-blokken kan billede og slør, men ikke det indrykkede panel med
   baggrundssløring. Panelet er en gruppe inde i Cover.
   ------------------------------------------------------------------ */

/*
 * Cover-blokken faar ikke sidens vandrette luft som de oevrige sektioner.
 * Her lægges den paa, saa panelet flugter med indholdet i resten af siden.
 */
.lw-hero {
	padding-inline: var(--wp--style--root--padding-left, clamp(1.25rem, 6vw, 5rem));
}

.lw-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-inline: auto;
}

.lw-hero__panel {
	max-width: 672px;
	margin-right: auto;
	margin-left: 0;
	background-color: rgba(252, 249, 248, 0.9);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border-radius: 4px;
}

/* ---------------------------------------------------------------------
   4. Rubrikrækken over ydelserne
   Overskrift til venstre, link til højre, begge i bund, streg under.
   ------------------------------------------------------------------ */

.lw-rubrik-raekke {
	align-items: flex-end;
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	padding-bottom: 2rem;
}

@media (max-width: 781px) {
	.lw-rubrik-raekke {
		align-items: flex-start;
	}
}

/* Den korte streg under "Vores proces". */
.lw-kort-streg {
	width: 64px;
	max-width: 64px;
	margin-left: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------------
   5. Bento-gitteret på ydelsessiden
   Gitterlayoutet i kerneblokken laver lige rækker. Designet har et kort,
   der fylder to kolonner. Resten arver fra gitteret.
   ------------------------------------------------------------------ */

.lw-bento > * {
	height: 100%;
}

@media (max-width: 781px) {
	.lw-bento > .lw-bento__bred {
		grid-column: span 1 !important;
	}
}

/* Ikon på ydelseskortene.
   Ikonet tegnes på selve kortet med ::before, ikke i en blok for sig.
   En tom blok har intet indhold at måle på: er temaets CSS ikke indlæst i
   editorens lærred, falder den sammen, og editoren tegner sin egen
   indsætter-grafik i stedet. Her er der ingen blok at falde sammen.
   Farven er bagt ind i ikonet, fordi den er den samme i hele designet. */
.lw-kort::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	border-radius: 12px;
}

/* De centrerede kort under Vores værdier. */
.lw-kort--midt::before {
	margin-inline: auto;
}

.lw-kort--doer::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V4a1%201%200%200%201%201-1h10a1%201%200%200%201%201%201v17%22%2F%3E%3Cpath%20d%3D%22M2%2021h20%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--vaadrum::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h16v3a5%205%200%200%201-5%205H9a5%205%200%200%201-5-5z%22%2F%3E%3Cpath%20d%3D%22M7%2012V6a2%202%200%200%201%204%200%22%2F%3E%3Cpath%20d%3D%22M6%2020l-1%202%22%2F%3E%3Cpath%20d%3D%22M18%2020l1%202%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--dilatation::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3Cpath%20d%3D%22M6%208l-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22M18%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--brand::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202c2%204%206%206%206%2011a6%206%200%200%201-12%200c0-3%202-4%203-6%201%202%203%202%203%204%200-4%200-6%200-9z%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--pcb::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%204v5c0%205-3.5%208-8%209-4.5-1-8-4-8-9V7z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--stjerne::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.3%205.6L20%2010l-4.4%203.6L16.8%2020%2012%2016.9%207.2%2020l1.2-6.4L4%2010l5.7-1.4z%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--praecision::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20%22%2F%3E%3Cpath%20d%3D%22M8%206l4-4%204%204%22%2F%3E%3Cpath%20d%3D%22M8%2018l4%204%204-4%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--pensel::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l4-1%2011-11a2.1%202.1%200%200%200-3-3L4%2017z%22%2F%3E%3Cpath%20d%3D%22M14%206l4%204%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--sigte::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v4%22%2F%3E%3Cpath%20d%3D%22M12%2018v4%22%2F%3E%3Cpath%20d%3D%22M2%2012h4%22%2F%3E%3Cpath%20d%3D%22M18%2012h4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
}

.lw-kort--flueben::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23283f19%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------------------------------------------------------------------
   6. Billedkort med tekst i bunden
   Cover-blokken klarer billede og gradient via temaets gradient-preset.
   Her sikres kun, at teksten står i bunden og ikke flyder ud.
   ------------------------------------------------------------------ */

.lw-billedkort .wp-block-cover__inner-container {
	width: 100%;
}

.lw-billedkort p,
.lw-billedkort h3 {
	color: #ffffff;
}

.lw-billedkort .lw-chip {
	color: var(--wp--preset--color--contrast);
}

/* Etiketten på billedkort og ydelseskort. */
.lw-chip {
	display: inline-block;
	background-color: rgba(252, 249, 248, 0.9);
	border-radius: 12px;
	padding: 4px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	width: fit-content;
}

.lw-chip--daempet {
	background-color: rgba(76, 102, 59, 0.1);
}

/* ---------------------------------------------------------------------
   7. Harmonika til ofte stillede spørgsmål
   Detaljeblokken virker uden JavaScript, men har browserens egen trekant.
   Den erstattes af designets vinkel til højre.
   ------------------------------------------------------------------ */

.lw-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	padding-block: 1rem;
}

.lw-faq .wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--base-3);
}

.lw-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--ink);
}

.lw-faq summary::-webkit-details-marker {
	display: none;
}

.lw-faq summary::after {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 8px;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transition: transform 0.2s ease;
}

.lw-faq details[open] > summary::after {
	transform: rotate(180deg);
}

.lw-faq .wp-block-details > *:not(summary) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--body);
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   8. Kontaktformular
   Temaet leverer ingen formular. Her ligger den styling, der får de
   gængse formular-plugins til at ligne designet. Virker for Contact
   Form 7, WPForms, Fluent Forms, Gravity Forms og kerneformularblokken.
   ------------------------------------------------------------------ */

.lw-formular {
	background-color: var(--wp--preset--color--base-3);
	border-radius: 4px;
	padding: clamp(1.5rem, 5vw, 4rem);
}

.lw-formular label,
.lw-formular .wp-block-form-input__label-content {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}

.lw-formular input[type="text"],
.lw-formular input[type="email"],
.lw-formular input[type="tel"],
.lw-formular input[type="url"],
.lw-formular input[type="date"],
.lw-formular select,
.lw-formular textarea {
	width: 100%;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--field);
	border-radius: 0;
	padding: 0.625rem 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	box-shadow: none;
}

.lw-formular textarea {
	min-height: 120px;
	resize: vertical;
}

.lw-formular input[type="submit"],
.lw-formular button[type="submit"],
.lw-formular .wp-block-button__link {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.6;
	cursor: pointer;
}

.lw-formular input[type="submit"]:hover,
.lw-formular button[type="submit"]:hover {
	background-color: var(--wp--preset--color--contrast);
}

/* To felter ved siden af hinanden, når pluginnet bruger en to-kolonners klasse. */
.lw-formular .lw-halv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 600px) {
	.lw-formular .lw-halv {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   9. Kontaktoplysninger med ikoner
   ------------------------------------------------------------------ */

.lw-detaljer {
	border-right: 1px solid var(--wp--preset--color--base-3);
	padding-right: 1.5rem;
}

@media (max-width: 781px) {
	.lw-detaljer {
		border-right: 0;
		padding-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--base-3);
		padding-bottom: 2rem;
	}
}

/* ---------------------------------------------------------------------
   10. Enkeltting
   ------------------------------------------------------------------ */

/* Teambilledet er gråtonet i designet. */
.lw-graatone img {
	filter: grayscale(1);
}

/* Stjernerækken i udtalelser. */
.lw-stjerner {
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.15em;
	font-size: 1.125rem;
	line-height: 1;
}

/* Galleri og billedgitre skal beskære ens. */
.lw-kvadrat img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* ---------------------------------------------------------------------
   11. Fast kontaktformular på ydelsessiderne
   Formularen ligger i en kolonne ved siden af indholdet og bliver
   hængende, mens man scroller. På mobil giver det ingen mening, så der
   falder den tilbage i tekstens flow og afløses af en bjælke i bunden.
   ------------------------------------------------------------------ */

.lw-klaebe {
	position: sticky;
	top: var(--wp--preset--spacing--40, 2rem);
}

/* Værktøjslinjen i WordPress ligger fast øverst for indloggede. */
.admin-bar .lw-klaebe {
	top: calc(var(--wp--preset--spacing--40, 2rem) + 32px);
}

@media (max-width: 781px) {
	.lw-klaebe {
		position: static;
	}
}

/*
   Selve kortet omkring formularen. Luften er flydende og ikke en fast
   afstand fra blokken. Tre centimeter luft hele vejen rundt er pænt på en
   skærm og alt for meget på en telefon, hvor der så kun er en håndsbred
   tilbage til selve felterne.
*/
.lw-formularkort {
	padding: clamp(1.25rem, 3.5vw, 2rem);
	background-color: var(--wp--preset--color--base-3);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 4px;
}

/* ---------------------------------------------------------------------
   12. Procestrin i en smal spalte
   Ikonet flytter om ved siden af teksten, så trinnene fylder mindre.
   ------------------------------------------------------------------ */

.lw-trin::before {
	margin-bottom: 0;
	flex: 0 0 48px;
}

/* ---------------------------------------------------------------------
   13. Handlingsbjælke i bunden på mobil
   En håndværker bliver ringet op. Derfor telefon først og tilbud dernæst.
   Bjælken findes kun under 782 pixel.
   ------------------------------------------------------------------ */

.wp-block-buttons.lw-mobilbar {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-buttons.lw-mobilbar {
		display: flex;
		position: fixed;
		z-index: 90;
		inset: auto 0 0 0;
		gap: 0.5rem;
		padding: 0.625rem;
		background-color: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--base-3);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
	}

	.lw-mobilbar .wp-block-button {
		flex: 1 1 0;
	}

	.lw-mobilbar .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.9rem 0.75rem;
	}

	/* Plads i bunden, så bjælken ikke dækker sidefoden. */
	body:has(.lw-mobilbar) {
		padding-bottom: 5rem;
	}
}

/* ---------------------------------------------------------------------
   14. Punkter med flueben på om-siden
   ------------------------------------------------------------------ */

.lw-punkt {
	align-items: flex-start;
}

.lw-punkt::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233e572e%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.lw-punkt p {
	margin: 0;
}

/* ---------------------------------------------------------------------
   15. Hero med tilbudsformular
   Kortet er hvidt og ligger oven på den lyse baggrund. Fotoet stikker ud
   over hjørnet, så kortet ikke bare er en firkant.
   ------------------------------------------------------------------ */

.lw-tilbudskort {
	position: relative;
	padding: clamp(1.25rem, 4vw, 3rem);
	background-color: var(--wp--preset--color--white);
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(28, 27, 27, 0.1);
}

.lw-tilbudskort__foto {
	position: absolute;
	top: -2.25rem;
	right: -1.5rem;
	z-index: 2;
	width: 96px;
	margin: 0;
}

.lw-tilbudskort__foto img {
	display: block;
	width: 96px;
	height: 96px;
	border: 3px solid var(--wp--preset--color--contrast);
	border-radius: 8px;
}

/* Overskriften i kortet skal ikke have samme luft som en sektionsoverskrift. */
.lw-tilbudskort h2 {
	margin-top: 0.25rem;
	line-height: 1.15;
}

/*
   Trinbjælken. Tre felter, hvor det første er udfyldt. Den er tegnet som
   en baggrund på separatoren, så der ikke ligger tomme blokke i kortet,
   som editoren kan finde på at tegne sin egen grafik oven på.
*/
.wp-block-separator.lw-trinbjaelke {
	height: 4px;
	margin: var(--wp--preset--spacing--20, 1rem) 0;
	border: 0;
	border-radius: 2px;
	background-color: transparent;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--accent) 0 31%,
		transparent 31% 34.5%,
		var(--wp--preset--color--base-4) 34.5% 65.5%,
		transparent 65.5% 69%,
		var(--wp--preset--color--base-4) 69% 100%
	);
	opacity: 1;
}

/*
   Formulargruppen har normalt sin egen baggrund og luft, fordi den på
   kontaktsiden står for sig selv. Inde i kortet er den bare en del af
   kortet, så den nulstilles.
*/
.lw-formular.lw-formular--fyldt {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}

/* Felter i kortet er fyldte i stedet for at have ramme. */
.lw-formular--fyldt input[type="text"],
.lw-formular--fyldt input[type="email"],
.lw-formular--fyldt input[type="tel"],
.lw-formular--fyldt input[type="url"],
.lw-formular--fyldt input[type="date"],
.lw-formular--fyldt select,
.lw-formular--fyldt textarea {
	background-color: var(--wp--preset--color--base-3);
	border: 1px solid transparent;
	border-radius: 4px;
}

.lw-formular--fyldt input:focus,
.lw-formular--fyldt select:focus,
.lw-formular--fyldt textarea:focus {
	border-color: var(--wp--preset--color--field);
}

.lw-formular--fyldt textarea {
	min-height: 7.5rem;
}

/*
   Knappen i kortet kommer fra formular-pluginnet, ikke fra temaet. Her
   sørges der for, at den fylder hele bredden, uanset hvad pluginnet hedder.
*/
.lw-formular--fyldt input[type="submit"],
.lw-formular--fyldt button[type="submit"],
.lw-formular--fyldt .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 0.95rem;
	padding-bottom: 0.95rem;
}

.wp-block-buttons.lw-fuldbredde,
.wp-block-buttons.lw-fuldbredde .wp-block-button {
	width: 100%;
}

.wp-block-buttons.lw-fuldbredde .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 0.95rem;
	padding-bottom: 0.95rem;
}

@media (max-width: 781px) {
	.lw-tilbudskort__foto {
		top: -1.5rem;
		right: 1rem;
		width: 72px;
	}

	.lw-tilbudskort__foto img {
		width: 72px;
		height: 72px;
	}
}

/* ---------------------------------------------------------------------
   16. Tilbudsformularen
   Formularen er en blok, temaet selv tegner. Felternes udseende kommer fra
   .lw-formular ovenfor, så den ser ens ud, hvis den flyttes hen i et af de
   andre formularkort. Her ligger kun det, trinene kræver.
   ------------------------------------------------------------------ */

.lw-tf {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 1rem);
}

/* Honningkrukken må ikke kunne ses eller nås med tastatur. */
.lw-tf__krukke {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Trinbjælken. Tre felter, der fyldes ud efterhånden. */
.lw-tf__bjaelke {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.lw-tf__bjaelke span {
	flex: 1 1 0;
	height: 4px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--base-4);
	transition: background-color 0.2s linear;
}

.lw-tf__bjaelke span.er-naaet {
	background-color: var(--wp--preset--color--accent);
}

.lw-tf__trin {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.lw-tf__titel {
	padding: 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lw-tf__hjaelp {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.lw-tf__etiket {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.lw-tf__valgfri {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.lw-tf__etiket + input,
.lw-tf__etiket + textarea {
	margin-bottom: 0.5rem;
}

/* Samtykket. Afkrydsningsfeltet må ikke blive strukket af feltreglerne. */
.lw-tf__samtykke {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-top: 0.5rem;
}

.lw-tf__samtykke input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.2em;
	accent-color: var(--wp--preset--color--accent);
}

.lw-tf__samtykke label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--body);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.lw-tf__knapper {
	display: flex;
	gap: 0.625rem;
	align-items: center;
}

.lw-tf__naeste {
	flex: 1 1 auto;
	order: 2;
}

.lw-tf__tilbage {
	order: 1;
	flex: 0 0 auto;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--base-4);
	color: var(--wp--preset--color--body);
	border-radius: 4px;
	padding: 0.95rem 1.25rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lw-tf__tilbage:hover {
	border-color: var(--wp--preset--color--field);
}

.lw-tf__naeste,
.lw-tf__send {
	display: block;
	width: 100%;
	padding: 0.95rem 1.5rem;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lw-tf__naeste:hover,
.lw-tf__send:hover {
	background-color: var(--wp--preset--color--contrast);
}

/* Kvitteringen, der træder i stedet for formularen, når beskeden er sendt. */
.lw-tf--kvittering {
	padding: var(--wp--preset--spacing--30, 1.5rem);
	background-color: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 4px;
}

.lw-tf__kvittering-titel {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.lw-tf--kvittering p:last-child {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.lw-tf__fejl {
	margin: 0 0 var(--wp--preset--spacing--20, 1rem);
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--base-2);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

/*
   Ét sted til at skjule. Feltreglerne i afsnit 15 rammer knappen med
   højere vægt end et [hidden] alene kan slå, og så stod både Næste og
   Send besked fremme på samme tid. Her afgøres det.
*/
.lw-tf [hidden],
.lw-tf__trin[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------
   17. Cases
   Casene er almindelige indlæg med skabelonen Case. Kategorien bliver til
   etiketten øverst, og datoen bliver til årstallet ved siden af.
   ------------------------------------------------------------------ */

.lw-case-meta {
	gap: var(--wp--preset--spacing--20, 1rem);
}

/* Kategorien tegnes som en etiket. Blokken selv er bare en stribe links. */
.lw-case-chip {
	margin: 0;
}

.lw-case-chip a,
.lw-case-chip .wp-block-post-terms__separator {
	display: inline-block;
	padding: 4px 10px;
	background-color: var(--wp--preset--color--base-3);
	border-radius: 12px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

.lw-case-chip .wp-block-post-terms__separator {
	display: none;
}

.lw-case-chip a:hover {
	background-color: var(--wp--preset--color--base-4);
}

.lw-case-meta .wp-block-post-date {
	margin: 0;
	letter-spacing: 0.1em;
}

/* Kortene med Opgaven og Løsningen. */
.lw-case-kort {
	height: 100%;
	padding: clamp(1.25rem, 3.5vw, 2rem);
	background-color: var(--wp--preset--color--base-2);
	border-radius: 4px;
}

/* Stregen under rubrikken Detaljer og udførelse. */
.wp-block-separator.lw-rubrik-streg {
	width: 100%;
	max-width: 100%;
	height: 0;
	margin: var(--wp--preset--spacing--20, 1rem) 0 var(--wp--preset--spacing--30, 1.5rem);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--base-5);
	opacity: 1;
}

/* Båndet nederst på en case. */
.lw-case-baand {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background-color: var(--wp--preset--color--base-2);
	border-radius: 4px;
}

/* Et felt i galleriet. */
.lw-case-felt .wp-block-post-title {
	margin: 0;
}

.lw-case-felt .wp-block-post-title a {
	text-decoration: none;
}

.lw-case-felt .wp-block-post-title a:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.lw-case-baand .wp-block-buttons {
		width: 100%;
	}
}