/* ============================================================
 * Editorial-flavoured overrides
 * Twenty Twenty-Five child themes (xxmi / cistron)
 *
 * Color is referenced *only* through the theme.json preset
 * (--wp--preset--color--brand-accent), so this file is byte-for-byte
 * identical between the two child themes. The brand accent value
 * is the only difference, and it lives in theme.json.
 * ============================================================ */

/* ---- Reset decorative residue from parent theme ---- */
:where(.wp-site-blocks) :where([class*="wp-block-"]) {
	box-shadow: none;
}

:root {
	--xxmi-hairline: 1px solid var(--wp--preset--color--ink-200);
	/* Continuous radius scale (superellipse-style soft corners) */
	--xxmi-radius-sm: 0.5rem;   /* 8px  — inputs, buttons, small chips */
	--xxmi-radius-md: 0.75rem;  /* 12px — cards, images, videos, covers */
}

/* ---- Header: flat, opaque, sticky at top ---- */
.wp-block-template-part[data-area="header"],
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: var(--xxmi-hairline);
	box-shadow: none !important;
}

/* Kill any inline opacity / blur the parent or "Additional CSS" might inject */
.wp-block-template-part[data-area="header"] *,
header.wp-block-template-part * {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Scroll-state: also flat */
body.scrolled .wp-block-template-part[data-area="header"],
body.scrolled header.wp-block-template-part {
	background-color: var(--wp--preset--color--base) !important;
	box-shadow: none !important;
}

/* ---- Links: PI-style underline + accent ---- */
.wp-site-blocks a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-site-title a):not(.wp-block-site-logo):not(.wp-block-site-logo a)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 120ms ease;
}

.wp-site-blocks a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-site-title a):not(.wp-block-site-logo):not(.wp-block-site-logo a)):hover {
	text-decoration-thickness: 2px;
}

/* Site logo never underlines */
.wp-block-site-logo,
.wp-block-site-logo a,
.wp-block-site-logo a:hover {
	text-decoration: none;
}

/* ---- Navigation: plain text, no buttons ---- */
.wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--ink-800);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Submenu (dropdown): flat, hairline-bordered, no shadow ---- */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: var(--xxmi-hairline);
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--wp--preset--spacing--10) 0;
	min-width: 240px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.5em var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-accent);
	background-color: transparent;
	text-decoration: underline;
}

/* Right-edge overflow guard: see assets/js/nav-flip.js */
.wp-block-navigation .wp-block-navigation__submenu-container.is-flipped {
	left: auto;
	right: 0;
}
/* Nested flipped submenu opens to the LEFT of its parent */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container.is-flipped {
	left: auto;
	right: 100%;
}

/* Submenu chevron — mono, muted, slightly larger for legibility */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--ink-400);
	font-size: 0.85em;
	margin-left: 0.3em;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	height: 0.8em;
	width: 0.8em;
}

/* ---- Mobile: overlay menu (core/navigation overlayMenu="mobile") ---- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 0.5rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: var(--xxmi-hairline);
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--large);
	width: 100%;
	display: block;
}

/* Nested submenus on mobile — inline, indented, no popup */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	border: 0 !important;
	padding: 0 0 0 var(--wp--preset--spacing--20);
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--10) 0;
}

/* ---- Buttons: soft radius default, no shadow ----
 * border-radius is left WITHOUT !important so the block editor's
 * per-block radius setting (inline style) can override.
 */
.wp-block-button .wp-block-button__link,
.wp-block-search__button,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
	border-radius: var(--xxmi-radius-sm);
	box-shadow: none !important;
	font-weight: 500;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

/* ---- Layout containers: drop shadow, default radius 0 (overridable per block) ---- */
.wp-block-group,
.wp-block-columns,
.wp-block-media-text,
.wp-block-quote {
	box-shadow: none !important;
	border-radius: 0;
}

/* Group blocks USED AS CARDS (with a background) take the soft radius by default */
.wp-block-group.has-background,
.wp-block-group.is-style-card {
	border-radius: var(--xxmi-radius-md);
	box-shadow: none !important;
}

/* ---- Media surfaces: soft radius ---- */
.wp-block-cover,
.wp-block-image img,
.wp-block-image .wp-block-image__crop-area,
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe,
.wp-block-media-text__media img {
	border-radius: var(--xxmi-radius-md);
	box-shadow: none !important;
}

.wp-block-cover {
	overflow: hidden;
}

/* ---- Inputs / form fields: hairline + soft radius ---- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select,
.wp-block-search__input {
	border-radius: var(--xxmi-radius-sm);
	border: var(--xxmi-hairline);
	padding: 0.5em 0.75em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--brand-accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--brand-accent);
}

/* Search "button-inside" wrapper: take the radius and clip its children */
.wp-block-search__inside-wrapper {
	border-radius: var(--xxmi-radius-sm);
	overflow: hidden;
}
.wp-block-search__inside-wrapper .wp-block-search__input {
	border-radius: 0;
	border: 0;
}

/* ---- Footer: hairline rule + muted copyright ---- */
.wp-block-template-part[data-area="footer"],
footer.wp-block-template-part {
	border-top: var(--xxmi-hairline);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-600);
	font-size: var(--wp--preset--font-size--small);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.wp-block-template-part[data-area="footer"] a,
footer.wp-block-template-part a {
	color: var(--wp--preset--color--ink-600);
}

.wp-block-template-part[data-area="footer"] a:hover,
footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--brand-accent);
}

/* ---- Footer sitemap: left brand block + right column grid ---- */
.footer-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
	justify-content: space-between;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	width: 100%;
}

