/* ==========================================================================
   Medanta Organics — Base + layout + components
   Consumes tokens.css. Foundational only (Phase 1). Section/page design is
   built with Elementor; this keeps native templates presentable and consistent.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	margin: 0;
	background: var(--mo-color-canvas);
	color: var(--mo-color-body);
	font-family: var(--mo-font-body);
	font-size: var(--mo-text-base);
	line-height: var(--mo-leading-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--mo-space-3);
	font-family: var(--mo-font-heading);
	line-height: var(--mo-leading-tight);
	color: var(--mo-color-ink);
	font-weight: var(--mo-weight-bold);
}
h1 { font-size: var(--mo-text-4xl); }
h2 { font-size: var(--mo-text-3xl); }
h3 { font-size: var(--mo-text-2xl); }
h4 { font-size: var(--mo-text-xl); }
p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--mo-space-4); }
a { color: var(--mo-color-primary-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mo-color-primary-700); }
small { font-size: var(--mo-text-sm); }
code, pre, kbd { font-family: var(--mo-font-mono); font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--mo-color-line); margin: var(--mo-space-6) 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--mo-color-focus);
	outline-offset: 2px;
	border-radius: var(--mo-radius-sm);
}

/* --- Accessibility helpers --------------------------------------------- */
.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;
}
.mo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--mo-z-toast);
	background: var(--mo-color-ink);
	color: #fff;
	padding: var(--mo-space-2) var(--mo-space-4);
	border-radius: 0 0 var(--mo-radius) 0;
}
.mo-skip-link:focus { left: 0; }

/* --- Scroll reveal (assets/js/reveal.js) -------------------------------
   Fade + slide up, one-time, as an element enters the viewport. Progressive
   enhancement: with JS disabled the element simply stays visible (no
   `opacity: 0` in a no-JS baseline), and reveal.js itself skips the
   animation entirely for prefers-reduced-motion, just adding .is-visible
   immediately. */
@media (scripting: enabled) {
	.mo-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 550ms ease, transform 550ms ease;
	}
	.mo-reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
	/* Cards inside a horizontal carousel are off to the right, so they never
	   intersect the viewport and would sit at opacity 0 until swiped into
	   view - then pop in one at a time, which reads as a loading bug. The
	   carousel's own scrolling is the motion here. */
	.mo-product-carousel__viewport .mo-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Anything scroll-animate.js has taken over. Without this, GSAP finishing
	   a tween and clearing its inline styles hands the element straight into
	   a CSS transition of the very properties GSAP was animating; off-screen
	   the browser parks that transition at currentTime 0 and the element stays
	   at GSAP's start values for good - invisible, with an empty style
	   attribute and no rule that obviously explains it. One system per
	   property. */
	.mo-reveal.mo-gsap-owned {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mo-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Layout ----------------------------------------------------------- */
.mo-container {
	width: 100%;
	max-width: var(--mo-container);
	margin-inline: auto;
	padding-inline: var(--mo-gutter);
}
.mo-container--narrow { max-width: var(--mo-container-narrow); }
.mo-container--wide { max-width: var(--mo-container-wide); }
.mo-main { padding-block: var(--mo-space-8); min-width: 0; }

/* --- Header ---------------------------------------------------------- */
.mo-site-header {
	background: var(--mo-color-surface);
	border-bottom: 1px solid var(--mo-color-line);
	position: sticky;
	top: 0;
	z-index: var(--mo-z-header);
}
/* Three-part header bar: branding | nav (centred) | store tools.
   The nav takes the leftover space and centres itself in it, so the logo
   stays hard-left and search/account/cart stay hard-right. */
.mo-site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mo-space-4);
	min-height: 92px;
	flex-wrap: wrap;
}
.mo-site-title {
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-xl);
	color: var(--mo-color-ink);
	text-decoration: none;
}
.mo-site-header__branding { flex: 0 0 auto; }
/* The logo is now a horizontal lockup (mark + wordmark, 452x128) rather than
   the square mark it replaced. Height is therefore capped far lower: at the
   old 115px this artwork would run over 400px wide and crowd the nav off the
   bar. Width is the constraint that matters for a wide lockup, so both are
   set and object-fit keeps the proportions whichever binds first. */
