/*
Theme Name: PrivatRen
Theme URI: https://privatren.dk
Author: Roland Nagy
Description: Block theme for PrivatRen — a family-owned cleaning company for private homes on Sjælland, Denmark. Built to match the Cleaner_design Figma plans exactly.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.23.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: patri-cleaning
*/

/* ------------------------------------------------------------------ *
 * Global tokens live in theme.json. Colors, type sizes and shadows
 * below are the EXACT values from the Figma design (Cleaner_design):
 * colors sampled from reference_design/figma_plan/Főoldal.png,
 * typography from reference_design/figma-variables.json.
 * ------------------------------------------------------------------ */

/* ============================================================ *
 * DESIGN TOKENS (from the Cleaner_design Figma frame)
 * Colors, font families/sizes and the spacing scale live in
 * theme.json (as --wp--preset--*). The variables below are the
 * component-level exact values that theme.json can't express.
 * Change a value here once and it updates everywhere it's used.
 * ============================================================ */
:root {
	/* Corner radii — boxes/cards slightly less rounded */
	--pc-radius: 12px;          /* generic card */
	--pc-radius-card: 14px;     /* pricing cards */
	--pc-radius-cta: 16px;      /* CTA card + image placeholders */
	--pc-radius-block: 16px;    /* inset section "panels" (shine-style blocks) */
	--pc-radius-icon: 18px;     /* icon badge */
	--pc-radius-pill: 25px;     /* servicefradrag pill */
	--pc-radius-btn: 14px;      /* buttons + postcode field — soft rounded (also set in theme.json) */
	--pc-radius-sm: 8px;

	/* A zöld jelentése: pénz és elérhetőség (megtakarítás, szabad kapacitás).
	 * A szín maga a "money" tokenben él — ez csak a szerep dokumentációja. */
	/* Kontúros gombok színe + vonalvastagsága */
	--pc-outline-ink: var(--wp--preset--color--brand);
	--pc-outline-width: 2.5px;

	/* Hibajelzés (űrlapok): piros szöveg/keret + halvány háttér */
	--pc-danger: #B3261E;
	--pc-danger-bg: #FDF1F0;

	/* Offset-outline (misregistration / off-register) effect distance */
	--pc-offset: 2px;

	/* Thin divider line (steps list) */
	--pc-divider: var(--wp--preset--color--surface-2);

	/* FAQ row hover fill */
	--pc-faq-hover: #F4F4F4;

	/* Shadows — Figma Árnyék 1 / 2 / 3 */
	--pc-shadow-1: 8px 16px 40px 0 rgba(0, 0, 0, 0.16);
	--pc-shadow-2: 8px 16px 40px 0 rgba(0, 0, 0, 0.08);
	--pc-shadow-3: 4px 8px 20px 0 rgba(0, 0, 0, 0.05);

	/* Icon badge */
	--pc-icon-size: 68px;       /* refined scale (Figma 90) */

	/* Spacing / rhythm — refined scale (was 80 / 160) for a tighter feel */
	--pc-section-pad: var(--wp--preset--spacing--60);  /* 64px section top/bottom */
	--pc-hero-pad: 110px;                               /* hero top/bottom */
	--pc-side-pad: clamp(20px, 6.25vw, 90px);           /* section left/right */
	--pc-gap: var(--wp--preset--spacing--30);           /* 24px between elements */
	--pc-gap-wide: 56px;                                /* ritkább rácsok vízszintes rése (pl. .pc-svcgrid) */
	--pc-gap-list: 16px;                                /* bullet-list rows */
	--pc-gap-icon-text: 20px;                           /* icon → label */

	/* Layout widths (refined; content 1200) */
	--pc-content: 1200px;
	--pc-hero-text: 560px;
	--pc-row-4: 1110px;    /* feature cards row (matches global content width) */
	--pc-row-4-sm: 780px;  /* about cards row */
	--pc-cta: 1110px;
}

body {
	overflow-x: hidden;
}

/* Visible keyboard-focus indicator (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Typography: exact desktop sizes (theme.json) + mobile size switch ----
 * Headings use Fraunces at all sizes; only the px size shrinks on mobile. */
@media (max-width: 781px) {
	h1, .wp-block-heading.has-huge-font-size {
		font-size: 30px !important;
	}
	h2, .wp-block-heading.has-xx-large-font-size {
		font-size: 24px !important;
	}
	h3, .wp-block-heading.has-x-large-font-size {
		font-size: 20px !important;
	}
	h4 {
		font-size: 18px !important;
	}
}

/* A line break only for wide screens (e.g. the Priser H1); phones wrap on their own. */
@media (max-width: 781px) { br.pc-br-desktop { display: none; } }

/* Graceful heading wrapping (global): NO hyphenation in headings (web
 * convention). A long word wraps whole to the next line; it only hard-breaks
 * as an absolute last resort if it is wider than the line on its own. */
h1, h2, h3, h4, h5, h6, .wp-block-heading {
	overflow-wrap: break-word;
	hyphens: none;
	-webkit-hyphens: none;
}

/* Gold eyebrow label above section headings — Figma "Alcím": Nunito 20px, mixed case */
.pc-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin-bottom: 20px;
}

/* ---- Header (2026-10-06; plain bar since 2026-10-07) ----
 * A plain, full-width bar in the page colour, no divider, sticky (the floating
 * rounded version was one effect too many). Its content keeps the hero's width.
 * Desktop: logo · nav · availability · DA/EN · Få tilbud (the only amber element).
 * ≤1080px: logo + menu button; the nav opens as a full-screen sheet.
 * ≤781px: the header CTA is dropped — the sticky bottom bar (.pc-mobilecta) has it. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 0 var(--wp--style--root--padding-right, 16px) 0 var(--wp--style--root--padding-left, 16px);
	/* 2026-10-14: see-through like clean-bee.dk — the page colour at 86 %, a light
	 * blur so text scrolling underneath stays out of the way (no divider line).
	 * The blur sits on ::before: backdrop-filter on the header itself would become
	 * the containing block of the fixed full-screen mobile menu and clip it. */
	background: none;
}
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--pcp-page, var(--wp--preset--color--white)) 86%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color .25s ease;
	pointer-events: none;
}
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.pc-header { background: none; }
.pc-header__bar {
	pointer-events: auto;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 32px);
	box-sizing: border-box;
	/* Same width as the hero below it: the site width (1110) on subpages, the
	 * homepage hero's wider 1320 on the front page (rule below). !important beats
	 * the constrained group's own limit on its children. */
	max-width: var(--wp--style--global--wide-size) !important;
	margin: 0 auto !important;
	padding: 14px 0;
}
body.home .pc-header__bar { max-width: 1320px !important; }   /* = .pc-hero.alignwide */
.pc-logo {
	display: inline-flex;
	flex-shrink: 0;
	text-decoration: none;
}
/* Logo image (assets/logo/, from materials/logo/export): height drives the size. */
.pc-logo img { display: block; height: var(--pc-logo-h, 36px); width: auto; }
/* The house + star rise above the wordmark, so centring the image box leaves the
 * text ~1/6 of the height low next to the nav: lift it so the text centres line up. */
.pc-header .pc-logo img { transform: translateY(-16%); }
.pc-nav { flex: 1; }
.pc-nav__links { display: flex; gap: clamp(16px, 2vw, 28px); }
.pc-nav__links a {
	position: relative;
	padding: 6px 0;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
}
/* Hover + current page: the hand-drawn brand stroke from accents.css. */
.pc-nav__links a::after {
	content: "";
	position: absolute;
	left: -2px; right: -2px; bottom: -3px;
	height: 7px;
	background: var(--wp--preset--color--brand);
	-webkit-mask: var(--pc-hl-link) no-repeat center / 100% 100%;
	mask: var(--pc-hl-link) no-repeat center / 100% 100%;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .35s cubic-bezier(.3,.7,.3,1);
}
.pc-nav__links a:hover::after,
.pc-nav__links a:focus-visible::after,
.pc-nav__links a[aria-current="page"]::after { clip-path: inset(0 0 0 0); }
.pc-nav__extra { display: none; }

.pc-header__tools { display: flex; align-items: center; gap: 22px; }
.pc-header__cta { white-space: nowrap; }

/* Availability: a quiet green dot + sentence-case text, not a shouting badge. */
.pc-avail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--money);
	text-decoration: none;
	white-space: nowrap;
}
.pc-avail__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--money);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--money) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	.pc-avail__dot { animation: pc-avail-pulse 2.4s ease-in-out infinite; }
	@keyframes pc-avail-pulse {
		50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--wp--preset--color--money) 0%, transparent); }
	}
}
.pc-avail:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Capacity switch from the Patri Manager (docs/05-varolista.md there). patri-bridge sets
 * <html data-capacity="open|limited|full"> in <head>, so the right label shows from the
 * first paint; without the plugin the "open" label stays. */
.pc-avail [data-cap] { display: none; }
html:not([data-capacity]) .pc-avail [data-cap="open"],
html[data-capacity="open"] .pc-avail [data-cap="open"],
html[data-capacity="limited"] .pc-avail [data-cap="limited"],
html[data-capacity="full"] .pc-avail [data-cap="full"] { display: inline; }
html[data-capacity="limited"] .pc-avail { color: var(--wp--preset--color--brand); }
html[data-capacity="limited"] .pc-avail__dot {
	background: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--brand) 18%, transparent);
}
html[data-capacity="full"] .pc-avail { color: var(--wp--preset--color--ink); }
html[data-capacity="full"] .pc-avail__dot {
	background: var(--wp--preset--color--brand);
	box-shadow: none;
	animation: none;
}

/* Language switch: quiet navy text, the active language bold. */
.pc-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
}
.pc-lang a {
	text-decoration: none;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent);
	font-weight: 500;
}
.pc-lang a.is-active { color: var(--wp--preset--color--ink); font-weight: 800; }
.pc-lang a:hover { color: var(--wp--preset--color--ink); }

/* Menu button (hamburger ↔ close), shown ≤1080px. */
.pc-menu-toggle {
	display: none;
	width: 46px; height: 46px;
	margin-left: auto;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.pc-menu-toggle__icon,
.pc-menu-toggle__icon::before,
.pc-menu-toggle__icon::after {
	display: block;
	width: 20px; height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--ink);
	transition: transform .25s ease, background-color .2s;
}
.pc-menu-toggle__icon { position: relative; }
.pc-menu-toggle__icon::before,
.pc-menu-toggle__icon::after { content: ""; position: absolute; left: 0; }
.pc-menu-toggle__icon::before { top: -6px; }
.pc-menu-toggle__icon::after { top: 6px; }
.pc-menu-toggle[aria-expanded="true"] .pc-menu-toggle__icon { background: transparent; }
.pc-menu-toggle[aria-expanded="true"] .pc-menu-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.pc-menu-toggle[aria-expanded="true"] .pc-menu-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
	.pc-header__bar { padding: 10px 0; }
	.pc-header__tools .pc-avail,
	.pc-header__tools .pc-lang { display: none; }
	.pc-header__tools { margin-left: auto; }
	.pc-menu-toggle { display: inline-flex; margin-left: 0; }
	/* The nav becomes a full-screen sheet under the bar. */
	.pc-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: none;
		flex-direction: column;
		gap: 32px;
		padding: 96px 28px 40px;
		background: var(--wp--preset--color--surface);
		overflow-y: auto;
		pointer-events: auto;
	}
	.pc-menu-open .pc-nav { display: flex; }
	.pc-nav__links { flex-direction: column; gap: 6px; }
	.pc-nav__links a { align-self: flex-start; font-family: var(--wp--preset--font-family--heading); font-size: 28px; padding: 8px 0; }
	.pc-nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--border); }
	.pc-nav__extra .pc-avail, .pc-nav__extra .pc-lang { font-size: 16px; }
	body.pc-menu-open { overflow: hidden; }
	/* The sheet is a child of the bar: keep the logo and the close button above it. */
	.pc-logo, .pc-header__tools, .pc-menu-toggle { position: relative; z-index: 2; }
	/* The sheet has its own Få tilbud — hide the sticky bottom bar meanwhile. */
	.pc-menu-open .pc-mobilecta { display: none !important; }
}
@media (max-width: 781px) {
	.pc-header__tools { display: none; }
	.pc-menu-toggle { margin-left: auto; }
	.pc-logo { --pc-logo-h: 30px; }
}

/* ---- Hero ---- *
 * Full-bleed photo background with a dark overlay so the yellow CTA pops.
 * Drop in the real photo later with:  --pc-hero-img: url("assets/hero.jpg"); */
