/*
Theme Name: PixLedger
Theme URI: https://pixledger.com
Description: Child theme of Twenty Twenty-Five for pixledger.com. Design tokens live in theme.json; this file holds only what theme.json cannot express.
Template: twentytwentyfive
Author: PixLedger
Author URI: https://pixledger.com
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: pixledger
*/

/* ==========================================================================
   CONTENTS
   1. Base ............ tokens, motion, focus, text links
   2. Header .......... brand, navigation, mobile overlay, transparent-on-hero
   3. Footer
   4. Components ...... buttons, pills, chips, badges, cards and grids,
                        screenshot frame, checklists, code, FAQ
   5. Sections ........ landing sections, hero (+ pixel grid), feature rows, CTA
   6. Pages ........... normal page title band and long-form text
   7. Blog ............ blog head, post cards, pagination
   8. Single post ..... hero band, reading column, article components
   ========================================================================== */


/* ==========================================================================
   1. Base
   ========================================================================== */

:root {
	--pxl-header-h: 76px;
	--pxl-gutter: clamp(1rem, 4vw, 2rem);
	--pxl-hero-offset: 0px; /* hero sections use this as extra top padding */
}

html { scroll-behavior: smooth; }

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

.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }

/* Visible keyboard focus everywhere. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Links in running text. */
.entry-content a:not(.wp-element-button),
.wp-block-post-content a:not(.wp-element-button) {
	text-underline-offset: 0.18em;
}


/* ==========================================================================
   2. Header  (parts/header.html)
   Two states, driven by body class from inc/body-classes.php:
   - .no-hero  solid header, normal flow
   - .has-hero transparent over the hero, turns solid after ~96px of scroll
   ========================================================================== */

.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.pxl-header {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pxl-header__bar {
	max-width: 1240px;
	min-height: var(--pxl-header-h);
	margin-inline: auto;
	padding-inline: var(--pxl-gutter);
	align-items: center;
}

/* Wordmark with CSS logo mark (used in the footer) */
.pxl-brand { margin: 0; }
.pxl-brand a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.pxl-brand a::before {
	content: "";
	width: 30px;
	height: 30px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='30' height='30' rx='8' fill='%237C5AC2'/%3E%3Crect x='7' y='8' width='16' height='3' rx='1.5' fill='%23fff'/%3E%3Crect x='7' y='13.5' width='11' height='3' rx='1.5' fill='%23fff'/%3E%3Crect x='7' y='19' width='14' height='3' rx='1.5' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Header brand: site logo + name + tagline */
.pxl-header__brand {
	flex: none;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.75rem;
}
.pxl-header .pxl-header__brand { margin-inline-end: clamp(2rem, 5vw, 4.5rem) !important; }
.pxl-header__brand .wp-block-site-logo { margin: 0; flex: none; line-height: 0; }
.pxl-header__brand .wp-block-site-logo a { display: block; line-height: 0; }

.pxl-header__text { align-items: flex-start; gap: 0.125rem; }
.pxl-header__text > * { margin: 0; }

.pxl-header__name,
.pxl-header__name a {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.pxl-header__tagline {
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* Navigation */
.pxl-nav { flex: 1; margin-inline-start: clamp(1.5rem, 4vw, 3.5rem); }
.pxl-nav .wp-block-navigation__container { width: 100%; align-items: center; }
.pxl-nav .wp-block-navigation-item__content {
	font-weight: 500;
	text-decoration: none;
}
.pxl-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--brand); }
.pxl-nav [aria-current="page"] > .wp-block-navigation-item__content,
.pxl-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand);
}

/* CTAs inside the nav */
.pxl-nav .pxl-nav-cta--ghost { margin-left: auto; }
.pxl-nav .pxl-nav-cta--ghost > .wp-block-navigation-item__content {
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}
.pxl-nav .pxl-nav-cta--ghost > .wp-block-navigation-item__content::after {
	content: "";
	width: 0.75em;
	height: 0.75em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3h6v6M9 3 3 9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3h6v6M9 3 3 9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pxl-nav .pxl-nav-cta--primary > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	padding: 0.6875rem 1.25rem;
	border-radius: 10px;
	font-weight: 600;
	transition: background-color 0.15s;
}
.pxl-nav .pxl-nav-cta--primary > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
}