.mo-site-header__branding img {
	max-height: 68px;
	max-width: 240px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.mo-primary-nav-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}
.mo-site-header__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--mo-space-3);
	margin-inline-start: auto;
}

.mo-primary-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mo-space-2) var(--mo-space-5);
}
.mo-primary-nav a {
	text-decoration: none;
	color: var(--mo-color-ink);
	font-weight: var(--mo-weight-medium);
	padding-block: var(--mo-space-2);
	display: inline-block;
}
.mo-primary-nav a:hover,
.mo-primary-nav .current-menu-item > a { color: var(--mo-color-primary-600); }

/* --- Header tools: search, cart, account -------------------------------
   Shared shape for the icon-only controls in the bar. The 44px box is the
   touch target; the glyph inside is smaller. */
.mo-header-tool {
	display: inline-flex;
	align-items: center;
	gap: var(--mo-space-2);
	min-height: 44px;
	padding: 0 var(--mo-space-2);
	border: 0;
	border-radius: var(--mo-radius-pill);
	background: none;
	color: var(--mo-color-ink);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mo-transition), color var(--mo-transition);
}
.mo-header-tool:hover {
	background: var(--mo-color-canvas-alt);
	color: var(--mo-color-primary-700);
}
.mo-header-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}
.mo-header-tool__icon svg,
.mo-header-cart__icon svg,
.mo-header-account__icon svg { display: block; }

/* Cart: icon with a count badge over its top-right, then the word. */
.mo-header-cart__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}
/* Dark pill, always shown - including at zero, which the reference does and
   which reads as "your cart, currently empty" rather than as a missing
   element. */
.mo-header-cart__badge {
	position: absolute;
	top: -7px;
	right: -11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border-radius: var(--mo-radius-pill);
	background: var(--mo-color-ink);
	/* White on --mo-color-ink (#1c2b27) is 14.4:1 - comfortably AAA. */
	color: #fff;
	font-size: 11px;
	line-height: 1;
	font-weight: var(--mo-weight-bold);
	transition: transform var(--mo-transition);
}
.mo-header-cart:hover .mo-header-cart__badge { transform: scale(1.08); }
.mo-header-cart__text {
	font-size: var(--mo-text-sm);
	font-weight: var(--mo-weight-medium);
}

/* Account: icon beside a two-line block - the action links above, the label
   beneath. */
.mo-header-account {
	display: inline-flex;
	align-items: center;
	gap: var(--mo-space-2);
	padding-left: var(--mo-space-2);
}
.mo-header-account__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--mo-color-ink);
	flex: 0 0 auto;
}
.mo-header-account__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.25;
}
.mo-header-account__links {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: var(--mo-text-sm);
}
.mo-header-account__link {
	color: var(--mo-color-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--mo-transition);
}
.mo-header-account__link:hover { color: var(--mo-color-primary-700); }
.mo-header-account__or { color: var(--mo-color-muted); font-size: var(--mo-text-sm); }
.mo-header-account__name {
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-base);
	color: var(--mo-color-ink);
	white-space: nowrap;
}

.mo-header-actions {
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
}

/* --- Search panel -------------------------------------------------------
   A dialog over the whole viewport. `hidden` is what actually removes it from
   the tab order and the accessibility tree; the class only drives the
   animation, and JS removes the class first, then re-applies `hidden` once the
   exit transition has run (hidden would cancel it outright). */
.mo-search-panel {
	position: fixed;
	inset: 0;
	z-index: var(--mo-z-overlay);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.mo-search-panel[hidden] { display: none; }

.mo-search-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 43, 39, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 240ms ease;
}
.mo-search-panel.is-open .mo-search-panel__backdrop { opacity: 1; }

.mo-search-panel__body {
	position: relative;
	width: min(720px, calc(100% - 2 * var(--mo-space-5)));
	margin-top: clamp(4rem, 14vh, 9rem);
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-color-surface);
	box-shadow: var(--mo-shadow-lg);
	opacity: 0;
	transform: translateY(-18px) scale(0.97);
	transition: opacity 240ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mo-search-panel.is-open .mo-search-panel__body {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.mo-search-panel__close {
	position: absolute;
	top: var(--mo-space-3);
	right: var(--mo-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--mo-radius-pill);
	background: none;
	color: var(--mo-color-muted);
	cursor: pointer;
	transition: background var(--mo-transition), color var(--mo-transition);
}
.mo-search-panel__close:hover {
	background: var(--mo-color-canvas-alt);
	color: var(--mo-color-ink);
}

.mo-search-panel__title {
	margin: 0 0 var(--mo-space-4);
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-2xl);
	color: var(--mo-color-ink);
}

