/* ============================================================
   MK Theme — base.css
   Loaded on every page. Keep it minimal: variables, reset,
   typography, link styles, focus, container, responsive media.
   ============================================================ */

:root {
	/* ── Surface & background ────────────────────────────── */
	--mk-color-bg: #ffffff;
	--mk-color-bg-alt: #f5f5f7;
	--mk-color-surface: #ffffff;
	--mk-color-surface-raised: #ffffff;

	/* ── Text ────────────────────────────────────────────── */
	--mk-color-text: #1a1a1a;
	--mk-color-muted: #6b6b6b;
	--mk-color-text-on-accent: #ffffff;

	/* ── Links & accent ──────────────────────────────────── */
	--mk-color-link: #1a64f0;
	--mk-color-link-hover: #0a47b8;
	--mk-color-focus: #1a64f0;
	--mk-color-accent: #1a64f0;
	--mk-color-accent-hover: #0a47b8;

	/* ── Borders & separators ────────────────────────────── */
	--mk-color-border: #e5e5e5;
	--mk-color-border-light: #f0f0f0;

	/* ── Header (used by template-parts/header/default.php) ─ */
	--mk-header-bg: #ffffff;
	--mk-header-text: #1a1a1a;

	/* ── Footer (used by template-parts/footer/default.php) ─ */
	--mk-footer-bg: #ffffff;
	--mk-footer-text: #1a1a1a;

	/* ── Movie-specific (used by Movie Kit templates) ────── */
	--mk-movie-backdrop: #0a0a0a;
	--mk-movie-card-bg: #1a1a1a;
	--mk-movie-card-text: #e0e0e0;
	--mk-movie-rating: #f5c518;

	/*
	   Color system note (v0.1.7):
	   These variables are the foundation for a future preset system
	   (dark, light, accent variants + custom). All MK Theme CSS
	   references these variables — never hardcoded hex values.
	   When the preset picker arrives, changing one :root block
	   will restyle the entire site.

	   v0.1.7 uses light values as a safe baseline for development.
	   Before public release, the default preset should be revisited;
	   movie sites may default to a dark palette.
	*/

	/* ── Layout (not part of color presets) ───────────────── */
	/* Aligned with theme.json contentSize / wideSize. */
	--mk-content-width: 800px;
	--mk-wide-width: 1200px;

	--mk-space-xs: 0.5rem;
	--mk-space-sm: 0.75rem;
	--mk-space-md: 1rem;
	--mk-space-lg: 1.5rem;
	--mk-space-xl: 2.5rem;

	--mk-radius: 6px;

	--mk-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Oxygen-Sans",
		Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

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

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

body {
	margin: 0;
	font-family: var(--mk-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mk-color-text);
	background: var(--mk-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--mk-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--mk-color-link-hover);
}

.mk-social-links {
	--mk-social-link-color: currentColor;
	--mk-social-link-hover: var(--mk-color-accent);
	color: var(--mk-social-link-color);
}

.mk-social-links__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mk-social-links__link {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--mk-social-link-color);
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	padding: 0;
	text-decoration: none;
	width: 2rem;
}

.mk-social-links__link:hover,
.mk-social-links__link:focus {
	color: var(--mk-social-link-hover);
}

.mk-social-links__icon {
	display: block;
	height: 1.05rem;
	width: 1.05rem;
}

.mk-social-links__icon--imdb,
.mk-social-links__icon--youtube {
	height: 1.1rem;
	width: 1.1rem;
}

.mk-social-links__mark {
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
}

:focus-visible {
	outline: 2px solid var(--mk-color-focus);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--mk-space-md);
	line-height: 1.25;
	font-weight: 700;
}

p {
	margin: 0 0 var(--mk-space-md);
}

/* Container utility used by header/footer/template parts. */
.mk-container,
.mk-main {
	width: 100%;
	max-width: var(--mk-wide-width);
	margin-inline: auto;
	padding-inline: var(--mk-space-md);
}

.mk-main {
	padding-block: var(--mk-space-xl);
}

/* Skip link & screen reader text — accessibility baseline. */
.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;
}