/* Hamburger: comfortable touch target */
.pxl-nav .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
	margin-inline-start: auto;
}

/* Mobile overlay */
.pxl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--pxl-header-h) / 2) var(--pxl-gutter) 2rem;
}
.pxl-nav .is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	gap: 0;
}
.pxl-nav .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pxl-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 1rem 0;
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.pxl-nav .is-menu-open .pxl-nav-cta {
	border-bottom: 0;
	margin: 1rem 0 0;
}
.pxl-nav .is-menu-open .pxl-nav-cta--primary > .wp-block-navigation-item__content,
.pxl-nav .is-menu-open .pxl-nav-cta--ghost > .wp-block-navigation-item__content {
	justify-content: center;
	text-align: center;
	font-size: 1.0625rem;
	padding: 0.875rem 1.25rem;
	border-radius: 10px;
}
.pxl-nav .is-menu-open .pxl-nav-cta--ghost > .wp-block-navigation-item__content {
	border: 1px solid var(--wp--preset--color--line);
}

/* Tablet: core switches to the full menu at 600px, which is too tight with 6 items.
   Keep the hamburger until 960px. */
@media (min-width: 600px) and (max-width: 959px) {
	.pxl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.pxl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* 960-1099px: the full menu is tight, so drop the tagline and tighten the gaps. */
@media (max-width: 1099px) {
	.pxl-header__tagline { display: none; }
}
@media (min-width: 960px) and (max-width: 1099px) {
	.pxl-nav.pxl-nav .wp-block-navigation__container { gap: 1.25rem; }
}
/* Hamburger layout: it pushes itself right, so no extra left margin. */
@media (max-width: 959px) {
	.pxl-nav { margin-inline-start: 0; }
}
@media (max-width: 479px) {
	.pxl-header__name,
	.pxl-header__name a { font-size: 1.125rem; }
	.pxl-header__brand { gap: 0.625rem; }
}

/* Hero pages: transparent header that turns solid on scroll.
   Needs scroll-driven animations; without them the solid sticky header stays. */
@supports (animation-timeline: scroll()) {
	:root { --pxl-hero-offset: var(--pxl-header-h); }

	.has-hero .wp-site-blocks > header { margin-bottom: calc(-1 * var(--pxl-header-h)); }

	.has-hero .pxl-header {
		background: transparent;
		border-bottom-color: transparent;
		animation: pxl-header-solid linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 96px;
	}

	@keyframes pxl-header-solid {
		to {
			background-color: var(--wp--preset--color--white);
			border-bottom-color: var(--wp--preset--color--line);
			box-shadow: var(--wp--preset--shadow--header);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.has-hero .pxl-header {
			animation: none;
			background: var(--wp--preset--color--white);
			border-bottom-color: var(--wp--preset--color--line);
		}
	}
}


/* ==========================================================================
   3. Footer  (parts/footer.html)
   ========================================================================== */

.pxl-footer {
	padding: 4.5rem var(--pxl-gutter) 2.25rem;
}
.pxl-footer__inner {
	max-width: 1100px;
	margin-inline: auto;
}
.pxl-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 3rem;
}
.pxl-footer__grid > * { margin: 0; }

.pxl-footer .pxl-brand a { color: var(--wp--preset--color--white); font-size: 1.3125rem; font-weight: 800; }
.pxl-footer__tagline {
	max-width: 300px;
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark-text);
}
.pxl-footer__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}
.pxl-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--small);
}
.pxl-footer__links a {
	color: var(--wp--preset--color--dark-text);
	text-decoration: none;
}
.pxl-footer__links a:hover { color: var(--wp--preset--color--white); text-decoration: underline; }

.pxl-footer__bar {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--dark-line);
	gap: 0.5rem 1.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--dark-text);
}
.pxl-footer__bar p { margin: 0; }

