/*
Theme Name: Pointwork
Theme URI: https://pointwork.com
Author: Pointwork A/S
Author URI: https://pointwork.com
Description: Custom block theme for pointwork.com — Danish Microsoft 365 consulting and thought leadership.
Version: 0.3.11
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.3
License: Proprietary
Text Domain: pointwork
Tags: block-theme, full-site-editing
*/

/* =========================================
   Pointwork brand utilities
   ========================================= */

/* --- Horisontal overflow guard ------------- */

/* Forhindrer 100vw-sektioner (.pw-stats, .pw-hero-testimonial,
   .pointwork-dots-bg) i at skabe horisontal scrollbar når vertikal
   scrollbar fylder ~17px på Windows.
   `clip` opfører sig som `hidden` men tillader sticky/positioned children. */
html {
	overflow-x: clip;
}

/* --- Heading overflow guard ---------------- */

/* Forhindrer lange ord (fx "MOCA365-implementering") i at skubbe layoutet
   og forårsage horisontal scrollbar — især vigtig nu hvor display-størrelser
   bruges på heroes. text-wrap: balance giver bedre line-breaking på moderne
   browsere; ældre browsere falder gracefully tilbage. */
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* --- Logo ---------------------------------- */
.pointwork-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.15s ease, transform 0.2s ease;
}

.pointwork-logo-link:hover {
	opacity: 0.82;
	transform: translateY(-1px);
}

/* Ocean, ikke mint: logoet staar paa hvid header, og mint paa hvid er kun
   2,34:1 - under 3:1-kravet til fokusindikatorer (SC 1.4.11). */
.pointwork-logo-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ocean);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Links paa moerke teal-flader (footer + hero) faar en eksplicit mint
   fokus-ring. Browserens default-outline er naesten sort og usynlig paa teal i
   Firefox/Safari (WCAG 2.4.7). Mint paa teal ~3,5:1. */
.pointwork-dots-bg--on-dark a:focus-visible,
.pointwork-dots-bg--hero-dark a:focus-visible {
	outline: 2px solid var(--wp--preset--color--mint);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

.pointwork-logo {
	display: block;
	height: auto;
	max-width: 100%;
}

/* --- Brand connected-dots pattern ----------- */

/*
 * Brug: tilføj klassen `pointwork-dots-bg` til en sektion for at få
 * brand-pattern'et lagt over baggrunden. Bruger PointworkBaggrund SVG
 * med subtil parallax-drift. Respekterer prefers-reduced-motion.
 *
 * Variant for mørke baggrunde: `pointwork-dots-bg pointwork-dots-bg--on-dark`
 * (bruger Skywhite-versionen så pattern'et er lyst).
 */

/*
 * Bg-image lægges direkte på sektionen (ikke pseudo) for at undgå
 * z-index/stacking-konflikter med children. Sektionen tvinges til
 * 100vw via klassisk break-out trick (margin: calc(50% - 50vw)),
 * så uanset parent's bredde fylder hero-bg hele viewport horisontalt.
 *
 * Variant for mørke baggrunde: `pointwork-dots-bg pointwork-dots-bg--on-dark`
 */
.pointwork-dots-bg {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	background-image: url(assets/brand/baggrund/pointwork-baggrund-skywhite-2.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: pointwork-dots-drift 60s ease-in-out infinite alternate;
}

.pointwork-dots-bg--on-dark {

	/* Solid teal-fallback under lagene: hvis SVG'en fejler i at loade, staar
	   hvid tekst stadig paa teal i stedet for at blive usynlig paa blankt. */
	background-color: var(--wp--preset--color--teal);

	/* Layered: stærk teal overlay (75%) ovenpaa SVG sikrer skywhite-tekst
	   kontrast. Dots stadig synlige som tekstur, men ikke for dominerende. */
	background-image:
		linear-gradient(rgba(0, 60, 67, 0.78), rgba(0, 60, 67, 0.78)),
		url(assets/brand/baggrund/pointwork-baggrund-teal-2.svg);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* Hero-baggrund: prikkerne tegnes paa <canvas.pw-hero-net>
   (assets/js/hero-net.js) - brand-konceptet "vi forbinder prikkerne" (se
   brand/pointwork/koncept.md). Elementet baerer kun en teal gradient (lys top,
   moerk bund) som bund og fallback; gammel dots-SVG + drift er droppet. */
.pointwork-dots-bg--hero-dark {
	overflow: hidden;
	background-color: var(--wp--preset--color--teal);
	background-image: linear-gradient(#0a565f, #004248, #003c43, #00262a);
	background-repeat: no-repeat;
}

/* Nuance-variant af hero-baandet: lysere, mere maettet teal i en diagonal.
   Laegges OVENPAA --hero-dark (arver scrim, link-farver, canvas) og overskriver
   kun gradienten. Bruges paa /viden/ via page-viden.html. */
.pointwork-dots-bg--hero-teal {
	background-image: linear-gradient(135deg, #0a7d84 0%, #077077 45%, #05636a 100%);
}

/* Canvas-laget med prikker + spor, bag scrim og indhold. */
.pw-hero-net {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;

	/* Slip ud af den constrained layouts indholdsbredde, saa canvas'et daekker
	   hele det fuld-bredde hero-baand - ellers klemmes nettet ind i midten. */
	max-width: none;
	height: 100%;
	pointer-events: none;
}

/* Scrim ovenpaa prikkerne, saa hvid/skywhite tekst holder WCAG AA-kontrast. */
.pointwork-dots-bg--hero-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(0, 42, 47, 0.1), rgba(0, 38, 42, 0.5));
	pointer-events: none;
}

/* Indhold over begge lag. */
.pointwork-dots-bg--hero-dark > .wp-block-columns {
	position: relative;
	z-index: 2;
}

/* Tekstlinks i hero'en skal vaere lyse paa moerk bund (ikke default ocean).
   Mint er for svag paa den moerke teal til loebende tekst - secondary-CTA'en
   en sekundaer CTA-tekst druknede. Skywhite + understregning laeser lige saa
   rent som saetningen den ligger i, med mint paa hover som interaktiv markoer -
   samme moenster som page-header-baandets broedkrumme. */
.pointwork-dots-bg--hero-dark a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--skywhite);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pointwork-dots-bg--hero-dark a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--mint);
}

@keyframes pointwork-dots-drift {

	0% {
		background-position: 48% 52%;
	}

	100% {
		background-position: 52% 48%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pointwork-dots-bg {
		animation: none;
	}
}

/* Drift animerer background-position paa en stor SVG, hvilket tvinger en
   fuld repaint af hele sektionen hvert frame - paa 3-4 sektioner pr. side.
   Paa mobil/touch er det maerkbart paa batteri og INP for en naesten usynlig
   effekt, saa her staar baggrunden stille. Desktop beholder den. */
@media (max-width: 1023px), (pointer: coarse) {

	.pointwork-dots-bg {
		animation: none;
	}
}

/* --- Skip-to-content link (a11y) ----------- */
.pw-skip-link {
	position: absolute;
	left: 1rem;
	top: 1rem;
	padding: 0.625rem 1rem;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	z-index: 1000;
	transform: translateY(-150%);
	transition: transform 0.15s ease;
}

.pw-skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--wp--preset--color--mint);
	outline-offset: 2px;
}

/* --- Visuelt skjult, men tilgaengeligt for skaermlaesere (a11y) ----------- */
.pw-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Linkliste (fx "Alle ydelsesomraader" paa /ydelser/) ---------- */

/* En almindelig liste af links giver ~17px hoeje maal staaende taet - under
   24px-kravet i SC 2.5.8 paa touch. Linket bliver selv hoejere (padding),
   saa hvert maal er >24px uden at naboerne overlapper. Genbrug klassen paa
   enhver liste der primaert er navigation. */
