/* =========================================================================
   MKN header + footer — My Kingdom Network
   Transparent-over-hero header, sticky darkest-purple on scroll, gold-outline
   CTA; darkest-purple footer band with low-opacity monogram watermark.
   Depends on tokens.css (palette / fonts).
   ========================================================================= */

/* --- HEADER ---------------------------------------------------------------
   Selectors carry the #masthead ID because Kadence styles #masthead directly
   (white background); an ID selector always beats our class selectors. */
#masthead.mkn-header,
.mkn-header {
	position: absolute;      /* over the hero */
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: transparent;
	transition: background 320ms var(--mkn-ease), box-shadow 320ms var(--mkn-ease), padding 320ms var(--mkn-ease);
}
/* Non-front pages: solid bar from the start so content isn't hidden behind it. */
body.mkn-has-custom-header:not(.mkn-transparent-header) #masthead.mkn-header,
body.mkn-has-custom-header:not(.mkn-transparent-header) .mkn-header {
	position: sticky;
	background: var(--mkn-darkest);
	box-shadow: 0 8px 30px rgba(24, 15, 48, 0.45);
}
/* Sticky darkest-purple on scroll (front page). JS toggles .is-stuck. */
#masthead.mkn-header.is-stuck,
.mkn-header.is-stuck {
	position: fixed;
	background: var(--mkn-darkest);
	box-shadow: 0 8px 30px rgba(24, 15, 48, 0.45);
}
.admin-bar .mkn-header.is-stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .mkn-header.is-stuck { top: 46px; } }

.mkn-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px clamp(18px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.mkn-header.is-stuck .mkn-header__inner { padding-top: 14px; padding-bottom: 14px; }

.mkn-header__brand { display: inline-flex; align-items: center; line-height: 0; }
.mkn-header__logo {
	height: 82px; width: auto; display: block; /* logo size-up 2026-07-10 (Edward): was 60px */
	transition: height 320ms var(--mkn-ease);
}
.mkn-header.is-stuck .mkn-header__logo { height: 62px; }
/* Mobile: grow only slightly so the fixed header bar stays compact (Phase 1 logo size-up). */
@media (max-width: 600px) {
	.mkn-header__logo { height: 60px; }
	.mkn-header.is-stuck .mkn-header__logo { height: 50px; }
}

.mkn-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
}
.mkn-menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
	list-style: none;
	margin: 0; padding: 0;
}
.mkn-menu a {
	font-family: var(--mkn-font-body);
	font-weight: 500;
	font-size: 0.98rem;
	letter-spacing: 0.01em;
	color: var(--mkn-bg);
	text-decoration: none;
	opacity: 0.92;
	transition: opacity 220ms var(--mkn-ease), color 220ms var(--mkn-ease);
}
.mkn-menu a:hover { opacity: 1; color: var(--mkn-lavender); }
.mkn-menu .current-menu-item > a { color: var(--mkn-lavender); opacity: 1; }

/* Language switcher */
.mkn-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0; padding: 0;
	font-family: var(--mkn-font-body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}
.mkn-lang__item a { color: var(--mkn-bg); text-decoration: none; opacity: 0.6; transition: opacity 220ms var(--mkn-ease); }
.mkn-lang__item a:hover { opacity: 1; }
.mkn-lang__item.is-current a { opacity: 1; color: var(--mkn-lavender); }
.mkn-lang__item + .mkn-lang__item::before { content: "/"; opacity: 0.4; margin-right: 6px; color: var(--mkn-bg); }

/* Gold-outline CTA */
.mkn-header__cta {
	font-family: var(--mkn-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	color: var(--mkn-gold-hi);
	text-decoration: none;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid var(--mkn-gold);
	background: transparent;
	white-space: nowrap;
	transition: background 260ms var(--mkn-ease), color 260ms var(--mkn-ease), border-color 260ms var(--mkn-ease);
}
.mkn-header__cta:hover {
	background: var(--mkn-gold-gradient);
	color: var(--mkn-darkest);
	border-color: transparent;
}

/* Mobile toggle */
.mkn-header__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none; border: 0; cursor: pointer; padding: 8px;
	position: relative;
	z-index: 130; /* ABOVE the .is-open drawer so the close (X) stays clickable */
}
.mkn-header__toggle span { display: block; width: 26px; height: 2px; background: var(--mkn-bg); transition: transform 260ms var(--mkn-ease), opacity 260ms var(--mkn-ease); }
/* Animate the bars into an X when open */
.mkn-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkn-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mkn-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.mkn-header__toggle { display: flex; }
	.mkn-header__nav {
		position: fixed;
		top: 0; right: 0;
		height: 100vh;
		width: min(80vw, 340px);
		background: var(--mkn-darkest);
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 26px;
		padding: 40px;
		transform: translateX(100%);
		transition: transform 320ms var(--mkn-ease);
		box-shadow: -20px 0 60px rgba(24, 15, 48, 0.6);
		z-index: 120; /* below the toggle (130) */
	}
	.mkn-header__nav.is-open { transform: translateX(0); }
	.mkn-menu { flex-direction: column; align-items: flex-start; gap: 20px; }
	.mkn-menu a { font-size: 1.2rem; }
	/* Dim backdrop behind the open drawer */
	body.mkn-nav-open::after {
		content: ""; position: fixed; inset: 0; z-index: 110;
		background: rgba(10, 6, 22, 0.5);
		-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	}
	body.mkn-nav-open { overflow: hidden; }
}

/* --- FOOTER --------------------------------------------------------------- */
.mkn-footer {
	position: relative;
	overflow: hidden;
	background: var(--mkn-darkest);
	color: var(--mkn-bg);
	padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 48px) 0;
}
.mkn-footer__watermark {
	position: absolute;
	right: -2%;
	bottom: -14%;
	font-family: var(--mkn-font-display);
	font-weight: 700;
	font-size: clamp(140px, 28vw, 380px);
	line-height: 0.8;
	color: var(--mkn-lavender);
	opacity: 0.04;
	pointer-events: none;
	user-select: none;
	letter-spacing: -0.04em;
}
.mkn-footer__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 6vw, 80px);
	justify-content: space-between;
	padding-bottom: clamp(40px, 6vw, 64px);
}
.mkn-footer__brand { max-width: 340px; }
.mkn-footer__logo { height: 56px; width: auto; display: block; margin-bottom: 18px; /* logo size-up 2026-07-10: was 44px */ }
.mkn-footer__statement {
	font-family: var(--mkn-font-body);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--mkn-lavender);
	opacity: 0.85;
	margin: 0;
}
.mkn-footer__cols { display: flex; gap: clamp(40px, 6vw, 88px); flex-wrap: wrap; }
.mkn-footer__h {
	font-family: var(--mkn-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--mkn-lavender);
	margin: 0 0 16px;
}
.mkn-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mkn-footer__col a {
	color: var(--mkn-bg);
	text-decoration: none;
	font-size: 0.96rem;
	opacity: 0.82;
	transition: opacity 200ms var(--mkn-ease), color 200ms var(--mkn-ease);
}
.mkn-footer__col a:hover { opacity: 1; color: var(--mkn-lavender); }

.mkn-footer__baseline {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px 0 30px;
	border-top: 1px solid rgba(195, 168, 245, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-family: var(--mkn-font-body);
	font-size: 0.82rem;
	color: rgba(250, 248, 253, 0.55);
}
.mkn-footer__credit a { color: var(--mkn-lavender); text-decoration: none; }
.mkn-footer__credit a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.mkn-footer__inner { flex-direction: column; }
}