.mo-search-panel__form {
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
	padding: var(--mo-space-2) var(--mo-space-2) var(--mo-space-2) var(--mo-space-4);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-pill);
	background: var(--mo-color-canvas);
	transition: border-color var(--mo-transition), box-shadow var(--mo-transition);
}
.mo-search-panel__form:focus-within {
	border-color: var(--mo-color-primary);
	box-shadow: var(--mo-focus-ring);
}
.mo-search-panel__icon {
	display: inline-flex;
	color: var(--mo-color-muted);
	flex: 0 0 auto;
}
.mo-search-panel__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--mo-text-lg);
	color: var(--mo-color-ink);
}
.mo-search-panel__field:focus { outline: none; }
/* The wrapper already shows the focus ring, and the browser's own clear button
   would sit under the submit control. */
.mo-search-panel__field::-webkit-search-cancel-button { display: none; }

.mo-search-panel__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--mo-space-5);
	border: 0;
	border-radius: var(--mo-radius-pill);
	background: var(--mo-color-primary);
	/* White on --mo-color-primary (#a25800) is 5.34:1 - AA. */
	color: #fff;
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-sm);
	cursor: pointer;
	transition: background var(--mo-transition);
}
.mo-search-panel__submit:hover { background: var(--mo-color-primary-700); }

/* Holding the page still while the dialog is up, so a scroll gesture aimed at
   the panel does not run the page behind it instead. */
.mo-search-open,
.mo-search-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mo-search-panel__backdrop,
	.mo-search-panel__body { transition: none; }
	.mo-search-panel__body { transform: none; }
}

/* Phones: the desktop padding/button sizing left the field only ~128px wide
   on a 390px screen - not the "large search input" the design calls for.
   Tighter panel padding and a smaller submit button hand that space back to
   the one control people are actually there to use. Same 560px breakpoint the
   header itself collapses at. */
@media (max-width: 560px) {
	.mo-search-panel__body {
		width: calc(100% - 2 * var(--mo-space-4));
		margin-top: clamp(3rem, 14vh, 6rem);
		padding: var(--mo-space-5) var(--mo-space-4);
	}
	.mo-search-panel__form { padding-right: var(--mo-space-1); gap: var(--mo-space-1); }
	.mo-search-panel__submit {
		padding: 0 var(--mo-space-3);
		font-size: var(--mo-text-xs);
	}
}