.pw-link-list a {
	display: inline-block;
	padding-block: var(--wp--preset--spacing--20);
}

/* =========================================
   Header + Megamenu
   ========================================= */

.pw-header {
	position: relative;
	z-index: 100;
}

/* Root-blockGap (1.5rem) giver ellers et hvidt baand mellem sidste sektion
   (typisk den moerke CTA) og den moerke footer - og mellem headeren og en
   moerk hero/sidehoved lige under den. Templates hvis main starter med
   broedtekst har selv padding-top paa main. core/template-part har ingen
   spacing-support, saa nulstillingen maa ske her. */
.wp-site-blocks > .wp-block-template-part:has(> footer),
.wp-site-blocks > .wp-block-template-part:has(> .pw-header) + * {
	margin-block-start: 0;
}

/* Samme baand inde i main: page.html m.fl. har CTA'en som sidste barn efter
   post-content. Slutter indholdet med en fuld-bredde sektion (farvet flade),
   skal CTA'en ligge kant-mod-kant med den. Slutter det med broedtekst, beholder
   den blockGap'en som luft. */
main > .wp-block-post-content:has(> .alignfull:last-child) + .pointwork-dots-bg--on-dark {
	margin-block-start: 0;
}

.pw-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.pw-nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.pw-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2rem;
	align-items: center;
}

.pw-nav__item {
	position: static;
}

/* Bevidst static (ikke relative) — megamenu anchores til .pw-header
   så den spænder hele viewportbredden uanset hvor triggeren sidder.
   Ellers bliver højre-side triggers (Om, Demo) klippet ved viewport-kanten. */
.pw-nav__item--has-mega {
	position: static;
}

.pw-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.pw-nav__link:hover,
.pw-nav__link[aria-expanded="true"] {
	color: var(--wp--preset--color--ocean);
}

.pw-nav__chevron {
	transition: transform 0.2s ease;
}

.pw-nav__trigger[aria-expanded="true"] .pw-nav__chevron {
	transform: rotate(180deg);
}

/* --- Megamenu panel ------------------------- */

.pw-megamenu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background: var(--wp--preset--color--white);
	border-top: 1px solid rgba(0, 60, 67, 0.06);
	box-shadow: 0 12px 24px rgba(0, 60, 67, 0.08);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.pw-megamenu:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.pw-megamenu[hidden] {
	display: block;
	visibility: hidden;
}

.pw-megamenu__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 320px;
	gap: 2.5rem;
}

/* Smal desktop (1024-1199): featured-aside flyttes til en ny række
   så de 3 link-kolonner får luft. Forhindrer "højre side er cut off"
   på laptops/mindre skærme. */
@media (min-width: 1024px) and (max-width: 1199px) {

	.pw-megamenu__inner {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
	}

	.pw-megamenu__featured {
		grid-column: 1 / -1;
		max-width: 480px;
	}
}

.pw-megamenu__columns {
	display: contents;
}

.pw-megamenu__column {
	min-width: 0;
}

.pw-megamenu__category {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ocean);
	line-height: 1.3;
}

.pw-megamenu__category--top-spacing {
	margin-top: 1.75rem;
}

.pw-megamenu__category a {
	color: inherit;
	text-decoration: none;
}

.pw-megamenu__category a:hover {
	color: var(--wp--preset--color--mint);
}

.pw-megamenu__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.pw-megamenu__sub {
	display: block;
	padding: 0.5rem 0.625rem;
	margin-left: -0.625rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color 0.1s ease, color 0.1s ease;
	line-height: 1.4;
}

.pw-megamenu__sub:hover,
.pw-megamenu__sub:focus-visible {
	background: var(--wp--preset--color--skywhite);
	color: var(--wp--preset--color--ocean);
}

.pw-megamenu__sub--star {
	font-weight: 500;
}

/* Statiske under-emner: beskrivende tekst, ikke links. De pegede foer paa
   sektioner paa samme side; nu hvor nav kun linker til sider, staar de som
   "det her daekker siden" under det klikbare kategori-link. Daempet base-gray
   signalerer tekst frem for link, og hover-affordancen er fjernet. */
.pw-megamenu__sub--static {
	color: var(--wp--preset--color--base-gray);
	cursor: default;
}

.pw-megamenu__sub--static:hover,
.pw-megamenu__sub--static:focus-visible {
	background: none;
	color: var(--wp--preset--color--base-gray);
}

.pw-megamenu__star {
	color: var(--wp--preset--color--mint);
	margin-right: 0.25rem;
}

/* --- Featured panel ------------------------- */

.pw-megamenu__featured {
	background: var(--wp--preset--color--skywhite);
	padding: 1.75rem;
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pw-megamenu__featured-eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	/* Ocean, ikke mint: mint som tekst paa lys flade er under WCAG AA
	   (SC 1.4.3). */
	color: var(--wp--preset--color--ocean);
}

.pw-megamenu__featured-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	line-height: 1.3;
}

.pw-megamenu__featured-body {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--base-gray);
	line-height: 1.5;
}

.pw-megamenu__featured-cta {
	display: inline-block;
	margin-top: auto;
	padding: 0.625rem 1.125rem;
	background: var(--wp--preset--color--ocean);
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md);
	text-align: center;
	transition: background-color 0.15s ease;
}

.pw-megamenu__featured-cta:hover {
	background: var(--wp--preset--color--teal);
}

/* --- Header CTA ----------------------------- */

.pw-header-cta {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--ocean);
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

.pw-header-cta:hover {
	background: var(--wp--preset--color--teal);
}

/* Booking-CTA inde i mobilmenuen. Den rigtige .pw-header-cta ligger uden for
   nav-overlayet og kan derfor ikke vises inde i menuen (den endte under
   overlayet = usynlig). Skjult som udgangspunkt; vises kun i det åbne
   mobil-overlay nedenfor. */
.pw-nav__cta {
	display: none;
}

/* --- Mobile toggle (hidden on desktop) ----- */

.pw-mobile-toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	padding: 12px 8px;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
}

/* Ocean paa den hvide header (mint paa hvid er 2,34:1, SC 1.4.11). */
.pw-mobile-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--ocean);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

.pw-mobile-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--wp--preset--color--teal);
	border-radius: var(--wp--custom--radius--sm);
	transition: transform 0.2s, opacity 0.2s;
}

.pw-mobile-toggle[aria-expanded="true"] .pw-mobile-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.pw-mobile-toggle[aria-expanded="true"] .pw-mobile-toggle__bar:nth-child(2) {
	opacity: 0;
}

.pw-mobile-toggle[aria-expanded="true"] .pw-mobile-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Intro-/lead-sektioner er constrained grupper i en align:full post-content.
   Uden egen inline-padding flugter de viewport-kanten paa mobil (de fuld-bredde
   feature-rows saetter selv spacing|40). Giv constrained direkte-boern samme
   gutter under 782px, saa broedtekst ikke roerer skaermkanten. */
