/* EvenOddLab theme layer. Design tokens come from theme.json presets; these
   aliases keep the hand-written CSS readable. */
/* Declared on body, not :root: WordPress 6.4/6.5 print preset variables on
   body (6.6+ uses :root), and a :root alias would resolve to nothing there. */
body {
	--eol-primary: var(--wp--preset--color--primary, #2563eb);
	--eol-primary-hover: var(--wp--preset--color--primary-hover, #1d4ed8);
	--eol-secondary: var(--wp--preset--color--secondary, #6366f1);
	--eol-text: var(--wp--preset--color--text, #111827);
	--eol-muted: var(--wp--preset--color--muted, #6b7280);
	--eol-bg: var(--wp--preset--color--background, #ffffff);
	--eol-bg-soft: var(--wp--preset--color--light, #f8fafc);
	--eol-border: var(--wp--preset--color--border, #e5e7eb);
	--eol-success: var(--wp--preset--color--success, #16a34a);
	--eol-radius: var(--wp--custom--radius, 14px);
}

:root {
	--eol-header-h: 64px;      /* design height of the header row */
	--eol-header-offset: 72px; /* measured by theme.js; used only for anchor offsets */
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--eol-header-offset) + 16px);
}

body {
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Focus: always visible, never colour-only. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--eol-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link.screen-reader-text:focus {
	background: var(--eol-bg);
	color: var(--eol-primary);
	z-index: 100000;
}

/* ---------- Header ---------- */
.eol-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--eol-border);
}

@supports (backdrop-filter: blur(8px)) {
	.eol-site-header {
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: saturate(180%) blur(8px);
	}
}

@media (max-width: 600px) {
	/* The admin bar is not fixed on small screens. */
	.admin-bar .eol-site-header {
		top: 0;
	}
}

.eol-header__inner {
	min-height: var(--eol-header-h);
	gap: 1rem;
}

.eol-brand {
	margin: 0;
	white-space: nowrap;
}

.eol-brand a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--eol-text);
}

/* Logo mark: two tiles, one even (square) one odd (offset). Pure CSS, no request. */
.eol-brand a::before {
	content: "";
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background:
		linear-gradient(var(--eol-bg), var(--eol-bg)) 7px 7px / 7px 7px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) 16px 16px / 7px 7px no-repeat,
		linear-gradient(135deg, var(--eol-primary), var(--eol-secondary));
}

.eol-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0.25rem;
	border-radius: 8px;
	text-decoration: none;
	color: var(--eol-text);
}

.eol-nav .wp-block-navigation-item__content:hover,
.eol-nav .current-menu-item > .wp-block-navigation-item__content,
.eol-nav [aria-current="page"] {
	color: var(--eol-primary);
}

.eol-nav [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.eol-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--eol-border) !important;
	border-radius: 12px;
	padding: 0.375rem !important;
	min-width: 240px !important;
	box-shadow: 0 12px 32px -12px rgba(17, 24, 39, 0.25);
}

.eol-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem !important;
	width: 100%;
}

.eol-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--eol-bg-soft);
}

/* Size only; never set display here or the button shows on desktop. */
.eol-nav .wp-block-navigation__responsive-container-open,
.eol-nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.eol-nav .wp-block-navigation__responsive-container-open {
	border: 1px solid var(--eol-border);
}

.eol-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem 16px 2rem;
}

.eol-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.0625rem;
	padding: 0.5rem 0;
}

.eol-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0 1rem !important;
}

/* ---------- Main ---------- */
.eol-breadcrumbs {
	font-size: 0.875rem;
	color: var(--eol-muted);
	margin-bottom: 0.5rem;
}

.eol-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eol-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.eol-breadcrumbs li + li::before {
	content: "/";
	color: #cbd5e1;
}

.eol-breadcrumbs a {
	color: var(--eol-muted);
	text-decoration: none;
}

.eol-breadcrumbs a:hover {
	color: var(--eol-primary);
	text-decoration: underline;
}

.eol-breadcrumbs [aria-current="page"] {
	color: var(--eol-text);
}

.eol-page-title {
	margin-top: 0.25rem;
	margin-bottom: 0.75rem;
}

.eol-main :where(p, li) {
	max-width: 72ch;
}

.eol-main h2.wp-block-heading {
	margin-top: 2.75rem;
}

.eol-main h3.wp-block-heading {
	margin-top: 1.75rem;
}

.eol-lead {
	font-size: var(--wp--preset--font-size--large);
	color: #374151;
	line-height: 1.55;
}

.eol-eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--eol-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Tables (core/table) */
.eol-main .wp-block-table {
	overflow-x: auto;
}

.eol-main .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--eol-border);
	border-radius: 10px;
	overflow: hidden;
}

.eol-main .wp-block-table :where(th, td) {
	border: 1px solid var(--eol-border);
	padding: 0.625rem 0.875rem;
	text-align: left;
}