.mo-nav-toggle {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius);
	background: var(--mo-color-surface);
	cursor: pointer;
}
.mo-nav-toggle__box,
.mo-nav-toggle__box::before,
.mo-nav-toggle__box::after {
	display: block;
	width: 18px; height: 2px;
	margin-inline: auto;
	background: var(--mo-color-ink);
	transition: transform var(--mo-transition), opacity var(--mo-transition);
}
.mo-nav-toggle__box { position: relative; }
.mo-nav-toggle__box::before { content: ""; position: absolute; top: -6px; left: 0; }
.mo-nav-toggle__box::after  { content: ""; position: absolute; top: 6px; left: 0; }
.mo-nav-toggle[aria-expanded="true"] .mo-nav-toggle__box { background: transparent; }
.mo-nav-toggle[aria-expanded="true"] .mo-nav-toggle__box::before { transform: translateY(6px) rotate(45deg); }
.mo-nav-toggle[aria-expanded="true"] .mo-nav-toggle__box::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
	/* A 115px mark is a desktop-only luxury: on a tablet it plus the tools row
	   would push real content below the fold before anything has loaded. */
	.mo-site-header__inner { min-height: 0; padding-block: var(--mo-space-3); }
	.mo-site-header__branding img { max-height: 56px; max-width: 200px; }
	.mo-nav-toggle { display: block; order: 3; }
	/* The nav is second in the DOM (for tab order) but drops to its own row
	   below the bar on mobile, where the toggle controls it. */
	.mo-primary-nav-wrap {
		order: 4;
		flex-basis: 100%;
		display: none;
	}
	.mo-primary-nav-wrap.is-open { display: block; }
	.mo-site-header__tools { order: 2; gap: var(--mo-space-2); }
	.mo-primary-nav {
		flex-direction: column;
		gap: 0;
		padding-block: var(--mo-space-2);
	}
	.mo-primary-nav a {
		padding: var(--mo-space-3) 0;
		border-top: 1px solid var(--mo-color-line);
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* Phones: everything in one row - logo, search, cart, account, hamburger.
   Icon-only tools (below) plus a smaller logo make that fit down to the
   narrowest phones without any control shrinking below a 44px touch target. */
@media (max-width: 560px) {
	.mo-site-header__inner { padding-block: var(--mo-space-2); gap: var(--mo-space-2); }
	.mo-site-header__branding img { max-height: 40px; max-width: 130px; }
	.mo-site-header__tools { gap: var(--mo-space-1); margin-inline-start: 0; }
	/* .mo-nav-toggle keeps the order:3 and .mo-site-header__tools keeps the
	   order:2 set at 768px - both stay in the bar's single row rather than
	   being pushed onto their own line. */
	/* Icon-only on a phone: with the field gone the tools row is three
	   controls (search, cart, account), but "Cart" plus "Login or Register /
	   Wellness Account" is still too much text to sit beside a logo and a
	   hamburger in one row on a 360-390px screen. Trimming to icons keeps
	   every touch target its full 44px instead of letting flexbox squeeze
	   all five controls to fit. */
	.mo-header-cart__text,
	.mo-header-account__body { display: none; }
	.mo-header-account { padding-left: 0; gap: 0; }
	.mo-primary-nav-wrap { order: 5; }
}

/* --- Footer --------------------------------------------------------
   Multi-column e-commerce footer: brand blurb + link columns, all inside
   the same .mo-container the header and every homepage section use. */
.mo-site-footer {
	background: var(--mo-color-ink);
	color: #d8ded9;
	padding-block: var(--mo-section-py);
	margin-top: var(--mo-space-8);
}
.mo-site-footer a { color: #fff; }

.mo-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mo-space-6);
}
@media (min-width: 560px) {
	.mo-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	/* Brand column gets the extra room; the three link columns stay even. */
	.mo-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--mo-space-8); }
}

.mo-footer-col__title {
	margin: 0 0 var(--mo-space-3);
	font-size: var(--mo-text-base);
	font-weight: var(--mo-weight-bold);
	color: #fff;
}
.mo-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mo-space-2);
	font-size: var(--mo-text-sm);
}
.mo-footer-list a { text-decoration: none; }
.mo-footer-list a:hover { text-decoration: underline; }