.pc-hero {
	position: relative;
	background-image:
		linear-gradient(rgba(58, 66, 96, 0.62), rgba(58, 66, 96, 0.70)),
		var(--pc-hero-img, linear-gradient(135deg, var(--wp--preset--color--placeholder), #DDE3EF 55%, var(--wp--preset--color--surface)));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-block: var(--pc-hero-pad);
	padding-inline: var(--pc-side-pad);
}
/* Exception to the site-wide narrower content width: the homepage hero keeps
 * its original wide size (all other sections follow the global 1110px). */
.pc-hero.alignwide {
	max-width: 1320px;
}
.pc-hero__inner {
	max-width: 600px;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.pc-hero .pc-eyebrow { color: rgba(255, 255, 255, 0.92); }
.pc-hero h1,
.pc-hero .wp-block-heading { color: #fff; }
.pc-hero p { color: rgba(255, 255, 255, 0.92); }
/* Hero trust row (small honest proof line under the CTAs) */
.pc-herotrust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 28px;
}
.pc-herotrust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}
.pc-herotrust i { color: var(--wp--preset--color--brand); }
/* chevron icon inside buttons */
.wp-block-button__link i {
	margin-left: 8px;
	font-size: 0.82em;
	vertical-align: middle;
}
/* Hero "Få tilbud" keeps the yellow-first behaviour (all other quote buttons
 * are green-first, yellow-on-hover — set in theme.json). */
.pc-cta-hero .wp-element-button {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
.pc-cta-hero .wp-element-button:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* ---- Generic card ---- *
 * No height:100% — equal heights come from grid/flex `align-items: stretch`
 * (the card IS the column). height:100% caused grid items to overflow their
 * container's bottom padding. */
.pc-card {
	background: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--pc-radius-card);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Elevation as hierarchy, not decoration:
 * routine grid cards sit FLAT (border only) and LIFT on hover;
 * only genuinely primary cards (pricing #1, CTA) carry a resting shadow. */
.pc-card--center,
.pc-card--left { box-shadow: none; }
.pc-card--center:hover,
.pc-card--left:hover {
	transform: translateY(-4px);
}
.pc-w1044 { box-shadow: none; }   /* CTA card — flat */

/* ---- Blocked layout: colored sections = rounded panels inset from the edges,
 * floating on the white page base (shine-style). Applied to alignwide sections. */
.pc-block {
	border-radius: var(--pc-radius-block);
	padding-inline: clamp(20px, 4vw, 56px) !important;
	margin-block: 16px;
}
@media (max-width: 600px) { .pc-block { border-radius: 14px; } }

/* Rounded-square icon badge inside cards (exact pastel colors from the mockup) */
.pc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pc-icon-size);
	height: var(--pc-icon-size);
	border-radius: var(--pc-radius-icon);
	font-size: 1.8rem;
	color: var(--wp--preset--color--ink);
}
/* Feature-card icons: navy outline glyph — the accent colour stays reserved for
 * actions (buttons), so the icons read as content, not CTA. */
.pc-icon.is-lemon,
.pc-icon.is-lime,
.pc-icon.is-mint {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
/* Outline-only glyphs: the fill is knocked out and only the stroke is painted,
 * so the solid Font Awesome shapes read as line icons. */
.pc-icon.is-lemon i,
.pc-icon.is-lime i,
.pc-icon.is-mint i {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--ink);
	text-stroke: 1.5px var(--wp--preset--color--ink);
	paint-order: stroke fill;
}
/* Homepage feature row (2026-10-15): the same outline glyphs, a heavier stroke —
 * at ~67px the 1.5px line read too thin next to the 24px titles. Line-SVG
 * alternatives kept in materials/media/icons/line/. */
.pc-features > .pc-card .pc-icon i {
	-webkit-text-stroke-width: 2.2px;
	text-stroke-width: 2.2px;
}
/* Outline icon badge (About-us cards) — no border, green glyph */
.pc-icon.is-outline {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--ink);
}

/* Centered card content (feature + about cards) — Figma: 90px icon, tight padding */
.pc-card--center {
	text-align: center;
	padding: 28px 16px 40px !important;   /* a touch more breathing room below the text */
}
.pc-card--center .pc-icon {
	margin: 0 auto;
	width: 76px;                          /* slightly larger than the 68px default */
	height: 76px;
	font-size: 2rem;                      /* larger glyph to match */
}
/* Homepage feature cards (Din faste rengøringshjælp …) — bigger badge + glyph */
.pc-w1046 .pc-card--center .pc-icon {
	width: 92px;
	height: 92px;
	font-size: 2.6rem;
}
/* Card titles use the "Alcím" style: Nunito 18px */
.pc-card--center h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
}
@media (max-width: 781px) {
	.pc-card--center h4 { font-size: 16px !important; }
}

/* Homepage feature row (.pc-features, userbrain-style, 2026-10-06): no card box —
 * each icon sits in a white, friendly rounded tile, tilted a little (each one
 * differently, the icon tilts with it), with a larger title and the text below. */
.pc-features > .pc-card.pc-card--center {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 8px !important;
	transform: none !important;
}
/* Selector outranks plus.css / glass.css ".pc-card .pc-icon { background: transparent }". */
.pc-features > .pc-card .pc-icon.pc-icon {
	--pc-tilt: -9deg;
	width: 172px;
	height: 172px;
	font-size: 4.2rem;
	background: var(--wp--preset--color--white);
	border-radius: 34% 40% 36% 42% / 38% 34% 42% 36%;   /* soft, slightly uneven tile */
	/* 2026-10-14: softer than the original (6 % / 22 %, 30px blur) */
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent),
		0 10px 24px -14px color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	transform: rotate(var(--pc-tilt));
	transition: transform .3s cubic-bezier(.3,.7,.3,1);
}
.pc-features > .pc-card:nth-child(2) .pc-icon { --pc-tilt: 8deg; }
.pc-features > .pc-card:nth-child(3) .pc-icon { --pc-tilt: -7deg; }
.pc-features > .pc-card:nth-child(4) .pc-icon { --pc-tilt: 11deg; }
.pc-features > .pc-card:hover .pc-icon { transform: rotate(0deg) scale(1.04); }
.pc-features > .pc-card h4.wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large) !important;   /* 24px, was 18 */
	line-height: 1.25;
	margin-top: 40px !important;
}
@media (max-width: 781px) {
	.pc-features > .pc-card h4.wp-block-heading { font-size: 20px !important; }
	.pc-features > .pc-card .pc-icon.pc-icon { width: 148px; height: 148px; font-size: 3.6rem; }
	.pc-features { row-gap: 56px !important; }   /* stacked: air between one text and the next tile */
}

/* Smaller variant (Resultater "Derfor holder resultaterne", 2026-10-07): the tiles
 * support the text there instead of leading the section like on the homepage. */
.pc-features--sm > .pc-card .pc-icon.pc-icon { width: 112px; height: 112px; font-size: 2.7rem; }
.pc-features--sm > .pc-card h4.wp-block-heading { margin-top: 28px !important; }
@media (max-width: 781px) {
	.pc-features--sm > .pc-card .pc-icon.pc-icon { width: 104px; height: 104px; font-size: 2.5rem; }
}

/* Exact section container widths from the Figma frame (content max 1260).
 * Icon-card rows use CSS grid so all cards are equal height (Figma). */
.pc-w1046, .pc-w832 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pc-gap);
	margin-left: auto;
	margin-right: auto;
}
.pc-w1046 { max-width: var(--pc-row-4); }
.pc-w832  { max-width: var(--pc-row-4-sm); }
.pc-w1044 { max-width: var(--pc-cta); }
@media (max-width: 781px) {
	.pc-w1046, .pc-w832 { grid-template-columns: 1fr; }
	.pc-w1046, .pc-w832, .pc-w1044 { max-width: 100%; }
}
/* About-us cards: borderless, green centered title */
.pc-card--gold {
	border: none;
	background: transparent;
}
.pc-card--center.pc-card--gold .wp-block-heading {
	color: var(--wp--preset--color--ink);
}

/* ---- Pricing cards ---- */
/* Card 1 more elevated (Árnyék 1), card 2 subtle (Árnyék 3) */
.pc-pcard-1 { box-shadow: none !important; }
.pc-pcard-2 { box-shadow: none !important; }
/* Price: Figma "Alcím" 20px Nunito, in text grey */
.pc-price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px !important;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
	margin: 0;
}
.pc-price span { font-weight: 700; }
/* Price + "(eksl. moms)" are one unit: 8px between the two lines (Figma) */
.pc-price-block .pc-price { margin: 0 0 8px; }
.pc-price-block .pc-eksl { margin: 0; }

/* Services cards: even 24px gap between all content blocks (Figma auto-layout) */
.pc-pcard-1, .pc-pcard-2 {
	display: flex;
	flex-direction: column;
	gap: var(--pc-gap);
	justify-content: flex-start;
}

.pc-list-check {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pc-list-check li {
	position: relative;
	padding-left: 30px;
	margin-bottom: var(--pc-gap-list);
	line-height: 1.6;
}
.pc-list-check li:last-child { margin-bottom: 0; }
/* Priser "Sådan arbejder vi": each point = bold title on its own line + one sentence. */
.pc-howwework h2 { margin-bottom: 28px; }
.pc-howwework__list li { margin-bottom: 22px; }
.pc-howwework__list strong { display: block; margin-bottom: 2px; font-family: var(--wp--preset--font-family--heading); font-size: 18px; color: var(--wp--preset--color--ink); }
.pc-list-check li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}
/* Per-item Font Awesome icons instead of the default check (Services featured plan).
 * Item spacing inherits the base .pc-list-check li rhythm (--pc-gap-list). */
.pc-list-check--icons li::before { content: none; }
.pc-list-check--icons li > i {
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 20px;
	text-align: center;
	color: var(--wp--preset--color--brand);
}

/* ---- Locations grid ---- */
.pc-towns {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 4;
	column-gap: var(--pc-gap);
}
.pc-towns li {
	break-inside: avoid;
	display: flex;
	align-items: center;
	gap: var(--pc-gap-icon-text);
	padding: 12px 0;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.pc-towns li i {
	color: var(--wp--preset--color--ink);
	font-size: 1.1rem;
}
@media (max-width: 781px) {
	.pc-towns { columns: 2; }
}

/* ---- Servicefradrag info bar (applies to BOTH pricing options) ----
 * Full-width thin strip under the plans row — reads as a footnote to the
 * pricing, not a floating pill. Matches the plans row width. */
.pc-fradragbar {
	position: relative;
	z-index: 2;   /* layered above the price cards' shadow, which would otherwise dim it */
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--pc-row-4);
	margin: 24px auto 0;
	padding: 14px 22px;
	background: var(--wp--preset--color--money-tint);
	/* átlátszó keret alaphelyzetben, hogy a hover ne mozdítsa el a tartalmat */
	border: 1px solid transparent;
	border-radius: var(--pc-radius-sm);
	color: var(--wp--preset--color--money);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
}
.pc-fradragbar i {
	font-size: 16px;
	flex: 0 0 auto;
}
/* The whole strip is a link to the Servicefradrag page */
a.pc-fradragbar {
	text-decoration: none;
	transition: border-color .2s, transform .15s;
}
a.pc-fradragbar:hover,
a.pc-fradragbar:focus-visible {
	border-color: var(--wp--preset--color--money);
}
.pc-fradragbar__arrow {
	font-size: 13px;
	transition: transform .15s;
}
a.pc-fradragbar:hover .pc-fradragbar__arrow { transform: translateX(3px); }
.pc-eksl {
	color: var(--wp--preset--color--text);
	font-size: 14px;
	margin: 0;
}
/* Servicefradrag price line (link to the Servicefradrag page) */
.pc-fradrag-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}
.pc-fradrag-link:hover { text-decoration: underline; }
.pc-fradrag-link i { font-size: 0.82em; }

/* ---- Testimonial: single centered quote in a yellow box (shine-style) ---- */
.pc-testi {
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--pc-radius-block);
	padding: clamp(40px, 6vw, 72px);
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pc-testi__mark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 84px;
	line-height: 0.6;
	color: var(--wp--preset--color--ink);
	margin-bottom: 24px;
}
.pc-testi__q {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	margin: 0 0 28px;
}
.pc-testi__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--wp--preset--color--ink);
}
.pc-testi__role {
	display: block;
	font-size: 15px;
	margin-top: 4px;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}

/* ---- Postcode coverage checker (call-out band) ---- */
.pc-postcheck {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
}
.pc-postcheck__input {
	flex: 1;
	min-width: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-btn);
	padding: 15px 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}
.pc-postcheck__input::placeholder { color: rgba(90, 101, 94, 0.7); }
.pc-postcheck__btn { white-space: nowrap; }
.pc-postcheck__result {
	max-width: 520px;
	margin: 18px auto 0;
	text-align: center;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
@media (max-width: 560px) {
	.pc-postcheck { flex-direction: column; }
}

/* ---- Coverage check (homepage Dækning) — DAWA address autocomplete ---- *
 * Same search field + dropdown as the Få tilbud wizard; reuses .pc-wac. */
.pc-daek { max-width: 620px; margin-inline: auto; }
/* The scroll-reveal animation makes every top-level section its own stacking layer,
 * so the next section would paint over an open address dropdown. Lift the section
 * that holds an address field above its neighbours. */
main.wp-block-group > :has(.pc-wac) { position: relative; z-index: 2; }
.pc-daek__field input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
}
.pc-daek__field input:focus {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	border-color: transparent;
}
.pc-daek__notyet {
	background: var(--wp--preset--color--surface);
	border-radius: var(--pc-radius);
	padding: 28px 32px;
	text-align: center;
}
.pc-daek__notyet h3 { margin: 0 0 8px; }
/* ---- Postcode check (Priser page, 2026-10-06) ----
 * The field itself answers: green frame + check + "Få tilbud" inside the field,
 * or a red frame + cross and a quiet "not yet" card below. Selectors carry
 * .pc-daek + [type] so they outrank plus.css's ".pc-wfield--search input[type=text]". */