/* Footer focus ring needs to be visible on dark. */
.pxl-footer :where(a):focus-visible { outline-color: var(--wp--preset--color--white); }

@media (max-width: 781px) {
	.pxl-footer { padding-top: 3rem; }
	.pxl-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.pxl-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.pxl-footer__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   4. Components  (reused on every page)
   ========================================================================== */

/* ---- Text helpers ---- */
.pxl-kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}
.pxl-lead { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.pxl-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.pxl-mono {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

/* ---- Buttons on dark / brand backgrounds ---- */
.pxl-btn--white .wp-block-button__link,
.pxl-article-cta .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-deep);
}
.pxl-btn--white .wp-block-button__link:hover,
.pxl-article-cta .wp-block-button__link:hover { background: var(--wp--preset--color--tint); }
.pxl-btn--ghost-white .wp-block-button__link { background: transparent; color: var(--wp--preset--color--white); border: 1px solid rgba(255, 255, 255, 0.5); }
.pxl-btn--ghost-white .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Pill and chips ---- */
.pxl-pill {
	display: inline-block;
	margin: 0 auto;
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}
.pxl-chips { margin-block-start: 1rem; gap: 0.625rem; }
.pxl-chip {
	margin: 0;
	padding: 0.4375rem 0.875rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--slate);
}

/* ---- Status badges (same colours as the plugin's Event Log) ---- */
.pxl-badges { margin-block-start: 2.5rem; gap: 0.5rem; }
.pxl-badge {
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}
.pxl-badge--success { background: var(--wp--preset--color--success-bg); color: var(--wp--preset--color--success); }
.pxl-badge--error   { background: var(--wp--preset--color--error-bg);   color: var(--wp--preset--color--error); }
.pxl-badge--warning { background: var(--wp--preset--color--warning-bg); color: var(--wp--preset--color--warning); }
.pxl-badge--neutral { background: var(--wp--preset--color--neutral-bg); color: var(--wp--preset--color--neutral); }

/* ---- Cards and grids ---- */
.pxl-grid { display: grid; gap: 1.25rem; }
.pxl-grid > * { margin: 0; }
.pxl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pxl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pxl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 959px) {
	.pxl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.pxl-grid--2,
	.pxl-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.pxl-grid--4 { grid-template-columns: 1fr; }
}

.pxl-card {
	padding: 1.75rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
}
.pxl-card > * { margin-block: 0; }
.pxl-card > * + * { margin-block-start: 0.625rem; }
.pxl-card :where(h3) { font-size: var(--wp--preset--font-size--medium); letter-spacing: -0.01em; }
.pxl-card--dark { background: transparent; border-color: var(--wp--preset--color--dark-line); }
.pxl-card--dark p { font-size: var(--wp--preset--font-size--small); }

/* Code samples inside cards */
.pxl-card .wp-block-code { margin-block-start: 1rem; }
.pxl-card .wp-block-code code { font-size: var(--wp--preset--font-size--x-small); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Screenshot frame ---- */
.pxl-shot {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--frame);
	background: var(--wp--preset--color--tint);
}
.pxl-shot img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 50% 50%;
	transition: transform 1.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
/* Hover: small zoom plus a slow drift. Mouse devices only. */
@media (hover: hover) {
	.pxl-shot img { will-change: transform; }
	.pxl-shot:hover img { transform: scale(1.07) translate(-1.5%, -1%); }
}

