/* ============================================================
   alexanderr — front-end stylesheet
   Organized:
   1. tokens
   2. base / reset complements
   3. layout
   4. typography
   5. components (header, hero, focus, work, notes, cta, footer)
   6. WordPress block overrides
   7. utilities
   8. responsive rules
   ============================================================ */

/* ---------- 1. Tokens ---------- */
/* Most design tokens are emitted by theme.json as --wp--preset--*.
   We mirror a small subset here for convenience and one or two
   that theme.json doesn't surface. */
:root {
	--alx-content-max: 720px;
	--alx-wide-max: 1040px;
	--alx-edge-pad: clamp(1.25rem, 4vw, 2rem);

	--alx-bg:     var(--wp--preset--color--background, #faf7f2);
	--alx-fg:     var(--wp--preset--color--foreground, #1a1916);
	--alx-muted:  var(--wp--preset--color--muted,      #6b665c);
	--alx-border: var(--wp--preset--color--border,     #e3ddd0);
	--alx-accent: var(--wp--preset--color--accent,     #a8431a);
	--alx-surface:var(--wp--preset--color--surface,    #f4efe7);

	--alx-radius-sm: 4px;
	--alx-radius-md: 8px;
	--alx-radius-pill: 999px;

	--alx-duration-fast: 120ms;
	--alx-duration: 200ms;
	--alx-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- 2. Base / reset complements ---------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	font-feature-settings: "ss01" on, "kern" on, "liga" on;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Visible, calm focus for everything keyboard-reachable. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus {
	outline: none;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--alx-accent);
	outline-offset: 3px;
	border-radius: var(--alx-radius-sm);
}

/* Image defaults. */
img, svg, video {
	max-width: 100%;
	height: auto;
}

/* Selection: warm accent. */
::selection {
	background: color-mix(in srgb, var(--alx-accent) 22%, transparent);
	color: var(--alx-fg);
}

/* ---------- 3. Layout ---------- */
/* Honor WordPress's root padding logic so alignfull blocks really go edge-to-edge. */
body { background: var(--alx-bg); color: var(--alx-fg); }

main#primary { min-height: 60vh; }

/* Editorial measure for paragraph-heavy pages. */
.is-singular .entry-content p,
.is-singular .entry-content li {
	max-width: 64ch;
}

/* ---------- 4. Typography ---------- */
.alx-page-title {
	margin-block-end: 0.25em;
}

.alx-page-lede {
	max-width: 56ch;
}

.alx-hero-headline {
	/* Cap reading measure on wide screens, but never overflow the viewport. */
	width: 100%;
	max-width: 22ch;
	text-wrap: pretty;
	overflow-wrap: break-word;
}
@media (max-width: 480px) {
	.alx-hero-headline {
		letter-spacing: -0.01em;
	}
}

.alx-hero-sub {
	max-width: min(48ch, 100%);
	text-wrap: pretty;
}

/* Slightly tighter list spacing in body content. */
.wp-block-list { padding-inline-start: 1.25em; }
.wp-block-list li + li { margin-block-start: 0.35em; }

/* Mono is a UI accent — keep it small and quiet by default. */
.has-mono-font-family {
	letter-spacing: 0.02em;
}

/* Quiet, mono-style uppercase labels used in section heads. */
.alx-focus-label,
.alx-work-year,
.alx-work-meta,
.alx-section-head .has-mono-font-family {
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
}

/* ---------- 5. Components ---------- */

/* Skip link */
.alx-skiplink {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	background: var(--alx-fg);
	color: var(--alx-bg);
	padding: 0.6rem 1rem;
	border-radius: var(--alx-radius-pill);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	transition: top var(--alx-duration) var(--alx-ease);
}
.alx-skiplink:focus,
.alx-skiplink:focus-visible {
	top: 0.75rem;
	outline: 2px solid var(--alx-accent);
	outline-offset: 3px;
}

/* Header */
.alx-header {
	background: var(--alx-bg);
}
.alx-header-inner { gap: var(--wp--preset--spacing--30); }

.alx-brand .wp-block-site-title a {
	text-decoration: none;
	color: var(--alx-fg);
	transition: color var(--alx-duration) var(--alx-ease);
}
.alx-brand .wp-block-site-title a:hover {
	color: var(--alx-accent);
}

.alx-nav .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 1px solid transparent;
	transition: color var(--alx-duration) var(--alx-ease),
				border-color var(--alx-duration) var(--alx-ease);
}
.alx-nav .wp-block-navigation-item__content:hover,
.alx-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--alx-accent);
	border-bottom-color: var(--alx-accent);
}

/* Hero */
.alx-hero {
	position: relative;
}
.alx-hero-status {
	gap: 0.6rem;
	align-items: center;
}
.alx-status-dot {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--alx-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--alx-accent) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	.alx-status-dot {
		animation: alx-pulse 2.4s var(--alx-ease) infinite;
	}
	@keyframes alx-pulse {
		0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--alx-accent) 18%, transparent); }
		50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--alx-accent) 8%,  transparent); }
	}
}
.alx-hero-cta .wp-block-button { margin-inline-end: 0.25rem; }

