/* MZA-89 redesign — shared base for the redesign page templates ONLY.
 *
 * ⚠️ THIS IS A HAND-CUT SUBSET OF ed-theme-2026's ed-base.css, NOT A COPY.
 * The original also ships `html body { overflow-x: clip; container-type: normal }`
 * and a set of Underscores resets. Those are scoped to nothing and would apply to
 * every page on this site — `overflow-x: clip` on <body> breaks Astra's sticky
 * header, and the resets would fight Astra's own. Only the rules the MZA-89 markup
 * actually depends on are reproduced here, all scoped under .mza-page.
 *
 * Everything else each page needs lives in its own assets/css/mza/mza-<page>.css.
 */

.mza-page {
	/* ⭐ THE ONLY TWO CUSTOM PROPERTIES THE REDESIGN CSS USES.
	 * RULES.md rule 2: literals everywhere except this font pair. Poppins for
	 * headings, Inter for body — straight off the MZA-89 artboards (Poppins 500/600/
	 * 700, Inter 400/600/700). Both are loaded from Google in inc/enqueue-mza.php.
	 *
	 * ⚠️ Astra's own type is Cera Pro. These stay scoped to .mza-page so the rest of
	 * the site is untouched. If the brand ever rules that Cera Pro wins, this is the
	 * one place the swap happens. */
	--font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* ⭐ DESIGN-SCALE RENDERING — see inc/mza-page-scale.php for the reasoning.
	 * Every value in the redesign CSS is fixed px measured off a 1920 frame, so on a
	 * narrower screen it reads oversized. An inline <head> script sets
	 * --ed-page-scale to viewport/1920 and this draws the page to fit.
	 *
	 * `zoom`, not `transform: scale()`: zoom is a LAYOUT operation, so the 1200px
	 * column still resolves correctly inside it. Each page package then multiplies
	 * this by 1.1 on its own root (Jonathan's +10%), which overrides this line above
	 * 999px; this remains the value below the breakpoint and the no-JS fallback. */
	zoom: var(--ed-page-scale, 1);

	box-sizing: border-box;
	background-color: #ffffff;
	color: #1a1c20;
}

.mza-page *,
.mza-page *::before,
.mza-page *::after {
	box-sizing: inherit;
}

.mza-page img {
	max-width: 100%;
}

/* Astra puts padding on .site-content on inner pages; these are full-bleed. */
.mza-page {
	margin: 0;
	padding: 0;
}

/* ⚠️ KILL ASTRA'S 60px GAP ABOVE THE FIRST SECTION.
 *
 * Astra ships `.ast-plain-container.ast-no-sidebar #primary { margin: 60px 0 }`.
 * Our <main> IS #primary, so every redesign page opened with 60px of white between
 * the nav and the hero — visible on Courses, Pricing, Checkout and both Why pages.
 *
 * It did NOT show on Home or Drones, and that difference is the tell: those two are
 * MzeroA's own pages and carry `site-post-title = disabled` in their Astra per-page
 * meta. Our new pages had no Astra meta at all, so they also picked up
 * `ast-normal-title-enabled`. The meta is now set to match theirs — but this rule
 * exists so the layout never DEPENDS on that, and a page created later without the
 * meta still renders correctly.
 *
 * The doubled class is deliberate. Astra's selector is (1 id, 2 classes); a plain
 * `#primary.mza-page` is (1,1) and loses. Repeating the class ties the specificity
 * and our stylesheet loads later, so source order carries it — no !important. */
#primary.mza-page.mza-page {
	margin-top: 0;
	margin-bottom: 0;
}

/* ⚠️ CLEAR THE FIXED MAINTENANCE BANNER.
 *
 * The mza-header-banner plugin renders `.mza-banner-wrapper` as
 * `position: fixed; top: 0; z-index: 222`, so it floats over whatever is at the top
 * of the page. It compensates by pushing Astra's header down —
 * `#ast-desktop-header { margin-top: 45px }` — which is an ASTRA-ONLY selector.
 * Our header is not Astra's, so it got no offset and the banner sat on top of the
 * logo and the See plans button.
 *
 * ⚠️ THE OFFSET GOES ON #page, NOT ON .mza-header, AND THAT MATTERS.
 * .mza-header carries `zoom: calc(var(--ed-page-scale) * 1.1)`. A margin declared on
 * a zoomed element is scaled by that zoom, so 45px would render as roughly 37px on a
 * 1440 screen and the banner would still clip the logo. #page is outside the zoom, so
 * 45px there is 45 real pixels.
 *
 * The sibling combinator means this applies ONLY while the banner is on the page —
 * switch the banner off in the plugin and the gap disappears by itself. The
 * .mza-redesign scope means their other ~24 pages are untouched, where Astra's own
 * compensation is already doing the job.
 *
 * 45px matches the value the plugin already chose for Astra. If the banner copy ever
 * wraps to two lines this needs to grow with it. */