/* Hero screenshot: browser-window frame */
.pxl-shot--hero {
	position: relative;
	max-width: 1080px;
	margin: clamp(2.5rem, 6vw, 4rem) auto 0;
	padding-top: 2.25rem;
	background: #fff;
	border-radius: 14px;
	border-color: rgba(91, 63, 158, 0.18);
	box-shadow: var(--wp--preset--shadow--frame), 0 0 0 6px rgba(124, 90, 194, 0.06);
}
.pxl-shot--hero::before {
	content: "yourstore.com / wp-admin / PixLedger / Event Log";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	height: 2.25rem;
	padding-left: 5.25rem;
	display: flex;
	align-items: center;
	font: 500 0.6875rem/1 var(--wp--preset--font-family--plex-mono);
	color: var(--wp--preset--color--muted);
	background:
		radial-gradient(circle at 18px 50%, #FF5F57 5px, transparent 5.5px),
		radial-gradient(circle at 34px 50%, #FEBC2E 5px, transparent 5.5px),
		radial-gradient(circle at 50px 50%, #28C840 5px, transparent 5.5px),
		#F4F1FA;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pxl-shot--hero img { object-position: top left; }

/* ---- Checklist ---- */
.pxl-checks { list-style: none; padding: 0; }
.pxl-checks li { position: relative; padding-inline-start: 1.75rem; }
.pxl-checks li + li { margin-top: 0.5rem; }
.pxl-checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.3em;
	width: 1.0625rem;
	height: 1.0625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%237C5AC2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- FAQ (core Details block; add .pxl-faq to the wrapping group) ---- */
.wp-block-details {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
}
.wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	padding: 1.25rem 1.5rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
	content: "+";
	float: right;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--brand);
}
.wp-block-details[open] > summary::after { content: "\2212"; }
.wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 1.5rem 1.25rem;
	color: var(--wp--preset--color--muted);
}
/* Constrained layout centres children; keep the list full width. */
.pxl-faq { display: block; }
.pxl-faq > .wp-block-details { width: 100%; margin-inline: 0; }
.pxl-faq > .wp-block-details + .wp-block-details { margin-block-start: 0.75rem; }


/* ==========================================================================
   5. Sections  (home, Features, Agencies, Support, Pro)
   Markup is core blocks + these classes.
   ========================================================================== */

.pxl-section { padding: clamp(3.5rem, 8vw, 6rem) var(--pxl-gutter); }
.pxl-section--soft  { background: var(--wp--preset--color--soft); }
.pxl-section--dark  { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--dark-text); }
.pxl-section--dark :where(h2, h3) { color: var(--wp--preset--color--white); }
.pxl-section--dark .pxl-kicker { color: #B9A2EA; }
.pxl-section--dark .pxl-lead { color: var(--wp--preset--color--dark-text); }
.pxl-section--brand { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--white); }
.pxl-section--brand :where(h2) { color: var(--wp--preset--color--white); }
.pxl-section--brand .pxl-lead { color: rgba(255, 255, 255, 0.85); }
.pxl-section--brand :where(a):focus-visible { outline-color: var(--wp--preset--color--white); }

/* Section heading block */
.pxl-head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.pxl-head > * { margin-block: 0; }
.pxl-head > * + * { margin-block-start: 1rem; }

