/* Max Hero — global brand layer (loaded site-wide, on top of Blocksy). */

/* Satoshi — self-hosted (Fontshare), one family for the whole site. */
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Black.woff2") format("woff2");
	font-weight: 900;
	font-display: swap;
	font-style: normal;
}

:root {
	--mh-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Brand palette — the five values that carry the logo and the plugin icon. */
	--mh-navy:        #10152a;
	--mh-navy-rise:   #1b2440;
	--mh-blue:        #3858e9;
	--mh-blue-strong: #2f49d8; /* white text passes AA on this (buttons) */
	--mh-blue-bright: #6f8bff;
	--mh-teal:        #12a3b4;
	--mh-teal-ink:    #0a6f7a; /* teal that passes AA as text on light grounds */
	--mh-amber:       #f59e0b;

	/* Neutrals — cool, biased toward the accent. */
	--mh-ground:   #f4f6fc;
	--mh-ground-2: #eef1fb;
	--mh-surface:  #ffffff;
	--mh-ink:         #12172a;
	--mh-ink-soft:    #4a5170;
	--mh-line:        #e2e5f2;
	--mh-line-strong: #c9cfe4;
	--mh-on-navy:      #eaeefc;
	--mh-on-navy-soft: #97a0c6;

	--mh-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--mh-radius: 12px;
	--mh-maxw: 1180px;

	/* Nudge Blocksy's own palette + type toward the brand. */
	--theme-palette-color-1: #3858e9;
	--theme-palette-color-2: #2c46c9;
	--theme-palette-color-3: #12172a;
	--theme-palette-color-4: #4a5170;
	--theme-palette-color-5: #e2e5f2;
	--theme-palette-color-6: #eef1fb;
	--theme-palette-color-7: #f7f9fd;
	--theme-palette-color-8: #ffffff;

	--theme-font-family: var(--mh-sans);
	--theme-heading-font-family: var(--mh-sans);
	--theme-text-font-weight: 400;
	--theme-heading-font-weight: 700;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--mh-ground:   #0a0d18;
		--mh-ground-2: #0f1424;
		--mh-surface:  #141a2c;
		--mh-ink:      #eef1fb;
		--mh-ink-soft: #9aa2c6;
		--mh-line:        #242b44;
		--mh-line-strong: #39415f;
		--mh-teal-ink: #3fd0e0;
		--mh-blue:     #6f8bff;
	}
}
:root[data-theme="dark"] {
	--mh-ground:   #0a0d18;
	--mh-ground-2: #0f1424;
	--mh-surface:  #141a2c;
	--mh-ink:      #eef1fb;
	--mh-ink-soft: #9aa2c6;
	--mh-line:        #242b44;
	--mh-line-strong: #39415f;
	--mh-teal-ink: #3fd0e0;
	--mh-blue:     #6f8bff;
}

body {
	font-family: var(--mh-sans);
	line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .ct-title {
	font-family: var(--mh-sans);
	letter-spacing: -0.018em;
	line-height: 1.16;
}

/* --- Accessibility: a consistent, visible focus ring (WCAG 2.4.7 / 2.4.11) --- */
.mh-site a:focus-visible,
.mh-site button:focus-visible,
.mh-mega a:focus-visible,
.mh-mega button:focus-visible,
.mh-site-foot a:focus-visible {
	outline: 3px solid var(--mh-blue);
	outline-offset: 3px;
	border-radius: 4px;
}
.mh-hero a:focus-visible,
.mh-agency a:focus-visible,
.mh-final a:focus-visible,
.mh-hero button:focus-visible,
.mh-final button:focus-visible {
	outline-color: #fff;
}
/* header links get a ring too (Blocksy's own is faint) */
#header a:focus-visible,
#header button:focus-visible {
	outline: 3px solid var(--mh-blue);
	outline-offset: 2px;
	border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.mh-caret,
	.mh-caret.blink { animation: none !important; }
}

/* --- Header: tighter row, bigger logo, no text site-title --- */
#header [data-row="middle"] { min-height: 0; }
#header [data-row="middle"] > .ct-container {
	padding-top: 9px;
	padding-bottom: 9px;
	min-height: 0;
}
.ct-header .site-logo-container img,
.site-logo-container img {
	max-height: 46px !important;
	height: auto;
	width: auto;
}
.ct-header .site-title-container {
	display: none;
}
#header .ct-menu-link { font-weight: 600; }
li.mh-mega-active > .ct-menu-link { color: var(--mh-blue); }

/* --- Front page: hand the canvas to front-page.php --- */
body.home #main-container > main,
body.mh-designed #main-container > main {
	padding: 0;
	margin: 0;
	max-width: none;
	--content-vertical-spacing: 0px;
}
body.mh-designed #main-container > main > .ct-container,
body.mh-designed #main-container > main > article,
body.mh-designed #main-container > main > article > .entry-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
/* Blocksy renders a page-title hero for the front page — we supply our own. */
body.mh-designed .page-title,
body.mh-designed .entry-header,
body.mh-designed .ct-page-title,
body.mh-designed [data-prefix="page"] .entry-header {
	display: none;
}