@media (max-width: 781.98px) {

	.wp-block-post-content > :not(.alignfull):not(.alignwide) {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	/* Broedtekst sat til sm (14px) er for lille til komfortabel laesning paa
	   mobil. Loeft den til 16px her - desktop beholder den kompakte 14px.
	   !important er noedvendigt: WordPress udsender selv preset-font-size-
	   klasserne med !important, saa en almindelig regel ville tabe. */
	.has-sm-font-size {
		font-size: 1rem !important;
	}
}

/* --- Mobile breakpoint ---------------------- */

@media (max-width: 1023px) {

	/* Sticky header paa mobil, saa burger-knappen altid er inden for raekkevidde
	   - uden den scroller hele toppen vaek med indholdet.
	   Sticky skal sidde paa template-part-WRAPPEREN, ikke paa .pw-header selv:
	   headeren ligger i en wrapper der kun er header-hoej, saa sticky dér ville
	   ikke have plads at klaebe i. Wrapperen er direkte barn af det hoeje
	   .wp-site-blocks og klaeber korrekt. :has() rammer kun headerens wrapper,
	   ikke footerens. */
	.wp-block-template-part:has(> .pw-header) {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	/* Den sticky header maa ikke daekke det fokuserede element eller et
	   Fluent Forms-fejlfelt der scrolles frem (SC 2.4.11). scroll-padding faar
	   browseren til at stoppe under headeren ved Tab, ankre og focus().
	   Samme token saetter headerens hoejde, saa de to ikke kan glide fra
	   hinanden. */
	html {
		scroll-padding-top: calc(var(--wp--custom--header--height-mobile) + var(--wp--preset--spacing--30));
	}

	.pw-header {
		box-sizing: border-box;
		min-height: var(--wp--custom--header--height-mobile);
		background: var(--wp--preset--color--white);
		box-shadow: 0 1px 0 rgba(0, 60, 67, 0.08), 0 4px 12px rgba(0, 60, 67, 0.04);
	}

	.pw-nav,
	.pw-header-cta {
		display: none;
	}

	.pw-mobile-toggle {
		display: flex;

		/* Toggle staar foer nav'en i DOM'en (fokusraekkefoelge), men skal
		   visuelt ligge yderst til hoejre. */
		order: 1;

		/* Over nav-overlayet (z-index 99). Uden dette dækker den åbne menu
		   luk-knappen, og menuen kan kun forlades ved at vælge et punkt. */
		position: relative;
		z-index: 100;
	}

	/* Logoet er fokuserbart foer toggle'en (Shift+Tab fra den). Uden at ligge
	   over overlayet ville fokus ende paa et skjult element (SC 2.4.11). */
	body.pw-mobile-menu-open .pointwork-logo-link {
		position: relative;
		z-index: 100;
	}

	.pw-megamenu__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1rem 0;
	}

	.pw-megamenu__category--top-spacing {
		margin-top: 1rem;
	}

	/* Lås body-scroll når mobile menu er åbent */
	body.pw-mobile-menu-open {
		overflow: hidden;
	}

	/* Mobile menu open: nav som full-screen overlay.
	   Nav z-index < header z-index så hamburger forbliver klikbar */
	body.pw-mobile-menu-open .pw-nav {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		background: var(--wp--preset--color--white);
		flex-direction: column;

		/* Uden denne arves desktop-reglen justify-content:flex-end, som i en
		   kolonne klemmer menupunkterne ned i bunden af fullscreen-overlayet. */
		justify-content: flex-start;
		align-items: stretch;
		padding: var(--wp--custom--header--height-mobile) 1.5rem 2rem;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.pw-mobile-menu-open .pw-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	body.pw-mobile-menu-open .pw-nav__item {
		border-bottom: 1px solid rgba(0, 60, 67, 0.08);
		position: relative;
	}

	body.pw-mobile-menu-open .pw-nav__link {
		padding: 1rem 0;
		justify-content: space-between;
		width: 100%;
		font-size: 1.125rem;
	}

	body.pw-mobile-menu-open .pw-megamenu {
		position: static;
		width: auto;
		max-width: none;
		transform: none;
		box-shadow: none;
		border: 0;
		opacity: 1;
		pointer-events: auto;
		background: transparent;
		padding-bottom: 1rem;
	}

	body.pw-mobile-menu-open .pw-megamenu[hidden] {
		display: none;
		visibility: hidden;
	}

	body.pw-mobile-menu-open .pw-megamenu:not([hidden]) {
		display: block;
	}

	body.pw-mobile-menu-open .pw-megamenu__featured {
		margin-top: 1rem;
	}

	/* Vis menuens egen booking-CTA i det åbne overlay. (.pw-header-cta kan ikke
	   bruges her - den ligger uden for overlayet og ville stå under det.) */
	body.pw-mobile-menu-open .pw-nav__cta {
		display: inline-block;

		/* border-box, ellers lægger knappens vandrette padding sig oven i
		   width:100% og skubber den ud over overlayets højre gutter. */
		box-sizing: border-box;
		margin-top: 1.5rem;
		padding: 0.875rem 1.25rem;
		background: var(--wp--preset--color--ocean);
		color: var(--wp--preset--color--white);
		font-weight: 500;
		text-decoration: none;
		border-radius: var(--wp--custom--radius--md);
		text-align: center;
		width: 100%;
		font-size: 1rem;
	}

	body.pw-mobile-menu-open .pw-nav__cta:hover {
		background: var(--wp--preset--color--teal);
	}
}

@media (prefers-reduced-motion: reduce) {

	.pw-megamenu,
	.pw-nav__chevron,
	.pw-megamenu__sub,
	.pw-mobile-toggle__bar {
		transition: none;
	}
}

/* --- Breadcrumbs ---------------------------- */
.pw-breadcrumbs {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0.75rem var(--wp--preset--spacing--40);
	font-size: 0.875rem;
	color: var(--wp--preset--color--base-gray);
}

.pw-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.pw-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.pw-breadcrumbs__item a {
	color: var(--wp--preset--color--base-gray);
	text-decoration: none;
	transition: color 0.15s ease;
}

.pw-breadcrumbs__item a:hover {
	color: var(--wp--preset--color--ocean);
}

.pw-breadcrumbs__item [aria-current="page"] {
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}

/* Separatoren haenger paa SLUTningen af sit eget crumb (::after), ikke foran
   det naeste. Saa naar listen wrapper, bliver "/" paa den forrige linje i
   stedet for at starte en ny linje alene - jf. inline-flex-item + gap. */
.pw-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--wp--preset--color--base-gray);
	opacity: 0.4;
}

/* --- Page-header-baand (delt top: single/page/case/ydelse) ----------------
   Broedkrumme + H1 + meta deler EN constrained inder-kolonne (960px), saa de
   faar samme venstrekant - det fikser de tre forskellige venstrekanter (1280
   broedkrumme / 960 page / 720 single) der fik titlen til at svaeve. Baggrund
   = pointwork-dots-bg--hero-dark (teal-gradient + prikke-canvas, samme som
   forsidens hero). Lys tekst paa teal er AA (hvid 12.16:1, skywhite 11.67:1).
   Baandets egen padding fjerner ogsaa mobil-klippet af H1 paa single.html. */
.pw-page-header {
	position: relative;
}

/* Baandet er lille og tekst-taet. Prikkerne (rgba 208,243,236) og stregerne
   (mint, rgba 160,220,212) ligger tonalt taet paa den lyse tekst, og hero'ens
   scrim er kun 0.1 i toppen - netop dér hvor broedkrumme + titel sidder. Laeg
   en kraftigere, mere ensartet scrim KUN paa baandet, saa nettet traeder
   tilbage og teksten staar rent. Forsidens store hero beholder sin lette
   top-scrim (selektoren her er mere specifik og vinder kun paa baandet). */
.pw-page-header.pointwork-dots-bg--hero-dark::after {
	background: linear-gradient(rgba(0, 42, 47, 0.5), rgba(0, 38, 42, 0.72));
}

/* Inder-kolonnen skal ligge over baade prikke-canvasset (.pw-hero-net,
   z-index 0) OG scrimmen (::after, z-index 1) - ellers tegnes scrimmen oven paa
   teksten og daemper den til graa. Samme lag som forsidens hero-indhold. */
.pw-page-header__inner {
	position: relative;
	z-index: 2;
}

/* Broedkrummen baerer ellers sin egen 1280-boks (max-width + auto-margin +
   padding); i baandet skal den smide boksen og arve inder-kolonnens kant, saa
   den flugter med H1. */
.pw-page-header .pw-breadcrumbs {
	max-width: none;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--20);
}

