/*
 * Light hero sections (option px_hero_style = light, the default).
 * A drafting-paper background: blueprint grid, axes with bubbles, an elevation and a small floor plan in fine
 * blue lines (assets/img/hero-arch.svg), the orange as a highlighter. Loaded after site.css and overriding its dark
 * heroes, which stay intact: `wp option update px_hero_style dark` brings them back (git tag heroes-dark-v1).
 */

:root {
	--px-hl-bg: #edf2fc;
	--px-hl-grid: rgb(42 100 219 / .1);
	--px-hl-grid2: rgb(42 100 219 / .16);
	--px-hl-card: rgb(255 255 255 / .82);
	--px-hl-line: #c9d5ec;
}

/* ── Canvas ─────────────────────────────────────────────────────────────── */
.px-hhero, .px-chero, .px-contact, .px-hero--page, .px-hero--404, .px-phero, .px-phead {
	position: relative;
	overflow: hidden;
	color: var(--px-ink) !important;
	border-bottom: 1px solid var(--px-hl-line) !important;
	background:
		repeating-linear-gradient(0deg, var(--px-hl-grid2) 0 1px, transparent 1px 120px),
		repeating-linear-gradient(90deg, var(--px-hl-grid2) 0 1px, transparent 1px 120px),
		repeating-linear-gradient(0deg, var(--px-hl-grid) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, var(--px-hl-grid) 0 1px, transparent 1px 24px),
		linear-gradient(180deg, #d9e4f8, #e8eefa) !important;
	background-position: center top !important;
}
/* the drawing, behind the content on the right */
.px-hhero::before, .px-chero::before, .px-contact::before, .px-hero--page::before, .px-hero--404::before, .px-phero::before, .px-phead::before {
	content: "" !important;
	position: absolute !important;
	inset: auto -40px -24px auto !important;
	width: min(900px, 80vw) !important;
	height: min(620px, 56vw) !important;
	border-radius: 0 !important;
	background: url(../img/hero-arch.svg) right bottom / contain no-repeat !important;
	opacity: .9;
	pointer-events: none;
	z-index: 0;
	display: block !important;
}
/* a soft clearing behind the text, the orange as a light wash */
.px-hhero::after, .px-chero::after, .px-contact::after, .px-hero--page::after, .px-hero--404::after, .px-phero::after, .px-phead::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	background:
		radial-gradient(ellipse 46% 70% at 18% 45%, rgb(232 238 250 / .85), transparent 70%),
		radial-gradient(circle at 92% 8%, rgb(255 216 156 / .55), transparent 26%) !important;
	pointer-events: none;
	z-index: 0;
	display: block !important;
}
.px-hhero > *, .px-chero > *, .px-contact > *, .px-hero--page > *, .px-hero--404 > *, .px-phero > *, .px-phead > * { position: relative; z-index: 1; }
@media (max-width: 899px) {
	.px-hhero::before, .px-chero::before, .px-contact::before, .px-hero--page::before, .px-hero--404::before, .px-phero::before, .px-phead::before { width: 120vw !important; height: 82vw !important; opacity: .45; }
}

