/**
 * Base — reset and element typography.
 *
 * Loads after variables.css, before main.css. Element-level only: anything
 * with a class belongs in main.css.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mona-header-h) + var(--mona-s-5));
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--mona-paper);
	color: var(--mona-text);
	font-family: var(--mona-font);
	font-size: var(--mona-fs-body);
	font-weight: var(--mona-w-regular);
	line-height: var(--mona-lh-body);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	line-height: var(--mona-lh-snug);
	letter-spacing: var(--mona-ls-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--mona-fs-h1);
	line-height: var(--mona-lh-tight);
	letter-spacing: var(--mona-ls-display);
}

h2 {
	font-size: var(--mona-fs-h2);
	line-height: var(--mona-lh-tight);
}

h3 {
	font-size: var(--mona-fs-h3);
}

h4 {
	font-size: var(--mona-fs-h4);
	font-weight: var(--mona-w-semibold);
}

p {
	margin: 0 0 var(--mona-s-5);
}

a {
	color: var(--mona-amber-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--mona-amber-ink) 40%, transparent);
	text-underline-offset: 0.2em;
	transition: color var(--mona-dur-fast) var(--mona-ease),
		text-decoration-color var(--mona-dur-fast) var(--mona-ease);
}

/*
 * The hover colour is wrapped in :where() so it weighs the same as a single
 * class, not a class plus a pseudo-class.
 *
 * As `a:hover` it scored 0,1,1 and therefore beat every component that styles
 * its anchor with one class — `.mona-nav__link{color:inherit}`,
 * `.mona-logo`, `.mona-tile`. Those all sit on a photograph or inside the
 * inverted chrome, so hovering turned their white text to #15181C and the
 * header nav became unreadable over the hero. Reported from the live site;
 * the same rule is in the prototype's base.css, so it is a defect in the
 * design file rather than a porting error.
 *
 * :where() contributes nothing, leaving 0,1,0 — still above the bare `a`
 * selector above, so body copy keeps its hover, and now below main.css, so a
 * component that declares a colour keeps it in both states.
 */
:where(a):hover {
	color: var(--mona-text);
}

a:hover {
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid var(--mona-amber);
	outline-offset: 3px;
	border-radius: 4px;
}

img,
svg,
video,
picture {
	display: block;
	max-width: 100%;
	height: auto;
}

ul,
ol {
	margin: 0 0 var(--mona-s-5);
	padding-left: var(--mona-s-5);
}

li {
	margin-bottom: var(--mona-s-2);
}

hr {
	height: 0;
	margin: var(--mona-s-7) 0;
	border: 0;
	border-top: var(--mona-border);
}

blockquote {
	margin: var(--mona-s-6) 0;
	padding: 0 0 0 var(--mona-s-5);
	border-left: 4px solid var(--mona-amber);
	font-family: var(--mona-font-display);
	font-size: var(--mona-fs-h3);
	font-weight: var(--mona-w-medium);
	line-height: var(--mona-lh-snug);
}