.pc-pncheck { position: relative; }
.pc-daek .pc-pncheck input { transition: border-color .2s, box-shadow .2s; }
.pc-daek .pc-pncheck[data-state="ok"] input[type="text"] {
	border: 2px solid var(--wp--preset--color--money);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--money) 14%, transparent);
	padding-right: 172px;
}
.pc-daek .pc-pncheck[data-state="no"] input[type="text"] {
	border: 2px solid var(--pc-danger);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc-danger) 12%, transparent);
}
/* With a state colour on the frame, the amber focus outline would double it up:
 * focus is shown by a stronger ring in the state colour instead. */
.pc-daek .pc-pncheck[data-state="ok"] input[type="text"]:focus,
.pc-daek .pc-pncheck[data-state="no"] input[type="text"]:focus { outline: none; border-color: inherit; }
.pc-daek .pc-pncheck[data-state="ok"] input[type="text"]:focus {
	border-color: var(--wp--preset--color--money);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--money) 26%, transparent);
}
.pc-daek .pc-pncheck[data-state="no"] input[type="text"]:focus {
	border-color: var(--pc-danger);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc-danger) 22%, transparent);
}
.pc-pncheck[data-state="ok"] .pc-pncheck__icon { color: var(--wp--preset--color--money); }
.pc-pncheck[data-state="no"] .pc-pncheck__icon { color: var(--pc-danger); }
/* "Få tilbud" sits inside the pill field, right-aligned. */
.pc-pncheck__cta {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	border-radius: 999px !important;
	padding: 0 18px !important;
	white-space: nowrap;
}
.pc-pncheck__cta[hidden] { display: none; }
/* ".pc-wfield--search i" positions the field icon — not the chevron in the button. */
.pc-wfield--search .pc-pncheck__cta i { position: static; transform: none; color: inherit; }
.pc-pncheck__msg {
	min-height: 1.4em;
	margin: 10px 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--money);
}
.pc-pncheck[data-state="no"] + .pc-pncheck__msg { color: var(--pc-danger); }
/* "Not yet": a quiet beige card with a tilted icon tile (as on the homepage). */
.pc-pncheck__no {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 16px;
	padding: 24px 28px;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--pc-radius-card);
	text-align: left;
}
.pc-pncheck__no[hidden] { display: none; }
.pc-pncheck__noicon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	background: var(--wp--preset--color--white);
	border-radius: 34% 40% 36% 42% / 38% 34% 42% 36%;
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
	transform: rotate(-6deg);
	color: var(--wp--preset--color--ink);
	font-size: 1.4rem;
}
.pc-pncheck__no h3 { margin: 0 0 6px; font-size: 20px; }
.pc-pncheck__no p { margin: 0 0 12px; color: var(--wp--preset--color--text); }
@media (max-width: 480px) {
	.pc-daek .pc-pncheck[data-state="ok"] input[type="text"] { padding-right: 150px; }
	.pc-pncheck__cta { padding: 0 14px !important; }
	.pc-pncheck__no { padding: 20px; gap: 16px; }
}
.pc-daek__notyet p { margin: 0; color: var(--wp--preset--color--text); }

/* ---- Area waiting list (assets/js/pc-waitlist.js) inside the "not yet" cards ---- */
.pc-wl { margin-top: 16px; text-align: left; min-width: 0; }
.pc-wl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .pc-wl__row { grid-template-columns: 1fr; } }
.pc-wl__field { display: block; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--ink); }
.pc-wl__field small { font-weight: 400; color: var(--wp--preset--color--text); }
.pc-wl__field input {
	display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--border); border-radius: var(--pc-radius-sm);
	font: inherit; font-weight: 400; background: var(--wp--preset--color--white);
}
.pc-wl__consent { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 14px; color: var(--wp--preset--color--text); }
.pc-wl__consent input { margin-top: 3px; }
.pc-wl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pc-wl__msg { margin: 10px 0 0; font-size: 14px; min-height: 1em; }
.pc-wl__msg.is-error { color: var(--pc-danger); }
.pc-wl__done { margin: 0; font-weight: 700; color: var(--wp--preset--color--money); }

/* ---- Testimonial ---- */
/* Priser before/after section: a real customer's line is the section heading (H2),
 * the name below it in muted body text, then the "Se forskellen selv" link. */
.pc-sidequote { margin: 0; padding: 0; }
.pc-sidequote blockquote { margin: 0; padding: 0; border: 0; }
.pc-sidequote h2 { margin: 0; }
.pc-sidequote figcaption {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--text) 65%, transparent);
}
.pc-sidequote figcaption::before { content: "– "; }

/* Om os hero (2026-10-07): Patricia's own words as the H1, signed like the Priser quote. */
.pc-heroquote figcaption { margin-top: 14px; }
/* Godt at vide "what matters to us": a quiet signed sentence, not a testimonial card. */
.pc-statement { text-align: center; max-width: 760px; margin: 0 auto; }
.pc-statement blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}
.pc-statement figcaption { margin-top: 14px; }
/* Short amber rule above the statement — marks it as its own beat, not body text. */
.pc-statement::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 auto 28px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
}
.pc-values { row-gap: 40px !important; }

/* Godt at vide hero: text before the image when stacked. */
@media (max-width: 781px) {
	.pc-gav-hero > .wp-block-column:first-child { order: 2; }
}

/* Anchored sections clear the sticky header. */
section[id] { scroll-margin-top: 72px; }

/* Numbered process (.pc-timeline, Godt at vide 2026-10-07): the "trin for trin"
 * the H1 promises — numbered tiles (white, rounded square, soft shadow) joined by a dashed line, no boxes. */
.pc-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.pc-timeline__step { position: relative; text-align: center; }
.pc-timeline__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 24px;
	left: calc(50% + 40px);    /* from just past this tile … */
	right: calc(-50% + 24px);  /* … to just before the next column's centred tile (gap 32) */
	border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
}
.pc-timeline__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
}
/* Process panel: tinted band so the page doesn't read as one continuous text flow. */
.pc-gav-process { margin-block: var(--wp--preset--spacing--50) !important; }
@media (max-width: 781px) {
	.pc-gav-process { padding-block: var(--wp--preset--spacing--60) !important; }
}
.pc-timeline__title { margin: 20px 0 8px; font-size: 20px; line-height: 1.3; }
.pc-timeline__step p { margin: 0; }
@media (max-width: 781px) {
	.pc-timeline { grid-template-columns: 1fr; gap: 36px; }
	.pc-timeline__step { padding: 0 0 0 68px; text-align: left; }
	.pc-timeline__num { position: absolute; left: 0; top: 0; }
	.pc-timeline__step:not(:last-child)::after { top: 58px; bottom: -28px; left: 23px; right: auto; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent); }
	.pc-timeline__title { margin-top: 10px; }
}
/* Vertical variant (Servicefradrag guide): the mobile layout at every width. */
.pc-timeline--vertical { grid-template-columns: 1fr; gap: 36px; }
.pc-timeline--vertical .pc-timeline__step { padding: 0 0 0 72px; text-align: left; }
.pc-timeline--vertical .pc-timeline__num { position: absolute; left: 0; top: 0; }
.pc-timeline--vertical .pc-timeline__step:not(:last-child)::after { top: 58px; bottom: -28px; left: 23px; right: auto; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent); }
.pc-timeline--vertical .pc-timeline__title { margin-top: 10px; }

/* Key figures (Servicefradrag 2026-10-09): big open numbers split by hairlines — no cards. */
.pc-figures { display: grid; grid-template-columns: repeat(3, 1fr); }
.pc-figure { text-align: center; padding: 8px 24px; display: flex; flex-direction: column; gap: 8px; }
.pc-figure + .pc-figure { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent); }
.pc-figure b { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 44px; line-height: 1.1; color: var(--wp--preset--color--ink); }
.pc-figure span { color: var(--wp--preset--color--text); }
.pc-figures__src { text-align: center; font-size: 13px; margin: 32px 0 0; color: color-mix(in srgb, var(--wp--preset--color--text) 75%, transparent); }
@media (max-width: 781px) {
	.pc-figures { grid-template-columns: 1fr; }
	.pc-figure { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; padding: 16px 0; gap: 16px; }
	.pc-figure + .pc-figure { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent); }
	.pc-figure b { font-size: 30px; order: 2; white-space: nowrap; }
}

/* Two-column checklist, centred under a centred intro. */
.pc-list-check--2col { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 56px; row-gap: var(--pc-gap-list); }
.pc-list-check--2col li { margin-bottom: 0; }
@media (max-width: 600px) { .pc-list-check--2col { grid-template-columns: 1fr; justify-content: start; } }

/* Servicefradrag hero (2026-10-12): the only coloured area of the page — a soft green
 * mesh (from the money green), running up behind the header and ending in a wave; everything below sits on white. The header is
 * transparent on the hero and gets its cream bar back once the page scrolls (.pc-scrolled).
 * Offsets = header height + main's top margin. */
body.pc-plus:has(.pc-sf-hero) { --pcp-page: var(--wp--preset--color--white); }
body:has(.pc-sf-hero):not(.pc-scrolled) header.wp-block-template-part::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.pc-scrolled:has(.pc-sf-hero) header.wp-block-template-part::before { background: color-mix(in srgb, #FDF9F7 86%, transparent); }
.pc-sf-hero {
	--pc-sf-offset: 100px;
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--pc-sf-offset)) !important;
	padding-top: calc(var(--pc-sf-offset) + var(--wp--preset--spacing--70)) !important;
	padding-bottom: calc(var(--wp--preset--spacing--70) + 56px) !important;
	background-color: #E4EEDD;
	background-image:
		radial-gradient(45% 60% at 12% 18%, #CBE0BE 0%, transparent 70%),
		radial-gradient(40% 55% at 88% 12%, #F1EEDB 0%, transparent 70%),
		radial-gradient(50% 70% at 78% 85%, #C4DDC0 0%, transparent 72%),
		radial-gradient(45% 60% at 22% 92%, #EDF3E3 0%, transparent 70%);
}
.pc-sf-hero .pc-savetag { background: var(--wp--preset--color--white); }
.pc-sf-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 72px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 360 0, 720 10, 1060 40 C 1240 56, 1360 44, 1440 20 L 1440 72 L 0 72 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
	pointer-events: none;
}
@media (max-width: 781px) {
	.pc-sf-hero { --pc-sf-offset: 90px; padding-bottom: calc(var(--wp--preset--spacing--60) + 32px) !important; }
	.pc-sf-hero::after { height: 36px; }
}

/* Example invoice (Servicefradrag "Hele fakturaen", 2026-10-12): shows what the copy
 * says — one line of work, 0 kr. for driving and supplies — with a green "100 %" stamp. */
.pc-invoice {
	position: relative;
	margin: 0 auto;
	max-width: 420px;
	padding: 28px 30px 24px;
	background: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	border-radius: 16px;
	box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
	transform: rotate(1.5deg);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
}
.pc-invoice__head { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 2px solid var(--wp--preset--color--ink); }
.pc-invoice__brand { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 18px; }
.pc-invoice__meta { font-size: 13px; color: var(--wp--preset--color--text); }
.pc-invoice__lines { list-style: none; margin: 0; padding: 0; }
.pc-invoice__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent); }
.pc-invoice__lines li.is-zero { color: var(--wp--preset--color--text); }
.pc-invoice__lines b { white-space: nowrap; }
.pc-invoice__total { display: flex; justify-content: space-between; padding: 16px 0 4px; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 20px; }
.pc-invoice__save {
	display: flex; align-items: center; gap: 10px;
	margin-top: 16px; padding: 12px 14px;
	border-radius: 10px;
	background: var(--wp--preset--color--money-tint);
	color: var(--wp--preset--color--money);
	font-weight: 600;
}
.pc-invoice__stamp {
	position: absolute;
	right: -22px;
	top: -34px;
	padding: 8px 12px;
	border: 2.5px solid var(--wp--preset--color--money);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	color: var(--wp--preset--color--money);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	max-width: 130px;
	transform: rotate(-10deg);
}
.pc-invoice__note { margin: 22px auto 0; max-width: 420px; text-align: center; font-size: 13px; color: var(--wp--preset--color--text); }
@media (max-width: 781px) {
	.pc-fradrag-split { row-gap: 48px !important; }
	.pc-invoice { transform: none; padding: 24px 20px 20px; }
	.pc-invoice__stamp { right: 4px; top: -36px; }
	.pc-invoice { margin-top: 24px; }
}

/* TastSelv guide (Servicefradrag, 2026-10-12): sticky intro left, open numbered rows
 * right (hairline dividers, the white number tiles), step 4 — where the amount goes —
 * highlighted in the money tint with a worked example. */
.pc-guide-split { align-items: flex-start !important; }
.pc-guide-intro { position: sticky; top: 120px; }
.pc-guide { list-style: none; margin: 0; padding: 0; }
.pc-guide > li {
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: 22px;
	padding: 26px 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}
.pc-guide > li:first-child { border-top: 0; padding-top: 4px; }
.pc-guide h3 { margin: 10px 0 6px; font-size: 19px; line-height: 1.3; }
.pc-guide p { margin: 0; }
.pc-guide .pc-timeline__num { position: static; }   /* the mobile .pc-timeline rule would lift it out of the grid */
.pc-guide > li.is-key {
	margin: 8px -20px;
	padding: 24px 20px;
	border-top: 0;
	border-radius: 16px;
	background: var(--wp--preset--color--money-tint);
}
.pc-guide > li.is-key + li { border-top: 0; }
.pc-guide-example { display: flex; gap: 10px; align-items: center; margin-top: 12px !important; font-weight: 600; color: var(--wp--preset--color--money); }
@media (max-width: 781px) {
	.pc-guide-intro { position: static; }
	.pc-guide-split { row-gap: 32px !important; }
	.pc-guide > li { grid-template-columns: 44px 1fr; column-gap: 16px; }
	.pc-guide > li.is-key { margin-inline: -12px; padding-inline: 12px; }
}

/* Servicefradrag stats panel: more air above (after the invoice) and below (before the guide). */
.pc-sf-stats { margin-block: var(--wp--preset--spacing--60) !important; }
@media (max-width: 781px) { .pc-sf-stats { margin-block: var(--wp--preset--spacing--50) !important; } }

/* Savings tag (Servicefradrag hero): the page's money green as a quiet pill above the H1. */
.pc-savetag {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin: 0 auto 20px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--money-tint);
	color: var(--wp--preset--color--money);
	font-size: 14px;
	font-weight: 700;
}

