/* 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;
}