/* =========================================================================
 * UI depth (2026-10-14), site-wide. Enqueued in functions.php ("patri-depth").
 * Tried on the front page first; the orbs, scroll motion and tinted bands were
 * dropped after that review.
 *
 *   1. One elevation scale (0 page · 1 resting card · 2 raised / hover · 3 floating),
 *      one shadow recipe tinted from the ink colour, no sideways offset.
 *   2. Overlap: a row of trust cards on the home hero's bottom edge, and small cards
 *      on the corner of a photo (.pc-float-wrap + .pc-float--quote / --corner).
 *   3. Tonal band: the postcode check sits on a slightly deeper rounded panel.
 *   4. Press depth: buttons rise on hover and sink when pressed; cards lift alike.
 * ========================================================================= */

body {
	--pc-ink-rgb: 33, 57, 98;   /* = theme ink #213962 */
	--pc-elev-1:
		0 1px 2px rgba(var(--pc-ink-rgb), 0.05),
		0 8px 24px -12px rgba(var(--pc-ink-rgb), 0.16);
	--pc-elev-2:
		0 2px 4px rgba(var(--pc-ink-rgb), 0.06),
		0 18px 40px -16px rgba(var(--pc-ink-rgb), 0.24);
	--pc-elev-3:
		0 4px 10px rgba(var(--pc-ink-rgb), 0.07),
		0 28px 60px -20px rgba(var(--pc-ink-rgb), 0.32);
	--pc-band: color-mix(in srgb, var(--wp--preset--color--border) 55%, var(--pcp-page, #FDF9F7));
	/* every existing shadow on the page maps onto the scale */
	--pcp-shadow: var(--pc-elev-1);
	--pcp-shadow-hover: var(--pc-elev-2);
	--pc-shadow-1: var(--pc-elev-2);
	--pc-shadow-2: var(--pc-elev-1);
	--pc-shadow-3: var(--pc-elev-1);
}

/* ---- 2. Overlap: floating cards ---- */
.pc-float {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	box-shadow: var(--pc-elev-3);
	color: var(--wp--preset--color--ink);
	z-index: 3;
}
.pc-float__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 22%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--ink);
	font-size: 17px;
}
.pc-float__icon.is-money { background: var(--wp--preset--color--money-tint); color: var(--wp--preset--color--money); }
.pc-float__txt { display: flex; flex-direction: column; line-height: 1.3; }
.pc-float__txt strong { font-family: var(--wp--preset--font-family--heading); font-size: 15px; }
.pc-float__txt small { font-size: 13px; color: var(--wp--preset--color--text); }

body.home .pc-hero {
	overflow: visible;
	margin-bottom: 56px;
	isolation: isolate;
}
/* a row of trust cards straddling the hero's bottom edge */
.pc-float-row {
	position: absolute;
	left: clamp(20px, 4vw, 56px);
	right: clamp(20px, 4vw, 56px);
	bottom: -30px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	z-index: 3;
	pointer-events: none;
}
.pc-float-row > .pc-float { pointer-events: auto; }
@media (max-width: 600px) {
	.pc-float-row { gap: 10px; bottom: -64px; }
	.pc-float-row > .pc-float { flex: 1 1 100%; }
	body.home .pc-hero { margin-bottom: 92px; }
}

/* The hero is a "constrained" group: WordPress gives its children a max width and
 * auto margins, which would shrink the absolute card row — undo that. */
body.home .pc-hero > .pc-float-row { max-width: none !important; margin: 0 !important; }

/* the quote card over Patricia's portrait */
.pc-float-wrap { position: relative; }
.pc-float--quote {
	position: absolute;
	left: -36px;
	bottom: 32px;
	max-width: 260px;
	margin: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 18px 20px;
}
.pc-float--quote blockquote {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}
.pc-float--quote figcaption { font-size: 13px; color: var(--wp--preset--color--text); }
/* quote on the photo's bottom-right corner, away from the text column (Om os) */
.pc-float--quote.is-right { left: auto; right: -24px; }
@media (max-width: 1180px) { .pc-float--quote.is-right { right: 16px; } }

/* a small card on a photo's corner — towards the text column */
.pc-float--corner { position: absolute; left: -28px; bottom: 32px; margin: 0; }
.pc-float--corner.is-right { left: auto; right: -28px; }
@media (max-width: 781px) {
	.pc-float--quote,
	.pc-float--corner,
	.pc-float--corner.is-right { left: 12px; right: auto; bottom: -24px; }
	.pc-float--quote.is-right { left: auto; right: 12px; }
	.pc-float-wrap { margin-bottom: 28px; }
}

/* Få tilbud: the two outer white boxes (step card + aside) rest on level 1 like every
 * other card; the tiles, fields and switches inside stay flat. */
body .pc-wizard__main,
body .pc-wsummary { box-shadow: var(--pc-elev-1); }

/* ---- 3. Tonal bands (outrank plus.css, which flattens section fills) ---- */
html body.pc-plus main section.pc-band.pc-band.pc-band.has-background:not(.pc-card) { background-color: var(--pc-band) !important; }
/* inset rounded panels (like .pc-block), not edge-to-edge stripes */
body main section.pc-band {
	max-width: calc(var(--wp--style--global--wide-size, 1320px) + 0px);
	margin-inline: max(clamp(12px, 3vw, 40px), calc((100% - var(--wp--style--global--wide-size, 1320px)) / 2)) !important;
	border-radius: 32px;
}
body main section.pc-band + section.pc-band { margin-top: 24px !important; }
@media (max-width: 600px) { body main section.pc-band { border-radius: 20px; } }

/* ---- 4. Press depth ---- */
body .wp-element-button:not(.pc-textlink .wp-element-button) {
	transition: translate .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
body .wp-element-button:not(.pc-textlink .wp-element-button):hover { translate: 0 -1px; box-shadow: var(--pc-elev-1); }
body .wp-element-button:not(.pc-textlink .wp-element-button):active { translate: 0 1px; box-shadow: none; transition-duration: .05s; }
body .pc-testi { transition: translate .25s ease, box-shadow .25s ease; }
body .pc-testi:hover { translate: 0 -3px; box-shadow: var(--pc-elev-2); }