/* ====================================================================
   Mizain page templates, page layout only.

   The design token sheet css/mizain-tokens.css owns the custom
   properties, the base typography, focus rings, reduced motion, and the
   shared component classes .mz-eyebrow, .mz-btn, .mz-btn-primary,
   .mz-btn-secondary, .mz-card, .mz-section, .mz-section.is-dark,
   .mz-section.is-ground, .mz-container, .mz-grid-2, .mz-grid-3,
   .mz-grid-4, .mz-lead, .mz-hero-title and .mz-wordmark. None of that
   is redefined here.

   This file adds only what the page templates need on top: the page
   canvas, the hero measure, action rows, the door cards, the two column
   band, the figure slot, the statement band, the closing call to
   action, the note slot, and the prose column.

   Tokens consumed: --mz-ground, --mz-card, --mz-border, --mz-plum-deep,
   --mz-mauve, --mz-lilac-2, --mz-muted, --mz-body-on-dark,
   --mz-card-dark, --mz-card-dark-2, --mz-hairline-dark, --mz-radius,
   --mz-gap, --mz-fs-small, --mz-s2 to --mz-s6.
   ==================================================================== */

/* --- Page canvas ---------------------------------------------------- */

.mz-page {
	width: 100%;
}

.mz-page * {
	box-sizing: border-box;
}

/* --- Heading font reclaim --------------------------------------------
   Sydney's css/styles.min.css carries
     h1,h2,h3,h4,h5,h6 { font-family: -apple-system, BlinkMacSystemFont, ... }
   as a bare element selector. The token sheet styles the same headings
   with the same specificity, so whichever stylesheet loads last wins,
   and any plugin or Customizer output loading after it wins again. That
   is why headings rendered in the system font.

   These selectors carry a class, so they outrank every bare element
   rule regardless of load order. No !important, and the token sheet is
   untouched: the value still comes from --mz-font-sans.
   -------------------------------------------------------------------- */

.mz-page h1,
.mz-page h2,
.mz-page h3,
.mz-page h4,
.mz-brand .mz-wordmark {
	font-family: var(--mz-font-sans);
}

/* --- Header brand ------------------------------------------------------
   The wordmark link that replaces Sydney's site title. The wordmark
   itself is a token sheet component, so only the link box is set here.
   -------------------------------------------------------------------- */

.mz-brand {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.mz-brand:hover,
.mz-brand:focus {
	text-decoration: none;
}

/* --- Sydney header and footer chrome -----------------------------------
   Sydney wraps each builder row in a bootstrap .container, which caps at
   1140px and is not the site measure. These rules put the header and the
   footer on the same --mz-maxw rail as every page section.

   The main header row is a two column grid at repeat(2, 1fr), so the nav
   only had half the rail and wrapped onto a second line at 1440. The
   logo column is sized to its content instead, and the nav takes the
   rest and stays on one line.
   -------------------------------------------------------------------- */

.shfb-header .container,
.shfb-footer .container {
	width: 100%;
	max-width: var(--mz-maxw);
	padding-inline: var(--mz-s3);
}

.shfb-header .shfb-main_header_row .shfb-row.shfb-cols-2 {
	grid-template-columns: auto 1fr;
	align-items: center;
}

.shfb-header .shfb-main_header_row .shfb-column-2 {
	justify-content: flex-end;
}

.shfb-header .menu-primary-container > ul,
.shfb-header #primary-menu {
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* Footer credits: the year line, then a spaced link. */
.shfb-footer .sydney-credits {
	font-size: var(--mz-fs-small);
	color: var(--mz-muted);
}

.shfb-footer .sydney-credits .mz-credit-link {
	margin-left: var(--mz-s3);
	color: var(--mz-plum);
}

.shfb-footer .sydney-credits .mz-credit-link:hover {
	color: var(--mz-plum-deep);
}

/* --- Hero ------------------------------------------------------------ */

.mz-hero {
	padding-block: var(--mz-s6);
}

/* Two columns: the statement, then the balance mark. A 22ch cap used to
   sit on the text column, which measures in the body font, not the hero
   font, so it crushed the h1 to about 250px and five lines. The grid
   sets the measure now. */
.mz-hero > .mz-container {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: var(--mz-gap);
	align-items: center;
}

/* Hold the home line "Design, measure, and apply AI with Students." to
   three lines at 1440. The token sheet tops --mz-fs-hero out at 88px,
   which is too large for a 748px column, so the maximum is reduced here
   rather than in the token sheet. */
.mz-page .mz-hero-title {
	font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
}

.mz-hero .mz-lead {
	max-width: 46ch;
}

/* --- Balance mark in the hero ------------------------------------------
   Inline SVG, so it takes the mauve through currentColor. */

.mz-hero-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mz-mauve);
}

.mz-hero-mark svg {
	display: block;
	width: clamp(260px, 21vw, 320px);
	height: auto;
}

/* Under 900px the hero is one column and the mark leads, small, above
   the eyebrow rather than stranded below the buttons. */
@media (max-width: 900px) {
	.mz-hero > .mz-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.mz-hero-mark {
		order: -1;
		justify-content: flex-start;
		margin-bottom: var(--mz-s3);
	}

	.mz-hero-mark svg {
		width: 72px;
	}
}