/* Lys tekst paa det moerke baand - overskriver base-gray/teal/ocean fra
   broedkrumme-reglerne ovenfor. "Current page" beholder font-weight 500 som
   signal frem for farve alene. */
.pw-page-header .pw-breadcrumbs,
.pw-page-header .pw-breadcrumbs__item a,
.pw-page-header .pw-breadcrumbs__item [aria-current="page"],
.pw-page-header .pw-breadcrumbs__item:not(:last-child)::after {
	color: var(--wp--preset--color--white);
}

.pw-page-header .pw-breadcrumbs__item:not(:last-child)::after {
	opacity: 0.5;
}

.pw-page-header .pw-breadcrumbs__item a:hover {
	color: var(--wp--preset--color--mint);
}

/* H1 er teal via theme.json; paa det moerke baand skal den vaere hvid.
   Arkiver (archive.html) bruger query-title i stedet for post-title, og
   term-beskrivelsen staar ogsaa paa baandet. */
.pw-page-header .wp-block-post-title,
.pw-page-header .wp-block-query-title,
.pw-page-header .wp-block-term-description {
	color: var(--wp--preset--color--white);
}

/* Meta-linket (kategori) arver ellers den globale ocean-link-farve og bliver
   moerk paa det moerke baand. Giv det hvid som resten af meta-raekken, med mint
   paa hover som broedkrummen. */
.pw-page-header .pw-page-header__meta a {
	color: var(--wp--preset--color--white);
}

.pw-page-header .pw-page-header__meta a:hover {
	color: var(--wp--preset--color--mint);
}

/* --- Newsletter form (Brevo double opt-in) --
   Nyhedsbrevet er ikke laengere en Fluent Form men Pointwork\Core\Newsletter
   (Brevos native DOI-API). Formularen lever typisk i den moerke teal-footer
   (.pw-newsletter): e-mailfelt + pil-knap paa samme raekke, samtykke-checkbox
   under. Recoloret fra moca365-opsaetningen til pointworks mint/teal.
   ------------------------------------------- */
.pw-newsletter-form {
	max-width: 460px;
}

.pw-newsletter-form__fields {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pw-newsletter-form__email {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--wp--custom--radius--sm);
	font: inherit;
	font-size: 0.875rem;
	background: #fff;
	color: var(--wp--preset--color--ocean);
}

.pw-newsletter-form__email::placeholder {
	color: #6b7080;
}

.pw-newsletter-form__email:focus-visible,
.pw-newsletter-form__submit:focus-visible {

	/* Mint-outline: ocean ville kun give ~2.3:1 mod teal-footeren; mint >=3:1
	   (SC 1.4.11). */
	outline: 2px solid var(--wp--preset--color--mint);
	outline-offset: 2px;
}

.pw-newsletter-form__submit {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--teal);
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pw-newsletter-form__submit:hover {
	background: var(--wp--preset--color--white);
}

.pw-newsletter-form__submit:disabled {
	cursor: wait;
	opacity: 0.65;
}

.pw-newsletter-form__consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 1.1rem;
	color: var(--wp--preset--color--skywhite);
	font-size: 0.78rem;
	line-height: 1.5;
	cursor: pointer;
}

.pw-newsletter-form__consent input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--mint);
}

/* Samtykke-linket staar i en loebende saetning; understregningen er den
   ikke-farve-markoer SC 1.4.1 kraever (footer-reglen giver den ogsaa mint). */
.pw-newsletter-form__consent a {
	color: var(--wp--preset--color--mint);
	text-decoration: underline;
}

.pw-newsletter-form__status {
	min-height: 1.5em;
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--white);
	font-size: 0.78rem;
	line-height: 1.5;
}

.pw-newsletter-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* --- Footer links (overrider default ocean-link-farve) ---- */
footer.pointwork-dots-bg a:not(.pw-social__link):not(.pointwork-logo-link):not(.wp-block-button__link) {
	color: var(--wp--preset--color--mint);
	text-decoration: underline;
	text-decoration-color: rgba(81, 186, 170, 0.5);
	text-underline-offset: 2px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

footer.pointwork-dots-bg a:not(.pw-social__link):not(.pointwork-logo-link):not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--white);
	text-decoration-color: var(--wp--preset--color--white);
}

/* --- Footer social links -------------------- */
.pw-social {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.pw-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--white);
	transition: background-color 0.15s ease;
}

.pw-social__link:hover {
	background: var(--wp--preset--color--mint);
}

.pw-social__link svg {
	width: 16px;
	height: 16px;
	fill: currentcolor;
}

/* --- Kontakt — kontorbillede som hero -------- */
.pw-kontor-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	height: clamp(280px, 38vw, 480px);
	overflow: hidden;
}

.pw-kontor-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

@media (max-width: 768px) {

	.pw-kontor-hero {
		height: clamp(220px, 60vw, 320px);
	}
}

/* --- Formularer (Fluent Forms) --------------
   Her lå .pw-contact-form*, som stylede et håndskrevet <form> med
   onsubmit="alert(...)". Markuppen kommer nu fra Fluent Forms, så designet er
   flyttet over på plugin'ets klassenavne i stedet for at blive kasseret.

   VERIFICÉR VISUELT når formularerne er importeret: selektorerne nedenfor er
   Fluent Forms' dokumenterede struktur, men de er ikke set i browseren endnu.
   ------------------------------------------- */
.fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.fluentform .ff-el-input--label label,
.fluentform legend {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	margin-bottom: 0.375rem;
}

.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.625rem 0.875rem;

	/* Mindst 0.55 alpha giver >=3:1 feltkant mod det hvide felt (SC 1.4.11).
	   0.2 var kun ~1,46:1 og var usynlig i hvilekant. */
	border: 1px solid rgba(0, 60, 67, 0.55);
	border-radius: var(--wp--custom--radius--md);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--teal);
	background: var(--wp--preset--color--white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fluentform .ff-el-form-control:focus {

	/* Synlig fokus-indikator >=3:1 (SC 2.4.7 / 1.4.11) - ocean-outline baerer
	   kontrasten; box-shadow er kun et dekorativt skaer ovenpaa. */
	outline: 2px solid var(--wp--preset--color--ocean);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--mint);
	box-shadow: 0 0 0 3px rgba(81, 186, 170, 0.15);
}

.fluentform textarea.ff-el-form-control {
	resize: vertical;
	min-height: 120px;
}

/* Mindst 16px paa formularfelter: en iPhone zoomer automatisk ind paa et felt
   med en skriftstoerrelse under 16px, saa layoutet hopper, naar man taster. */
.fluentform .ff-el-form-control,
.fluentform input,
.fluentform select,
.fluentform textarea {
	font-size: 1rem !important;
}

/* To kolonner på brede skærme - Fluent Forms' egen container-klasse. */
.fluentform .ff-t-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.fluentform .ff-el-form-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--base-gray);
	cursor: pointer;
}

.fluentform .ff-btn-submit {
	align-self: flex-start;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ocean);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	background: var(--wp--preset--color--teal);
}

/* Fejl- og kvitteringsbeskeder skal læses, ikke bare ses: rød tekst alene er
   ikke en tilstrækkelig indikator (WCAG 1.4.1). Ikonet kommer fra pluginet. */
.fluentform .ff-el-is-error .text-danger {
	color: #b3261e;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* Pluginet farver selve samtykke-/checkbox-teksten #f56c6c i fejltilstand -
   2,9:1 paa hvid, og rod tekst er ikke en fejlindikator i sig selv. Labelen
   beholder sin normale farve; fejlbeskeden ovenfor baerer fejlen. */
.fluentform .ff-el-is-error .ff-el-form-check-label,
.fluentform .ff-el-is-error .ff-el-form-check-label a {
	color: inherit;
}

/* Pluginets fejlramme (#f56c6c) er 2,9:1 mod hvid - under 3:1 for UI-graenser
   (SC 1.4.11). Samme roede som fejlteksten, og lidt tykkere, saa feltet kan
   skelnes fra et normalt felt uden kun at laene sig paa farven. */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-is-error .ff-el-form-check-input {
	border-color: #b3261e;
	box-shadow: inset 0 0 0 1px #b3261e;
}

.ff-message-success {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--mint);
	background: var(--wp--preset--color--skywhite);
	border-radius: var(--wp--custom--radius--md);
}