/* ---- Hero ---- */
.pxl-hero {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(60% 55% at 50% 0%, var(--wp--preset--color--tint) 0%, transparent 70%),
		var(--wp--preset--color--hero);
	padding-top: calc(var(--pxl-hero-offset) + clamp(1.5rem, 4vw, 3rem));
	padding-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.pxl-hero--page { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pxl-hero__title {
	max-width: 20ch;
	margin-inline: auto;
	margin-block: 1rem 0;
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.pxl-hero .pxl-lead { max-width: 455px; margin-inline: auto; margin-block-start: 1rem; }
.pxl-hero__actions { margin-block-start: 1.5rem; }
.pxl-hero .pxl-note { margin-block-start: 1rem; }

/* Faint pixel grid that fades out */
.pxl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(124, 90, 194, 0.10) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(124, 90, 194, 0.10) 1px, transparent 1px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(75% 85% at 50% 30%, #000 0%, transparent 75%);
	mask-image: radial-gradient(75% 85% at 50% 30%, #000 0%, transparent 75%);
}

/* Pixel grid effect (pairs with assets/js/pixel-grid.js) */
.pxl-grid-fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	/* same fade as the grid lines */
	-webkit-mask-image: radial-gradient(65% 75% at 50% 30%, #000 0%, transparent 70%);
	mask-image: radial-gradient(65% 75% at 50% 30%, #000 0%, transparent 70%);
}
.pxl-grid-fx i {
	position: absolute;
	width: 15px;   /* grid size minus the 1px line */
	height: 15px;
	margin: 1px 0 0 1px;
	background: var(--wp--preset--color--brand);
	border-radius: 2px;
	box-shadow: 0 0 14px rgba(124, 90, 194, 0.35);
	opacity: 0;
	animation: pxl-pixel 2.4s ease-in-out forwards;
}
@keyframes pxl-pixel {
	0%   { opacity: 0; }
	25%  { opacity: 0.8; }    /* 1 = full #7C5AC2 */
	100% { opacity: 0; }
}

.pxl-aside { max-width: 720px; margin: 2rem auto 0; }
.pxl-aside p { margin: 0; }

/* ---- Trust strip ---- */
.pxl-strip { padding-block: 2rem; border-bottom: 1px solid var(--wp--preset--color--line); text-align: center; }

/* ---- Feature rows ---- */
.pxl-feature { align-items: center; gap: clamp(2rem, 6vw, 5rem); margin-block: 0 clamp(3rem, 7vw, 5.5rem); }
.pxl-feature:last-child { margin-bottom: 0; }
.pxl-feature h3 { margin-block: 0.5rem 0.75rem; font-size: var(--wp--preset--font-size--x-large); letter-spacing: -0.02em; }
.pxl-feature .wp-block-column > * { margin-block: 0; }
.pxl-feature .wp-block-column > * + * { margin-block-start: 1rem; }
@media (min-width: 782px) {
	.pxl-feature--flip { flex-direction: row-reverse; }
}

/* ---- Final CTA ---- */
.pxl-cta { text-align: center; }
.pxl-cta .pxl-lead { margin-block-start: 0.75rem; }
.pxl-cta .wp-block-buttons { margin-block-start: 2rem; }


/* ==========================================================================
   6. Pages  (templates/page.html)
   Title band + readable content column. Hero pages skip this.
   ========================================================================== */

.pxl-page-head {
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--pxl-gutter) clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pxl-page-head > .pxl-lead { max-width: 760px; margin: 0.75rem auto 0; }
.pxl-page-title {
	max-width: 760px;
	margin-inline: auto;
	margin-block: 0;
}

.pxl-page-body {
	padding: clamp(2rem, 5vw, 3.5rem) var(--pxl-gutter) clamp(3rem, 8vw, 5.5rem);
}

/* Long-form text (Impressum, Datenschutz, Support). */
.pxl-page-body .wp-block-post-content > :where(h2, h3) { margin-block: 2.25rem 0.75rem; }
.pxl-page-body .wp-block-post-content > :where(p, ul, ol) { margin-block: 0 1rem; }
.pxl-page-body .wp-block-post-content > :where(ul, ol) { padding-inline-start: 1.25rem; }
.pxl-page-body .wp-block-post-content > :where(ul, ol) li + li { margin-top: 0.375rem; }
.pxl-page-body .wp-block-post-content > :where(h2, h3):first-child { margin-top: 0; }


/* ==========================================================================
   7. Blog  (blog page with Query Loop, archive)
   ========================================================================== */

.pxl-blog-head .pxl-page-title,
.pxl-blog-head .pxl-lead { text-align: left; }

.pxl-blog-query { max-width: 1200px; margin-inline: auto; }
.pxl-blog-query .wp-block-post-template { gap: 1.5rem; padding: 0; list-style: none; }

/* Post card */
.pxl-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	transition: box-shadow 0.15s, border-color 0.15s;
}
.pxl-post-card:hover { border-color: var(--wp--preset--color--tint); box-shadow: var(--wp--preset--shadow--card); }
.pxl-post-card .wp-block-post-featured-image { margin: 0; }
.pxl-post-card .wp-block-post-featured-image img { display: block; width: 100%; background: var(--wp--preset--color--tint); }
.pxl-post-card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.pxl-post-card__body > * { margin: 0; }
.pxl-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); letter-spacing: -0.01em; line-height: 1.25; }
.pxl-post-card .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.pxl-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--brand); }
.pxl-post-card .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); flex: 1; }
.pxl-post-card .wp-block-post-excerpt__excerpt { margin: 0; }

