/* ── Consent banner for third party embeds (YouTube) ──────────
   Bottom bar rather than a blocking modal: it informs without holding the
   page hostage, and both answers are the same size so neither is nudged. */

.mk-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40000;
	background: var(--dark-transparent, rgba(14, 12, 13, 0.94));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--accentTransparent, rgba(255, 255, 255, 0.25));
	/* No entrance transform. Whether the visitor can see the consent request
	   must never depend on an animation or transition actually running: a tab
	   that is not painting would otherwise leave the banner unhidden but
	   parked off screen, and nobody would ever be asked. */
}

.mk-consent[hidden] {
	display: none;
}

.mk-consent-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px clamp(14px, 4vw, 32px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.mk-consent-text {
	margin: 0;
	flex: 1 1 320px;
	font-family: 'JetBrainsMono', monospace;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--textColor, #f7f7f2);
	opacity: 0.85;
}

.mk-consent-text strong {
	opacity: 1;
	font-weight: 600;
}

.mk-consent-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Both buttons share one size and weight. Consent is only valid when
   refusing is as easy as agreeing, so decline is never the quieter option.
   Shape follows the site's card idiom (8px radius, dark fill, subtle border
   that turns accent on hover) rather than introducing a new pill style. */
.mk-consent-btn {
	min-width: 132px;
	padding: 10px 18px;
	font-family: 'JetBrainsMono', monospace;
	font-size: 0.78rem;
	color: var(--textColor, #f7f7f2);
	background: var(--dark-transparent, rgba(14, 12, 13, 0.88));
	border: 1px solid color-mix(in srgb, var(--textColor, #f7f7f2) 12%, transparent);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.mk-consent-btn:hover {
	background: var(--brighter, rgba(255, 255, 255, 0.06));
	border-color: var(--accentTransparent, rgba(255, 255, 255, 0.4));
}

/* Accent only on the label, so both options keep identical weight. */
.mk-consent-btn-accept {
	color: var(--accentColor, #8ab4f8);
}

.mk-consent-btn-accept:hover {
	border-color: var(--accentColor, #8ab4f8);
}

.mk-consent-btn:focus-visible {
	outline: 2px solid var(--accentColor, #8ab4f8);
	outline-offset: 2px;
}

@media (max-width: 575px) {
	.mk-consent-inner {
		padding: 12px 14px;
		gap: 12px;
	}

	.mk-consent-actions {
		width: 100%;
	}

	.mk-consent-btn {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Light theme: dimmed text needs less transparency to stay readable */
@media (prefers-color-scheme: light) {
	.mk-consent-text {
		opacity: 1;
	}
}

/* ── Blocked embed placeholder ──
   Shown where an embed would be while consent is missing. */
.mk-embed-blocked {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 14px;
}

.mk-embed-blocked p {
	margin: 0;
	max-width: 40ch;
	font-size: 12.5px;
	line-height: 1.45;
	opacity: 0.75;
}