/* Redaktør-only diagnostik fra Forms::authoring_notice(). */
.pw-form-notice {
	padding: 0.75rem 1rem;
	border: 1px dashed var(--wp--preset--color--sunset);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--base-gray);
	font-size: 0.9375rem;
}

@media (max-width: 640px) {

	.fluentform .ff-t-container {
		grid-template-columns: 1fr;
	}
}


/* --- Client logos strip --------------------- */
.pw-client-logos {
	list-style: none;
	margin: 1.5rem auto 0;
	padding: 0;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 2.5rem;
}

.pw-client-logos__item {
	display: flex;
	align-items: center;
}

/* Kunde-logoer: graatone i hvile, farve paa hover - saa blandet SVG/PNG og
   fuldfarve/mono (Novo-tyren, Realdania-wordmark osv.) laeser som ét ensartet
   logo-wall i stedet for et farvekaos. Normaliseret paa hoejde, ikke bredde. */
.pw-client-logos__img {
	display: block;
	height: 2.25rem;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.pw-client-logos__item:hover .pw-client-logos__img {
	filter: grayscale(0);
	opacity: 1;
}

/* Samme behandling paa cases-kortene, mindre og farve naar man hover'er selve
   kortet (kortet er et link). */
.pw-case-logo {
	display: block;
	height: 1.75rem;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: 0.75rem;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.pw-cases-card:hover .pw-case-logo,
.pointwork-case-tile:hover .pw-case-logo {
	filter: grayscale(0);
	opacity: 1;
}

/* Novo Nordisk findes kun som stakket lockup (tyr over ordmaerke,
   tyren maa ikke aendres). Giver ekstra hoejde, saa tyr + navn er
   laesbare ved siden af de vandrette logoer; max-width ophaeves. */
.pw-client-logos__img--stacked {
	height: 6.5rem;
	max-width: none;
}

.pw-case-logo--stacked {
	height: 6rem;
	max-width: none;
}

@media (max-width: 768px) {

	.pw-client-logos {
		gap: 1rem 2rem;
	}

	.pw-client-logos__img {
		height: 1.75rem;
		max-width: 120px;
	}

	.pw-client-logos__img--stacked {
		height: 5rem;
	}
}

/* --- Testimonials --------------------------- */
.pw-testimonials {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.pw-testimonial {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	padding: 2rem;
	margin: 0;
	box-shadow: var(--wp--preset--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}

/* The hidden attribute has to beat the display:flex above - an author rule
   overrides the UA [hidden] rule, so without this all four quotes render and
   the random pick (and the no-JS fallback) never hide the rest. Same fix as
   .pw-cases-card[hidden] further down. */
.pw-testimonial[hidden] {
	display: none;
}

.pw-testimonial__mark {
	color: var(--wp--preset--color--mint);
	flex-shrink: 0;
}

.pw-testimonial__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--teal);
	border: 0;
	padding: 0;
	font-style: normal;
	flex: 1;
}

.pw-testimonial__caption {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--base-gray);
	margin-top: auto;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(0, 60, 67, 0.08);
}

.pw-testimonial__caption strong {
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}

@media (max-width: 1023px) {

	.pw-testimonials {
		grid-template-columns: 1fr;
	}
}

/* Ét tilfældigt citat (ikke en slider): centreret feature-look. De øvrige
   citater ligger i markuppen med hidden-attribut; JS vælger ét tilfældigt pr.
   sidevisning. Uden JS står det første citat. */
.pw-testimonials--random {
	display: block;
	max-width: 760px;
}

.pw-testimonials--random .pw-testimonial {
	background: transparent;
	box-shadow: none;
	padding: 0;
	text-align: center;
	align-items: center;
	gap: 1rem;
}

.pw-testimonials--random .pw-testimonial__mark {
	margin: 0 auto;
}

.pw-testimonials--random .pw-testimonial__quote {
	font-size: 1.5rem;
	line-height: 1.5;
	flex: none;
}

.pw-testimonials--random .pw-testimonial__caption {
	align-items: center;
	border-top: 0;
	padding-top: 0.25rem;
	margin-top: 0;
}

/* --- Case-detail næste/forrige nav ---------- */
.pw-case-nav {
	max-width: 1280px;
	margin: 3rem auto 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(0, 60, 67, 0.1);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5rem;
	align-items: center;
}

.pw-case-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	color: var(--wp--preset--color--teal);
	transition: background 0.15s ease, transform 0.15s ease;
	min-width: 0;
}

.pw-case-nav__link:hover {
	background: var(--wp--preset--color--skywhite);
	transform: translateY(-1px);
}

.pw-case-nav__link--prev {
	text-align: left;
}

.pw-case-nav__link--next {
	text-align: right;
}

.pw-case-nav__link--disabled {
	visibility: hidden;
}

.pw-case-nav__label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ocean);
}

.pw-case-nav__title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pw-case-nav__all {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	background: var(--wp--preset--color--skywhite);
	color: var(--wp--preset--color--teal);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.pw-case-nav__all:hover {
	background: var(--wp--preset--color--ocean);
	color: var(--wp--preset--color--white);
}

@media (max-width: 768px) {

	.pw-case-nav {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 0.75rem;
	}

	.pw-case-nav__all {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}

	.pw-case-nav__title {
		font-size: 0.875rem;
	}
}

/* --- Scroll-triggered fade-in --------------- */
.pw-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.pw-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

	.pw-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Cases filter + grid (på /cases/) ------- */
.pw-cases-wrapper {
	max-width: 1280px;
	margin: 0 auto;
}

.pw-cases-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 2.5rem;
}

.pw-cases-filter__btn {
	padding: 0.5rem 1.125rem;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(0, 60, 67, 0.18);
	color: var(--wp--preset--color--teal);
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pw-cases-filter__btn:hover {
	border-color: var(--wp--preset--color--teal);
}

.pw-cases-filter__btn.is-active {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}

.pw-cases-filter__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ocean);
	outline-offset: 2px;
}

.pw-cases-filter__count {
	opacity: 0.7;
	margin-left: 0.25rem;
	font-weight: 400;
}

.pw-cases-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.pw-cases-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	padding: 2rem;
	box-shadow: var(--wp--preset--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pw-cases-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--elevated);
}

.pw-cases-card[hidden] {
	display: none;
}