.mo-footer-brand { margin-bottom: var(--mo-space-3); }
.mo-footer-brand .mo-site-title { color: #fff; text-decoration: none; }
.mo-footer-brand__text {
	margin: 0;
	max-width: 34ch;
	font-size: var(--mo-text-sm);
	color: #b9c4bd;
}

.mo-site-footer__bar {
	margin-top: var(--mo-space-6);
	padding-top: var(--mo-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mo-site-footer__copy { margin: 0; color: #9fb0aa; font-size: var(--mo-text-sm); }

/* --- Buttons ---------------------------------------------------- */
.mo-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mo-space-2);
	min-height: 44px;
	padding: 0.7em 1.4em;
	font: inherit;
	font-weight: var(--mo-weight-medium);
	line-height: 1;
	color: #fff;
	background: var(--mo-color-primary);
	border: 1px solid var(--mo-color-primary);
	border-radius: var(--mo-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mo-transition), border-color var(--mo-transition), transform var(--mo-transition);
}
.mo-button:hover,
.wp-block-button__link:hover {
	background: var(--mo-color-primary-600);
	border-color: var(--mo-color-primary-600);
	color: #fff;
}
.mo-button:active { transform: translateY(1px); }
.mo-button--secondary {
	color: var(--mo-color-primary-700);
	background: transparent;
	border-color: currentColor;
}
.mo-button--accent {
	/* White-on-green (6.73:1) rather than ink-on-green (2.19:1, fails WCAG AA) */
	color: #fff;
	background: var(--mo-color-accent);
	border-color: var(--mo-color-accent);
}
.mo-button--accent:hover {
	color: #fff;
	background: var(--mo-color-accent-600);
	border-color: var(--mo-color-accent-600);
}

/* --- Forms ---------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
	width: 100%;
	padding: 0.65em 0.85em;
	font: inherit;
	color: var(--mo-color-ink);
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius);
	transition: border-color var(--mo-transition), box-shadow var(--mo-transition);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--mo-color-primary);
	box-shadow: var(--mo-focus-ring);
	outline: none;
}
/* Focus-visible takes over from the generic :focus box-shadow when the browser
   supports it, so mouse clicks don't show a keyboard-style ring. */
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { box-shadow: none; }

label { display: inline-block; margin-bottom: var(--mo-space-1); font-weight: var(--mo-weight-medium); color: var(--mo-color-ink); }

/* Minimum 44px touch target on all interactive controls (WCAG 2.5.5 / mobile). */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
input[type="submit"], button, select { min-height: 44px; }

.mo-search-form { display: flex; gap: var(--mo-space-2); }
.mo-search-form__field { flex: 1 1 auto; min-width: 0; }
.mo-search-form__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0.65em 1.2em;
	border: 1px solid var(--mo-color-primary);
	background: var(--mo-color-primary);
	color: #fff;
	border-radius: var(--mo-radius);
	cursor: pointer;
}

/* --- Form notice ----------------------------------------------
   Generic status banner for native (non-WooCommerce) forms, e.g. the
   contact form. Mirrors .woocommerce-message/.woocommerce-error, which
   only load on WooCommerce-context pages and so can't be reused here. */
.mo-form-notice {
	margin: 0 0 var(--mo-space-5);
	padding: var(--mo-space-3) var(--mo-space-4);
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-top: 3px solid var(--mo-color-success);
	border-radius: var(--mo-radius);
	box-shadow: var(--mo-shadow-sm);
}
.mo-form-notice--error { border-top-color: var(--mo-color-error); }

/* --- Contact form ---------------------------------------------- */
.mo-contact-form__row { margin-bottom: var(--mo-space-4); }
.mo-contact-form__hint { margin: var(--mo-space-1) 0 0; color: var(--mo-color-muted); font-size: var(--mo-text-sm); }
.mo-contact-form__error { margin: var(--mo-space-1) 0 0; color: var(--mo-color-error); font-size: var(--mo-text-sm); }
.mo-contact-form [aria-invalid="true"] { border-color: var(--mo-color-error); }
.mo-contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Cards --------------------------------------------------- */
.mo-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--mo-space-6);
}
.mo-card {
	display: flex;
	flex-direction: column;
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--mo-transition), transform var(--mo-transition);
}
.mo-card:hover { box-shadow: var(--mo-shadow); transform: translateY(-2px); }
.mo-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mo-card__body { padding: var(--mo-space-5); display: flex; flex-direction: column; gap: var(--mo-space-2); }
.mo-card__title { font-size: var(--mo-text-xl); margin: 0; }
.mo-card__title a { color: var(--mo-color-ink); text-decoration: none; }
.mo-card__title a:hover { color: var(--mo-color-primary-600); }
.mo-card__meta { color: var(--mo-color-muted); font-size: var(--mo-text-sm); }
.mo-card__excerpt { color: var(--mo-color-body); }
.mo-card__more { margin-top: auto; font-weight: var(--mo-weight-medium); text-decoration: none; }

/* --- Entry (single / page) ---------------------------------- */
.mo-entry__header { margin-bottom: var(--mo-space-6); }
.mo-entry__title { margin-bottom: var(--mo-space-2); }
.mo-entry__meta { color: var(--mo-color-muted); font-size: var(--mo-text-sm); }
.mo-entry__thumb { margin: 0 0 var(--mo-space-6); border-radius: var(--mo-radius-lg); overflow: hidden; }
.mo-entry__content > * { margin-bottom: var(--mo-space-4); }
.mo-entry__content h2, .mo-entry__content h3 { margin-top: var(--mo-space-6); }