.eol-main .wp-block-table thead {
	border-bottom: 0;
	background: var(--eol-bg-soft);
}

.eol-main .wp-block-table figcaption {
	font-size: 0.875rem;
	color: var(--eol-muted);
}

/* Callouts */
.eol-callout {
	border: 1px solid #bfdbfe;
	border-left: 5px solid var(--eol-primary);
	background: var(--wp--preset--color--primary-soft);
	border-radius: 12px;
	padding: 1rem 1.25rem !important;
}

.eol-callout > :first-child {
	margin-top: 0;
}

.eol-callout > :last-child {
	margin-bottom: 0;
}

.eol-example-box {
	border: 1px solid var(--eol-border);
	border-radius: 12px;
	padding: 1rem 1.25rem !important;
	background: var(--eol-bg-soft);
}

/* FAQ (core/details) */
.eol-faq .wp-block-details {
	background: var(--eol-bg);
	margin-block: 0.625rem;
}

.eol-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 650;
	padding: 0.875rem 2rem 0.875rem 0;
	list-style: none;
	position: relative;
	min-height: 44px;
}

.eol-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.eol-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--eol-primary);
}

.eol-faq .wp-block-details[open] summary::after {
	content: "−";
}

.eol-faq .wp-block-details > :not(summary) {
	margin-top: 0;
	padding-bottom: 0.875rem;
	color: #374151;
}

/* ---------- Homepage ---------- */
.eol-hero {
	padding-block: clamp(1.75rem, 5vw, 4rem) !important;
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
		var(--eol-bg-soft);
	border-bottom: 1px solid var(--eol-border);
}

.eol-hero .wp-block-columns {
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.eol-hero h1 {
	margin-top: 0;
	font-size: clamp(2rem, 5vw, 3.25rem);
}

.eol-hero .eol-tool {
	margin-block: 0;
}

.eol-hero-points {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: grid;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: #374151;
}

.eol-hero-points li {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
}

.eol-hero-points li::before {
	content: "✓";
	color: var(--eol-success);
	font-weight: 800;
}

.eol-section {
	padding-block: var(--wp--preset--spacing--60) !important;
}

.eol-section--soft {
	background: var(--eol-bg-soft);
	border-block: 1px solid var(--eol-border);
}

.eol-section > .wp-block-heading:first-child,
.eol-section-head > .wp-block-heading:first-child {
	margin-top: 0;
}

.eol-section-head {
	margin-bottom: 1.5rem;
}

.eol-feature {
	border: 1px solid var(--eol-border);
	border-radius: var(--eol-radius);
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	background: var(--eol-bg);
	height: 100%;
}

.eol-feature h3 {
	margin-top: 0 !important;
}

.eol-feature .eol-mini {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	background: var(--eol-bg-soft);
	border: 1px solid var(--eol-border);
	border-radius: 10px;
	padding: 0.75rem 1rem;
}

/* Homepage sections are landing-page bands: let their content use the wide
   width. Tool and article pages keep the 760px reading measure. */
.eol-main--front .eol-section > :where(:not(.alignleft, .alignright, .alignfull)),
.eol-main--front .eol-section-head > * {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.eol-main--front .eol-section > .eol-front-faq {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--eol-primary);
	border: 1px solid currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-soft);
	color: var(--eol-primary-hover);
}

.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

/* Post list */
.eol-post-card {
	border-bottom: 1px solid var(--eol-border);
	padding-bottom: 1.5rem;
}

/* ---------- Footer ---------- */
.eol-site-footer {
	margin-top: 0;
}

.eol-footer__heading {
	font-size: 0.8125rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--eol-muted);
	margin: 0.5rem 0 0.75rem !important;
}

.eol-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.125rem;
	font-size: 0.9375rem;
}

.eol-footer__links a {
	display: inline-block;
	padding: 0.3rem 0;
	color: var(--eol-text);
	text-decoration: none;
}

.eol-footer__links a:hover {
	color: var(--eol-primary);
	text-decoration: underline;
}

.eol-footer__cols {
	gap: 2rem;
}

@media (max-width: 781px) {
	.eol-footer__cols {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eol-footer__cols > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}
}

/* 404 */
.eol-404 .wp-block-search {
	margin-top: 2rem;
	max-width: 460px;
}

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

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Full-width homepage bands keep the 16px side gutter (root padding) on phones. */
.eol-main--front .alignfull {
	padding-left: var(--wp--style--root--padding-left, 16px);
	padding-right: var(--wp--style--root--padding-right, 16px);
}

/* Root block gap would otherwise add a white strip between header, main and footer. */
.wp-site-blocks > main.eol-main,
.wp-site-blocks > .eol-site-footer,
.eol-main--front > .wp-block-post-content,
.eol-main--front > .wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}