.pw-cases-card__eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pw-cases-card__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--wp--preset--color--teal);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pw-cases-card__body {
	margin: 0;
	color: var(--wp--preset--color--base-gray);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pw-cases-card__cta {
	color: var(--wp--preset--color--ocean);
	font-weight: 500;
	font-size: 0.9375rem;
}

.pw-cases-empty {
	text-align: center;
	color: var(--wp--preset--color--base-gray);
	padding: 2rem;
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {

	.pw-cases-card,
	.pw-cases-filter__btn {
		transition: none;
	}
}

@media (max-width: 768px) {

	.pw-cases-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Brand-aktiver gallery (på /om/brand-aktiver/) --------- */
.pw-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
}

.pw-brand-grid__card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
}

.pw-brand-grid__preview {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pw-brand-grid__meta {
	padding: 0.875rem 1.125rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.875rem;
	gap: 0.5rem;
}

.pw-brand-grid__name {
	font-weight: 500;
	color: var(--wp--preset--color--teal);
}

.pw-brand-grid__download {
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--wp--preset--color--ocean);
	white-space: nowrap;
}

.pw-brand-grid__download:hover {
	color: var(--wp--preset--color--mint);
}

/* =========================================
   Block-style varianter (registreret i functions.php)
   Marketing-godkendt: alle secondary-farver er ligeværdige optioner.
   Pattern-author vælger den der matcher kontekst og undgår clash
   (særligt sunset+mint = "christmasy" risk).
   ========================================= */

/* Sunset: rød-koral. Bruges hvor det giver excitement uden clash. */
.wp-block-button.is-style-sunset .wp-block-button__link {
	background-color: var(--wp--preset--color--sunset);
	color: var(--wp--preset--color--black);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button.is-style-sunset .wp-block-button__link:hover,
.wp-block-button.is-style-sunset .wp-block-button__link:focus {
	background-color: #e85555;
	color: var(--wp--preset--color--black);
}

/* Pink Heather: humaniserende warm-tone. */
.wp-block-button.is-style-pink-heather .wp-block-button__link {
	background-color: var(--wp--preset--color--pink-heather);
	color: var(--wp--preset--color--black);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button.is-style-pink-heather .wp-block-button__link:hover,
.wp-block-button.is-style-pink-heather .wp-block-button__link:focus {
	background-color: #b87aa9;
	color: var(--wp--preset--color--black);
}

/* Blue Sky: åbenhed, cloud-fokus, MOCA365 Foundation-association. */
.wp-block-button.is-style-blue-sky .wp-block-button__link {
	background-color: var(--wp--preset--color--blue-sky);
	color: var(--wp--preset--color--black);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button.is-style-blue-sky .wp-block-button__link:hover,
.wp-block-button.is-style-blue-sky .wp-block-button__link:focus {
	background-color: #2f7eb8;
	color: var(--wp--preset--color--black);
}

/* Quiet: outline ved siden af en filled secondary, eller alene som
   dæmpet CTA. */
.wp-block-button.is-style-quiet .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ocean);
	border: 1px solid var(--wp--preset--color--mint);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-quiet .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--mint);
}

/* Bagudkompatibel alias: is-style-attention → is-style-sunset.
   Eksisterende patterns med .is-style-attention fortsætter med at virke. */
.wp-block-button.is-style-attention .wp-block-button__link {
	background-color: var(--wp--preset--color--sunset);
	color: var(--wp--preset--color--black);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button.is-style-attention .wp-block-button__link:hover,
.wp-block-button.is-style-attention .wp-block-button__link:focus {
	background-color: #e85555;
	color: var(--wp--preset--color--black);
}

/* =========================================
   Pointwork utility classes — token-baserede
   ========================================= */

/* Eyebrow: lille uppercase-label over headlines.
   Erstatter de 4+ duplikerede definitioner i style.css (megamenu, cases-card,
   case-nav, megamenu-featured) — fremtidige patterns bruger denne. */
.pw-eyebrow {
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--custom--eyebrow--color);
	line-height: 1.3;
	margin: 0 0 0.75rem;
}

.pw-eyebrow--on-canvas {
	color: var(--wp--custom--eyebrow--color-on-canvas);
}

.pw-eyebrow--on-deep {
	color: var(--wp--custom--eyebrow--color-on-deep);
}

/* Section padding tokens. Bruges på containere der ikke er `align=full`
   gradient-sektioner (de håndterer padding selv). */
.pw-section--sm {
	padding-block: var(--wp--custom--section--pad-sm);
}

.pw-section--md {
	padding-block: var(--wp--custom--section--pad-md);
}

.pw-section--lg {
	padding-block: var(--wp--custom--section--pad-lg);
}

/* Humaniserende sektion — subtil pink heather-tone på menneske-fokuserede
   sektioner: testimonials, om-os, partner-bro. Brand guide-rolle:
   "tilføjer en menneskelig kant... it-løsninger bygges til mennesker." */
.pw-section--humanizing {
	background: linear-gradient(135deg, rgba(207, 149, 194, 0.16) 0%, rgba(207, 149, 194, 0.04) 100%);
}

/* Long-form læseoplevelse på blog-artikler. Brand guide foreslog Beige
   Sandstone her, men Peter vil have ren hvid baggrund på Viden-artikler
   (besluttet okt. 2026) - beige føltes for gul. Reglen er bevidst hvid og
   overskriver ikke global baggrund; den står for at dokumentere beslutningen
   og hindre at beige genindføres. Kun single posts, ikke pages eller cases. */
body.single-post {
	background-color: var(--wp--preset--color--white);
}

/* Hele Viden-sektionen (artikler, /viden/-landingen og emne-arkiver - se
   body_class-filteret 'pw-viden' i inc/content.php) faar en LYS header i
   stedet for det moerke hero-baand - matcher den hvide broedtekst, saa Viden
   laeses som rene lyse dokumenter (Peters oenske, okt. 2026). Scopet til
   body.pw-viden, saa sider/cases/ydelser beholder deres moerke baand.
   Medium teal #cbe5dd er en engangs-header-tone (bevidst ikke i paletten -
   den bruges kun her). Prikke-nettet (.pw-hero-net) beholdes, men omfarves
   til ocean via --pw-net-*, saa "forbind prikkerne"-motivet staar moerkt paa
   den lyse bund - samme net som de oevrige headers, bare moerkt i stedet for
   lyst. */
body.pw-viden .pw-page-header.pointwork-dots-bg {
	background: #cbe5dd;

	/* hero-net.js laeser disse RGB-tripler til prik- og streg-farve; default
	   (uden var) er de lyse vaerdier til de moerke baand. Ocean her. */
	--pw-net-dot: 4, 121, 126;
	--pw-net-line: 4, 121, 126;
}

/* Scrimmen (moerk gradient over nettet) er kun til lys tekst paa moerk bund -
   paa det lyse baand ville den bare graane teal'en. Slaa den fra. */
body.pw-viden .pw-page-header.pointwork-dots-bg--hero-dark::after {
	background: none;
}

/* Moerk tekst paa den lyse header. Titlen faar ocean som brand-accent (stor
   tekst, ~3,8:1 - klarer 3:1); broedkrumme + meta er base-gray (#565051 paa
   #cbe5dd = ~5,9:1, AA). */
body.pw-viden .pw-page-header .wp-block-post-title,
body.pw-viden .pw-page-header .wp-block-query-title {
	color: var(--wp--preset--color--ocean);
}

body.pw-viden .pw-page-header .wp-block-term-description,
body.pw-viden .pw-page-header .pw-breadcrumbs,
body.pw-viden .pw-page-header .pw-breadcrumbs__item a,
body.pw-viden .pw-page-header .pw-breadcrumbs__item [aria-current="page"],
body.pw-viden .pw-page-header .pw-breadcrumbs__item:not(:last-child)::after,
body.pw-viden .pw-page-header .pw-page-header__meta,
body.pw-viden .pw-page-header .pw-page-header__meta .has-white-color,
body.pw-viden .pw-page-header .pw-page-header__meta a {
	color: var(--wp--preset--color--base-gray);
}

body.pw-viden .pw-page-header .pw-breadcrumbs__item a:hover,
body.pw-viden .pw-page-header .pw-page-header__meta a:hover {
	color: var(--wp--preset--color--ocean);
}

/* Brand-stripe: diagonal multi-color signatur — kan bruges som footer-edge
   eller section-divider. Reference: brand guide + MOCA365-deck. */
.pw-brand-stripe {
	display: block;
	width: 100%;
	height: 6px;
	background: var(--wp--preset--gradient--brand-stripe);
	transform: skewY(-1.5deg);
	transform-origin: left center;
}

.pw-brand-stripe--flat {
	transform: none;
}

/* =========================================
   Stats-sektion (deck side 22 reference)
   Teal-gradient baggrund + display-tal i mint. Brugt som "Results"-sektion.
   ========================================= */
.pw-stats {
	background: var(--wp--preset--gradient--teal-gradient);
	color: var(--wp--custom--text--on-deep);
	padding-block: var(--wp--custom--section--pad-lg);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.pw-stats__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: 2rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
}

.pw-stats__item {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.pw-stats__value {
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 400;
	color: var(--wp--preset--color--mint);
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0;
}

.pw-stats__divider {
	width: 48px;
	height: 2px;
	background: var(--wp--preset--color--mint);
	margin: 0;
	border: 0;
}

.pw-stats__label {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--custom--text--on-deep-heading);
	margin: 0;
}

.pw-stats__caption {
	font-size: 0.875rem;
	color: var(--wp--custom--text--on-deep);
	opacity: 0.75;
	margin: 0;
}

@media (max-width: 900px) {

	.pw-stats__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 540px) {

	.pw-stats__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* =========================================
   Cookie-banner

   Her lå brand-overrides til Complianz. Beslutningen blev omgjort til
   Cookiebot 2026-06-21 (docs/03-decisions.md), så reglerne stylede et
   banner der ikke længere indlæses - 60 linjer død CSS med !important
   på hver anden.

   Cookiebot styles via sit eget dashboard, ikke herfra. Skulle noget
   alligevel kræve CSS, hører det til her - og først når der findes en
   POINTWORK_COOKIEBOT_ID at se resultatet med.
   ========================================= */

/* =========================================
   Relateret indhold ([pw_related] shortcode)
   Viser cases + insights-artikler tagged med samme emner som current side.
   Bruges via [pw_related] in any content area, eller via auto-append fra
   template.
   ========================================= */
.pw-related {
	margin-block: 4rem 2rem;
	padding-block: 3rem;
	border-top: 1px solid var(--wp--custom--border-color--subtle);
}

.pw-related__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: 1rem;
}

.pw-related__header {
	margin-bottom: 2rem;
	max-width: 720px;
}

.pw-related__eyebrow {
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--custom--eyebrow--color-on-canvas);
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.pw-related__title {
	font-size: 1.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--teal);
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.pw-related__group + .pw-related__group {
	margin-top: 2.5rem;
}

.pw-related__group-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--ocean);
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pw-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.pw-related__card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.5rem 1.375rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--border-color--subtle);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pw-related__card:hover,
.pw-related__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--custom--border-color--medium);
}