/* Open values (.pc-values, 2026-10-07 — Om os, Godt at vide): a few short sentences
 * each, so no boxes at all — open text with the small icons, like a list of promises.
 * Outranks plus.css .pc-card. */
.pc-values > .pc-card.pc-card,
.pc-values > .pc-card.pc-card:hover {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
	padding: 0 8px 0 0 !important;
}
/* --inline (Godt at vide · Transport): icon sits on the heading's line, text below. */
.pc-values--inline > .pc-card {
	display: grid !important;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	align-items: center;
	align-content: start;   /* equal-height cards: keep rows at the top, not spread */
}
.pc-values--inline > .pc-card > .pc-cardicon { margin: 0; font-size: 1.4rem; width: 1.6rem; text-align: center; }
.pc-values--inline > .pc-card > h4.wp-block-heading { margin: 0 !important; }
.pc-values--inline > .pc-card > p { grid-column: 1 / -1; margin-top: 14px; margin-bottom: 0; }
.pc-values--inline > .pc-card > p + p { margin-top: 12px; }
.pc-omos-values { margin-top: 80px !important; row-gap: 40px !important; padding-bottom: 96px !important; }
.pc-omos-values-title { margin-top: 64px !important; }   /* + the about block's 64px = 128px above */
@media (max-width: 781px) {
	.pc-omos-values { padding-bottom: 64px !important; margin-top: 56px !important; }
	.pc-omos-values-title { margin-top: 40px !important; }
}
@media (max-width: 781px) {
	.pc-omos-hero { padding-bottom: 0 !important; }
	.pc-omos-about { padding-top: var(--wp--preset--spacing--50) !important; }
}

.pc-quote {
	background: var(--wp--preset--color--surface);
	border-radius: var(--pc-radius);
	position: relative;
}
.pc-quote-mark {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 700;
}

/* ---- Footer ---- */
.pc-footer {
	background: var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
	border-radius: 0;
}
.pc-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}
.pc-footer a:hover {
	color: var(--wp--preset--color--white);
}
.pc-footer h2, .pc-footer h3 {
	color: var(--wp--preset--color--white);
}
.pc-footer .pc-logo { --pc-logo-h: 34px; }
/* More air (2026-10-07): the page's last CTA and the footer get a larger gap, and
 * the footer columns breathe — wider gutters, taller link rows, headings set apart. */
main > .pc-w1044:last-child { margin-bottom: 136px !important; }
.pc-footer > .wp-block-columns.wp-block-columns { column-gap: 48px; row-gap: 48px; }
.pc-footer .wp-block-column > p a { white-space: nowrap; }
.pc-footer .wp-block-column > h3.wp-block-heading { margin-bottom: 20px !important; }
.pc-footer .wp-block-column > p:has(> a:first-child) { line-height: 2.1; }   /* link lists only */
.pc-footer .wp-block-column > h3.wp-block-heading + p { margin-top: 0; }
.pc-footer input, .pc-footer textarea { box-sizing: border-box; }   /* 100% wide fields stayed inside the column */
@media (max-width: 781px) {
	main > .pc-w1044:last-child { margin-bottom: var(--wp--preset--spacing--70) !important; }
	.pc-footer.pc-footer { padding-top: var(--wp--preset--spacing--60) !important; }
}
.pc-footer input,
.pc-footer textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--pc-radius-sm);
	padding: 10px 14px;
	color: var(--wp--preset--color--white);
	margin-bottom: 10px;
	font-family: inherit;
}
.pc-footer input::placeholder,
.pc-footer textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.pc-footer input[type="checkbox"],
.pc-footer input[type="radio"] {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin: 2px 0 0;
	padding: 0;
}
.pc-pay {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.pc-pay span {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-radius: 8px;
	min-width: 64px;
	text-align: center;
	padding: 12px 14px;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}
.pc-pay span i { font-size: 1.9rem; }
.pc-footer .pc-contact {
	line-height: 2;
}
.pc-footer .pc-contact i {
	width: 20px;
	color: var(--wp--preset--color--surface);
	margin-right: 8px;
}
.pc-social {
	display: inline-flex;
	gap: 12px;
}
.pc-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.pc-social a:hover { opacity: 0.85; }
.pc-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	margin: 4px 0 14px;
	color: rgba(255, 255, 255, 0.7);
}
.pc-consent a { color: var(--wp--preset--color--surface); text-decoration: underline; }
.pc-stripe {
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

/* Testimonial quote: divider + badge */
.pc-quote-wrap {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.pc-quote-badge {
	display: flex;
	align-items: center;
	position: relative;
	padding-right: 22px;
	margin-right: 22px;
	border-right: 2px solid var(--wp--preset--color--brand);
}

/* Outline button variant should keep uppercase weight */
.wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0;
}
/* Thicker outline so the light accent colour still reads on white/cream */
.wp-block-button.is-style-outline .wp-element-button {
	border-width: var(--pc-outline-width);
	transition: background-color .2s, color .2s, border-color .2s;
}
/* Hover: the outline fills in with the accent, label flips to white.
 * !important is needed because the templates set these inline per button. */
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--surface-2) !important;
	border-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
}
/* Gold checklist variant (CTA) */
.pc-list-check--gold li::before { color: var(--wp--preset--color--brand); }

/* ============================================================ *
 * REUSABLE SECTION COMPONENTS (subpages) — token-based
 * ============================================================ */

/* ---- Simple centered hero (Kontakt, Resultater) ---- */
.pc-hero-center {
	background: var(--wp--preset--color--surface);
	padding-block: var(--pc-hero-pad);
	padding-inline: var(--pc-side-pad);
}
.pc-hero-center.is-white { background: var(--wp--preset--color--white); }

/* ---- Two-column hero (Om os) + tabbed hero (Services, Godt at vide) ---- */
.pc-hero-tabs-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}
.pc-tab {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
/* Coverage map (Lokationer): shown whole at its natural aspect (no crop). */
.pc-map {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pc-radius-cta);
}
.pc-img-box {
	background: linear-gradient(135deg, var(--wp--preset--color--placeholder), #DDE3EF 55%, var(--wp--preset--color--surface));
	border-radius: var(--pc-radius-cta);
	min-height: 360px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* "photo goes here" hint so placeholders read as intentional, not broken */
.pc-img-box::before {
	content: "\f03e"; /* fa-image */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 2rem;
	color: rgba(33, 57, 98, 0.28);
}

/* ---- Card variants: left-aligned / cream (Om os, Godt at vide) ---- */
.pc-card--left { text-align: left; }
.pc-card--cream {
	background: var(--wp--preset--color--surface);
	border-color: transparent;
}
/* Pale text card (shine "Gør plads" style) */
.pc-card--yellow {
	background: #F8F6F0;
	border-color: transparent;
}
/* Centered section intro under a heading (readable measure). */
.wp-block-group.is-layout-constrained > p.pc-intro {
	max-width: 640px;
	margin-inline: auto !important;
}

/* ---- Stat cards (Servicefradrag) ---- */
.pc-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pc-gap);
}
.pc-stats .pc-stat {
	background: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--pc-radius-card);
	box-shadow: none;
	padding: 32px;
	text-align: center;
}
.pc-stat b {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 24px;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}
@media (max-width: 781px) { .pc-stats { grid-template-columns: 1fr; } }

/* ---- Numbered steps (Servicefradrag, Services, Godt at vide) ---- */
.pc-steps { list-style: none; margin: 0; padding: 0; }
.pc-steps li {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	background: var(--wp--preset--color--surface);
	border-radius: var(--pc-radius-card);
	padding: 24px 28px;
	margin-bottom: var(--pc-gap);
}
.pc-steps li:last-child { margin-bottom: 0; }
.pc-steps .pc-step-n {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}
.pc-steps h3, .pc-steps h4 { margin: 0 0 6px; }

/* ---- FAQ accordion via native <details> (no JS) ---- */
.pc-faq { border-top: 1px solid var(--wp--preset--color--border); }
.pc-faq details {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.pc-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 16px;                 /* whole row (between the lines) is clickable */
	border-radius: var(--pc-radius-sm);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.pc-faq summary:hover { background: var(--pc-faq-hover); }
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::after {
	content: "+";
	color: var(--wp--preset--color--brand);
	font-size: 1.4rem;
	line-height: 1;
}
.pc-faq details[open] summary::after { content: "\2212"; }
.pc-faq details > p { margin: 0 16px 20px; }
/* Longer answers (several paragraphs / a list) are wrapped in .pc-faq__a. */
.pc-faq details > .pc-faq__a { margin: 0 16px 20px; }
.pc-faq__a > p { margin: 0 0 12px; }
.pc-faq__a > p:last-child, .pc-faq__a > ul:last-child { margin-bottom: 0; }
.pc-faq__a > ul { margin: 0 0 12px; padding-left: 1.25em; }
.pc-faq__a li + li { margin-top: 6px; }

/* Expanded info list (Godt at vide "Praktisk at vide"): left title, right prose,
 * divider between rows — NOT a collapsible accordion. */
.pc-infolist .pc-inforow {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	padding: 40px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.pc-infolist .pc-inforow:first-child { border-top: 0; padding-top: 0; }
.pc-infolist .pc-inforow h3 { margin: 0; }
.pc-infolist .pc-inforow p { margin: 0 0 14px; }
.pc-infolist .pc-inforow p:last-child { margin-bottom: 0; }
@media (max-width: 781px) {
	.pc-infolist .pc-inforow { grid-template-columns: 1fr; gap: 14px; }
}
/* two-column FAQ on wide screens */
.pc-faq--2col { columns: 2; column-gap: 48px; border-top: 0; }
.pc-faq--2col details { break-inside: avoid; border-bottom: 0; border-top: 1px solid var(--wp--preset--color--border); }
@media (max-width: 781px) { .pc-faq--2col { columns: 1; } }

/* FAQ grouped by theme (single column, readable measure) */
.pc-faqgroups { max-width: 760px; margin: 0 auto; text-align: left; }
/* FAQ split: intro (heading + text) left, questions right — same bg, no divider */
.pc-faq2col {
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: 56px;
	align-items: start;
	max-width: var(--pc-row-4);
	margin-inline: auto;
	text-align: left;
}
.pc-faq2col__intro h2 { margin: 0 0 12px; }
.pc-faq2col__intro p { margin: 0; color: var(--wp--preset--color--text); }
.pc-faq2col .pc-faqgroups { max-width: none; margin: 0; }
@media (max-width: 900px) { .pc-faq2col { grid-template-columns: 1fr; gap: 32px; } }
/* Full-width variant (Priser page): the same width as the sections above, no indent. */
.pc-faqgroups--full { max-width: var(--pc-row-4); }
.pc-faqgroups--full .pc-faqgroup .pc-faq { padding-left: 0; }
/* …with bigger type and clearly separated groups: each group title gets a small,
 * tilted white icon tile (the same tile language as the perks above), more air
 * between groups, and the questions are a step larger. */
.pc-faqgroups--full .pc-faqgroup + .pc-faqgroup { margin-top: 64px; }
.pc-faqgroups--full .pc-faqgroup__title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--x-large);   /* 24px, was 20 */
}
.pc-faqgroup__icon {
	--pc-tilt: -6deg;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	background: var(--wp--preset--color--white);
	border-radius: 34% 40% 36% 42% / 38% 34% 42% 36%;
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent),
		0 8px 18px -10px color-mix(in srgb, var(--wp--preset--color--ink) 26%, transparent);
	transform: rotate(var(--pc-tilt));
	font-size: 1.3rem;
}
.pc-faqgroup:nth-child(2) .pc-faqgroup__icon { --pc-tilt: 5deg; }
.pc-faqgroup:nth-child(3) .pc-faqgroup__icon { --pc-tilt: -4deg; }
.pc-faqgroup:nth-child(4) .pc-faqgroup__icon { --pc-tilt: 7deg; }
.pc-faqgroup:nth-child(5) .pc-faqgroup__icon { --pc-tilt: -7deg; }
.pc-faqgroup__icon i {
	color: transparent;
	-webkit-text-stroke: 1.3px var(--wp--preset--color--ink);
	paint-order: stroke fill;
}
.pc-faqgroups--full .pc-faq summary { font-size: var(--wp--preset--font-size--large); padding-block: 22px; }   /* 18px, was 16 */
.pc-faqgroups--full .pc-faq details > p { font-size: 17px; line-height: 1.6; }
@media (max-width: 781px) {
	.pc-faqgroups--full .pc-faqgroup__title { font-size: 20px; gap: 12px; }
	.pc-faqgroup__icon { width: 44px; height: 44px; font-size: 1.1rem; }
	.pc-faqgroups--full .pc-faq summary { font-size: 16px; }
}
.pc-faqgroup + .pc-faqgroup { margin-top: 44px; }
.pc-faqgroup__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--ink);
	margin: 0 0 4px;
}
/* Indent the questions so they read as items under the group title */
.pc-faqgroup .pc-faq { padding-left: 28px; }
@media (max-width: 600px) { .pc-faqgroup .pc-faq { padding-left: 16px; } }