code,
kbd,
samp,
pre {
	font-family: var(--mona-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.1em 0.4em;
	background: var(--mona-paper-2);
	border-radius: 6px;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	padding: var(--mona-s-3) var(--mona-s-4);
	text-align: left;
	border-bottom: var(--mona-border);
	vertical-align: top;
}

th {
	font-weight: var(--mona-w-semibold);
	font-size: var(--mona-fs-sm);
}

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

button {
	cursor: pointer;
}

summary {
	cursor: pointer;
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

.mona-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mona-skip {
	position: absolute;
	top: -100%;
	left: var(--mona-s-4);
	z-index: 100;
	padding: var(--mona-s-3) var(--mona-s-4);
	background: var(--mona-amber);
	color: var(--mona-ink);
	font-weight: var(--mona-w-semibold);
	text-decoration: none;
	border-radius: var(--mona-radius-sm);
}

.mona-skip:focus {
	top: var(--mona-s-3);
}

/* =====================================================================
 * WordPress compatibility
 *
 * Everything above this line is the prototype's own base.css, ported
 * unchanged. Below is what WordPress itself emits and the prototype — a
 * static folder — never had to style. None of it is design: leaving it
 * out does not make the page look like the prototype, it makes core's
 * own markup render wrong.
 * ===================================================================== */

/*
 * Core, and every plugin, emit `.screen-reader-text`; the design's own
 * visually-hidden class is `.mona-sr`. Without this alias a nav menu's
 * "skip" text, a gallery caption's label and the comment form's hints all
 * render as visible stray words.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: fixed;
	top: var(--mona-s-3);
	left: var(--mona-s-3);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--mona-s-2) var(--mona-s-4);
	clip-path: none;
	background: var(--mona-ink);
	color: var(--mona-text-invert);
	border-radius: var(--mona-radius-sm);
}

/* Editor alignment classes. */
.alignleft {
	float: left;
	margin: 0 var(--mona-s-5) var(--mona-s-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--mona-s-4) var(--mona-s-5);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide,
.alignfull {
	max-width: none;
}

/* Caption markup, from both the classic editor and blocks. */
.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption {
	margin-top: var(--mona-s-2);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

/* Required by the theme-review guidelines; the design uses neither. */
.sticky,
.bypostauthor {
	position: relative;
}

/*
 * The admin bar is fixed at top: 0 and so is .mona-chrome, so for a logged-in
 * editor the two occupy the same 32px. Push the chrome down rather than the
 * page: the hero must stay flush to the top of the viewport, which is what
 * lets the transparent header state sit over the photograph.
 */
.admin-bar .mona-chrome {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mona-chrome {
		top: 46px;
	}
}

/* =====================================================================
 * MONA Smart Form
 *
 * The plugin owns the form and emits its own `msf-*` markup; the theme's
 * job is to make that output look like the design. plugin-boundaries.md —
 * rebuilding the fields in a template part would fork the submission path
 * and lose the honeypot, the time trap, the rate limit and the entry log.
 *
 * Nothing here is new design. Every value is the one main.css already gives
 * the same control — .mona-field__label, .mona-input / .mona-select /
 * .mona-textarea, .mona-check — mapped onto the class names the plugin
 * actually prints. template-mapping.md § Step 4: derive, do not invent.
 *
 * Loaded from base.css rather than main.css because main.css is the ported
 * prototype and the prototype, a static folder, never had a plugin to style.
 * ===================================================================== */

.msf-form {
	display: grid;
	gap: var(--mona-s-4);
}

.msf-field {
	display: grid;
	gap: var(--mona-s-2);
	margin: 0;
}

/*
 * Everything below is one class heavier than it looks like it needs to be, and
 * that is the point. The plugin's own form.css ships `.msf-form .msf-field
 * label`, `.msf-form .msf-req`, `.msf-form .msf-accept` and `.msf-form .msf-btn`
 * — 0,2,x. The theme's plain `.msf-*` selectors were 0,1,x, so the plugin won
 * every colour no matter that base.css loads after it, and the design's palette
 * only ever reached the inputs. Matching its specificity is what makes the rest
 * apply. prototype-fidelity.md § A state utility must outrank the layout rule
 * it lands on.
 *
 * `inherit` on the label is deliberate: this form appears on the light contact
 * page AND on the front page's subscribe band, which is a dark photograph. The
 * plugin's hardcoded #1B1F2A rendered there at 1.57:1 against the band.
 */
.msf-form .msf-field > label {
	color: inherit;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

.msf-form .msf-req {
	margin-left: 0.25em;
	color: var(--mona-amber-ink);
}

.msf-field input[type="text"],
.msf-field input[type="email"],
.msf-field input[type="tel"],
.msf-field input[type="url"],
.msf-field input[type="number"],
.msf-field input[type="date"],
.msf-field input[type="file"],
.msf-field select,
.msf-field textarea {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--mona-s-4);
	background: var(--mona-paper);
	border: 1px solid var(--mona-line-strong);
	border-radius: var(--mona-radius);
	color: var(--mona-text);
	font-family: inherit;
	font-size: var(--mona-fs-body);
	transition: border-color var(--mona-dur-fast) var(--mona-ease),
		box-shadow var(--mona-dur-fast) var(--mona-ease),
		background var(--mona-dur-fast) var(--mona-ease);
}

.msf-field textarea {
	min-height: 160px;
	padding-block: var(--mona-s-3);
	resize: vertical;
	line-height: 1.55;
}

/* The design's own caret; `appearance: none` first so no native arrow shows. */
.msf-field select {
	appearance: none;
	padding-right: var(--mona-s-8);
	background-image: linear-gradient(45deg, transparent 50%, var(--mona-text) 50%),
		linear-gradient(135deg, var(--mona-text) 50%, transparent 50%);
	background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.msf-field input::placeholder,
.msf-field textarea::placeholder {
	color: var(--mona-text-muted);
}

.msf-field input:focus,
.msf-field select:focus,
.msf-field textarea:focus {
	outline: none;
	background: var(--mona-surface);
	border-color: var(--mona-amber);
	box-shadow: 0 0 0 4px var(--mona-amber-glow);
}

/* Consent row — .mona-check in the design. */
.msf-form .msf-accept {
	display: flex;
	align-items: flex-start;
	gap: var(--mona-s-3);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
	font-family: var(--mona-font);
	font-weight: var(--mona-w-regular);
	letter-spacing: normal;
	line-height: 1.5;
}

.msf-form .msf-accept input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--mona-amber);
}

/* Submit — the design's amber button, without claiming the .mona-btn name. */
.msf-form .msf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mona-s-2);
	min-height: 52px;
	padding: 0 var(--mona-s-6);
	border: 1px solid var(--mona-amber);
	border-radius: var(--mona-radius-pill);
	background: var(--mona-amber);
	color: var(--mona-ink);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		border-color var(--mona-dur-fast) var(--mona-ease);
}

.msf-form .msf-btn:hover {
	background: var(--mona-amber-hot);
	border-color: var(--mona-amber-hot);
}

.msf-form .msf-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/*
 * Per-field error text. The class is `msf-field-error` — the theme styled
 * `.msf-error`, which the plugin never emits, so this had no effect at all and
 * errors kept rendering in the plugin's crimson.
 */
.msf-form .msf-field-error {
	color: var(--mona-warn);
	font-size: var(--mona-fs-xs);
	font-weight: var(--mona-w-semibold);
}

.msf-field.msf-has-error input,
.msf-field.msf-has-error select,
.msf-field.msf-has-error textarea {
	border-color: var(--mona-warn);
}

.msf-status {
	margin: 0;
	font-size: var(--mona-fs-sm);
}

.msf-status:empty {
	display: none;
}

/*
 * The subscribe band is NOT the contact form, and styling it as one is what
 * broke it. The prototype gives `.mona-subscribe__form` a flex row — a
 * translucent pill and the amber button on one line, max 560px, with the label
 * visually hidden via `.mona-sr` and a note underneath. The generic `.msf-*`
 * rules above are tuned for the contact page's light card and stack every
 * field, so on a wide dark photograph the band rendered as a narrow column with
 * a white box in it. prototype-fidelity.md § Do not consolidate across pages:
 * two forms that look alike are frequently different components by design.
 *
 * One more trap on the way: `.mona-subscribe__form` is itself the prototype's
 * flex row, and Smart Form wraps its <form> in a div of its own. That wrapper
 * became the row's only flex item and, at the default `flex: 0 1 auto`, shrank
 * to its content — 349px inside a 499px column, which is why the button kept
 * dropping to a second line. Targeting the child rather than one class name
 * keeps this working whether the plugin wraps the form or not.
 * prototype-fidelity.md § An added wrapper can break a layout, not just pad it.
 */
.mona-subscribe__form > * {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 560px;
}

.mona-subscribe .msf-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mona-s-3);
}