/* ── Text ───────────────────────────────────────────────────────────────── */
.px-hhero__title, .px-chero__title, .px-contact__title, .px-hero--page .px-hero__title, .px-hero--404 .px-hero__title, .px-phero__title, .px-phead__title { color: var(--px-ink) !important; }
.px-hhero__title span, .px-contact__title span, .px-chero__title span {
	color: var(--px-deep) !important;
	background: linear-gradient(transparent 60%, var(--px-orange) 60% 90%, transparent 90%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: .06em;
}
.px-hhero__lead, .px-chero__lead, .px-contact__lead, .px-hero--page .px-hero__lead, .px-hero--404 .px-hero__lead, .px-phead__lead { color: #3c4558 !important; }
.px-hhero .px-eyebrow, .px-chero .px-eyebrow, .px-contact .px-eyebrow, .px-hero--page .px-eyebrow, .px-hero--404 .px-eyebrow { color: var(--px-orange-text, #9a5a00) !important; }
.px-hhero__k { color: var(--px-mut); }
.px-chero .px-crumbs, .px-chero .px-crumbs a, .px-contact .px-crumbs, .px-contact .px-crumbs a, .px-hero--page .px-crumbs, .px-hero--page .px-crumbs a, .px-hero--404 .px-crumbs a, .px-phero .px-crumbs, .px-phero .px-crumbs a, .px-phead .px-crumbs, .px-phead .px-crumbs a { color: var(--px-mut) !important; }
.px-chero .px-crumbs li[aria-current], .px-contact .px-crumbs li[aria-current], .px-hero--page .px-crumbs li[aria-current], .px-phero .px-crumbs li[aria-current], .px-phead .px-crumbs li[aria-current] { color: var(--px-ink) !important; }

/* ── Pills, chips, figures ──────────────────────────────────────────────── */
.px-hhero .px-pill { background: var(--px-white); box-shadow: inset 0 0 0 1px var(--px-hl-line); color: var(--px-ink); }
.px-hhero .px-btn--soft, .px-phero .px-btn--soft, .px-chero .px-btn--soft { background: var(--px-white); color: var(--px-ink); box-shadow: inset 0 0 0 1px var(--px-hl-line); }
.px-hhero .px-btn--soft:hover, .px-phero .px-btn--soft:hover, .px-chero .px-btn--soft:hover { color: var(--px-ink); background: var(--px-white); box-shadow: inset 0 0 0 2px var(--px-blue); }
.px-hhero .px-finder a { background: var(--px-hl-card); box-shadow: inset 0 0 0 1px var(--px-hl-line); color: var(--px-ink); backdrop-filter: blur(4px); }
.px-hhero .px-finder a:hover { background: var(--px-white); box-shadow: inset 0 0 0 2px var(--px-blue); }
.px-hhero .px-finder .px-house { color: var(--px-ink); }
.px-hhero .px-finder .px-house path[fill^="var(--px-"] { fill: var(--px-orange); }
.px-hhero .px-finder small { color: var(--px-mut); }
.px-chero__icon { background: var(--px-white); box-shadow: inset 0 0 0 1px var(--px-hl-line); }
.px-chero__icon .px-house { color: var(--px-ink); }
.px-chero__icon .px-house path[fill^="var(--px-"] { fill: var(--px-orange); }
.px-chero__fig li { background: var(--px-white); box-shadow: inset 0 0 0 1px var(--px-hl-line); color: var(--px-mut); }
.px-chero__fig b { color: var(--px-ink); }
.px-chero .px-blogcats { border-top-color: var(--px-hl-line); }
.px-chero .px-blogcats a { background: var(--px-white); box-shadow: inset 0 0 0 1px var(--px-hl-line); color: var(--px-ink); }
.px-chero .px-blogcats a span { color: var(--px-mut); }
.px-chero .px-blogcats a:hover { box-shadow: inset 0 0 0 2px var(--px-blue); }
.px-chero .px-blogcats a[aria-current] { background: var(--px-ink); color: var(--px-white); box-shadow: none; }
.px-chero .px-blogcats a[aria-current] span { color: var(--px-orange); }
.px-chero__search .search-field, .px-hero--404 .search-field { background: var(--px-white) !important; box-shadow: inset 0 0 0 1px var(--px-hl-line); }
.px-chero__search .search-submit { background: var(--px-blue); color: var(--px-white); }
.px-hero__big .px-house { color: var(--px-ink); }
.px-hero__big .px-house path[fill^="var(--px-"] { fill: var(--px-orange); }

/* ── Side panels ────────────────────────────────────────────────────────── */
.px-pop { background: var(--px-hl-card); box-shadow: inset 0 0 0 1px var(--px-hl-line), 0 20px 40px rgb(23 32 51 / .06); }
.px-pop__h { color: var(--px-orange-text, #9a5a00); }
.px-pop a { color: var(--px-ink); }
.px-pop a:hover { background: var(--px-soft); color: var(--px-ink); }
.px-pop__n { color: var(--px-blue); }
.px-pop__pic:empty { background: var(--px-soft); }

/* project page */
.px-phero .px-gallery { box-shadow: 0 24px 50px rgb(23 32 51 / .14); }
.px-phero .px-badge--lg { background: var(--px-ink); color: var(--px-orange); }
.px-phero .px-facts li { background: var(--px-white); box-shadow: inset 0 0 0 1px var(--px-hl-line); color: var(--px-mut); }
.px-phero .px-facts b { color: var(--px-ink); }
.px-phero__zones { background: var(--px-hl-card) !important; box-shadow: inset 0 0 0 1px var(--px-hl-line) !important; }
.px-phero__zones .px-label, .px-phero__zones .px-zleg { color: var(--px-mut); }
.px-phero__zones .px-zleg b { color: var(--px-ink); }
.px-phero__cats a { background: var(--px-white); box-shadow: inset 0 0 0 1px var(--px-hl-line); color: var(--px-ink); }
.px-phero__cats a:hover { background: var(--px-ink); color: var(--px-white); }

/* article */
.px-phead .px-postmeta { color: var(--px-mut); }
.px-phead .px-postmeta a { background: var(--px-ink); color: var(--px-orange); }

/* contact */
.px-contact .px-office { background: var(--px-hl-card); box-shadow: inset 0 0 0 1px var(--px-hl-line); }
.px-contact .px-office__city { color: var(--px-orange-text, #9a5a00) !important; }
.px-contact .px-office__tel { color: var(--px-ink); }
.px-contact .px-office__tel:hover { color: var(--px-blue); }
.px-contact .px-office__addr { color: var(--px-mut) !important; }
.px-contact__form { box-shadow: 0 30px 60px rgb(23 32 51 / .12), inset 0 0 0 1px var(--px-hl-line); }
.px-cnext__h { color: var(--px-mut) !important; }
.px-cnext ol::before { border-left-color: rgb(42 100 219 / .3); }
.px-cnext__t { color: var(--px-ink); }
.px-cnext__t b { color: var(--px-blue); }
.px-cnext__d { color: #4a5468 !important; }
.px-cnext__tip { background: rgb(255 216 156 / .38); box-shadow: inset 0 0 0 1px rgb(214 160 70 / .35); color: var(--px-ink) !important; }
.px-cnext__tip .px-ico { color: var(--px-ink); }
.px-chero .px-btn--ghost, .px-hhero .px-btn--ghost, .px-phero .px-btn--ghost { background: var(--px-white) !important; color: var(--px-ink) !important; box-shadow: inset 0 0 0 1px var(--px-hl-line) !important; }
.px-chero .px-btn--ghost:hover, .px-hhero .px-btn--ghost:hover, .px-phero .px-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--px-blue) !important; background: var(--px-white) !important; }