/* ---- Two-column checklist (Services: Inkluderet / Ikke inkluderet) ---- */
.pc-checkcols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pc-gap); align-items: stretch; }
.pc-checkcols > div {
	background: var(--wp--preset--color--surface);
	border: none;
	border-radius: var(--pc-radius-card);
	box-shadow: none;
	padding: 40px;
}
.pc-checkcols > div > h3 { margin-top: 0; margin-bottom: 24px; }
.pc-checkcols ul { list-style: none; margin: 0; padding: 0; }
.pc-checkcols li { position: relative; padding-left: 30px; margin-bottom: var(--pc-gap-list); line-height: 1.6; }
.pc-checkcols .is-yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--brand); font-weight: 700; }
.pc-checkcols .is-no li::before { content: "\2212"; position: absolute; left: 0; color: var(--wp--preset--color--text); font-weight: 700; }
/* Faded "not included" column (Services) — secondary to the "included" list */
.pc-checkcols > div.is-muted { align-self: start; /* only as tall as its shorter list */ background: color-mix(in srgb, var(--wp--preset--color--surface) 45%, var(--wp--preset--color--white)); }
.pc-checkcols > div.is-muted > h3 { color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, var(--wp--preset--color--white)); }
.pc-checkcols > div.is-muted li { color: color-mix(in srgb, var(--wp--preset--color--text) 65%, var(--wp--preset--color--white)); }
.pc-checkcols > div.is-muted li::before { opacity: .5; }
.pc-checkcols > div.is-muted .pc-note { color: color-mix(in srgb, var(--wp--preset--color--text) 65%, var(--wp--preset--color--white)); background: var(--wp--preset--color--white); }
@media (max-width: 781px) { .pc-checkcols { grid-template-columns: 1fr; gap: var(--pc-gap); } }

/* Note box (e.g. "not in the standard?" under Ikke inkluderet) */
.pc-note {
	background: var(--wp--preset--color--white);
	border-radius: var(--pc-radius-card);
	padding: 20px 24px;
	margin-top: 24px;
	color: var(--wp--preset--color--text);
}

/* Time-estimate card (Services) — clock icon on top, centered, natural height */
/* átlátszó háttér: különben az 1./4. kártya fehér háttere letakarná a szélső vonalakat */
.pc-est-card { position: relative; height: auto; align-self: start; background: transparent; }
.pc-est-icon { font-size: 1.8rem; color: var(--wp--preset--color--ink); margin-bottom: 16px; }
.pc-est-card h3 { margin: 0 0 12px; font-size: var(--wp--preset--font-size--large); }
.pc-est-card p { margin: 0; line-height: 1.7; }
/* --- Tidsestimat: függőleges elválasztók ---
 * A kártyasor a Prissætning doboz TELJES szélességét fogja át: a .pc-block
 * vízszintes paddingjét negatív margóval kioltjuk, és a rést nullázzuk, így a
 * 4 kártya és az 5 vonal (2 szélső + 3 belső) egyenlően oszlik el a két szél között.
 * A vonalak a boxban lévő tartalommal azonos magasságúak (a 28px paddingek között). */
/* .pc-hero-center prefix: túllépi a WP "constrained" layout auto-margóját */
.pc-hero-center .pc-est-grid {
	position: relative;
	gap: 0 !important;
	margin-inline: calc(clamp(20px, 4vw, 56px) * -1) !important;   /* kioltja a .pc-block padding-inline-ját (a WP layout auto-margója !important) */
}
.pc-est-grid::before,
.pc-est-grid::after,
.pc-est-card:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 28px;                        /* = .pc-card--center felső padding */
	bottom: 28px;                     /* = .pc-card--center alsó padding */
	width: 1px;
	background: #E8E2CD;
}
.pc-est-grid::before { left: 0; }                                 /* bal szélső vonal (Prissætning doboz bal éle) */
.pc-est-grid::after  { right: 0; }                                /* jobb szélső vonal (Prissætning doboz jobb éle) */
.pc-est-grid .pc-est-card:not(:first-child)::before { left: 0; }  /* belső vonalak az oszlophatárokon */
@media (max-width: 781px) {
	.pc-hero-center .pc-est-grid { margin-inline: 0 !important; gap: var(--pc-gap) !important; }   /* mobilon 1 oszlop */
	.pc-est-grid::before, .pc-est-grid::after,
	.pc-est-card::before { display: none; }
}

/* Procedure step pill with arrow (Services) */
.pc-steppill {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
/* Long arrow: a shaft that stretches to the card edge, with a chevron head.
 * The Font Awesome glyph is suppressed and replaced by pure-CSS line + head. */
.pc-steppill i {
	flex: 1 1 auto;
	position: relative;
	height: 2px;
	background: currentColor;
	color: var(--wp--preset--color--ink);
	margin-right: 0.5cm;   /* arrow ends 0.5cm short of the card edge */
}
.pc-steppill i::before { content: ""; }
.pc-steppill i::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

/* ---- Interactive steps: image left, switchable step list right ---- *
 * Clicking a step highlights it and swaps the image (shine "på X klik"). */
.pc-steps2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	max-width: var(--pc-row-4);
	margin-inline: auto;
}
/* Intro capped to the image-column width so it wraps like the sample (desktop). */
.pc-steps2__leadwrap { margin-bottom: var(--wp--preset--spacing--50); }
.pc-steps2__lead {
	max-width: calc((var(--pc-row-4) - 48px) / 2);   /* = the left image column */
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}
.pc-steps2__media { position: relative; }
.pc-steps2__img { display: none; flex-direction: column; gap: 10px; }
.pc-steps2__img.is-active { display: flex; }
.pc-steps2__lbl { font-weight: 700; color: var(--wp--preset--color--brand); }
.pc-steps2__list { display: flex; flex-direction: column; gap: 56px; }
/* NOTE: block layout (not flex) because Safari/WebKit does not reliably make a
 * <button> a flex container — which previously collapsed the progress bar. */
.pc-step2 {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
}
/* No box fill on steps — the section itself is the filled panel now. */
.pc-step2__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pc-step2__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--wp--preset--color--ink); }
@media (max-width: 781px) { .pc-step2__title { font-size: 22px; } }
.pc-step2__time {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface-2);  /* soft off-white chip (#F4EFEB) */
	padding: 3px 10px;
	border-radius: var(--pc-radius-sm);
}
/* Accordion: description only visible on the active (open) step */
.pc-step2__desc { display: none; max-width: 66.667%; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--text); margin-top: 4px; }
.pc-step2.is-active .pc-step2__desc { display: block; }
/* Always-visible thin divider between steps; on the active step its green
 * fill grows 0 -> 100% as the auto-advance progress bar. */
.pc-step2__bar {
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 16px;
	background: var(--pc-divider);
	overflow: hidden;
}
.pc-step2__barfill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--wp--preset--color--brand);
}
@media (max-width: 781px) {
	.pc-steps2 { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Price table (Services: Ekstra tjenester) ---- */
.pc-price-table { width: 100%; }
.pc-price-table .pc-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.pc-price-table .pc-price-row b { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); white-space: nowrap; }

/* ---- Before/after gallery (Resultater) ---- */
.pc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pc-gap); }
.pc-gallery img, .pc-gallery .pc-img-box { aspect-ratio: 4 / 3; min-height: 0; object-fit: cover; border-radius: var(--pc-radius-cta); width: 100%; }
@media (max-width: 781px) { .pc-gallery { grid-template-columns: 1fr 1fr; } }

/* ---- Before/after comparison slider ----
 * Photos come from inc/images.php (<picture> with WebP srcset): square, three to a row,
 * one on phones. */
.pc-ba-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pc-gap);
}
@media (max-width: 781px) { .pc-ba-grid { grid-template-columns: 1fr; } }
.pc-ba picture { display: contents; }
.pc-ba {
	position: relative;
	margin: 0;
	border-radius: var(--pc-radius-cta);
	overflow: hidden;
	box-shadow: none;
	line-height: 0;
	user-select: none;
	touch-action: pan-y;
}
.pc-ba__base,
.pc-ba__overlay img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* Compact variant (Services "Se selv") — same footprint as the old placeholder. */
.pc-ba--compact .pc-ba__base,
.pc-ba--compact .pc-ba__overlay img {
	aspect-ratio: auto;
	height: 260px;
}
.pc-ba__overlay {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.pc-ba__label {
	position: absolute;
	top: 14px;
	z-index: 3;
	background: rgba(33, 57, 98, 0.85);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
}
.pc-ba__label--before { left: 14px; }
.pc-ba__label--after { right: 14px; }
.pc-ba__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 3px;
	background: #fff;
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.pc-ba__line::after {
	content: "\21C4";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--pc-shadow-2);
	color: var(--wp--preset--color--brand);
	font-size: 18px;
	line-height: 42px;
	text-align: center;
}
.pc-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
	z-index: 4;
	opacity: 0;
}
.pc-ba__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 44px;
	height: 400px;
	background: transparent;
}
.pc-ba__range::-moz-range-thumb {
	width: 44px;
	height: 400px;
	border: none;
	background: transparent;
}

/* ---- Savings highlight card (Servicefradrag) — the green "money" signal ---- */
.pc-hilite {
	background: var(--wp--preset--color--money-tint);
	border: 1px solid var(--wp--preset--color--money);
	border-radius: var(--pc-radius-cta);
	text-align: center;
	padding: 48px;
}
.pc-hilite .pc-eyebrow, .pc-hilite h1, .pc-hilite h2 { color: var(--wp--preset--color--money); }

/* ---- Light contact form (Kontakt) ---- */
.pc-form { display: flex; flex-direction: column; gap: 16px; }
.pc-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--wp--preset--color--ink); }
.pc-field input, .pc-field textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm);
	padding: 12px 16px;
	font-family: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--text);
}
.pc-field input, .pc-field textarea { box-sizing: border-box; max-width: 100%; font-size: 16px; line-height: 1.5; }   /* form controls don't inherit body size; 16px also stops iOS zoom-on-focus */   /* padding stayed outside width:100% → overflowed on mobile, button looked short */
.pc-field input::placeholder, .pc-field textarea::placeholder { color: color-mix(in srgb, var(--wp--preset--color--text) 55%, transparent); }
.pc-consent--light { color: var(--wp--preset--color--text); font-weight: 400; font-size: 14px; }
.pc-consent--light a { color: var(--wp--preset--color--ink); font-weight: 700; }
.pc-form-submit { border: 0; cursor: pointer; }
/* Contact forms (pc-contact.js): status line under the button, and the thank-you that
 * replaces the form. The footer variant sits on navy. */
.pc-form-submit:disabled { opacity: .6; cursor: default; }
.pc-form-msg { margin: 10px 0 0; font-size: 14px; min-height: 1em; }
.pc-form-msg:empty { display: none; }
.pc-form-msg.is-error { color: var(--pc-danger); }
.pc-form-done { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 700; color: var(--wp--preset--color--ink); line-height: 1.5; }
.pc-form-done i { color: var(--wp--preset--color--money); margin-top: .2em; }
.pc-footer .pc-form-msg { color: rgba(255, 255, 255, 0.78); }
.pc-footer .pc-form-msg.is-error { color: #FFB4A8; }
.pc-footer .pc-form-done { color: var(--wp--preset--color--white); }
.pc-footer .pc-form-done i { color: var(--wp--preset--color--brand); }

/* Kontakt page (2026-10-15): the message form is the way in — a raised white card;
 * e-mail and phone sit beside it as quiet text, the phone only for urgent things. */
.pc-kontakt-grid { align-items: flex-start !important; }
.pc-contact-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--pc-radius-cta);
	padding: 40px;
	box-shadow: var(--pc-elev-2);
	scroll-margin-top: 24px;
}
.pc-contact-card h2.wp-block-heading { margin-top: 0; }
.pc-contact-aside { padding: 40px 0 0; }
.pc-contact-alt { margin: 0 0 28px; }
.pc-contact-alt p { margin: 0; }
.pc-contact-alt__label { font-size: 14px; color: var(--wp--preset--color--text); margin-bottom: 6px !important; }
.pc-contact-alt i { width: 1.1em; margin-right: 6px; font-size: 0.9em; color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent); }
.pc-contact-alt a { color: var(--wp--preset--color--ink); text-decoration: none; }
.pc-contact-alt a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--brand); text-underline-offset: 4px; }
.pc-contact-alt__mail { font-weight: 700; font-size: 17px; }
.pc-contact-alt__phone { font-size: 15px; }
.pc-contact-alt__hours { font-size: 14px; color: var(--wp--preset--color--text); padding-left: calc(1.1em + 6px); }
.pc-contact-aside__note { font-size: 15px; margin: 0 0 12px !important; }
.pc-contact-aside__links { margin-top: 20px !important; gap: 10px !important; align-items: flex-start !important; }
@media (max-width: 781px) {
	.pc-contact-card { padding: 28px 20px; }
	.pc-contact-aside { padding-top: 16px; }
}
/* The page's own contact form makes the footer one redundant. */
body:has(main .pc-form) .pc-footer-form { display: none; }
.pc-footer .pc-contact a { color: inherit; text-decoration: none; }

