/* Tokens Clever Advertising Network Connector (mirror the theme.json palette) */
:root {
	--cads-brand: var(--wp--preset--color--brand);
	--cads-brand-hover: var(--wp--preset--color--brand-hover);
	--cads-brand-deep: var(--wp--preset--color--brand-deep);
	--cads-brand-ink: var(--wp--preset--color--brand-ink);
	--cads-brand-ink-hv: var(--wp--preset--color--brand-ink-hover);
	--cads-brand-pale: var(--wp--preset--color--brand-pale);
	--cads-brand-bdr: var(--wp--preset--color--brand-border);
	--cads-brand-glow: rgba(23, 188, 189, 0.15);
	--cads-gradient: var(--wp--preset--gradient--brand);
	--cads-dark-gradient: var(--wp--preset--gradient--dark);
	--cads-revenue-bg: var(--wp--preset--gradient--revenue);
	--cads-ink: var(--wp--preset--color--ink);
	--cads-text: var(--wp--preset--color--contrast);
	--cads-muted: var(--wp--preset--color--muted);
	--cads-light: var(--wp--preset--color--light);
	--cads-border: var(--wp--preset--color--border);
	--cads-bg: var(--wp--preset--color--surface);
	--cads-card: var(--wp--preset--color--base);

	/* old palette slugs, still used by templates saved in the Site Editor */
	--wp--preset--color--primary: var(--cads-brand-ink);
	--wp--preset--color--primary-dark: var(--cads-brand-ink-hv);
	--wp--preset--color--deep: var(--cads-ink);
	--wp--preset--color--secondary: var(--cads-bg);
	--wp--preset--color--accent: var(--cads-brand);
}

/* Old palette compatibility (no !important, so the .mk-* sections win) */
.has-primary-background-color { background-color: var(--cads-brand-ink); }
.has-primary-dark-background-color { background-color: var(--cads-brand-ink-hv); }
.has-deep-background-color { background-color: var(--cads-ink); }
.has-secondary-background-color { background-color: var(--cads-bg); }
.has-accent-background-color { background-color: var(--cads-brand-pale); }
.has-primary-color,
.has-primary-dark-color { color: var(--cads-brand-ink); }
.has-deep-color { color: var(--cads-ink); }
.has-secondary-color { color: var(--cads-bg); }
.has-accent-color { color: var(--cads-brand); }

html {
	scroll-behavior: smooth;
}

:focus-visible {
	outline: 2px solid var(--cads-brand);
	outline-offset: 2px;
}

::selection {
	background: var(--cads-brand-bdr);
	color: var(--cads-ink);
}

a {
	text-underline-offset: 0.2em;
}

.wp-block-post-featured-image img {
	border-radius: 8px;
}

.wp-block-navigation a:hover {
	color: var(--cads-brand-ink);
}

/* sticky goes on the template-part wrapper: .site-header has the same height as its parent and would not stick */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* full-width sections butt against each other (no white blockGap strip) */
.wp-site-blocks > main,
.wp-site-blocks > footer,
main > .alignfull {
	margin-block-start: 0;
}

.site-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--cads-border);
}

/* blurred background on a pseudo-element: backdrop-filter on the header itself would trap
   the mobile menu (position: fixed) inside it */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
}

.mk-logo {
	display: inline-flex;
	line-height: 0;
}

.mk-logo img {
	height: 41px;
	width: auto;
}

.mk-nav a {
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.mk-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.35rem;
	color: var(--cads-ink);
}

.mk-nav .is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
}

/* offset the fixed header when jumping to sections */
[id] {
	scroll-margin-top: 90px;
}

.site-footer {
	border-top: 1px solid var(--cads-border);
	color: var(--cads-muted);
}

/* ---------- Clever Advertising Network Connector marketing page ---------- */