.mza-redesign .mza-banner-wrapper ~ #page {
	padding-top: 45px;
}

.mza-dd {
	position: relative;
}

.mza-redesign .mza-dd__native {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.mza-redesign .mza-dd__btn {
	text-align: left;
}

.mza-redesign .mza-dd__btn.is-empty {
	color: #8a8b8e;
}

.mza-redesign .mza-dd__btn[aria-expanded="true"] {
	border-color: #265897;
}

.mza-redesign .mza-dd__btn--popup {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1c20' stroke-width='1.6'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	border: 1px solid #999;
	border-radius: 4px;
	color: #1a1c20;
	cursor: pointer;
	display: block;
	font: inherit;
	margin-top: 0.25em;
	padding: 0.5em 40px 0.5em 0.5em;
	width: 100%;
}

.mza-redesign .mza-dd__btn--popup:focus {
	border-color: #265897;
	outline: 2px solid #265897;
	outline-offset: 1px;
}

.mza-redesign .mza-dd__list {
	background-color: #fff;
	border: 1px solid #d6d6d8;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(10, 28, 68, 0.12);
	left: 0;
	list-style: none;
	margin: 6px 0 0;
	padding: 6px 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
}

.mza-redesign .mza-dd__list[hidden] {
	display: none;
}

.mza-redesign .mza-dd__opt {
	color: #1a1c20;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 29px;
	padding: 10px 16px;
}

.mza-redesign .mza-dd__opt:focus,
.mza-redesign .mza-dd__opt:hover {
	background-color: #eef3f9;
	color: #265897;
	outline: 0;
}

.mza-redesign .mza-dd__opt[aria-selected="true"] {
	color: #265897;
	font-weight: 600;
}

.mza-faqx-section {
	background-color: #fafafb;
	padding: 80px 0;
}

.mza-faqx-section--white {
	background-color: #fff;
}

.mza-faqx {
	margin: 0 auto;
	max-width: 868px;
	padding: 0 24px;
}

.mza-faqx__title {
	color: #265897;
	font-family: var(--font-heading);
	font-size: 40px;
	font-weight: 600;
	line-height: 45px;
	margin: 0 0 36px;
	text-align: center;
}

.mza-faqx__item {
	background-color: #fff;
	border: 1px solid #e3e4e8;
	border-radius: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mza-faqx__item + .mza-faqx__item {
	margin-top: 12px;
}

.mza-faqx__item[open] {
	border-color: #c9d8ea;
	box-shadow: 0 6px 18px rgba(10, 28, 68, 0.06);
}

.mza-faqx__summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	list-style: none;
	padding: 22px 24px;
}

.mza-faqx__summary::-webkit-details-marker {
	display: none;
}

.mza-faqx__summary:focus-visible {
	border-radius: 12px;
	outline: 2px solid #265897;
	outline-offset: 2px;
}

.mza-faqx__q {
	color: #0a1c44;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	margin: 0;
}

.mza-faqx__icon {
	border: 1.5px solid #265897;
	border-radius: 50%;
	flex: 0 0 28px;
	height: 28px;
	position: relative;
	transition: background-color 0.2s ease;
	width: 28px;
}

.mza-faqx__icon::before,
.mza-faqx__icon::after {
	background-color: #265897;
	content: "";
	height: 1.5px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease;
	width: 12px;
}

.mza-faqx__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.mza-faqx__item[open] .mza-faqx__icon {
	background-color: #265897;
}

.mza-faqx__item[open] .mza-faqx__icon::before,
.mza-faqx__item[open] .mza-faqx__icon::after {
	background-color: #fff;
}

.mza-faqx__item[open] .mza-faqx__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.mza-faqx__a {
	color: #5a5d64;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	padding: 0 24px 22px;
}

.mza-faqx__a p {
	margin: 0;
}

.mza-faqx__a p + p {
	margin-top: 12px;
}

@media (max-width: 999px) {
	.mza-faqx-section {
		padding: 56px 0;
	}

	.mza-faqx {
		padding: 0 20px;
	}

	.mza-faqx__title {
		font-size: 30px;
		line-height: 36px;
		margin-bottom: 24px;
	}

	.mza-faqx__summary {
		padding: 18px 18px;
	}

	.mza-faqx__q {
		font-size: 16px;
		line-height: 24px;
	}

	.mza-faqx__a {
		padding: 0 18px 18px;
	}
}

.mza-faqx-section + section {
	margin-top: 0;
}

.mza-faqx__a {
	overflow: hidden;
	padding: 0;
}

.mza-faqx__a-inner {
	padding: 0 24px 22px;
}

@media (max-width: 999px) {
	.mza-faqx__a-inner {
		padding: 0 18px 18px;
	}
}