.pw-related__card-eyebrow {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	/* Ocean for ALLE kort-typer: en mint-variant til cases var 2,3:1 paa hvid i
	   11px (SC 1.4.3). Typen staar i teksten, saa farven skal ikke skelne. */
	color: var(--wp--preset--color--ocean);
}

.pw-related__card-title {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	line-height: 1.3;
	margin: 0;
	letter-spacing: -0.005em;
}

.pw-related__card-excerpt {
	font-size: 0.875rem;
	color: var(--wp--preset--color--base-gray);
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

.pw-related__card-cta {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--ocean);
	margin-top: 0.25rem;
}

/* =========================================
   Hero-testimonial (deck side 24 reference)
   Cinematisk citat på teal-gradient + oversized mint-anførselstegn.
   ========================================= */
.pw-hero-testimonial {
	background: var(--wp--preset--gradient--teal-gradient);
	color: var(--wp--custom--text--on-deep);
	padding-block: var(--wp--custom--section--pad-lg);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	position: relative;
}

.pw-hero-testimonial__inner {
	max-width: 920px;
	margin: 0 auto;
	padding-inline: 2rem;
	text-align: center;
	position: relative;
}

.pw-hero-testimonial__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4rem, 10vw, 8rem);
	color: var(--wp--preset--color--mint);
	line-height: 0.5;
	margin: 0 0 1rem;
	display: block;
	opacity: 0.85;
}

.pw-hero-testimonial__quote {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 400;
	font-style: italic;
	color: var(--wp--custom--text--on-deep-heading);
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin: 0 0 2.5rem;
	border: 0;
	padding: 0;
}

.pw-hero-testimonial__divider {
	width: 80px;
	height: 1px;
	background: var(--wp--preset--color--mint);
	margin: 0 auto 1.5rem;
	border: 0;
	opacity: 0.6;
}

.pw-hero-testimonial__attribution {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--custom--text--on-deep-heading);
	margin: 0;
}

.pw-hero-testimonial__role {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wp--custom--text--on-deep);
	opacity: 0.75;
	margin: 0.25rem 0 0;
}

/* =========================================
   Ikon-chip + billed-pladsholder (spor 2 - ydelsessider)

   Bruges til at bryde tekstmuren paa ydelsessiderne: hver kapabilitet faar
   et ikon-chip over sin overskrift, og en billed-kolonne ved siden af.

   Linje-ikonerne i markuppen er MIDLERTIDIGE pladsholdere tegnet i Streamline
   cyber-line-stil (tynd streg, afrundede hjoerner). De byttes 1:1 naar
   ikon-saettet er koebt - derfor arver de farve via currentColor, saa et
   senere sprite/shortcode-skift ikke roerer CSS'en her.
   ========================================= */
.pw-icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--skywhite);
	color: var(--wp--preset--color--ocean);
	flex: none;
}

.pw-icon-chip svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: currentcolor;
	fill: none;
}

/* Brand-rytme paa en raekke af kapabiliteter: skift accentfarve pr. chip. */
.pw-icon-chip--mint {
	color: var(--wp--preset--color--mint);
}

.pw-icon-chip--teal {
	color: var(--wp--preset--color--teal);
}

/* =========================================
   404 (templates/404.html + patterns/404-hero.php)
   Moerk prikke-net-hero: tekst til venstre, et falsk M365-skaermbillede til
   hoejre, der fortaeller pointen. Under 900px stables de. Al bevaegelse
   (ikon og mock) kun for dem, der ikke har bedt om reduceret bevaegelse.
   ========================================= */
.pw-404 {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	color: var(--wp--preset--color--white);
}

/* Paa mobil ligger nettets lyse prikker og streger direkte bag den tynde
   tekst. Samme kraftigere scrim som sidehovederne (.pw-page-header). */
@media (max-width: 899px) {

	.pw-404-main.pointwork-dots-bg--hero-dark::after {
		background: linear-gradient(rgba(0, 42, 47, 0.5), rgba(0, 38, 42, 0.72));
	}
}

@media (min-width: 900px) {

	.pw-404 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.pw-404__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pw-404__icon {
	width: 7rem;
	height: 7rem;
	color: var(--wp--preset--color--mint);
}

.pw-404__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pw-404__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mint);
}

.pw-404__title {
	margin: 0;
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.pw-404__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	color: #cbe5dd;
}

.pw-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

.pw-404 .pw-404__primary {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--teal);
}

.pw-404 .pw-404__secondary {
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.pw-404 .pw-404__primary:hover,
.pw-404 .pw-404__secondary:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
}

/* Det falske M365-skaermbillede. System-font, som i Microsofts egne flader. */
.pw-mock {
	background: var(--wp--preset--color--white);
	color: #1f2a30;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	transform: rotate(1.5deg);
}

.pw-mock p,
.pw-mock ul {
	margin: 0;
}

.pw-mock__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.9rem 1.2rem;
	border-bottom: 1px solid #e8eeec;
}

.pw-mock__head span {
	font-size: 0.78rem;
	color: var(--wp--preset--color--base-gray);
}

.pw-mock__head .pw-mock__logo {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 7px;
	background: linear-gradient(135deg, var(--wp--preset--color--blue-sky), var(--wp--preset--color--mint));
	flex: none;
}

.pw-mock__head .pw-mock__logo + strong {
	margin-right: auto;
}