.mk-display {
	font-size: clamp(2.4rem, 5vw, 3.9rem) !important;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.mk-title {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.mk-lead {
	font-size: 1.2rem;
	opacity: 0.9;
	max-width: 36em;
}

.mk-kicker {
	color: var(--cads-brand-ink);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.mk-highlight {
	color: var(--cads-brand);
	background: linear-gradient(transparent 62%, rgba(23, 188, 189, 0.22) 62%);
}

.mk-pill {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.85rem;
	font-weight: 600;
}

.mk-trust {
	font-size: 0.9rem;
	opacity: 0.8;
	margin-top: 1.25rem;
}

/* Buttons */
.wp-block-button .wp-block-button__link {
	font-weight: 700;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.mk-btn-primary .wp-block-button__link {
	background: var(--cads-gradient);
	color: var(--cads-ink);
	box-shadow: 0 10px 24px rgba(23, 188, 189, 0.3);
}

.mk-btn-primary .wp-block-button__link:hover {
	background: linear-gradient(135deg, var(--cads-brand-hover), var(--cads-brand-deep));
	box-shadow: 0 0 0 4px var(--cads-brand-glow), 0 12px 28px rgba(23, 188, 189, 0.35);
}

.mk-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.mk-btn-ghost .wp-block-button__link:hover {
	border-color: var(--cads-brand);
}

.mk-btn-light .wp-block-button__link {
	background: var(--cads-card);
	color: var(--cads-ink);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
}

.mk-btn-sm .wp-block-button__link {
	padding: 0.55rem 1.1rem;
	font-size: 0.9rem;
	box-shadow: none;
}

/* Hero */
/* dark background comes from the block's "dark" gradient; the cyan glow lives on a pseudo-element
   because the WP gradient class sets background with !important */
.mk-hero,
.mk-cta {
	background: var(--cads-dark-gradient);
	color: #fff;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mk-hero::before,
.mk-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.mk-hero::before {
	background:
		radial-gradient(circle at 85% 10%, rgba(23, 188, 189, 0.28), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(17, 151, 152, 0.18), transparent 50%);
}

.mk-mock {
	background: var(--cads-card);
	color: var(--cads-text);
	border-radius: 16px;
	box-shadow: 0 30px 60px rgba(2, 6, 23, 0.5);
	overflow: hidden;
	transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}

.mk-mock-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.7rem 1rem;
	background: var(--cads-bg);
	border-bottom: 1px solid var(--cads-border);
}

.mk-mock-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cads-light);
}

.mk-mock-bar em {
	margin-left: 0.5rem;
	font-size: 0.8rem;
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

.mk-mock-body {
	padding: 1.5rem;
}

.mk-mock-label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.mk-mock-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--cads-ink);
}

.mk-mock-value small {
	margin-left: 0.6rem;
	font-size: 0.9rem;
	color: var(--cads-brand-ink);
}

.mk-mock-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 120px;
	margin: 1.25rem 0;
}

.mk-mock-chart i {
	flex: 1;
	border-radius: 6px 6px 2px 2px;
	background: linear-gradient(180deg, var(--cads-brand), var(--cads-brand-deep));
}

.mk-mock-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.mk-mock-kpis div {
	padding: 0.7rem;
	border-radius: 10px;
	background: var(--cads-brand-pale);
	border: 1px solid var(--cads-brand-bdr);
}

.mk-mock-kpis b {
	display: block;
	color: var(--cads-brand-ink);
}

.mk-mock-kpis span {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.mk-mock-note {
	padding: 0 1.5rem 0.9rem;
	font-size: 0.7rem;
	color: var(--cads-light);
	text-align: right;
}

/* Stats strip */
.mk-stats {
	background-color: var(--cads-ink);
	color: #fff;
}

.mk-stats p {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.95;
}

.mk-stats strong {
	display: block;
	color: var(--cads-brand);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.2;
}

/* Cards */
.mk-cards > .wp-block-column {
	background: var(--cads-card);
	border: 1px solid var(--cads-border);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mk-cards > .wp-block-column:hover {
	transform: translateY(-4px);
	border-color: var(--cads-brand-bdr);
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.mk-cards h3 {
	color: var(--cads-ink);
	font-size: 1.25rem;
}

.mk-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	background: var(--cads-brand-pale);
	border: 1px solid var(--cads-brand-bdr);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

/* Calculator */
.mk-calc {
	border-radius: 24px;
	background: linear-gradient(120deg, var(--cads-brand-pale), var(--cads-card) 70%);
	border: 1px solid var(--cads-brand-bdr);
}

/* Steps */
.mk-steps > .wp-block-column {
	position: relative;
	border-top: 3px solid var(--cads-brand-bdr);
	padding-top: 1.25rem;
}

/* step dot */
.mk-steps > .wp-block-column::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--cads-brand);
	box-shadow: 0 0 0 4px var(--cads-brand-glow);
}

.mk-step-num {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--cads-brand-deep);
	opacity: 0.45;
	margin: 0;
	line-height: 1;
}