/* Equal-height card rows at full content width */
.pc-grid4, .pc-grid3 { display: grid !important; gap: var(--pc-gap); }
.pc-grid4 { grid-template-columns: repeat(4, 1fr); }
.pc-grid3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 781px) { .pc-grid4, .pc-grid3 { grid-template-columns: 1fr; } }

/* Flat icon grid (shine "Hvad har du ellers brug for?" style): no cards,
 * left-aligned, a plain coloured icon + bold title + one-line description. */
.pc-svcgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px var(--pc-gap-wide);
	max-width: var(--pc-row-4);   /* = contentSize (1110px), így a rács a többi szakasszal fed */
	margin-inline: auto;
}
/* No subgrid: each body follows its own title directly. A wrapping title makes
 * that card's text start one line lower instead of leaving a gap in the others. */
.pc-svc {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 16px;
	row-gap: 0;                                         /* title→body handled by h4 margin */
	text-align: left;
	align-content: start;
}
.pc-svc__icon {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface-2);   /* vivid yellow box */
	border-radius: var(--pc-radius);
	color: var(--wp--preset--color--ink);
	font-size: 18px;                                    /* slightly smaller icon */
}
.pc-svc__body {
	grid-column: 2;
}
.pc-svc__body h4 { margin: 0 0 12px; }
.pc-svc__body p { margin: 0; }
@media (max-width: 781px) { .pc-svcgrid { grid-template-columns: 1fr 1fr; gap: 40px var(--pc-gap); } }
@media (max-width: 480px) { .pc-svcgrid { grid-template-columns: 1fr; } }

/* Plain (un-badged) card icon — Om os / Godt at vide value cards */
.pc-cardicon { display: block; font-size: 1.7rem; color: var(--wp--preset--color--ink); margin-bottom: 20px; }

/* Address-check bar (Services) */
.pc-addrbar { display: flex; gap: 12px; max-width: 560px; margin: 24px auto 0; }
.pc-addrbar input { flex: 1; border: 1px solid var(--wp--preset--color--border); border-radius: var(--pc-radius-sm); padding: 14px 16px; font-family: inherit; color: var(--wp--preset--color--text); }
.pc-addrbar button { border: 0; cursor: pointer; white-space: nowrap; }
@media (max-width: 600px) { .pc-addrbar { flex-direction: column; } }

/* Price badge inside a card (Services price card) */
.pc-pricebig { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 32px; color: var(--wp--preset--color--ink); line-height: 1.2; }
.pc-steplabel { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--brand); }

/* ============================================================ *
 * DESIGN EVOLUTION: motion, dark stat band, sticky mobile CTA
 * ============================================================ */

/* ---- Subtle scroll-reveal (CSS-only, scroll-driven; graceful fallback) ---- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		main.wp-block-group > * {
			animation: pc-reveal both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}
		@keyframes pc-reveal {
			from { opacity: 0; transform: translateY(22px); }
			to   { opacity: 1; transform: none; }
		}
	}
}

/* ---- Dark stat band: palette anchor + editorial big numbers ---- */
.pc-statband {
	background: var(--wp--preset--color--ink);
	color: #fff;
	border-radius: var(--pc-radius-cta);
	padding: 48px clamp(24px, 5vw, 56px);
}
.pc-statgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.pc-statgrid > div { padding: 4px 12px; }
.pc-statgrid .pc-statico {
	display: block;
	font-size: 28px;
	line-height: 1;
	color: var(--wp--preset--color--surface-2);
	margin: 0 0 14px;
}
.pc-statgrid .pc-statlbl-b {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin: 0 0 6px;
}
.pc-statgrid .pc-statlbl { color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.5; margin: 0; }
.pc-statgrid > div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }
@media (max-width: 781px) {
	.pc-statgrid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
	.pc-statgrid > div + div { border-left: 0; }
}

/* ============================================================ *
 * Få tilbud — multi-step quote wizard
 * ============================================================ */
.pc-wizard { padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); }
.pc-wizard [hidden] { display: none !important; }
/* 4-phase stepper (miakrone-style): numbered circles, connected, light up as you advance */
.pc-stepper {
	display: flex;
	margin-bottom: 28px;
	max-width: 880px;
	margin-inline: auto;
}
.pc-pstep {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
/* connector line to the previous step */
.pc-pstep::before {
	content: "";
	position: absolute;
	top: 16px;                 /* dot vertical centre (dot 32px / 2) */
	right: 50%;
	width: 100%;
	height: 2px;
	z-index: 0;
	/* fills left→right as the previous phase progresses (--pc-fill set by JS) */
	background: linear-gradient(to right,
		var(--wp--preset--color--brand) var(--pc-fill, 0%),
		var(--wp--preset--color--border) var(--pc-fill, 0%));
}
.pc-pstep:first-child::before { display: none; }
.pc-pstep__dot {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.pc-pstep__lbl {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	transition: color .25s ease;
}
/* Warm but quiet (2026-10-12): no solid amber disc — that stays the CTA's. Done = soft
 * peach with a navy check; current = white, navy ring + number, a faint peach halo;
 * the travelled line is amber; upcoming stays grey. */
.pc-pstep.is-done .pc-pstep__dot {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 28%, var(--wp--preset--color--white));
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 28%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--ink);
}
.pc-pstep.is-active .pc-pstep__dot {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
}
.pc-pstep.is-active .pc-pstep__lbl { color: var(--wp--preset--color--ink); }
/* connector fill is driven by --pc-fill (see .pc-pstep::before) so it greens
 * gradually across a phase's sub-steps — no all-or-nothing override here. */
/* completed phases show a check instead of the number */
.pc-pstep.is-done .pc-pstep__dot { font-size: 0; }
.pc-pstep.is-done .pc-pstep__dot::after {
	content: "\f00c"; /* fa-check */
	font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; color: var(--wp--preset--color--ink);
}
@media (max-width: 560px) {
	.pc-pstep__lbl { font-size: 12px; }
	.pc-pstep__dot { width: 28px; height: 28px; }
	.pc-pstep::before { top: 14px; }
}

/* ---- Wizard polish (2026-10-12) ----
 * 1. One card: the white card is the whole main column (step + hint + nav); the nav sits
 *    at its foot instead of floating in its own strip. */
.pc-wizard__main {
	background: var(--wp--preset--color--white);
	border-radius: var(--pc-radius-cta);
	padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 0;
}
.pc-wizard__main > .pc-wstep { background: none; padding: 0; border-radius: 0; }
.pc-wizard__main > .pc-wnav {
	margin: 24px calc(-1 * clamp(20px, 2.4vw, 32px)) 0;
	padding: 14px clamp(20px, 2.4vw, 32px);
	border-radius: 0 0 var(--pc-radius-cta) var(--pc-radius-cta);
	background: rgba(255, 255, 255, 0.94);
}
.pc-wizard__main:has(.pc-wdone:not([hidden])) { padding-bottom: clamp(20px, 2.4vw, 32px); }
/* The address field's big floating shadow (made for the homepage) ran under the nav, whose
 * background cut it off in a hard band. Inside the white wizard card: a short, soft shadow,
 * and the nav is plain white like the card. */
body.pc-plus .pc-wizard .pc-wfield--search input[type="text"] {
	box-shadow: 0 2px 4px color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent),
		0 8px 20px -10px color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
}
body.pc-plus .pc-wizard .pc-wfield--search input[type="text"]:focus {
	box-shadow: 0 2px 6px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent),
		0 10px 24px -10px color-mix(in srgb, var(--wp--preset--color--ink) 26%, transparent);
}
.pc-wizard__main > .pc-wnav { background: var(--wp--preset--color--white); }

/* 2. Disabled "Fortsæt": a calm grey, not a washed-out orange. */
.pc-wnav .pc-wnext:disabled {
	opacity: 1;
	background: #ECE7E1 !important;
	color: #A09890 !important;
	box-shadow: none !important;
}
/* 3. The estimate leads the aside — hierarchy by size, not colour: small grey label, big navy
 *    number, one plain line for the after-fradrag price; a hairline separates it from the list. */
.pc-wsummary .pc-westimate {
	display: flex; flex-direction: column; gap: 4px;
	margin: 0 0 18px; padding: 0 0 18px;
	border: 0; border-bottom: 1px solid var(--wp--preset--color--border);
	background: none;
}
.pc-westimate__lbl { font-size: 13px; color: var(--wp--preset--color--text); }
.pc-westimate__val { font-family: var(--wp--preset--font-family--heading); font-size: 26px; line-height: 1.2; color: var(--wp--preset--color--ink); white-space: nowrap; }
/* After-fradrag price as one green pill (like the "Mest populær" badge): one colour, no mix. */
.pc-westimate__sub {
	display: inline-flex; gap: 7px; align-items: center; align-self: flex-start;
	margin: 6px 0 0; padding: 5px 11px; border-radius: 10px;   /* not a full pill: a long range wraps to two lines */
	background: var(--wp--preset--color--money-tint); color: var(--wp--preset--color--money);
	font-size: 13px; font-weight: 600;
}
.pc-westimate__sub i { font-size: 12px; }
.pc-westimate__sub b { font-weight: 700; white-space: nowrap; }
.pc-wsummary .pc-westimate__note { margin: 16px 0 0; }
/* 8. "Dine valg" as a details element: always open (no toggle) on desktop, a tap-to-open row on phones. */
.pc-wsumbox > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: default; }
.pc-wsumbox > summary::-webkit-details-marker { display: none; }
.pc-wsumbox > summary h3 { margin: 0 0 16px; }
.pc-wsumbox__chev { display: none; }
@media (min-width: 901px) { .pc-wsumbox > summary { pointer-events: none; } }
@media (max-width: 900px) {
	.pc-wsumbox > summary { cursor: pointer; }
	.pc-wsumbox > summary h3 { margin: 0; }
	.pc-wsumbox[open] > summary h3 { margin-bottom: 14px; }
	.pc-wsumbox__chev { display: inline-block; color: var(--wp--preset--color--text); transition: transform .2s; }
	.pc-wsumbox[open] .pc-wsumbox__chev { transform: rotate(180deg); }
	.pc-wizard__aside .pc-westimate { display: none; }   /* the nav carries it on phones */
}
/* 4. Number fields: label + [− value +], no box-in-a-box. Phones: m² full row, rooms/baths side by side. */
.pc-wnums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.pc-wnum__lbl { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--ink); }
/* One filled shape per field — no outline, no box inside a box. */
.pc-wnum__ctl { display: flex; align-items: center; border-radius: 12px; background: var(--wp--preset--color--surface); transition: box-shadow .2s; }   /* the lightest cream — surface-2 read greyish/dark on white */
.pc-wnum__ctl:focus-within { box-shadow: 0 0 0 2px var(--wp--preset--color--ink); }
.pc-wnum__ctl input {
	flex: 1; min-width: 0; width: 100%;
	border: 0 !important; box-shadow: none !important; padding: 12px 4px; background: transparent !important; text-align: center;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; color: var(--wp--preset--color--ink);
	-moz-appearance: textfield;
}
.pc-wnum__ctl input::-webkit-outer-spin-button, .pc-wnum__ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-wnum__ctl input:focus { outline: none; }
.pc-wnum__btn { flex: none; width: 44px; align-self: stretch; border: 0; border-radius: 12px; background: transparent; color: var(--wp--preset--color--ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.pc-wnum__btn:hover { background: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent); }
/* Pets toggle: a plain row, no frame. Estimate note: plain small text, no grey box. */
.pc-wstep .pc-wtoggle { border: 0; padding: 0; margin-top: 22px; }
.pc-wstep .pc-wtoggle + .pc-wtoggle { margin-top: 14px; }
.pc-wstep .pc-westimate-note { background: none; padding: 0; margin-top: 22px; font-size: 13px; }
@media (max-width: 560px) {
	.pc-wnums { grid-template-columns: 1fr 1fr; }
	.pc-wnum--wide { grid-column: 1 / -1; }
}
/* 7. Frequency options are choices: no "go" chevron; a check badge appears on the right only once picked. */
.pc-wopt__radio { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.pc-wopt.is-active .pc-wopt__radio { opacity: 1; transform: none; background: var(--wp--preset--color--ink); }
.pc-wopt.is-active .pc-wopt__radio::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: #fff; }

/* Phones: the address example (street + postcode + city) fits on one line. */
@media (max-width: 560px) { .pc-wfield--search input::placeholder { font-size: 14px; } }

/* Visually hidden, still read by screen readers (the wizard's H1). */
.pc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Why "Fortsæt" is still disabled. */
.pc-whint { display: flex; align-items: center; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #FFF4E2; color: var(--wp--preset--color--ink); font-size: 14px; font-weight: 600; }
.pc-whint::before { content: "\f05a"; flex: none; margin-right: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--wp--preset--color--brand); }
/* Running estimate inside the sticky nav — phones/tablets only (the aside is below there). */
.pc-westmini { display: none; }
@media (max-width: 900px) {
	.pc-wnav { flex-wrap: wrap; }
	.pc-westmini:not([hidden]) {
		display: flex; justify-content: space-between; align-items: baseline;
		flex-basis: 100%;
		padding: 2px 4px 10px;
		border-bottom: 1px solid var(--wp--preset--color--border);
		font-size: 13px; color: var(--wp--preset--color--text);
	}
	.pc-westmini b { font-family: var(--wp--preset--font-family--heading); font-size: 16px; color: var(--wp--preset--color--ink); white-space: nowrap; }
}
/* "Mest populær" pill on the recommended frequency. */
.pc-wbadge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--wp--preset--color--money-tint); color: var(--wp--preset--color--money); font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 700; vertical-align: 2px; }
/* Empty summary → three reassurances. */
.pc-wsummary ul.pc-wtrust li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 0; color: var(--wp--preset--color--text); }
.pc-wtrust i { flex: none; width: 20px; margin-top: 3px; text-align: center; color: var(--wp--preset--color--ink); }
.pc-wtrust b { display: block; color: var(--wp--preset--color--ink); }
/* The page IS the quote flow: no header "Få tilbud" button, no sticky mobile CTA bar. */
body:has(.pc-wizard) .pc-header__cta,
body:has(.pc-wizard) .pc-mobilecta { display: none !important; }
@media (max-width: 781px) { body:has(.pc-wizard) { padding-bottom: 0; } }