/* Smart Form wraps both the field and the submit button in bare <p>. */
.mona-subscribe .msf-form > p {
	margin: 0;
}

.mona-subscribe .msf-form .msf-field {
	display: block;
	flex: 1 1 240px;
}

/*
 * Hidden, not removed — the prototype's own `.mona-sr` treatment. It is still a
 * real <label for>, so screen readers keep it and dynamic-content.md § Forms is
 * satisfied; a placeholder alone would not be.
 */
.mona-subscribe .msf-form .msf-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The prototype's translucent pill, verbatim — not the contact card's input. */
.mona-subscribe .msf-form .msf-field input[type="email"],
.mona-subscribe .msf-form .msf-field input[type="text"] {
	padding: 0 var(--mona-s-5);
	background: rgba(242, 241, 236, 0.1);
	border: 1px solid rgba(242, 241, 236, 0.3);
	border-radius: var(--mona-radius-pill);
	color: var(--mona-text-invert);
}

.mona-subscribe .msf-form .msf-field input::placeholder {
	color: var(--mona-text-invert-muted);
}

.mona-subscribe .msf-form .msf-field input:focus {
	border-color: var(--mona-amber);
	box-shadow: 0 0 0 4px var(--mona-amber-glow);
}

.mona-subscribe .msf-form .msf-btn {
	flex: 0 0 auto;
}

/* The result line takes the whole row, under the input and the button. */
.mona-subscribe .msf-form .msf-status {
	flex: 1 0 100%;
	color: var(--mona-text-invert);
}

.mona-subscribe .msf-form .msf-accept {
	flex: 1 0 100%;
	color: var(--mona-text-invert);
}