/*
 * MASADER base: reset, typography and layout for non-Elementor templates
 * (blog, single posts, 404, search). Section design lives in /src and is built to /assets/dist.
 */

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

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

body {
	margin: 0;
	background: var(--mx-mist);
	color: var(--mx-ink);
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-base);
	line-height: var(--mx-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--mx-space-4);
	font-family: var(--mx-font-display);
	font-weight: 700;
	line-height: var(--mx-leading-snug);
	letter-spacing: -0.015em;
	color: inherit;
}

p { margin: 0 0 var(--mx-space-4); }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--mx-dur-fast) ease;
}

:focus-visible {
	outline: 2px solid var(--mx-gold);
	outline-offset: 3px;
}

::selection { background: var(--mx-gold); color: var(--mx-ink); }

/* ---- Accessibility -------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mx-skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px; z-index: 100000;
	width: auto; height: auto;
	padding: 12px 18px;
	clip: auto;
	background: var(--mx-ink);
	color: var(--mx-mist);
	border-radius: var(--mx-radius-sm);
}

/* ---- Layout --------------------------------------------------------- */
.mx-main { display: block; }

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

.mx-entry,
.mx-archive { padding-block: var(--mx-space-section); }

.mx-page-header { margin-bottom: var(--mx-space-7); }
.mx-page-title { font-size: var(--mx-text-3xl); line-height: var(--mx-leading-tight); }

.mx-eyebrow {
	font-family: var(--mx-font-mono);
	font-size: var(--mx-text-xs);
	letter-spacing: var(--mx-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mx-gold-600);
}

.mx-entry-meta {
	font-family: var(--mx-font-mono);
	font-size: var(--mx-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mx-sage);
}

.mx-prose { max-width: 72ch; font-size: var(--mx-text-lg); }
.mx-prose a, .mx-link { color: var(--mx-ink); text-decoration-color: var(--mx-gold); }
.mx-prose a:hover, .mx-link:hover { color: var(--mx-gold-600); }
.mx-prose img { border-radius: var(--mx-radius); }

.mx-entry-media { margin: 0 0 var(--mx-space-7); }
.mx-entry-media img { width: 100%; border-radius: var(--mx-radius-lg); }

/* ---- Post cards (blog index / archives) ----------------------------- */
.mx-post-grid {
	display: grid;
	gap: var(--mx-space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.mx-post-card {
	background: var(--mx-paper);
	border: 1px solid var(--mx-line-light);
	border-radius: var(--mx-radius);
	overflow: hidden;
	transition: transform var(--mx-dur) var(--mx-ease-out), box-shadow var(--mx-dur) var(--mx-ease-out);
}
.mx-post-card:hover { transform: translateY(-4px); box-shadow: var(--mx-shadow-soft); }
.mx-post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mx-post-card__body { padding: var(--mx-space-5); }
.mx-post-card__title { font-size: var(--mx-text-xl); }
.mx-post-card__title a { text-decoration: none; }
.mx-post-card__excerpt { color: var(--mx-sage); }

.nav-links { display: flex; gap: var(--mx-space-4); margin-top: var(--mx-space-7); }

/* ---- Forms ---------------------------------------------------------- */
.search-form { display: flex; gap: var(--mx-space-2); max-width: 480px; }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mx-line-light);
	border-radius: var(--mx-radius-sm);
	background: var(--mx-paper);
}
.search-submit {
	padding: 12px 18px;
	border: 0;
	border-radius: var(--mx-radius-sm);
	background: var(--mx-ink);
	color: var(--mx-mist);
	cursor: pointer;
}

/* ---- Temporary header placeholder (removed when the real header is pasted) ---- */
.mx-header-placeholder {
	padding: 18px var(--mx-gutter);
	background: var(--mx-ink);
	font-family: var(--mx-font-display);
	font-weight: 700;
}
.mx-header-placeholder a { color: var(--mx-mist); text-decoration: none; }

/* ---- Fallback footer ------------------------------------------------ */
.mx-site-footer {
	padding-block: var(--mx-space-7);
	background: var(--mx-ink);
	color: var(--mx-text-on-dark);
	font-size: var(--mx-text-sm);
}
.mx-site-footer ul { display: flex; flex-wrap: wrap; gap: var(--mx-space-5); margin: 0 0 var(--mx-space-4); padding: 0; list-style: none; }
.mx-site-footer a { text-decoration: none; }
.mx-site-footer a:hover { color: var(--mx-gold); }
.mx-site-footer__copy { margin: 0; }

/* ---- WordPress core classes ----------------------------------------- */
.alignleft { float: left; margin: 0 var(--mx-space-5) var(--mx-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--mx-space-4) var(--mx-space-5); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .wp-element-caption { font-size: var(--mx-text-sm); color: var(--mx-sage); }

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