.pxl-post-card__cat,
.pxl-post-card__cat a {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.pxl-post-card__date { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

/* Pagination */
.wp-block-query-pagination { margin-top: 3rem; gap: 0.5rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wp-block-query-pagination a:hover { background: var(--wp--preset--color--tint); }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--white); }


/* ==========================================================================
   8. Single post  (templates/single.html)
   One shared column width (--pxl-article-w) for hero, text, images, tables.
   ========================================================================== */

.single-post { --pxl-article-w: 820px; }

/* ---- 8.1 Hero band ---- */
.pxl-post-hero {
	position: relative;
	overflow: hidden;
	margin-block-start: 0 !important;
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(45% 90% at 92% 10%, rgba(124, 90, 194, .30), transparent 65%),
		radial-gradient(40% 80% at 0% 100%, rgba(124, 90, 194, .14), transparent 65%),
		linear-gradient(180deg, #F4EFFC 0%, var(--wp--preset--color--tint) 100%);
}
/* dot pattern, strongest at the top right */
.pxl-post-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(91, 63, 158, .35) 1.3px, transparent 1.5px);
	background-size: 20px 20px;
	-webkit-mask-image: radial-gradient(70% 120% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(70% 120% at 100% 0%, #000 0%, transparent 70%);
	pointer-events: none;
}
/* thin brand line at the bottom edge */
.pxl-post-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand), transparent 70%);
}

.pxl-post-hero__inner {
	position: relative;
	max-width: var(--pxl-article-w) !important;
	margin-inline: auto !important;
}
/* children align left inside the column (constrained layout would centre them) */
.pxl-post-hero__inner > * { max-width: none !important; margin-inline: 0 !important; }

.pxl-post-hero__top { gap: 1rem !important; margin-bottom: 1.5rem; }
.pxl-post-hero__top > * { margin-block: 0; }
.pxl-post-hero__back a {
	color: var(--wp--preset--color--muted);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}
.pxl-post-hero__back a:hover { color: var(--wp--preset--color--brand-dark); }

/* category pill */
.pxl-post-hero__cat a {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--brand-dark);
	font-size: .8125rem;
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

.pxl-post-hero h1.wp-block-post-title {
	margin-block: 0 1.5rem;
	text-align: left;
	font-size: clamp(2.125rem, 5vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.pxl-post-hero__meta {
	gap: .6rem !important;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
}
.pxl-post-hero__meta p { margin: 0; }
.pxl-post-hero__meta .wp-block-post-date { font-weight: 600; color: var(--wp--preset--color--ink); }

/* body starts clearly below the hero */
.pxl-post-hero + .wp-block-group {
	position: relative;
	z-index: 1;
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ---- 8.2 Reading column ---- */
.single-post .wp-block-post-content {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--slate);
}
/* every block uses the same width */
.single-post .wp-block-post-content > * { max-width: var(--pxl-article-w) !important; }

.single-post .wp-block-post-content > :where(p, ul, ol) { margin-block: 0 1.25rem; }
.single-post .wp-block-post-content > p:first-of-type {
	font-size: 1.3125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
.single-post .wp-block-post-content strong { color: var(--wp--preset--color--ink); font-weight: 650; }

/* Headings */
.single-post .wp-block-post-content > h2 {
	margin-block: clamp(2.75rem, 6vw, 4rem) 1rem;
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	scroll-margin-top: calc(var(--pxl-header-h, 76px) + 1.5rem);
}
.single-post .wp-block-post-content > h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 4px;
	margin-bottom: 1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--brand);
}
.single-post .wp-block-post-content > h2 + p { margin-top: 0; }

/* Lists */
.single-post .wp-block-post-content > :where(ul, ol) { padding-inline-start: 1.25rem; }
.single-post .wp-block-post-content li { padding-inline-start: 0.25rem; }
.single-post .wp-block-post-content li + li { margin-top: 0.625rem; }
.single-post .wp-block-post-content li::marker { color: var(--wp--preset--color--brand); font-weight: 700; }

/* Images: framed */
.single-post .wp-block-post-content > .wp-block-image { margin-block: clamp(2rem, 5vw, 3rem); }
.single-post .wp-block-post-content > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}