/* Section heads */
.alx-section-head {
	gap: var(--wp--preset--spacing--30);
}
.alx-section-head h2 {
	margin-block: 0;
}

/* Focus rows */
.alx-focus-row,
.alx-work-row {
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0.5rem;
}
.alx-focus-label,
.alx-work-year {
	flex: 0 0 9rem;
	max-width: 9rem;
	padding-block-start: 0.4em; /* optical alignment with body text */
	margin: 0;
}
.alx-focus-body,
.alx-work-body {
	flex: 1 1 280px;
	min-width: 0;
	margin: 0;
}
.alx-work-body > * + * {
	margin-block-start: 0.5em;
}
.alx-work-body h3 {
	margin: 0;
}

/* Note rows (homepage + listings) */
.alx-note-row {
	transition: background-color var(--alx-duration) var(--alx-ease);
}
.alx-note-row:hover {
	background-color: color-mix(in srgb, var(--alx-surface) 60%, transparent);
}
.alx-note-row .wp-block-post-title {
	margin-block: 0.25em 0.35em;
}
.alx-note-row .wp-block-post-title a {
	text-decoration: none;
}
.alx-note-row .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* CTA */
.alx-cta h2 {
	max-width: min(28ch, 100%);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* Footer */
.alx-footer {
	background: var(--alx-bg);
}
.alx-footer-grid > .alx-footer-col {
	flex: 1 1 220px;
}
.alx-footer-links {
	list-style: none;
	padding: 0;
	margin: 0.4rem 0 0;
}
.alx-footer-links li + li { margin-top: 0.25em; }
.alx-footer-links a { text-decoration: none; }
.alx-footer-links a:hover { text-decoration: underline; }
.alx-placeholder {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--alx-muted);
	margin-inline-start: 0.25rem;
}

/* Legal pages */
.alx-legal .alx-legal-warning {
	background: color-mix(in srgb, var(--alx-accent) 6%, transparent);
	border-color: var(--alx-accent) !important;
	color: var(--alx-fg);
}

/* 404 */
.alx-404 {
	text-align: start;
}
.alx-404 h1 {
	max-width: min(18ch, 100%);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ---------- 6. WordPress block overrides ---------- */

/* Buttons: tighter, calmer outline variant. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--alx-fg);
	border: 1px solid var(--alx-border);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: transparent;
	color: var(--alx-accent);
	border-color: var(--alx-accent);
}

/* Search block: visually quiet. */
.wp-block-search__input {
	background: var(--alx-surface);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius-pill);
	padding: 0.6rem 1rem;
}
.wp-block-search__button {
	border-radius: var(--alx-radius-pill);
}

/* Quote */
.wp-block-quote {
	font-style: italic;
}

/* Code block: gentle background, no scroll-jank. */
pre.wp-block-code {
	overflow-x: auto;
}

/* Separator (wide style): subtle. */
hr.wp-block-separator.is-style-wide {
	border: none;
	height: 1px;
	background: var(--alx-border);
	width: 100%;
	max-width: var(--alx-wide-max);
	margin-inline: auto;
}

/* Default WP "wide" pull-quote etc.: keep within wideSize. */
.alignwide { max-width: var(--alx-wide-max); }

/* ---------- 7. Utilities ---------- */
.alx-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ---------- 8. Responsive rules ---------- */

@media (max-width: 640px) {
	.alx-focus-label,
	.alx-work-year {
		flex: 0 0 100%;
		max-width: 100%;
		padding-block-start: 0;
		margin-block-end: 0.25rem;
	}
	.alx-section-head {
		row-gap: 0.5rem;
	}
	.alx-hero { padding-top: var(--wp--preset--spacing--50); }
	/* text-wrap: balance can overflow when the balanced-optimum width
	   exceeds the available width. Fall back to plain wrapping at narrow
	   viewports so long words can't push past the viewport edge. */
	.alx-hero-headline,
	.alx-hero-sub,
	.alx-cta h2,
	.alx-404 h1 {
		text-wrap: pretty;
	}
}

/* Belt-and-braces: never allow horizontal overflow. */
html, body {
	overflow-x: clip;
}

/* Print: minimal, legible. */
@media print {
	body { background: #fff; color: #000; }
	.alx-header, .alx-footer, .alx-nav, .alx-skiplink-wrap, .alx-hero-cta, .alx-cta { display: none !important; }
	a { color: #000; text-decoration: underline; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}