/* ---- Stepper: hand-drawn variant (2026-10-12; the earlier circle/segment looks were dropped) ---- */
/* C) Ink: just the four labels; done ones get a small check, the current one the brand's
 *    hand-drawn amber underline, re-drawn left→right each time you move on. */
.pc-stepper--ink { justify-content: center; gap: clamp(18px, 4vw, 44px); max-width: none; margin-bottom: 30px; }
.pc-stepper--ink .pc-pstep { flex: none; flex-direction: row; gap: 6px; }
.pc-stepper--ink .pc-pstep::before { display: none; }
.pc-stepper--ink .pc-pstep__dot { display: none; }
.pc-stepper--ink .pc-pstep__lbl { position: relative; font-family: var(--wp--preset--font-family--heading); font-size: 16px; color: color-mix(in srgb, var(--wp--preset--color--text) 75%, transparent); }
.pc-stepper--ink .pc-pstep.is-done .pc-pstep__lbl { color: var(--wp--preset--color--text); }
.pc-stepper--ink .pc-pstep.is-done .pc-pstep__lbl::before { content: "\f00c"; margin-right: 6px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--wp--preset--color--brand); }
.pc-stepper--ink .pc-pstep.is-active .pc-pstep__lbl { color: var(--wp--preset--color--ink); }
.pc-stepper--ink .pc-pstep.is-active .pc-pstep__lbl::after {
	content: ""; position: absolute; left: -4%; right: -6%; bottom: -.42em; height: .38em;
	background: var(--wp--preset--color--brand);
	-webkit-mask: var(--pc-hl-under) no-repeat center / 100% 100%;
	mask: var(--pc-hl-under) no-repeat center / 100% 100%;
	animation: pc-ink-draw .7s cubic-bezier(.3,.7,.3,1) both;
}
@keyframes pc-ink-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .pc-stepper--ink .pc-pstep.is-active .pc-pstep__lbl::after { animation: none; } }
@media (max-width: 560px) {
	.pc-stepper--ink { gap: 14px; }
	.pc-stepper--ink .pc-pstep__lbl { font-size: 13px; }
	.pc-stepper--ink .pc-pstep.is-done .pc-pstep__lbl::before { margin-right: 4px; font-size: 10px; }
}

.pc-wizard__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--wp--preset--spacing--40); align-items: start; }
@media (max-width: 900px) { .pc-wizard__grid { grid-template-columns: 1fr; } }

.pc-wstep {
	background: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--pc-radius-cta);
	box-shadow: none;
	padding: clamp(20px, 2.4vw, 32px);
}
.pc-wstep .wp-block-heading { font-size: 24px; margin: 0 0 6px; }
.pc-wsub { color: var(--wp--preset--color--text); margin: 0 0 14px; }
.pc-wstep__center { text-align: center; max-width: 560px; margin: 0 auto; padding-block: 4px; }
.pc-wstep__center .wp-block-heading { font-size: 26px; }
.pc-wstep__center .pc-wsub { margin-bottom: 20px; }

.pc-wico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink);
	font-size: 1.25rem; margin: 0 auto 12px;
}
.pc-wico--left { margin: 0 0 12px; }
.pc-wico--ok { background: var(--wp--preset--color--brand); color: #fff; width: 58px; height: 58px; font-size: 1.5rem; }

.pc-wnote { font-size: 14px; color: var(--wp--preset--color--text); margin: 18px 0 0; }
.pc-westimate-note {
	display: flex; gap: 10px; align-items: flex-start;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--text);
	border-radius: var(--pc-radius-sm); padding: 12px 14px; margin-top: 16px; font-size: 13.5px; line-height: 1.45;
}
.pc-westimate-note i { margin-top: 2px; }

/* fields */
.pc-wizard input[type="text"], .pc-wizard input[type="email"], .pc-wizard input[type="tel"],
.pc-wizard input[type="number"], .pc-wizard input[type="date"] {
	width: 100%; box-sizing: border-box; font-family: var(--wp--preset--font-family--body);
	font-size: 16px; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm); padding: 14px 16px;
}
.pc-wizard textarea {
	width: 100%; box-sizing: border-box; font-family: var(--wp--preset--font-family--body);
	font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm); padding: 14px 16px; resize: vertical; min-height: 96px;
}
.pc-wizard input:focus, .pc-wizard textarea:focus { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 1px; border-color: transparent; }
/* Space between the Tidsrum boxes and the optional note's label (matches calendar → Tidsrum). */
.pc-wopts--row + .pc-wlabel__t { margin-top: 24px; }
.pc-wnote-hint { font-size: 13px; color: var(--wp--preset--color--text); margin: 6px 0 0; }
.pc-wfield--search { position: relative; }
.pc-wfield--search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--wp--preset--color--text); }
.pc-wfield--search input[type="text"] { border-radius: 999px; padding: 16px 18px 16px 52px; }
/* DAWA autocomplete dropdown */
.pc-wac {
	position: absolute;
	left: 0; right: 0; top: calc(100% + 6px);
	z-index: 30;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm);
	box-shadow: var(--pc-shadow-2);
	overflow: hidden;
	text-align: left;
	max-height: 280px; overflow-y: auto;
}
.pc-wac__item {
	display: block; width: 100%; text-align: left; cursor: pointer;
	background: transparent; border: 0; border-top: 1px solid var(--wp--preset--color--border);
	padding: 12px 18px;
	font-family: var(--wp--preset--font-family--body); font-size: 15px;
	color: var(--wp--preset--color--ink);
}
.pc-wac__item:first-child { border-top: 0; }
.pc-wac__item:hover, .pc-wac__item.is-active { background: var(--wp--preset--color--money-tint); }
/* Street suggestions open the next step (house numbers) instead of finishing — the
 * chevron says so. Same Font Awesome glyph as the buttons' chevrons. */
.pc-wac__item.is-street { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-wac__item.is-street::after {
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.75em;
	color: var(--wp--preset--color--ink);
	opacity: 0.5;
	flex: 0 0 auto;
}

.pc-wgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .pc-wgrid3 { grid-template-columns: 1fr; } }
.pc-wstat { display: flex; flex-direction: column; gap: 4px; background: var(--wp--preset--color--surface); border-radius: var(--pc-radius-sm); padding: 12px; text-align: center; }
.pc-wstat input { text-align: center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 22px; background: transparent; border: none; padding: 0; }
.pc-wstat input:focus { outline: none; }
.pc-wstat span { font-size: 13px; color: var(--wp--preset--color--text); }

.pc-wtoggle { display: flex; align-items: center; gap: 14px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--pc-radius-sm); padding: 12px 14px; margin-top: 12px; }
.pc-wtoggle b { display: block; }
.pc-wtoggle span { font-size: 14px; color: var(--wp--preset--color--text); }
.pc-wswitch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.pc-wswitch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pc-wswitch__slider { position: absolute; inset: 0; background: var(--wp--preset--color--border); border-radius: 999px; transition: background .2s; }
.pc-wswitch__slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pc-wswitch input:checked + .pc-wswitch__slider { background: var(--wp--preset--color--brand); }
.pc-wswitch input:checked + .pc-wswitch__slider::before { transform: translateX(20px); }

/* option rows */
.pc-wopts { display: flex; flex-direction: column; gap: 10px; }
.pc-wopts--row { flex-direction: row; flex-wrap: wrap; }
.pc-wopt {
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-card); padding: 14px 18px; transition: border-color .2s, background .2s, transform .15s;
	font-family: var(--wp--preset--font-family--body);
}
.pc-wopt:hover { transform: translateY(-2px); }
.pc-wopt.is-active { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-2); }
.pc-wopt__ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.pc-wopt { position: relative; }
.pc-wopt__txt { flex: 1; }
.pc-wopt__txt b { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 16px; color: var(--wp--preset--color--ink); margin-bottom: 2px; }
.pc-wopt__txt small { display: block; font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--text); }
.pc-wopt__chev { color: var(--wp--preset--color--text); font-size: .85rem; }
.pc-wopt__badge {
	position: absolute; top: -11px; left: 20px;
	background: var(--wp--preset--color--brand); color: #fff;
	font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px;
}

.pc-wextras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .pc-wextras { grid-template-columns: 1fr; } }
.pc-wextra {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; text-align: left;
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm); padding: 14px 18px; font-family: var(--wp--preset--font-family--body);
	font-size: 16px; color: var(--wp--preset--color--ink); transition: border-color .2s, background .2s;
}
.pc-wextra span { font-weight: 600; }
/* Extras: a small icon in a soft round tile, like the frequency options. */
.pc-wextra { justify-content: flex-start; }
.pc-wextra__lbl { flex: 1; }
.pc-wextra__ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font-size: 15px; }
.pc-wextra.is-active .pc-wextra__ico { background: var(--wp--preset--color--white); }
.pc-wextra b { color: var(--wp--preset--color--text); font-weight: 700; white-space: nowrap; }
.pc-wextra.is-active { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-2); }
.pc-wextra.is-active b { color: var(--wp--preset--color--ink); }

.pc-wtime { flex: 1; min-width: 130px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm); padding: 14px; font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: 16px; color: var(--wp--preset--color--ink); }
.pc-wtime small { font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 14px; color: var(--wp--preset--color--text); }
.pc-wtime.is-active { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-2); }

/* ---- Få tilbud: waiting-list mode (capacity "full" in the Patri Manager) ---- */
.pc-wfull {
	display: flex; gap: 16px; align-items: flex-start;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 18px 22px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 10%, var(--wp--preset--color--white));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 35%, transparent);
	border-radius: var(--pc-radius);
	color: var(--wp--preset--color--ink);
}
.pc-wfull__ico { font-size: 22px; color: var(--wp--preset--color--brand); line-height: 1.2; }
.pc-wfull b { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 17px; margin-bottom: 4px; }
.pc-wfull p { margin: 0; font-size: 15px; color: var(--wp--preset--color--text); }
.pc-wdays { flex-wrap: wrap; margin-bottom: 18px; }
.pc-wdays .pc-wtime { min-width: 110px; flex: 1 1 110px; }
.pc-wdays .pc-wdays__flex { flex-basis: 100%; }

.pc-wform2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .pc-wform2 { grid-template-columns: 1fr; } }
.pc-wlabel { display: block; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--ink); margin-bottom: 12px; }
.pc-wlabel input { margin-top: 6px; }

