/**
 * MaxFurn Custom — base layer.
 *
 * Short token aliases (from theme.json presets), a light reset, accessibility
 * helpers, the container, base typography, buttons and form controls.
 * Component and template styles arrive in their own files in later phases.
 */

/* Tokens: names match DESIGN_SPEC.md §1. Values come from theme.json. */
:root {
	--mf-red: var(--wp--preset--color--red);
	--mf-price: var(--wp--preset--color--price);
	--mf-ink: var(--wp--preset--color--ink);
	--mf-text: var(--wp--preset--color--text);
	--mf-muted: var(--wp--preset--color--muted);
	--mf-strike: var(--wp--preset--color--strike);
	--mf-bg: var(--wp--preset--color--bg);
	--mf-surface: var(--wp--preset--color--surface);
	--mf-header: var(--wp--preset--color--header);
	--mf-topbar: var(--wp--preset--color--topbar);
	--mf-border: var(--wp--preset--color--border);
	--mf-tint: var(--wp--preset--color--tint);
	--mf-banner: var(--wp--preset--color--banner);
	--mf-footer: var(--wp--preset--color--footer);
	--mf-whatsapp: var(--wp--preset--color--whatsapp);

	--mf-font-heading: var(--wp--preset--font-family--heading);
	--mf-font-body: var(--wp--preset--font-family--body);

	--mf-radius-pill: var(--wp--custom--radius--pill);
	--mf-radius-card: var(--wp--custom--radius--card);
	--mf-radius-panel: var(--wp--custom--radius--panel);

	--mf-container: var(--wp--custom--container--max);
	--mf-gutter: var(--wp--custom--container--gutter);
	--mf-section-gap: var(--wp--custom--section-gap);
	--mf-tap: var(--wp--custom--tap-target);
}

@media (max-width: 600px) {
	:root {
		--mf-gutter: var(--wp--custom--container--gutter-mobile);
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--mf-bg);
	color: var(--mf-text);
	font-family: var(--mf-font-body);
	text-rendering: optimizeLegibility;
}

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

figure {
	margin: 0;
}

/* Accessibility */
:focus-visible {
	outline: 2px solid var(--mf-red);
	outline-offset: 2px;
}

/*
 * Size-matched fallback fonts: while Lexend and Work Sans load, text is set in
 * Arial scaled to the same width and line metrics, so nothing re-wraps or
 * moves when the real font arrives (CLS). Measured in Chromium against the
 * self-hosted files on the site's own text (about 18,000 characters of body
 * text, 1,400 of headings): size-adjust = width ratio at the weight in use;
 * ascent/descent overrides = the font's ascent/descent ÷ size-adjust.
 */
@font-face {
	font-family: "Lexend Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 100 500;
	size-adjust: 111.16%;
	ascent-override: 89.96%;
	descent-override: 22.49%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Lexend Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 105.57%;
	ascent-override: 94.72%;
	descent-override: 23.68%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Work Sans Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 100 500;
	size-adjust: 110.81%;
	ascent-override: 83.93%;
	descent-override: 21.66%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Work Sans Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 103.61%;
	ascent-override: 89.76%;
	descent-override: 23.16%;
	line-gap-override: 0%;
}

/* The hidden attribute always hides, even on elements given a display value. */
[hidden] {
	display: none !important;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--mf-surface);
	color: var(--mf-ink);
	border-radius: var(--mf-radius-pill);
	font-weight: 600;
	text-decoration: none;
}

.site-main:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Layout */
.container {
	width: 100%;
	max-width: calc(var(--mf-container) + 2 * var(--mf-gutter));
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
}

.site-main {
	display: block;
	padding-block: 48px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.6em;
	overflow-wrap: break-word;
}

p {
	margin-block: 0 1em;
}

a {
	text-underline-offset: 0.15em;
}

.entry-meta {
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Buttons */
.button,
button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--mf-tap);
	padding: 10px 24px;
	border: 0;
	border-radius: var(--mf-radius-pill);
	background-color: var(--mf-red);
	color: var(--mf-surface);
	font-family: var(--mf-font-body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--mf-ink);
	color: var(--mf-surface);
}

/* Form controls */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
	width: 100%;
	min-height: var(--mf-tap);
	padding: 10px 18px;
	border: 1px solid var(--mf-border);
	border-radius: var(--mf-radius-pill);
	background-color: var(--mf-surface);
	color: var(--mf-text);
	font: inherit;
}

textarea {
	border-radius: var(--mf-radius-card);
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin-block: 0 1em;
}

.search-form label {
	flex: 1;
}

/* Posts and pagination */
.post-list {
	display: grid;
	gap: 32px;
}

.entry--summary .entry-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.entry--summary .entry-title a {
	text-decoration: none;
}

.entry-thumbnail {
	margin-block: 0 24px;
}

.entry-thumbnail img {
	border-radius: var(--mf-radius-card);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 40px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mf-tap);
	min-height: var(--mf-tap);
	padding-inline: 12px;
	border-radius: var(--mf-radius-pill);
	background-color: var(--mf-surface);
	color: var(--mf-ink);
	text-decoration: none;
}

.page-numbers.current {
	background-color: var(--mf-ink);
	color: var(--mf-surface);
}