/*
Theme Name: Ethereal Archive
Theme URI: https://novamira.local/ethereal-archive
Author: Novamira
Description: Minimalist-luxury editorial theme for a fine-art photography studio. Parchment ground, deep charcoal ink, a single soft-rose accent, Playfair Display over Source Serif 4, sharp geometry, hairline borders instead of shadows.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ethereal-archive
*/

@import url('assets/fonts.css');

:root {
	--bg: #f9f9f7;
	--surface: #ffffff;
	--surface-sunken: #f4f4f2;
	--ink: #1a1a1a;
	--ink-muted: #444748;
	--accent: #e7b2c3;
	--accent-ink: #7d5261;
	--border: #e5e5e1;
	--border-strong: #8c8c8c;

	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Source Serif 4', Georgia, serif;
	--font-label: 'Inter', sans-serif;

	--space-sm: 8px;
	--space-md: 24px;
	--space-lg: 64px;
	--space-mobile: 20px;

	--container-max: 1280px;
}

/* Reset (author origin, low specificity so components always win) */
:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
	margin: 0;
}

:where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(img, picture) {
	display: block;
	max-width: 100%;
}

:where(a) {
	color: inherit;
	text-decoration: none;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.1;
	color: var(--ink);
}

h1 {
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

h3 {
	font-size: 1.75rem;
	font-weight: 500;
}

p {
	max-width: 65ch;
}

.eyebrow {
	font-family: var(--font-label);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-ink);
	display: block;
}

.label {
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Layout */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-mobile);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-lg);
	}
}

.section {
	padding-block: 3rem;
}

@media (min-width: 768px) {
	.section {
		padding-block: 4.5rem;
	}
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 1rem 2.5rem;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn--primary {
	background: var(--ink);
	color: var(--surface);
}

.btn--primary:hover {
	background: var(--accent-ink);
}

.btn--accent {
	background: var(--accent);
	color: var(--ink);
}

.btn--accent:hover {
	filter: brightness(0.96);
}

.btn--outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn--outline:hover {
	background: var(--ink);
	color: var(--surface);
}

.text-link {
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 0.25rem;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.text-link:hover {
	color: var(--accent-ink);
	border-color: var(--accent-ink);
}

/* Cards */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	transition: border-color 0.4s ease, background-color 0.4s ease;
}

.card:hover {
	border-color: var(--accent);
}

/* Form fields */
.field {
	position: relative;
}

.field__label {
	font-family: var(--font-label);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-muted);
	display: block;
	margin-bottom: 0.5rem;
}

.field__input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-strong);
	border-radius: 0;
	padding: 0.5rem 0;
	font-family: var(--font-body);
}

.field__input:focus {
	outline: none;
	border-color: var(--ink);
}

.field__indicator {
	height: 1px;
	width: 0;
	background: var(--accent);
	transition: width 0.3s ease;
}

.field:focus-within .field__indicator {
	width: 100%;
}

/* Site header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
	transition: border-color 0.3s ease;
	/* The brand row's collapse animates the header's own height, which
	   shifts page layout every frame. Without this, some browsers'
	   scroll anchoring "corrects" for that shift by nudging scrollY,
	   fighting the JS threshold and reintroducing the jitter the
	   hysteresis above is meant to prevent. */
	overflow-anchor: none;
}

.site-header.is-scrolled {
	border-bottom-color: var(--border-strong);
}

/* Brand row: full logo, centered. Collapses away once the header scrolls. */
.site-header__brand-row {
	display: flex;
	justify-content: center;
	align-items: center;
	max-height: 9rem;
	padding-block: 1.75rem 1.25rem;
	opacity: 1;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.3s ease, padding-block 0.4s ease;
}

.site-header.is-scrolled .site-header__brand-row {
	max-height: 0;
	padding-block: 0;
	opacity: 0;
}

.site-header__brand-row .custom-logo {
	max-height: 96px;
	width: auto;
}

@media (min-width: 900px) {
	.site-header__brand-row .custom-logo {
		max-height: 120px;
	}
}

.site-header__brand {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/* Nav row: always centered; compact logo and mobile toggle sit at the
   absolute left/right edges so they never disturb that centering. */
.site-header__nav-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 1.25rem;
}

.site-header__logo-compact {
	position: absolute;
	left: var(--space-mobile);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (min-width: 900px) {
	.site-header__logo-compact {
		left: var(--space-lg);
	}
}

.site-header.is-scrolled .site-header__logo-compact {
	opacity: 1;
	pointer-events: auto;
}

.site-header__logo-compact img {
	max-height: 64px;
	width: auto;
}

@media (min-width: 900px) {
	.site-header__logo-compact img {
		max-height: 72px;
	}
}

.site-header__logo-compact-text {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ink);
}

.site-nav {
	display: none;
}

@media (min-width: 900px) {
	.site-nav {
		display: block;
	}
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.site-nav a {
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	transition: color 0.3s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--ink);
}

.site-nav a[aria-current="page"] {
	border-bottom: 2px solid var(--accent);
	padding-bottom: 0.35rem;
}