/* FAQ spacing inside articles */
.single-post .wp-block-post-content > .wp-block-details { margin-block: 0 0.75rem; }

/* ---- 8.3 Callouts: key takeaways, rule of thumb, table of contents ---- */
.pxl-callout,
.pxl-toc {
	margin-block: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--soft);
	font-size: 1rem;
	line-height: 1.65;
}
.pxl-callout > *, .pxl-toc > * { margin-block: 0; }
.pxl-callout > * + *, .pxl-toc > * + * { margin-top: 0.75rem; }
.pxl-callout__label {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-dark);
}
.pxl-callout--key {
	background: var(--wp--preset--color--tint);
	border-color: transparent;
	border-left: 4px solid var(--wp--preset--color--brand);
}
.pxl-callout--key ul { padding-inline-start: 1.1rem; margin: 0; }
.pxl-callout--rule {
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--brand);
}

.pxl-toc ol { margin: 0; padding-inline-start: 1.25rem; columns: 2; column-gap: 2rem; }
.pxl-toc li { break-inside: avoid; margin-top: 0.375rem; }
.pxl-toc a { color: var(--wp--preset--color--ink); text-decoration: none; }
.pxl-toc a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
@media (max-width: 640px) { .pxl-toc ol { columns: 1; } }

/* ---- 8.4 Comparison table ---- */
.single-post .wp-block-post-content > .pxl-compare {
	margin-block: clamp(1.75rem, 4vw, 2.5rem);
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}
.pxl-compare table { width: 100%; min-width: 34rem; margin: 0; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.pxl-compare th, .pxl-compare td { padding: 0.875rem 1.125rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.pxl-compare thead th {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 0;
}
.pxl-compare tbody tr:nth-child(even) td { background: var(--wp--preset--color--soft); }
.pxl-compare tbody tr:last-child td { border-bottom: 0; }
.pxl-compare tbody td:first-child { width: 28%; color: var(--wp--preset--color--ink); }

/* ---- 8.5 Two-up cards: what it fixes / what it doesn't ---- */
.single-post .wp-block-post-content > .pxl-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin-block: 2rem;
}
@media (max-width: 720px) { .single-post .wp-block-post-content > .pxl-split { grid-template-columns: 1fr; } }
.pxl-split__card {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-top-width: 4px;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	font-size: 1rem;
	line-height: 1.65;
}
.pxl-split__card > * { margin-block: 0; }
.pxl-split__card > * + * { margin-top: 0.75rem; }
.pxl-split__card h3 { font-size: var(--wp--preset--font-size--large); letter-spacing: -0.02em; }
.pxl-split__card--good { border-top-color: var(--wp--preset--color--success); }
.pxl-split__card--good h3 { color: var(--wp--preset--color--success); }
.pxl-split__card--bad  { border-top-color: var(--wp--preset--color--error); }
.pxl-split__card--bad h3 { color: var(--wp--preset--color--error); }

/* ---- 8.6 Pro tip (quote block) ---- */
.single-post .wp-block-post-content > .pxl-protip {
	margin-block: 2.5rem;
	padding: 1.5rem 1.75rem;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0;
	background: var(--wp--preset--color--tint);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}
.pxl-protip p { margin: 0; }

/* ---- 8.7 Closing call-to-action ---- */
.single-post .wp-block-post-content > .pxl-article-cta {
	margin-block: clamp(2.5rem, 6vw, 3.5rem) 0;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--dark-text);
}
.pxl-article-cta p { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--dark-text); }
.pxl-article-cta strong { color: var(--wp--preset--color--white); }