/* =========================================================================
   MKN Design Tokens — My Kingdom Network
   Palette, type, glassmorphism surfaces, motion utilities, section bands.
   Spec: business/projects/empresas-cristianas-directory/wow-redesign-plan.md
   ========================================================================= */

/* --- Fonts -----------------------------------------------------------------
   Self-hosted (assets/fonts/) — swapped off the Google Fonts @import for a
   fully self-hosted, GDPR-clean setup at go-live.
   Playfair Display: 600, 700 + italics (display).  Inter: 400/500/600/700 (UI/body).
--------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/playfair-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/playfair-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/playfair-600italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/playfair-700italic.woff2') format('woff2');
}

:root {
	/* Palette (locked) */
	--mkn-primary:   #2a1a4a;
	--mkn-darkest:   #180f30;
	--mkn-soft:      #3b2a66;
	--mkn-accent:    #9d7bea;
	--mkn-lavender:  #c3a8f5;
	--mkn-bg:        #faf8fd;

	/* AA-safe text variants (a11y): same hue family, darkened only enough to
	   clear 4.5:1 on white/#faf8fd for small body text. Decorative/large-scale
	   uses (icons, borders, kickers on dark bands) keep --mkn-accent/--mkn-muted
	   as-is; these are for small text on light backgrounds only. */
	--mkn-accent-text: #7e62bb;
	--mkn-muted-text:  #726b87;

	/* Foil gold — verification seals + founding badges ONLY (jewelry, not paint) */
	--mkn-gold:      #c9a227;
	--mkn-gold-lo:   #a8821c;
	--mkn-gold-hi:   #e6c96a;
	--mkn-gold-gradient: linear-gradient(135deg, var(--mkn-gold-hi) 0%, var(--mkn-gold) 50%, var(--mkn-gold-lo) 100%);

	/* Type */
	--mkn-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--mkn-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Surfaces / glass */
	--mkn-glass-bg:     rgba(255, 255, 255, 0.06);
	--mkn-glass-border: 1px solid rgba(195, 168, 245, 0.25);
	--mkn-radius:       20px;
	--mkn-glass-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 10px 30px rgba(24, 15, 48, 0.35),
		0 30px 60px rgba(24, 15, 48, 0.25);

	/* Motion */
	--mkn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Typography base ------------------------------------------------------- */