/* The homepage opens on the dark navy hero; a solid Blocksy header sits above
   it in normal flow. Give that header the brand ground so the seam is clean. */
body.mh-designed #header.ct-header {
	--header-background-color: var(--mh-surface);
	border-bottom: 1px solid var(--mh-line);
}

/* --- Mega menu (functions.php mega_panels() + assets/js/header.js) --- */
.mh-mega-root { position: static; }
.mh-mega {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--mh-surface);
	border-top: 1px solid var(--mh-line);
	border-bottom: 1px solid var(--mh-line);
	box-shadow: 0 26px 50px -26px rgba(18, 23, 42, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	pointer-events: none;
}
.mh-mega.mh-mega-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
.mh-mega .mh-wrap {
	max-width: var(--mh-maxw);
	margin: 0 auto;
}
/* Two classes so this wins over `.mh-mega .mh-wrap` — the panel sets its own
   padding on all four sides. */
.mh-mega .mh-mega-inner {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 44px;
	padding: 36px 24px 40px;
}
.mh-mega-kicker {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mh-blue);
	margin: 0 0 10px;
}
.mh-mega-blurb { font-size: 14px; color: var(--mh-ink-soft); margin: 0 0 14px; }
.mh-mega-cta {
	display: inline-block;
	padding: 4px 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mh-blue);
	text-decoration: none;
}
.mh-mega-cta:hover { text-decoration: underline; }
.mh-mega-links { display: flex; gap: 20px; }

.mh-mega-plugin {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	margin: 0 0 14px;
}
.mh-mega-plugin img { flex: 0 0 auto; border-radius: 10px; }
.mh-mega-plugin strong {
	display: block;
	font-family: var(--theme-heading-font-family);
	font-size: 15px;
	color: var(--mh-ink);
}
.mh-mega-plugin strong + span { font-size: 12.5px; color: var(--mh-ink-soft); }
.mh-mega-plugin:hover strong { color: var(--mh-blue); }
.mh-mega-more {
	margin: 16px 0 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--mh-ink-soft);
}

.mh-mega-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.mh-mega-tile {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid transparent;
	text-decoration: none;
	color: inherit;
	transition: background .12s ease, border-color .12s ease;
}
.mh-mega-tile:hover { background: var(--mh-ground-2); border-color: var(--mh-line); }
.mh-mega-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--mh-ground-2);
	border: 1px solid var(--mh-line);
	border-radius: 9px;
}
.mh-mega-tile:hover .mh-mega-thumb { background: var(--mh-surface); }
.mh-mega-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mh-mega-title {
	font-family: var(--theme-heading-font-family);
	font-weight: 700;
	font-size: 14px;
	color: var(--mh-ink);
}
.mh-mega-body { font-size: 12.5px; line-height: 1.4; color: var(--mh-ink-soft); }

.mh-mega-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mh-mega-tier {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px;
	border: 1px solid var(--mh-line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color .12s ease, transform .12s ease;
}
.mh-mega-tier:hover { border-color: var(--mh-blue); transform: translateY(-2px); }
.mh-mega-tier-name { font-family: var(--theme-heading-font-family); font-weight: 700; font-size: 14px; }
.mh-mega-tier-sites { font-size: 12px; color: var(--mh-ink-soft); }
.mh-mega-tier-price { font-family: var(--theme-heading-font-family); font-weight: 800; font-size: 20px; margin-top: 4px; }
.mh-mega-tier-price span { font-size: 12px; font-weight: 600; color: var(--mh-ink-soft); }

@media (max-width: 992px) {
	.mh-mega-root { display: none; }
}

/* --- Footer ---
   Our own strip below carries the brand, links and copyright, so Blocksy's
   footer row (which repeats the copyright) is suppressed entirely. */
#footer.ct-footer { display: none; }

/* --- Branded footer strip (printed above Blocksy's footer, site-wide) --- */
.mh-site-foot {
	background: var(--mh-ground-2);
	border-top: 1px solid var(--mh-line);
	padding: 56px 0 36px;
	font-family: var(--theme-font-family);
	color: var(--mh-ink);
}
.mh-site-foot .mh-wrap {
	max-width: var(--mh-maxw);
	margin: 0 auto;
	padding: 0 24px;
}
.mh-foot-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
}
.mh-foot-logo { height: 30px; width: auto; display: block; }
.mh-foot-brand p {
	color: var(--mh-ink-soft);
	font-size: 14px;
	margin: 12px 0 0;
	max-width: 32ch;
}
.mh-foot-col h4 {
	font-family: var(--theme-heading-font-family);
	font-size: 13px;
	letter-spacing: .04em;
	margin: 0 0 10px;
}
.mh-foot-col a {
	display: block;
	color: var(--mh-ink-soft);
	text-decoration: none;
	font-size: 14px;
	padding: 7px 0; /* keeps the pointer target >= 24px tall (WCAG 2.5.8) */
}
.mh-foot-col a:hover { color: var(--mh-ink); }
.mh-foot-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--mh-line);
	color: var(--mh-ink-soft);
	font-size: 13px;
}
.mh-workshop { font-family: ui-monospace, Menlo, Consolas, monospace; }
@media (max-width: 820px) {
	.mh-foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}