.footer-brand {
	flex: 0 1 280px;
	display: flex !important;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.footer-brand .footer-tagline {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-800);
}

.footer-brand .footer-copyright {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-600);
}

.footer-sitemap {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(120px, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	flex: 1 1 auto;
	max-width: 720px;
}

.footer-col {
	display: flex !important;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.footer-col-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-600);
	margin: 0;
}

.footer-col ul,
ul.footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.footer-col ul li,
ul.footer-list li {
	margin: 0;
	padding: 0;
}

.footer-col ul a,
ul.footer-list a {
	color: var(--wp--preset--color--ink-800);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.footer-col ul a:hover,
ul.footer-list a:hover {
	color: var(--wp--preset--color--brand-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 900px) {
	.footer-sitemap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.footer-sitemap { grid-template-columns: 1fr; }
}

/* ---- Post meta: monospace, muted (publication-record feel) ---- */
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-600);
	letter-spacing: 0.02em;
}

/* ---- Separator: hairline ---- */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	border: 0;
	border-top: var(--xxmi-hairline);
	max-width: none;
	width: 100%;
	opacity: 1;
}

/* ---- Selection: brand accent ---- */
::selection {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--base);
}

/* ============================================================
 * Billboard block style — registered in functions.php for
 * core/cover, core/group, core/image.
 *
 * Width: forced to 100vw by escaping the constrained parent's
 * padding via the negative-margin trick. Works whether the user
 * sets the block to alignfull or not.
 *
 * Animation: a dramatic scale-up + radius-down that runs as the
 * block scrolls through the viewport. Uses transform (not width)
 * so there is zero layout reflow; the scaled-down state shows
 * inset whitespace, the scaled-up state takes the full viewport.
 * ============================================================ */
.wp-block-cover.is-style-billboard,
.wp-block-group.is-style-billboard,
.wp-block-image.is-style-billboard {
	/* Always reach the viewport edges, regardless of parent padding or
	 * the editor's alignment setting. The negative margin trick computes
	 * how much horizontal space the parent eats and pulls the element back
	 * out to the viewport edges. Width 100vw fills the freed space. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* Progress 0..1 is written to this custom property by billboard-scroll.js
	 * as the user scrolls the element through the viewport. CSS interpolates
	 * scale (0.78 → 1) and border-radius (md → 0) from that value.
	 *
	 * Initial scale 0.78 = 78% — dramatic enough to read as "growing into"
	 * the page, not just a subtle settle. */
	--billboard-scale-from: 0.78;

	transform: scale(calc(var(--billboard-scale-from) + (1 - var(--billboard-scale-from)) * var(--billboard-progress, 0)));
	transform-origin: center center;
	border-radius: calc(var(--xxmi-radius-md) * (1 - var(--billboard-progress, 0)));
	overflow: hidden;
}

.wp-block-image.is-style-billboard img {
	width: 100%;
	height: auto;
	display: block;
}

/* Less dramatic scale-from on small screens — at narrow widths a 78% scale
 * leaves too much whitespace and looks cramped. */
@media (max-width: 768px) {
	.wp-block-cover.is-style-billboard,
	.wp-block-group.is-style-billboard,
	.wp-block-image.is-style-billboard {
		--billboard-scale-from: 0.9;
	}
}

/* Honour reduced-motion: snap to fully-expanded immediately. The JS does this
 * too, this rule is the no-JS fallback. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-billboard,
	.wp-block-group.is-style-billboard,
	.wp-block-image.is-style-billboard {
		--billboard-progress: 1;
	}
}

/* Card block style — for groups used as cards */
.wp-block-group.is-style-card {
	border-radius: var(--xxmi-radius-md);
	border: var(--xxmi-hairline);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

/* ============================================================
 * Table block — hairline rules, monospace headers, no shadows
 * ============================================================ */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.75em 1em;
	text-align: left;
	border-top: var(--xxmi-hairline);
	border-bottom: var(--xxmi-hairline);
	vertical-align: top;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-600);
	border-top: 0;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 2px solid var(--wp--preset--color--ink-800);
}

.wp-block-table figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-600);
	margin-top: var(--wp--preset--spacing--20);
	text-align: left;
}

/* ============================================================
 * Quote / Pullquote — left-rule, no italic gimmick
 * ============================================================ */
.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--brand-accent);
	padding-left: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--serif);
}

.wp-block-quote p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin: 0;
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-600);
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ============================================================
 * Forms — generic styling for label / fieldset / checkbox / radio
 * ============================================================ */
form label {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin-bottom: 0.4em;
	color: var(--wp--preset--color--ink-800);
}

form .form-row,
form p {
	margin-bottom: var(--wp--preset--spacing--20);
}

form fieldset {
	border: var(--xxmi-hairline);
	border-radius: var(--xxmi-radius-sm);
	padding: var(--wp--preset--spacing--20);
}

form legend {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0 0.4em;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--brand-accent);
	margin-right: 0.4em;
}

/* ============================================================
 * Code / Preformatted — mono, hairline, soft radius
 * ============================================================ */
.wp-block-code,
.wp-block-preformatted,
pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--ink-50);
	border: var(--xxmi-hairline);
	border-radius: var(--xxmi-radius-sm);
	padding: var(--wp--preset--spacing--30);
	overflow-x: auto;
	line-height: 1.6;
}

code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.92em;
	background: var(--wp--preset--color--ink-50);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

/* ============================================================
 * Figure / Image caption — small mono, left-aligned
 * ============================================================ */
.wp-block-image figcaption,
figure.wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-600);
	margin-top: var(--wp--preset--spacing--10);
	text-align: left;
	letter-spacing: 0.02em;
}