.mkn-display,
.mkn-h1,
.mkn-h2 {
	font-family: var(--mkn-font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.mkn-display-italic {
	font-family: var(--mkn-font-display);
	font-style: italic;
	font-weight: 600;
}

/* --- Kicker: uppercase letter-spaced Inter 600 ---------------------------- */
.mkn-kicker {
	font-family: var(--mkn-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	line-height: 1.4;
	color: var(--mkn-lavender);
}

/* --- Glassmorphism card --------------------------------------------------- */
.mkn-glass {
	background: var(--mkn-glass-bg);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: var(--mkn-glass-border);
	border-radius: var(--mkn-radius);
	box-shadow: var(--mkn-glass-shadow);
}

/* --- Reveal on scroll (paired with mkn.js IntersectionObserver) ----------- */
.mkn-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 300ms ease-out,
		transform 300ms ease-out;
	will-change: opacity, transform;
}
.mkn-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Ken Burns: 18s slow zoom (hero editorial photography) ---------------- */
@keyframes mkn-kenburns {
	0%   { transform: scale(1)    translate(0, 0); }
	100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
.mkn-kenburns {
	animation: mkn-kenburns 18s ease-out both;
	transform-origin: center center;
	will-change: transform;
}

/* --- Gold seal fill (foil gradient) --------------------------------------- */
.mkn-seal-gold {
	background: var(--mkn-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--mkn-gold);
}
/* When applied to an inline SVG, tint its currentColor to gold. */
svg.mkn-seal-gold {
	color: var(--mkn-gold);
	-webkit-text-fill-color: currentColor;
}

/* --- Section bands: darkest-purple strips with gold hairlines -------------- */
.mkn-band {
	background: var(--mkn-darkest);
	color: var(--mkn-bg);
	position: relative;
}
.mkn-band--soft   { background: var(--mkn-soft); }
.mkn-band--primary{ background: var(--mkn-primary); }

/* Thin gold hairline rules top/bottom of a band */
.mkn-band--hairline::before,
.mkn-band--hairline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--mkn-gold-gradient);
	opacity: 0.55;
}
.mkn-band--hairline::before { top: 0; }
.mkn-band--hairline::after  { bottom: 0; }

/* Standalone gold hairline (use between blocks) */
.mkn-hairline {
	height: 1px;
	border: 0;
	background: var(--mkn-gold-gradient);
	opacity: 0.5;
	margin: 0;
}

/* --- Deep gradient overlay for hero (top dark → transparent) -------------- */
.mkn-hero-overlay {
	background: linear-gradient(180deg,
		rgba(24, 15, 48, 0.85) 0%,
		rgba(24, 15, 48, 0.45) 45%,
		rgba(24, 15, 48, 0.0) 100%);
}

/* --- Ghost / primary CTA helpers ------------------------------------------ */
.mkn-btn-ghost {
	background: transparent;
	border: 1px solid rgba(195, 168, 245, 0.55);
	color: var(--mkn-bg);
	border-radius: 999px;
	transition: border-color 300ms var(--mkn-ease), background 300ms var(--mkn-ease);
}
.mkn-btn-ghost:hover {
	border-color: var(--mkn-lavender);
	background: rgba(195, 168, 245, 0.08);
}

/* --- Reduced motion respect ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mkn-reveal { opacity: 1; transform: none; transition: none; }
	.mkn-kenburns { animation: none; }
}

/* --- Global focus visibility (a11y) ----------------------------------------
   Every interactive element gets a clearly visible lavender ring on
   keyboard focus. :focus-visible keeps mouse/touch activation clean (no ring
   on click) while guaranteeing a ring on Tab. Individual components may still
   layer their own richer focus treatment (e.g. form inputs' violet
   box-shadow) — this is the universal baseline everything else builds on. -- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline-style: solid;
	outline-width: 3px;
	outline-color: var(--mkn-lavender);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================================
   MK monogram mark (v1.37.0 — Edward design-normalization 2026-07-11)
   The bare MK crest+cross (no wordmark, no crown, no ring), derived from the
   brand logo. Used everywhere a decorative crown seal previously rendered.
   Colour follows currentColor so each placement keeps its gold/lavender/etc.,
   exactly like the old stroke seal did. One cached asset, referenced by a
   theme-relative URL so the rule stays byte-identical across both instances.
   ========================================================================= */
:root {
	--mkn-mono: url('../../../uploads/2026/07/mkn-monogram-white.png');
}
.mkn-monomark {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: var(--mkn-mono) center / contain no-repeat;
	        mask: var(--mkn-mono) center / contain no-repeat;
}

/* =========================================================================
   Hero monogram watermark (v1.48.0 — Edward 2026-07-13: the MK monogram as a
   subtle, consistent watermark BEHIND the text on every page hero. One shared
   treatment, mirroring the restraint of .mkn-sofband__seal: centered, low
   opacity, decorative. Reuses the site-wide mkn-monogram-white.png (0 new
   requests). Sits above the hero photo + navy overlay (z-index 1) and below
   the hero copy (.mkn-*__inner is z-index 2) so headline legibility is never
   touched. aria-hidden on every placement.
   ========================================================================= */
.mkn-herowm {
	position: absolute; inset: 0; z-index: 1;
	display: grid; place-items: center;
	pointer-events: none;
}
.mkn-herowm img {
	width: min(500px, 72vw); height: auto; display: block;
	opacity: 0.06;
}