.pw-mock__body {
	display: flex;
	flex-direction: column;
}

.pw-mock__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.2rem;
	border-bottom: 1px solid #f0f4f2;
}

.pw-mock__row span:last-child {
	text-align: right;
	font-weight: 600;
}

.pw-mock__row--th {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--base-gray);
}

.pw-mock__row--alert {
	background: #fff3f3;
}

.pw-mock__row--alert span:last-child,
.pw-mock__bad {
	color: #b42323;
}

.pw-mock__row--ok {
	background: #eef8f1;
}

.pw-mock__row--ok span:last-child,
.pw-mock__good {
	color: #1d7a3e;
}

.pw-mock__label,
.pw-mock__foot {
	padding: 0.75rem 1.2rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--base-gray);
}

.pw-mock__foot {
	background: var(--wp--preset--color--skywhite);
}

.pw-mock__chat {
	gap: 0.8rem;
	padding: 1.2rem;
}

.pw-mock__bubble {
	max-width: 88%;
	padding: 0.65rem 0.9rem;
	border-radius: 12px 12px 12px 2px;
	background: #f4f6f8;
}

.pw-mock__bubble--me {
	align-self: flex-end;
	border-radius: 12px 12px 2px 12px;
	background: #e3f2ef;
}

.pw-mock__files {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
}

.pw-mock__files li {
	padding: 0.4rem 0.6rem;
	border: 1px solid #e3e8ea;
	border-radius: 6px;
	background: var(--wp--preset--color--white);
}

.pw-mock__files span {
	color: var(--wp--preset--color--base-gray);
}

.pw-mock__files .pw-mock__bad {
	color: #b42323;
	font-weight: 600;
}

.pw-mock__typing {
	display: flex;
	gap: 0.3rem;
	padding-left: 0.3rem;
}

.pw-mock__typing span {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base-gray);
	opacity: 0.4;
}

@media (max-width: 899px) {

	.pw-404 {
		padding-top: var(--wp--preset--spacing--30);
	}

	.pw-mock {
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.pw-404__part--head,
	.pw-404__part--lid,
	.pw-404__part--mark,
	.pw-404__part--cog-a,
	.pw-404__part--cog-b {
		transform-box: fill-box;
		transform-origin: center;
	}

	.pw-404__icon--robot .pw-404__part--head,
	.pw-404__icon--person .pw-404__part--head {
		transform-origin: 50% 100%;
		animation: pw-404-look 2.4s ease-in-out infinite;
	}

	.pw-404__part--lid {
		animation: pw-404-blink 4s ease-in-out infinite;
	}

	.pw-404__part--mark {
		animation: pw-404-wobble 1.6s ease-in-out infinite;
	}

	.pw-404__part--arrow {
		animation: pw-404-leave 2.6s ease-in-out infinite;
	}

	.pw-404__part--cog-a {
		animation: pw-404-spin 6s linear infinite;
	}

	.pw-404__part--cog-b {
		animation: pw-404-spin 4s linear infinite reverse;
	}

	.pw-mock__reveal {
		animation: pw-404-reveal 0.6s ease-out 0.9s both;
	}

	.pw-mock__typing span {
		animation: pw-404-dot 1.2s ease-in-out infinite;
	}

	.pw-mock__typing span:nth-child(2) {
		animation-delay: 0.2s;
	}

	.pw-mock__typing span:nth-child(3) {
		animation-delay: 0.4s;
	}
}

@keyframes pw-404-look {

	0%,
	100% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(-12deg);
	}

	75% {
		transform: rotate(12deg);
	}
}

@keyframes pw-404-blink {

	0%,
	88%,
	100% {
		transform: scaleY(1);
	}

	93% {
		transform: scaleY(0.1);
	}
}

@keyframes pw-404-wobble {

	0%,
	100% {
		transform: rotate(0);
	}

	30% {
		transform: rotate(-14deg);
	}

	60% {
		transform: rotate(10deg);
	}
}

@keyframes pw-404-leave {

	0%,
	40%,
	100% {
		transform: translateX(0);
		opacity: 1;
	}

	75% {
		transform: translateX(3px);
		opacity: 0;
	}

	76% {
		transform: translateX(-2px);
		opacity: 0;
	}
}

@keyframes pw-404-spin {

	to {
		transform: rotate(360deg);
	}
}

@keyframes pw-404-reveal {

	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pw-404-dot {

	0%,
	80%,
	100% {
		opacity: 0.25;
	}

	40% {
		opacity: 1;
	}
}

/* Billed-pladsholder: markerer hvor et rigtigt skaermdump/foto skal ind, saa
   en tom plads laeser som "kommer" og ikke som en fejl. Erstattes af en
   wp:image naar billederne findes. aspect-ratio holder raekkerne ens hoeje. */
.pw-media-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	aspect-ratio: 4 / 3;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--skywhite);
	box-shadow: var(--wp--preset--shadow--subtle);
	color: var(--wp--preset--color--base-gray);
	text-align: center;
}

.pw-media-placeholder svg {
	width: 2.5rem;
	height: 2.5rem;
	stroke: var(--wp--preset--color--ocean);
	fill: none;
	opacity: 0.85;
}

.pw-media-placeholder__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Rigtigt billede i en feature-rækkes media-kolonne. Samme 4/3-frame som
   placeholderen, saa raekkerne staar lige hoeje uanset billedets format;
   object-fit: cover beskaerer baade portraet og landskab paent. */
.pw-media {
	margin: 0;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--subtle);
}

.pw-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Autoplay-loop-video i media-frame (samme beskaering som .pw-media img).
   Ved prefers-reduced-motion skjules videoen, og det statiske still vises
   i stedet - ingen bevaegelse tvinges ned over nogen. */
.pw-media__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Fuld-bredde produkt-skaermbilleder: vis det brede billede/video i sit
   naturlige format, ikke beskaaret til 4/3 som foto-rammerne. */
.pw-media--full .pw-media__video,
.pw-media--full .pw-media__still,
.pw-media--full img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}

/* Billeder: brug width/height-attributternes ratio igen. "aspect-ratio: auto"
   fjerner den, og saa giver WP 6.7's lazy-load-regel (sizes="auto" ->
   contain-intrinsic-size: 3000px 1500px) en 1500px hoej boks. */
.pw-media--full img {
	aspect-ratio: revert-layer;
}

/* Synlig kvalificerende tekst til skaermbillede-figurer (fx "syntetiske
   demo-data"), uden for .pw-media's overflow-klip. */
.pw-media__caption {
	margin-top: var(--wp--preset--spacing--20);
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--base-gray);
}

.pw-media--video .pw-media__still {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.pw-media--video .pw-media__video {
		display: none;
	}

	.pw-media--video .pw-media__still {
		display: block;
	}
}

/* Brandet diagram i en feature-rækkes media-kolonne. Samme frame som
   placeholderen, men fyldt af en inline-SVG (themeable, skarp, let). */
.pw-diagram {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--skywhite);
	box-shadow: var(--wp--preset--shadow--subtle);
}

.pw-diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Vekslende billed-side paa feature-raekker. Teksten staar foerst i DOM
   (korrekt
   laeserraekkefoelge + mobil-stak nedefra); billedet rykkes kun visuelt til
   venstre paa desktop. 782px er core-columns' egen stack-graense. */
@media (min-width: 782px) {

	.wp-block-columns.pw-row-reverse {
		flex-direction: row-reverse;
	}
}

/* Lead-manchetten paa ydelsessider: beholder sin laesebredde (760px), men
   flugter med h1's venstrekant i stedet for at centreres i main.
   Constrained-layoutet centrerer boern med margin:auto !important, saa
   venstrestillingen kraever hoejere specificitet + !important for at vinde. */
.pw-lead.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: auto !important;
}