/* --- Archive header --------------------------------------- */
.mo-archive-header { margin-bottom: var(--mo-space-6); }
.mo-archive-title { margin-bottom: var(--mo-space-2); }
.mo-archive-description { color: var(--mo-color-muted); }

/* --- Pagination ------------------------------------------ */
.pagination, .mo-page-links, .navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mo-space-2);
	margin-top: var(--mo-space-8);
}
.pagination .page-numbers,
.navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--mo-space-2);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius);
	background: var(--mo-color-surface);
	color: var(--mo-color-ink);
	text-decoration: none;
}
.pagination .page-numbers.current,
.navigation .page-numbers.current {
	background: var(--mo-color-primary);
	border-color: var(--mo-color-primary);
	color: #fff;
}

/* --- Empty state ---------------------------------------- */
.mo-none { text-align: center; padding-block: var(--mo-space-10); }
.mo-none .mo-search-form { max-width: 420px; margin-inline: auto; margin-top: var(--mo-space-4); }

/* --- 404 ----------------------------------------------- */
.mo-404 { text-align: center; padding-block: var(--mo-space-10); }
.mo-404 .mo-search-form { max-width: 420px; margin-inline: auto; margin-block: var(--mo-space-4) var(--mo-space-6); }

/* --- Comments ----------------------------------------- */
.mo-comments { margin-top: var(--mo-space-10); }
.mo-comment-list { list-style: none; margin: 0; padding: 0; }
.mo-comment-list ol { list-style: none; }

/* --- Utilities --------------------------------------- */
.alignwide { max-width: var(--mo-container-wide); }
.alignfull { max-width: none; }

/* ==========================================================================
   Responsive layer
   Target widths audited: 320, 375, 480, 768, 1024, 1280, 1440.
   Base rules above are fluid (clamp() gutters/type, auto-fill grids) and
   already hold from 320px up with no changes. The rules below are the
   width-specific adjustments layered on top of that fluid base.
   ========================================================================== */

/* Horizontal-overflow safety net: anything that can overflow its container
   (tables, embeds, long unbroken strings) scrolls internally instead of
   pushing the page wider than the viewport. */
table { max-width: 100%; }
.mo-entry__content table,
.mo-comments table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
iframe, embed, object { max-width: 100%; }
.mo-entry__content, .mo-card__excerpt, .mo-comment-list { overflow-wrap: break-word; word-break: break-word; }

/* 320-374px: smallest supported phones. Tighten heading scale and spacing so
   nothing crowds the viewport; container gutter is already fluid (clamp). */
@media (max-width: 374px) {
	h1 { font-size: 1.9rem; }
	h2 { font-size: 1.55rem; }
	.mo-site-title { font-size: var(--mo-text-lg); }
	.mo-button, .wp-block-button__link { width: 100%; }
	.mo-search-form { flex-direction: column; }
	.mo-search-form__submit { width: 100%; }
}

/* 375-479px: standard small phones. */
@media (min-width: 375px) and (max-width: 479px) {
	.mo-post-list { grid-template-columns: 1fr; }
}

/* up to 480px: single-column card/content layout regardless of exact width
   above (covers 320 and 375 together for anything not already 1-col). */
@media (max-width: 480px) {
	.mo-post-list { grid-template-columns: 1fr; }
}

/* 768px and down: header collapses to the mobile nav (see .mo-nav-toggle
   rules above). The footer's own column count is handled by .mo-footer-grid. */
@media (max-width: 768px) {
	.mo-entry__title, .mo-archive-title { font-size: var(--mo-text-3xl); }
}

/* 768-1023px: tablet. Two-column card grid, header stays inline (above the
   768px collapse threshold this rule does not apply; at exactly 768 the
   collapsed nav rules above take precedence, which is the intended tablet
   portrait behaviour). */
@media (min-width: 769px) and (max-width: 1023px) {
	.mo-post-list { grid-template-columns: repeat(2, 1fr); }
}

/* 1024-1279px: small desktop / tablet landscape. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mo-post-list { grid-template-columns: repeat(3, 1fr); }
}

/* 1280px and up: full desktop grid. */
@media (min-width: 1280px) {
	.mo-post-list { grid-template-columns: repeat(3, 1fr); }
}