/*
 * Magik Theme — base styles driven by the brand variables (--mk-*).
 * Everything is wrapped in :where() so Elementor widget settings always win.
 */

:where(body) {
	background: var(--mk-color-background);
	color: var(--mk-color-text);
	font-family: var(--mk-font-body);
	font-weight: var(--mk-body-weight);
	font-size: var(--mk-text-body);
	line-height: var(--mk-body-line-height);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--mk-font-heading);
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
	line-height: var(--mk-heading-line-height);
	color: var(--mk-color-primary);
	text-wrap: balance;
}
:where(h1) { font-size: var(--mk-text-h1); }
:where(h2) { font-size: var(--mk-text-h2); }
:where(h3) { font-size: var(--mk-text-h3); }
:where(h4) { font-size: var(--mk-text-h4); }
:where(h5) { font-size: var(--mk-text-h5); }
:where(h6) { font-size: var(--mk-text-h6); }

:where(p) { text-wrap: pretty; }

:where(a) {
	color: var(--mk-color-accent);
	text-underline-offset: 0.18em;
}

:where(button, .button, input[type="submit"], .wp-element-button) {
	background: var(--mk-color-accent);
	color: var(--mk-color-accent-contrast);
	border: 0;
	border-radius: var(--mk-radius-button);
	font-family: var(--mk-font-body);
	font-weight: 600;
	padding: 0.85em 1.6em;
	cursor: pointer;
	transition: transform var(--mk-duration) var(--mk-ease), filter var(--mk-duration) var(--mk-ease);
}
:where(button, .button, input[type="submit"], .wp-element-button):hover { filter: brightness(1.08); }

/* Elementor buttons: only the radius/transition, colours come from the kit. */
.elementor-button {
	border-radius: var(--mk-radius-button);
	transition: transform var(--mk-duration) var(--mk-ease), filter var(--mk-duration) var(--mk-ease), background-color var(--mk-duration) var(--mk-ease);
}

:where(input:not([type="submit"]), textarea, select) {
	border-radius: var(--mk-radius-input);
	border: 1px solid color-mix(in srgb, var(--mk-color-text) 18%, transparent);
	background: var(--mk-color-background);
	color: var(--mk-color-text);
	font: inherit;
	padding: 0.75em 1em;
}
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--mk-color-accent);
	outline-offset: 2px;
}

:where(img) { border-radius: var(--mk-radius-image); }
.elementor-widget-image img { border-radius: var(--mk-radius-image); }

/* Utility classes usable from Elementor (Advanced > CSS classes). */
.mk-card {
	background: var(--mk-color-surface);
	border-radius: var(--mk-radius-card);
	box-shadow: var(--mk-shadow);
}
.mk-dark {
	background: var(--mk-color-dark);
	color: color-mix(in srgb, var(--mk-color-background) 88%, transparent);
}
.mk-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--mk-color-background); }
.mk-dark a:not(.elementor-button) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mk-dark a:not(.elementor-button):hover { text-decoration-color: currentColor; }
.mk-muted { color: var(--mk-color-muted); }

/* Rounded panel set off the page edges (sections built by Magik). */
.e-con.mk-inset {
	--width: calc(100% - 32px);
	margin-inline: auto;
	border-radius: calc(var(--mk-radius-card) * 1.4);
	overflow: hidden;
}
@media (max-width: 767px) {
	.e-con.mk-inset { --width: calc(100% - 16px); border-radius: var(--mk-radius-card); }
}
.e-con.mk-inset + .e-con.mk-inset { margin-top: 16px; }
.e-con.mk-inset:has(+ footer), .e-con.mk-inset:last-child { margin-bottom: 16px; }

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

/* Provisional text, to be replaced by the site owner: shown in red. */
.mk-todo { color: #d0201a; }
.mk-dark .mk-todo { color: #ff7b72; }

/* Small label above a title */
.mk-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}
.mk-eyebrow::before {
	content: "";
	width: 1.6em;
	height: 1px;
	background: var(--mk-color-signal, var(--mk-color-accent));
}
.mk-quote { font-size: 1.125rem; line-height: 1.55; margin: 0; }
.mk-sep { color: var(--mk-color-signal, var(--mk-color-accent)); font-size: 0.5em; vertical-align: middle; padding: 0 0.4em; }
.mk-marquee .elementor-heading-title { opacity: 0.92; }

/* Big figures and bands use the heading font. */
:is(.mk-counter, .mk-marquee, .mk-index) .elementor-heading-title {
	font-family: var(--mk-font-heading);
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}

/* Legal note under forms, footer bottom bar, newsletter signup */
.mk-form-note { font-size: 0.8125rem; line-height: 1.5; margin: 0; }
.mk-form-note a { color: inherit; }
.mk-footer-bottom { border-top: 1px solid color-mix(in srgb, var(--mk-color-background) 16%, transparent); padding-top: 24px; font-size: 0.875rem; }
.mk-footer-bottom p { margin: 0; }
.mk-form-dark .elementor-field-type-acceptance label { color: color-mix(in srgb, var(--mk-color-background) 80%, transparent); font-size: 0.8125rem; }
.mk-form-dark .elementor-message { color: var(--mk-color-background); }
.mk-signup-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-signup-row input { flex: 1 1 200px; }
.mk-signup-consent { font-size: 0.8125rem; margin: 8px 0 0; }
.mk-signup-done { font-weight: 600; }
.mk-legal h2.elementor-heading-title { font-size: var(--mk-text-h4); margin-top: 24px; }
.mk-legal .elementor-widget-text-editor { font-size: 1rem; }