/* ---- Få tilbud: month calendar for the free check (replaces <input type="date">) ---- */
.pc-cal {
	max-width: 400px;
	margin: 0 0 22px;
	padding: 14px 16px 12px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-card);
}
.pc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pc-cal__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}
.pc-cal__nav {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	cursor: pointer;
	transition: background-color .15s;
}
.pc-cal__nav:hover:not(:disabled) { background: var(--wp--preset--color--surface-2); }
.pc-cal__nav:disabled { opacity: .25; cursor: default; }
/* First column: ISO week number ("uge"), as Danish calendars show it. */
.pc-cal__dow, .pc-cal__grid { display: grid; grid-template-columns: 32px repeat(7, 1fr); gap: 4px; }
.pc-cal__wk {
	display: flex; align-items: center; justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	opacity: .55;
	border-right: 1px solid var(--wp--preset--color--border);
	margin-right: 10px; /* room between the week numbers and Monday */
}
.pc-cal__dow .pc-cal__wk { text-transform: uppercase; letter-spacing: .03em; font-size: 10px; }
.pc-cal__dow { margin-bottom: 4px; }
.pc-cal__dow span {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	padding: 4px 0;
}
.pc-cal__dow .is-weekend { opacity: .45; }
.pc-cal__day {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.pc-cal__day:hover:not(:disabled):not(.is-selected) { background: var(--wp--preset--color--surface-2); }
.pc-cal__day:disabled { color: var(--wp--preset--color--text); opacity: .3; cursor: default; }
/* Today: a small accent dot under the number (today itself is never bookable). */
.pc-cal__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 6px; left: 50%;
	width: 4px; height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
}
.pc-cal__day.is-selected {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}
.pc-cal__day:focus-visible, .pc-cal__nav:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
@media (max-width: 480px) { .pc-cal { max-width: none; padding: 12px; } .pc-cal__day { font-size: 14px; } }
/* Phone: country-code select (flag + dial code) + separate number field */
.pc-wtel { display: flex; gap: 8px; margin-top: 6px; }
.pc-wtel__cc {
	flex: 0 0 auto;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	padding: 14px 30px 14px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pc-radius-sm);
	background-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23363636' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.pc-wtel__cc:focus { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 1px; border-color: transparent; }
.pc-wtel__num { flex: 1; margin-top: 0 !important; }
.pc-wizard input.is-invalid { border-color: var(--pc-danger); }
.pc-wizard input.is-invalid:focus { outline-color: var(--pc-danger); }
.pc-wlabel__t { display: block; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--ink); margin: 4px 0 8px; }

.pc-wreview { display: grid; gap: 2px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--pc-radius-card); padding: 4px 18px; margin-bottom: 16px; }
.pc-wreview__b { padding: 11px 0; border-top: 1px solid var(--wp--preset--color--border); }
.pc-wreview__b:first-child { border-top: 0; }
.pc-wreview__t { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--wp--preset--color--text); margin-bottom: 4px; }
.pc-wreview__b > div { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--ink); }
.pc-wreview__sub { font-family: var(--wp--preset--font-family--body); font-weight: 400; color: var(--wp--preset--color--text); }

.pc-wconsent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--wp--preset--color--text); }
.pc-wconsent input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }
.pc-wconsent a { color: var(--wp--preset--color--ink); }
/* Flagged when "Få tilbud" is pressed without the tick: amber frame + one short shake. */
.pc-wconsent { padding: 10px 12px; margin-inline: -12px; border: 2px solid transparent; border-radius: 12px; transition: border-color .2s, background .2s; }
.pc-wconsent.is-flagged { border-color: var(--wp--preset--color--brand); background: #FFF4E2; animation: pc-shake .45s ease; }
@keyframes pc-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .pc-wconsent.is-flagged { animation: none; } }
/* Wizard: submit error (a beküldés nem ment át a patri-bridge-en) */
.pc-werror {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--pc-radius-sm, 8px);
	border: 1px solid var(--pc-danger);
	background: var(--pc-danger-bg);
	color: var(--pc-danger);
	font-size: 14px;
	line-height: 1.5;
}


/* Success screen: the aside is gone, so the card centres itself instead of keeping the
 * left grid column; the message gets air and a narrow measure, the way home is a text link. */
.pc-wizard__grid:has(.pc-wdone:not([hidden])) { grid-template-columns: min(100%, 720px); justify-content: center; }
.pc-wdone { text-align: center; max-width: 540px; margin-inline: auto; padding-block: clamp(12px, 2vw, 24px) 4px !important; }
.pc-wdone .pc-wico { margin-bottom: 20px; }
.pc-wdone .wp-block-heading { font-size: 26px; line-height: 1.3; margin: 0 0 14px; }
.pc-wdone .pc-wsub { line-height: 1.6; margin: 0 0 24px; }

/* Nav floats at the bottom of the viewport (over blurred content) when the step
 * is taller than the screen, so Tilbage/Fortsæt are always reachable without
 * scrolling; it rests naturally at the end when the step fits. */
.pc-wnav {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 12px clamp(4px, 1.5vw, 16px);
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 14px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pc-wnav { background: rgba(255, 255, 255, 0.96); }
}
.pc-wback { background: none; border: none; cursor: pointer; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 15px; color: var(--wp--preset--color--text); display: inline-flex; align-items: center; gap: 8px; }
.pc-wback:hover { color: var(--wp--preset--color--ink); }
.pc-wnext { border: none; cursor: pointer; }
.pc-wnav .pc-wnext { margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) { .pc-wnav .pc-wnext { padding-inline: 18px; } .pc-wback { font-size: 14px; } }
.pc-wnext:disabled { opacity: .45; cursor: not-allowed; }

/* summary aside */
.pc-wsummary { position: sticky; top: 96px; background: var(--wp--preset--color--white); border: none; border-radius: var(--pc-radius-cta); box-shadow: none; padding: 24px; }
.pc-wsummary h3 { margin: 0 0 16px; font-size: 18px; }
.pc-wsummary ul { list-style: none; margin: 0; padding: 0; }
.pc-wsummary li { padding: 10px 0; border-top: 1px solid var(--wp--preset--color--border); font-size: 14px; }
.pc-wsummary li:first-child { border-top: 0; }
.pc-wsummary li span { color: var(--wp--preset--color--text); }
.pc-wsummary li b { color: var(--wp--preset--color--ink); }
.pc-wsum-empty { color: var(--wp--preset--color--text); }
.pc-westimate { margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--wp--preset--color--border); }
.pc-westimate__row { display: flex; flex-direction: column; gap: 2px; }
.pc-westimate__row span { color: var(--wp--preset--color--text); font-size: 13px; }
.pc-westimate__row b { font-family: var(--wp--preset--font-family--heading); font-size: 18px; color: var(--wp--preset--color--ink); white-space: nowrap; }
.pc-westimate__row--sub { margin-top: 10px; }
.pc-westimate__row--sub b { font-size: 15px; color: var(--wp--preset--color--ink); }
.pc-westimate__note { font-size: 12px; color: var(--wp--preset--color--text); margin: 10px 0 0; line-height: 1.45; }
@media (max-width: 900px) { .pc-wsummary { position: static; } }

/* CTA boxes (.pc-w1044) carry 64/80px padding inline for the desktop layout; on
 * phones that squeezed the copy into a narrow column. */
@media (max-width: 781px) {
	.pc-w1044 { padding: 40px 24px !important; }
}

/* ---- Sticky mobile CTA bar ---- */
.pc-mobilecta { display: none; }
@media (max-width: 781px) {
	.pc-mobilecta {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 200;
		padding: 10px 14px;
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
	}
	.pc-mobilecta .wp-block-button__link { display: block; text-align: center; }
	.pc-mobilecta .pc-cta-primary { flex: 1; }
	.pc-mobilecta .pc-cta-call {
		display: inline-flex; align-items: center; justify-content: center;
		width: 48px; border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--pc-radius-btn); color: var(--wp--preset--color--ink);
		text-decoration: none; font-size: 1.1rem;
	}
	body { padding-bottom: 74px; }
}

/* Priser page: four promises under the servicefradrag bar (userbrain-pricing style):
 * an outline glyph beside the title + one line. */
.pc-perks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 28px;
	max-width: var(--pc-row-4);
	margin: 72px auto 0;
	padding: 0;
	list-style: none;
}
.pc-perks__item { display: flex; gap: 18px; align-items: flex-start; }
/* 2026-10-12: plain icon — no tile, shadow or tilt; the glyph sits beside the text. */
.pc-perks__icon {
	flex: none;
	display: inline-flex;
	justify-content: center;
	width: 40px;
	padding-top: 0;
	font-size: 2rem;
	line-height: 1;
}
/* Outline glyph, as on the homepage feature icons. */
.pc-perks__icon i {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--ink);
	paint-order: stroke fill;
}
.pc-perks strong {
	display: block;
	margin: 4px 0 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.pc-perks p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--text); }
@media (max-width: 1000px) { .pc-perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pc-perks { grid-template-columns: 1fr; gap: 24px; } }

/* Resultater: same list straight under the section intro (no 72px gap). */
.pc-perks--flush { margin-top: 24px; gap: 40px 56px; }
/* Resultater: the points carry the whole section, so a step larger than on Priser. */
.pc-perks--flush .pc-perks__icon { width: 48px; font-size: 2.5rem; }
.pc-perks--flush strong { font-size: 20px; margin: 6px 0 6px; }
.pc-perks--flush p { font-size: 16px; }

/* ---- Pricing plans (shine-style): equal cards, one featured ---- */
.pc-plans {
	display: grid;
	grid-template-columns: 3fr 2fr;   /* featured plan wider, Ekstra narrower — hierarchy */
	gap: 24px;
	max-width: var(--pc-row-4);
	margin: 40px auto 0;
	align-items: start;
}
.pc-plan {
	position: relative;
	background: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--pc-radius-card);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: transform .22s ease, box-shadow .22s ease;
}
.pc-plan--featured {
	border: none;
	box-shadow: none;
}
/* Regularrengøring box: offset-outline (misregistration) — a dark-green
 * outline copy of the box shifted --pc-offset behind, peeking bottom-right. */
.pc-plan--offset::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--pc-radius-card);
	transform: translate(var(--pc-offset), var(--pc-offset));
	z-index: -1;
	pointer-events: none;
}
.pc-plan:hover { transform: translateY(-4px); }
/* the offset outline (::after) is a child, so it lifts with the box — keep the lift */
.pc-plan__badge {
	position: absolute;
	top: -13px;
	left: 40px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 14px;
	border-radius: 999px;
}
.pc-plan h3 { margin: 0; }
.pc-plan__price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}
.pc-plan__price span { font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 400; color: var(--wp--preset--color--text); }
.pc-plan .pc-eksl { margin: 12px 0 0; }
.pc-plan--featured .pc-eksl { margin-top: 30px; }   /* much more air below the price line */
.pc-plan__cta { width: 100%; text-align: center; }
.pc-plan__cta.is-outline { background: transparent !important; color: var(--pc-outline-ink) !important; border: var(--pc-outline-width) solid var(--pc-outline-ink); }
.pc-plan__cta.is-outline:hover,
.pc-plan__cta.is-outline:focus-visible {
	background: var(--wp--preset--color--surface-2) !important;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink) !important;
}
.pc-plan .pc-list-check { margin-top: 2px; }
@media (max-width: 781px) { .pc-plans { grid-template-columns: 1fr; } }

/* Legal pages (page-legal.html): document-scale headings under the page title. */
.pc-legal .wp-block-post-title { font-size: 40px; }
.pc-legal .wp-block-post-content h2 { font-size: 22px; margin-top: 40px; margin-bottom: 8px; }
.pc-legal .wp-block-post-content h3 { font-size: 17px; margin-top: 24px; margin-bottom: 4px; }
.pc-legal .wp-block-post-content p,
.pc-legal .wp-block-post-content ul { margin-top: 8px; }
/* Company details box on the legal pages. */
.pc-legal .wp-block-post-content p.pc-legal-contact {
	margin-top: 16px;
	padding: 24px 28px;
	background: var(--wp--preset--color--white);
	border-radius: var(--pc-radius-card, 16px);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	line-height: 1.7;
}

/* ==========================================================================
 * Godt at vide 2026-10-14: long texts made scannable — a one-line lead and the
 * full text folded behind "Læs mere".
 * ======================================================================== */
.pc-lead { margin: 0; }

.pc-more { margin-top: 8px; }
.pc-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent);
}
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-more > summary i { font-size: 11px; transition: transform .2s ease; }
.pc-more[open] > summary i { transform: rotate(180deg); }
.pc-more .pc-more__close, .pc-more[open] .pc-more__open { display: none; }
.pc-more[open] .pc-more__close { display: inline; }
.pc-more__body { margin-top: 12px; }
.pc-more__body > p { margin: 0 0 12px; }
.pc-more__body > p:last-child { margin-bottom: 0; }
/* the infolist's own p rule must not squash the lead/summary spacing */
.pc-infolist .pc-inforow .pc-lead { margin-bottom: 0; }


/* Transport og betaling: rows on the beige panel (was 3 narrow columns) */
.pc-infolist--panel { max-width: 900px; margin: 0 auto; }
.pc-infolist--panel .pc-inforow { border-top-color: color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent); }
.pc-inforow__head h3 { display: flex; align-items: center; gap: 12px; }
.pc-inforow__head h3 i { width: 1.6rem; text-align: center; font-size: 1.3rem; }

/* Not-found page (templates/404.html, 2026-10-16). */
.pc-404 {
	padding-block: var(--pc-hero-pad) calc(var(--pc-hero-pad) * 1.2);
	text-align: center;
}
.pc-404__icon {
	display: inline-grid;
	place-items: center;
	width: 120px;
	height: 120px;
	margin-inline: auto;
	border-radius: 34% 40% 36% 42% / 38% 34% 42% 36%;
	background: var(--wp--preset--color--white);
	box-shadow: var(--pc-elev-2);
	transform: rotate(-8deg);
	font-size: 2.8rem;
	color: var(--wp--preset--color--ink);
}
.pc-404__icon i {
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--ink);
	paint-order: stroke fill;
}
.pc-404 h1 { margin-top: var(--wp--preset--spacing--50); }