/*
 * Amberlight Notes — supplemental stylesheet.
 *
 * theme.json / block attributes cover almost all design values. This file only
 * adds what neither can express: breakpoint-specific values (theme.json has no
 * concept of a viewport breakpoint), hover/focus pseudo-states, and the one
 * piece of structural fullscreen-overlay behaviour core doesn't apply on its
 * own in this context.
 */

/* Prevent any accidental horizontal scroll from full-bleed sections. */
html, body {
	overflow-x: hidden;
}

/* --- Mobile side margins (point 2) --------------------------------------- */
/* theme.json has no breakpoint concept, so the ~20px mobile gutter that
   applies to header, hero, footer and the mobile menu content is set here. */
@media (max-width: 600px) {
	main.wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
	}

	.site-footer {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* --- Header --------------------------------------------------------------- */

/* Desktop height target ~82-92px is reached by the header's own padding
   (set as block attributes in parts/header.html); only the mobile step needs
   a breakpoint override (point 6: ~66-72px height, ~112-125px logo). */
@media (max-width: 600px) {
	.site-header {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.site-header .amberlight-logo--header img {
		width: 120px !important;
	}
}

.site-header {
	align-items: center;
}

/* The navigation block is registered as the first inner block of Navigation
   only so it can appear inside the fullscreen mobile overlay (see below); it
   must not also render inline in the desktop row (point 1). */
.site-header .amberlight-logo--nav {
	display: none;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .amberlight-logo--nav {
	display: block;
}

/* Amber underline on hover/active nav items instead of a filled background. */
.site-header .wp-block-navigation-item > a {
	position: relative;
	text-decoration: none;
	padding-bottom: 2px;
}

.site-header .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background-color: var(--wp--preset--color--amber);
	transition: right 0.2s ease;
}

.site-header .wp-block-navigation-item > a:hover::after,
.site-header .wp-block-navigation-item > a:focus-visible::after,
.site-header .current-menu-item > a::after {
	right: 0;
}

.site-header .wp-block-navigation-item > a:hover,
.site-header .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--amber);
}

/* Visible, non-color-only focus state everywhere (keyboard navigation). */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
}

/* --- Mobile navigation overlay (point 5) ---------------------------------- */

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	min-height: 100dvh !important;
	z-index: 100000 !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
	padding: 20px !important;
}

/* Native :has() (all evergreen browsers) locks page scroll behind the modal
   without any custom JS — the overlay's own fixed positioning already hides
   the content, this just stops the page from scrolling along with it. Both
   html and body need it: with only body constrained, the viewport's actual
   scrolling element (html, in standards mode) stays scrollable. */
html:has(.wp-block-navigation__responsive-container.is-menu-open),
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .amberlight-logo--nav {
	margin-bottom: 40px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	font-size: 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
}

/* The overlay content wrapper inherits align-items:flex-end from the header
   row's desktop right-alignment; the fullscreen mobile menu should read as a
   calm, left-aligned list (logo and links both) instead. */
.site-header .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: left;
}

/* --- Hero arch image ------------------------------------------------------- */

.amberlight-hero-image img {
	width: 100%;
	max-width: 460px;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* --- Mobile hero typography (point 3) -------------------------------------- */

@media (max-width: 600px) {
	.amberlight-hero-columns {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	.amberlight-hero-eyebrow {
		font-size: 0.6875rem !important; /* ~11px */
	}

	.amberlight-hero-claim {
		font-size: 2.5rem !important; /* ~40px */
		line-height: 1.1 !important;
	}

	.amberlight-hero-intro {
		font-size: 1.0625rem !important; /* ~17px */
		margin-top: 16px !important;
	}

	.amberlight-hero-link {
		margin-top: 8px !important;
	}
}

/* --- Phase 2B homepage sections -------------------------------------------- */

/* Shared image scaling for the static (non-Query-Loop) teaser/hero images:
   arch tiles (has-custom-border, per the Phase 1 lesson that the radius
   attribute requires that class) get a tall portrait crop, the plain
   rectangular tile (Living, in the four-realms intro) a landscape crop. */
.amberlight-realm-image img,
.amberlight-arch-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

figure.amberlight-realm-image.has-custom-border img,
figure.amberlight-arch-image.has-custom-border img {
	aspect-ratio: 3 / 4;
}

figure.amberlight-realm-image:not(.has-custom-border) img {
	aspect-ratio: 4 / 3;
}

/* Query Loop featured images: post-featured-image already writes its own
   aspect-ratio inline per block attribute, this only guarantees it never
   exceeds its column. */
.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Mind's "ruhige Liste": a thin separator between entries instead of cards. */
.amberlight-mind-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.amberlight-mind-list .wp-block-post-template > li {
	list-style: none;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(36, 33, 30, 0.15);
}

.amberlight-mind-list .wp-block-post-template > li:first-child {
	padding-top: 0;
	border-top: none;
}

/* Pause section: a short, centered amber rule instead of a full-width line. */
.amberlight-pause-line.wp-block-separator {
	width: 48px;
	height: 1px;
	border: none;
}

/* Newsletter: restyle core/search (the only native block with an input +
   button) to read as a quiet email placeholder rather than a site search. */
.amberlight-newsletter-form {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.amberlight-newsletter-form .wp-block-search__input {
	border: 1px solid rgba(36, 33, 30, 0.3);
	border-radius: 2px;
	background: transparent;
}

.amberlight-newsletter-form .wp-block-search__button {
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--paper);
	border: none;
	border-radius: 2px;
}

@media (max-width: 600px) {
	.amberlight-realms .wp-block-column {
		margin-top: 0 !important;
	}
}

/* --- Footer (point 7) ------------------------------------------------------- */

.site-footer .amberlight-logo--footer {
	max-width: 150px;
}

/* Let the legal links wrap onto two lines on narrow screens instead of being
   forced onto one cramped line; each link keeps comfortable spacing. */
.site-footer-legal-links {
	line-height: 1.8;
}

.site-footer-legal-links a {
	display: inline-block;
	padding: 2px 0;
}

@media (max-width: 480px) {
	.site-footer-legal {
		row-gap: 12px !important;
	}
}

@media (max-width: 782px) {
	.site-footer {
		padding-top: 48px !important;
		padding-bottom: 32px !important;
	}

	.site-footer .wp-block-columns {
		row-gap: 40px !important;
	}

	.site-footer .wp-block-buttons {
		width: 100%;
	}

	.site-footer .wp-block-button {
		width: 100%;
	}

	.site-footer .wp-block-button__link {
		width: 100%;
		text-align: center;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Respect the user's OS-level reduced-motion preference (Phase 6 accessibility pass). */
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation-item > a::after {
		transition: none;
	}
}