/* FAQ */
.mk-faq {
	border-bottom: 1px solid var(--cads-border);
	padding: 1.1rem 0;
}

.mk-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--cads-ink);
}

.mk-faq summary::marker {
	color: var(--cads-brand);
}

/* Final CTA */
.mk-cta::before {
	background: radial-gradient(circle at 50% 0%, rgba(23, 188, 189, 0.22), transparent 60%);
}

.mk-cta .mk-lead {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	.mk-mock {
		transform: none;
		margin-top: 2rem;
	}

	/* section paddings come inline from the editor; shorter on mobile */
	.mk-hero {
		padding-top: 3rem !important;
		padding-bottom: 3.5rem !important;
	}

	#benefits {
		padding-top: 4rem !important;
		padding-bottom: 0 !important;
	}

	.mk-calc {
		margin-top: 3rem !important;
		margin-bottom: 3rem !important;
		padding: 2rem 1.5rem !important;
	}

	.mk-calc .wp-block-buttons {
		justify-content: flex-start;
	}

	#how-it-works {
		padding-top: 0 !important;
		padding-bottom: 4rem !important;
	}

	main > .has-surface-background-color,
	#faq,
	.mk-cta {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	.mk-cards > .wp-block-column {
		padding: 1.5rem;
	}

	.mk-stats .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem;
	}

	.mk-stats strong {
		font-size: 1.6rem;
	}
}

@media (max-width: 600px) {
	/* below 600px the admin bar is not fixed, so the header sticks to the top */
	.wp-site-blocks > .wp-block-template-part:first-child {
		top: 0;
	}

	/* single-row header: logo on the left, button and menu on the right */
	.site-header {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	.site-header > .wp-block-group {
		flex-wrap: nowrap;
		gap: 0.6rem;
	}

	.site-header > .wp-block-group > .wp-block-group {
		gap: 0.6rem;
	}

	.site-header .wp-block-navigation {
		order: 2;
	}

	.mk-logo img {
		height: 26px;
	}

	.mk-btn-sm .wp-block-button__link {
		padding: 0.5rem 0.8rem;
		font-size: 0.8rem;
		white-space: nowrap;
	}

	[id] {
		scroll-margin-top: 70px;
	}

	.mk-display {
		font-size: clamp(2rem, 9vw, 2.4rem) !important;
	}

	.mk-lead {
		font-size: 1.05rem;
	}

	.mk-pill {
		font-size: 0.75rem;
		border-radius: 12px;
	}

	.mk-kicker {
		letter-spacing: 0.08em;
	}

	/* hero and CTA buttons full width, stacked */
	.mk-hero .wp-block-buttons,
	.mk-calc .wp-block-buttons,
	.mk-cta .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.mk-hero .wp-block-button__link,
	.mk-calc .wp-block-button__link,
	.mk-cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.mk-trust {
		font-size: 0.85rem;
		line-height: 1.8;
	}

	.mk-mock-body {
		padding: 1.25rem;
	}

	.mk-mock-value {
		font-size: 1.6rem;
	}

	.mk-mock-chart {
		height: 90px;
	}

	.mk-mock-kpis {
		gap: 0.5rem;
	}

	.mk-mock-kpis div {
		padding: 0.6rem 0.5rem;
		min-width: 0;
	}

	.mk-mock-kpis span {
		font-size: 0.68rem;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}

	.mk-step-num {
		font-size: 2rem;
	}

	.mk-faq summary {
		font-size: 1rem;
	}
}

@media (max-width: 359px) {
	/* very narrow screens: the CTA lives in the menu and hero */
	.site-header .wp-block-buttons {
		display: none;
	}
}