/* ============================================================================
   Base layer — reset, document defaults, container, buttons.
   ----------------------------------------------------------------------------
   Hand-written, not produced by the split. Assembled from the base of main.css
   plus the two document rules that used to live in the `body.home-v3` token
   block. Values are the COMPUTED v3 result, not main.css's declared values: on
   a v3 page `body.home-v3` overrode the background and text colour, and since
   every route in this theme is a v3 route there is nothing left to override.

   Nothing from the retired Morning Light palette is referenced. The three
   legacy names that survived the split (--body, --mono, --star) are aliased in
   tokens.css; Fraunces (--display) and Anton are referenced by NOTHING and are
   dropped outright, removing two font families from the download.
   ========================================================================== */

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

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

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

body {
	margin: 0;
	font-family: var(--mk-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--mk-ink);
	background: var(--mk-white);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a { color: var(--mk-blue); text-decoration: none; }
a:hover { color: var(--mk-blue-dark); }

/* The `body` prefix is retained: it is what the shipped rule had, and dropping
   it changes specificity from (0,0,2) to (0,0,1). */
body h1,
body h2,
body h3,
body h4 {
	line-height: 1.14;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: var(--mk-tracking-tight);
	color: var(--mk-ink);
}

.container {
	max-width: var(--mk-container);
	margin: 0 auto;
	padding: 0 var(--mk-gutter);
}

/* Visually hidden but readable by a screen reader. Both names exist because
   WordPress core emits the first and WooCommerce the second. */
.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Keyboard focus must stay visible regardless of what the parent theme does. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--mk-blue);
	outline-offset: 2px;
}

/* Skip link — the first tab stop on every page. */
.mk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--mk-z-modal);
	padding: 12px 20px;
	background: var(--mk-navy);
	color: var(--mk-white);
	font-weight: 700;
	border-radius: 0 0 var(--mk-r) 0;
}
.mk-skip-link:focus {
	left: 0;
	color: var(--mk-white);
}

/* ---------------------------------------------------------------- Buttons
   WooCommerce and WooCommerce Blocks each emit their own button classes, so
   the selector list has to name all of them. `.wc-block-components-button` is
   what cart and checkout use — those pages are Blocks, not the classic
   shortcode. */
.btn,
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: 999px;
	border: 2px solid transparent;
	font: 600 15px/1.2 var(--mk-font);
	letter-spacing: .01em;
	text-transform: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary,
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--mk-blue);
	color: #fff;
}
.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--mk-blue-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(14, 44, 203, .25);
}
/* The ghost variants kept Morning Light's near-black #22201B and cream #FDFBF6
   rather than the v3 ink. Preserved as literals so the port stays
   pixel-identical; changing them is a design decision, not part of a move. */
.btn-ghost { background: transparent; color: #22201B; border-color: #22201B; }
.btn-ghost:hover { background: #22201B; color: #FDFBF6; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

/* ============================================================ Trust signals
   Social row, trust badges and the checkout assurance line. These are new in
   v4 and live here rather than in a v3 sheet so the ported stylesheets stay
   byte-identical to what was verified against the baseline. */

.mk-social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
.mk-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--mk-r-circle);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transition: background-color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease);
}
.mk-social a:hover {
	background: var(--mk-blue);
	color: #fff;
	transform: translateY(-2px);
}

.mk-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 18px;
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--mk-line);
}
.mk-trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}
.mk-trust svg {
	flex: 0 0 auto;
	color: var(--mk-blue);
	margin-top: 1px;
}
.mk-trust span { display: flex; flex-direction: column; min-width: 0; }
.mk-trust b {
	font-size: var(--mk-fs-base);
	font-weight: 700;
	color: var(--mk-ink);
	line-height: 1.3;
}
.mk-trust em {
	font-style: normal;
	font-size: var(--mk-fs-sm);
	color: var(--mk-muted);
	line-height: 1.35;
}

.mk-assure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	font-size: var(--mk-fs-sm);
	color: var(--mk-muted);
	line-height: 1.45;
}
.mk-assure svg { flex: 0 0 auto; color: var(--mk-green); margin-top: 1px; }

@media (max-width: 560px) {
	.mk-trust { grid-template-columns: 1fr; gap: 10px; }
}