/* The light hero on the privacy notice: the ground section already sets
   the heading colour, this only deepens the eyebrow relationship. */
.mz-hero.is-light .mz-eyebrow {
	color: var(--mz-plum-deep);
}

/* --- Action rows ------------------------------------------------------ */

.mz-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mz-s2);
	margin-top: var(--mz-s4);
}

/* Touch target floor.

   The token sheet button computes to 42.8px at a 16px root: 0.75rem
   padding top and bottom is 24px, two 1px borders is 2px, and the label
   line box is 1.2 times --mz-fs-small, which floors at 14px, so 16.8px.
   That is under the 44px target, so a floor is needed.

   border-box means the 44px is the outer height and the token sheet's
   padding is honoured inside it rather than added on top, so the two
   rules do not fight. The button is inline-flex with centred items, so
   the extra 1.2px lands as balanced space, not a shifted label. Size
   only: colour, padding and radius stay in the token sheet. */
.mz-page a.mz-btn,
.mz-page button.mz-btn,
.mz-page button,
.mz-page input[type="submit"] {
	box-sizing: border-box;
	min-height: 44px;
	min-width: 44px;
}

/* --- Section rhythm ---------------------------------------------------- */

.mz-page .mz-section > .mz-container > .mz-lead {
	margin-bottom: var(--mz-s5);
}

.mz-page .mz-grid-3,
.mz-page .mz-grid-4 {
	margin-top: var(--mz-s4);
}

/* --- Doors section, home ------------------------------------------------
   The home page lost its card grid section, so the three doors now carry
   the weight directly under the hero. A step of extra room above and
   below sets them apart from the hero and the band either side.

   The token sheet drops .mz-section to --mz-s5 under 600px. This sheet
   loads after it, so the same step is repeated there rather than letting
   a flat value win inside that media query.
   -------------------------------------------------------------------- */

.mz-page .mz-doors {
	padding-block: calc(var(--mz-s6) + var(--mz-s1));
}

@media (max-width: 600px) {
	.mz-page .mz-doors {
		padding-block: calc(var(--mz-s5) + var(--mz-s1));
	}
}

/* --- Cards in a grid ----------------------------------------------------
   The token sheet grids use align-items: start, so cards took their own
   height and a row of buttons landed on three different baselines.
   Stretch the row, make each card a column, and let the trailing link
   push itself to the bottom edge. Card bodies of different lengths then
   still share one button baseline. */

.mz-page .mz-grid-2,
.mz-page .mz-grid-3,
.mz-page .mz-grid-4 {
	align-items: stretch;
}

.mz-page .mz-grid-2 > .mz-card,
.mz-page .mz-grid-3 > .mz-card,
.mz-page .mz-grid-4 > .mz-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* margin-top auto does the pinning. The body paragraph above keeps its
   own bottom margin, because the token sheet only zeroes the margin on a
   card's last child, which is now the action, so the gap is already
   there and the button keeps the padding the token sheet gave it. */
.mz-page .mz-card > .mz-btn,
.mz-page .mz-card > a:last-child {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Two column band ---------------------------------------------------- */

.mz-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mz-gap);
	align-items: center;
}

@media (max-width: 860px) {
	.mz-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Figure slot, holds a product render --------------------------------- */

.mz-figure {
	margin: 0;
	border: 1px solid var(--mz-border);
	border-radius: var(--mz-radius);
	background: var(--mz-ground);
	overflow: hidden;
}

.mz-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.mz-section.is-dark .mz-figure {
	border-color: var(--mz-hairline-dark);
	background: var(--mz-card-dark-2);
}

/* --- Mono lead -------------------------------------------------------------
   One mono paragraph on the site, the Platform hero lead, for brand
   fidelity. .mz-mono-lead is not defined in the token sheet, checked.
   -------------------------------------------------------------------------- */

.mz-mono-lead {
	font-family: var(--mz-font-mono);
	font-size: var(--mz-fs-small);
	letter-spacing: 0.02em;
}

/* --- Statement band ------------------------------------------------------- */

.mz-statement {
	max-width: 68ch;
}

.mz-statement > :last-child {
	margin-bottom: 0;
}

/* --- Closing call to action ------------------------------------------------ */

.mz-cta {
	text-align: center;
}

.mz-cta .mz-container > .mz-lead {
	margin-inline: auto;
}

.mz-cta .mz-actions {
	justify-content: center;
}

/* --- Note slot -------------------------------------------------------------- */

.mz-note {
	margin-top: var(--mz-s4);
	padding: var(--mz-s3);
	border-left: 4px solid var(--mz-mauve);
	border-radius: var(--mz-radius);
	background: var(--mz-ground);
	color: var(--mz-muted);
	font-size: var(--mz-fs-small);
}

.mz-section.is-dark .mz-note {
	border-left-color: var(--mz-lilac-2);
	background: var(--mz-card-dark);
	color: var(--mz-body-on-dark);
}

.mz-section.is-ground .mz-note {
	background: var(--mz-card);
}

/* --- Prose column, privacy notice --------------------------------------------- */

.mz-prose {
	max-width: 68ch;
}

.mz-prose h2 {
	margin-top: var(--mz-s5);
}

.mz-prose h2:first-child {
	margin-top: 0;
}