.nav-toggle {
	position: absolute;
	right: var(--space-mobile);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	color: var(--ink);
}

@media (min-width: 900px) {
	.nav-toggle {
		right: var(--space-lg);
		display: none;
	}
}

.icon {
	display: block;
}

.mobile-nav {
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	padding: var(--space-md) var(--space-mobile) var(--space-lg);
	gap: 1.5rem;
}

.mobile-nav__list a {
	font-family: var(--font-label);
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink);
}

@media (min-width: 900px) {
	.mobile-nav {
		display: none !important;
	}
}

/* Site footer */
.site-footer {
	background: var(--surface);
	border-top: 1px solid var(--border);
	padding-block: 2.5rem;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
}

.site-footer__brand {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/* .site-footer__links is the <nav> wrapper. With a real menu assigned
   (Appearance > Menus, "Footer Navigation") wp_nav_menu() puts the flex
   row one level in on its own <ul class="site-footer__links-list">; the
   no-menu-assigned fallback in footer.php instead nests <a> tags directly
   in the <nav>, so both need the same flex treatment. */
.site-footer__links,
.site-footer__links-list {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	justify-content: center;
}

.site-footer__links a {
	font-family: var(--font-label);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-muted);
	transition: color 0.3s ease;
}

.site-footer__links a:hover {
	color: var(--accent-ink);
}

.site-footer__meta {
	font-family: var(--font-label);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-muted);
	opacity: 0.7;
}

/* Placeholder media (declared local placeholder, see design skill image policy) */
.media-placeholder {
	background: linear-gradient(160deg, #f4f4f2 0%, #e2e3e1 55%, #dadad8 100%);
	border: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}

.media-placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	transition: border-color 0.4s ease;
	border: 1px solid transparent;
}

.media-placeholder:hover::after {
	border-color: var(--accent);
}

/* Scroll reveal (motion dial: moderate). Visible by default; only hidden
   once JS adds .js to <html>, so no-JS/crawler/print always show content. */
.reveal {
	opacity: 1;
	transform: none;
}

html.js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

html.js .reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Block content (the_content): base typography for plain blocks, plus
   native "wide"/"full" alignment support declared via add_theme_support. */
.entry-content {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-mobile);
	padding-block: 2.5rem;
}

@media (min-width: 768px) {
	.entry-content {
		padding-inline: var(--space-lg);
	}
}

.entry-content > * + * {
	margin-top: 1.75rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 3rem;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
	list-style: revert;
}

.entry-content blockquote {
	font-style: italic;
	color: var(--ink-muted);
	border-left: 2px solid var(--accent);
	padding-left: 1.5rem;
}

.entry-content figure img {
	width: 100%;
	height: auto;
}

.entry-content figcaption {
	font-family: var(--font-label);
	font-size: 0.75rem;
	color: var(--ink-muted);
	margin-top: 0.5rem;
}

.entry-content .wp-block-columns {
	gap: var(--space-md);
}

.entry-content > .alignwide {
	max-width: none;
	width: calc(100% + var(--space-mobile) * 2);
	margin-left: calc(var(--space-mobile) * -1);
	margin-right: calc(var(--space-mobile) * -1);
}

@media (min-width: 768px) {
	.entry-content > .alignwide {
		width: calc(100% + var(--space-lg) * 2);
		margin-left: calc(var(--space-lg) * -1);
		margin-right: calc(var(--space-lg) * -1);
	}
}

.entry-content > .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Page with Sidebar */
.page-with-sidebar__grid {
	display: grid;
	gap: 3rem;
}

@media (min-width: 900px) {
	.page-with-sidebar__grid {
		grid-template-columns: 2fr 1fr;
		gap: 5rem;
	}

	.page-with-sidebar__grid--no-sidebar {
		grid-template-columns: 1fr;
	}

	.page-with-sidebar__grid--no-sidebar .page-with-sidebar__main {
		max-width: 48rem;
		margin-inline: auto;
	}
}

.page-with-sidebar .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.page-with-sidebar__aside .widget {
	margin-bottom: 3rem;
}

.page-with-sidebar__aside .widget-title {
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 1.25rem;
}

.page-with-sidebar__aside p {
	color: var(--ink-muted);
	line-height: 1.6;
}

/* Core Button block: styled to match the design system by default, with
   Outline (core) and Accent (Rose, registered by this theme) variants. */
.wp-block-button__link {
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 1rem 2.5rem;
	background: var(--ink);
	color: var(--surface);
	border: 1px solid transparent;
	border-radius: 0 !important;
	transition: background-color 0.3s ease;
}

.wp-block-button__link:hover {
	background: var(--accent-ink);
	color: var(--surface);
}

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--ink);
	color: var(--surface);
}

.is-style-ea-accent .wp-block-button__link {
	background: var(--accent);
	color: var(--ink);
}

.is-style-ea-accent .wp-block-button__link:hover {
	filter: brightness(0.96);
}

.wp-block-buttons {
	gap: 2rem !important;
}