/*
Theme Name: Aether Blue
Theme URI: https://aetherguild.org
Description: A dark, editorial child theme of Twenty Twenty-Four — Newsreader serif headlines, IBM Plex Mono UI labels, and a teal accent on a near-black surface.
Author: Aetherguild
Template: twentytwentyfour
Version: 1.0.0
Text Domain: aether-blue
*/

/* ==========================================================================
   Tokens (mirrors theme.json presets so plain markup/patterns can use them
   without relying on block supports)
   ========================================================================== */

:root {
	--ab-page-bg: #1C1A1A;
	--ab-surface: #262322;
	--ab-text: #F3F1EF;
	--ab-accent: #3F7D8C;
	--ab-accent-light: #74A8B5;
	--ab-divider: rgba(243, 241, 239, 0.18);
	--ab-radius: 2px;
	--ab-max-width: 1180px;
	--ab-side-padding: 30px;
	--ab-side-padding-mobile: 20px;
	--ab-font-serif: "Newsreader", ui-serif, Georgia, serif;
	--ab-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--ab-page-bg);
	color: var(--ab-text);
	font-family: var(--ab-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
}

a {
	color: var(--ab-accent-light);
}

/* ==========================================================================
   Layout — 1180px max-width, centered, 30px side padding (20px mobile)
   ========================================================================== */

.ab-container,
.wp-site-blocks > *,
.entry-content > * {
	max-width: var(--ab-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ab-side-padding);
	padding-right: var(--ab-side-padding);
	box-sizing: border-box;
}

.ab-container.alignfull,
.alignfull.wp-site-blocks > *,
.alignwide {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 600px) {
	.ab-container,
	.wp-site-blocks > *,
	.entry-content > * {
		padding-left: var(--ab-side-padding-mobile);
		padding-right: var(--ab-side-padding-mobile);
	}
}

/* Section vertical rhythm: 40px top/bottom */
.ab-section {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* ==========================================================================
   Header — 64px, 1px bottom border at 18% opacity,
   wordmark left / nav center / button right
   ========================================================================== */

.ab-site-header {
	min-height: 64px;
	border-bottom: 1px solid var(--ab-divider);
	background-color: var(--ab-page-bg);
}

.ab-site-header-inner {
	min-height: 64px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 20px;
}

.ab-site-header-inner > .ab-header-brand {
	justify-self: start;
}

.ab-site-header-inner > .ab-header-nav {
	justify-self: center;
}

.ab-site-header-inner > .ab-header-cta {
	justify-self: end;
}

@media (max-width: 600px) {
	.ab-site-header-inner {
		grid-template-columns: auto auto;
		column-gap: 12px;
	}

	.ab-site-header-inner > .ab-header-nav {
		display: none;
	}
}

.ab-wordmark,
.ab-wordmark a {
	font-family: var(--ab-font-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ab-text) !important;
	text-decoration: none;
}

.ab-site-header nav,
.ab-site-header .wp-block-navigation {
	font-family: var(--ab-font-serif);
	font-size: 13px;
	font-weight: 400;
}

.ab-site-header .wp-block-navigation a {
	font-family: var(--ab-font-serif);
	font-weight: 400;
	color: var(--ab-text);
	text-decoration: none;
}

.ab-site-header .wp-block-navigation a:hover {
	color: var(--ab-accent-light);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, .wp-block-post-title {
	font-family: var(--ab-font-serif);
	font-weight: 500;
	font-size: 48px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--ab-text);
}

h2 {
	font-family: var(--ab-font-serif);
	font-weight: 600;
	font-size: 32px;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--ab-text);
}

h3, h4, h5, h6 {
	font-family: var(--ab-font-serif);
	font-weight: 600;
	color: var(--ab-text);
}

p, li {
	font-family: var(--ab-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
}

em, i {
	font-style: italic;
}

/* Section kicker — small mono label above every section headline */
.ab-kicker {
	display: block;
	font-family: var(--ab-font-mono);
	font-weight: 400;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ab-text);
	opacity: 0.6;
	margin-bottom: 8px;
}

/* Pull quote */
.ab-pull-quote,
.wp-block-quote.ab-pull-quote p {
	font-family: var(--ab-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 23px;
	line-height: 1.4;
	color: var(--ab-accent-light);
	border: none;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.ab-button {
	font-family: var(--ab-font-mono);
	font-weight: 400;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: var(--ab-radius);
	background-color: var(--ab-accent);
	color: var(--ab-page-bg);
	text-decoration: none;
	display: inline-block;
	border: 1px solid var(--ab-accent);
	transition: opacity 0.15s ease;
}

.wp-block-button__link:hover,
.ab-button:hover {
	opacity: 0.85;
	color: var(--ab-page-bg);
}

/* Ghost button variant — apply "Ghost" block style, or .ab-button--ghost */
.is-style-ghost .wp-block-button__link,
.ab-button--ghost {
	background-color: transparent;
	color: var(--ab-accent);
	border: 1px solid var(--ab-accent);
}

.is-style-ghost .wp-block-button__link:hover,
.ab-button--ghost:hover {
	background-color: var(--ab-accent);
	color: var(--ab-page-bg);
}

/* ==========================================================================
   Stat rows — label + dotted flex-fill + value
   ========================================================================== */

.ab-stat-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px dotted var(--ab-divider);
	font-family: var(--ab-font-mono);
}

.ab-stat-row:last-child {
	border-bottom: none;
}

.ab-stat-row__label {
	font-family: var(--ab-font-mono);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ab-text);
	opacity: 0.7;
	white-space: nowrap;
}

.ab-stat-row__fill {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--ab-divider);
	margin-bottom: 4px;
}

.ab-stat-row__value {
	font-family: var(--ab-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ab-text);
	white-space: nowrap;
}

/* ==========================================================================
   Surfaces — cards, map frame
   ========================================================================== */

.ab-surface {
	background-color: var(--ab-surface);
	border-radius: var(--ab-radius);
	padding: 24px;
}

/* ==========================================================================
   Dividers
   ========================================================================== */

.ab-divider,
hr {
	border: none;
	border-top: 1px solid var(--ab-divider);
}

/* ==========================================================================
   Hero — two-column grid, 1.1fr / 0.9fr, 40px gap
   ========================================================================== */

.ab-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}

@media (max-width: 782px) {
	.ab-hero {
		grid-template-columns: 1fr;
	}
}