/* ==========================================================================
   NAA Lean - Gutenberg compatibility layer
   Loaded only on pages using the "Lean Blocks" page template.
   Depends on lean-redesign.css for tokens (--naa-*) and all .naa-lean-* rules.
   This file only teaches core blocks to behave inside that design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kill core layout auto-spacing.
   WordPress injects a rule like
       .is-layout-flow > * + * { margin-block-start: 24px }
   for every core/group. Inside our CSS grids and flex rows that doubles up on
   the gap. The lean design sets every margin explicitly, so we zero it out.
   -------------------------------------------------------------------------- */
.naa-lean-blocks-main .naa-lean-grid-3 > * + *,
.naa-lean-blocks-main .naa-lean-grid-4 > * + *,
.naa-lean-blocks-main .naa-lean-tiers > * + *,
.naa-lean-blocks-main .naa-lean-trust__grid > * + *,
.naa-lean-blocks-main .naa-lean-trust__item > * + *,
.naa-lean-blocks-main .naa-lean-section__head > * + *,
.naa-lean-blocks-main .naa-lean-pathways > * + *,
.naa-lean-blocks-main .naa-lean-rail > * + *,
.naa-lean-blocks-main .wp-block-buttons > * + * {
	margin-block-start: 0;
}

/* core/group used as a section, rail or container must not inherit a width. */
.naa-lean-blocks-main .wp-block-group.naa-lean-section,
.naa-lean-blocks-main .wp-block-group.naa-lean-trust,
.naa-lean-blocks-main .wp-block-group.naa-lean-container {
	max-width: none;
}

/* --------------------------------------------------------------------------
   2. Paragraph blocks standing in for the design's div helpers.
   Astra gives p a bottom margin; these helpers must sit flush.
   -------------------------------------------------------------------------- */
.naa-lean-blocks-main p.naa-lean-label,
.naa-lean-blocks-main p.naa-lean-eyebrow,
.naa-lean-blocks-main p.naa-lean-trust__k,
.naa-lean-blocks-main p.naa-lean-trust__v,
.naa-lean-blocks-main p.naa-lean-step__n {
	margin: 0;
}

.naa-lean-blocks-main .naa-lean-card p:last-child,
.naa-lean-blocks-main .naa-lean-step p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Two-tone headings.
   In the PHP template the second half sits in a bare span. The block editor
   strips unknown spans, so the blocks use core's highlight format (mark)
   instead and we remove its highlight background here.
   -------------------------------------------------------------------------- */
.naa-lean-blocks-main .naa-lean-h2 mark,
.naa-lean-blocks-main h1 mark,
.naa-lean-blocks-main h2 mark,
.naa-lean-blocks-main h3 mark {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0;
	color: rgba(22, 59, 44, 0.7);
}

.naa-lean-blocks-main .naa-lean-section--brand .naa-lean-h2 mark,
.naa-lean-blocks-main .naa-lean-next .naa-lean-h2 mark {
	color: rgba(249, 253, 251, 0.7);
}

/* --------------------------------------------------------------------------
   4. core/buttons rendered as .naa-btn.
   The design's .naa-btn--* classes live on the a element. core/button can only
   put className on the wrapping div, so the wrapper uses its own .naa-cta--*
   namespace: reusing .naa-btn--* there made the wrapper inherit the background
   and border from lean-redesign.css, painting a square behind the pill.
   -------------------------------------------------------------------------- */
.naa-lean-blocks-main .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* .naa-lean-ctas keeps its own 32px top margin from lean-redesign.css. */
.naa-lean-blocks-main .wp-block-buttons.naa-lean-ctas {
	margin-top: 32px;
}

.naa-lean-blocks-main .wp-block-buttons.is-content-justification-center {
	justify-content: center;
}

/* The wrapper is only a positioning box. Its own class must never paint,
   or a square block shows up behind the rounded link. */
.naa-lean-blocks-main .wp-block-button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.naa-lean-blocks-main .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 32px;
	border: 0;
	border-radius: 999px;
	background: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.naa-lean-blocks-main .wp-block-button.naa-cta--primary .wp-block-button__link {
	background: var(--naa-brand);
	color: var(--naa-brand-fg) !important;
}

.naa-lean-blocks-main .wp-block-button.naa-cta--primary .wp-block-button__link:hover {
	background: var(--naa-brand-dark);
	color: #fff !important;
}

.naa-lean-blocks-main .wp-block-button.naa-cta--secondary .wp-block-button__link {
	background: #fff;
	color: var(--naa-brand) !important;
	border: 1px solid var(--naa-border);
}

.naa-lean-blocks-main .wp-block-button.naa-cta--secondary .wp-block-button__link:hover {
	border-color: rgba(22, 59, 44, 0.35);
}

.naa-lean-blocks-main .wp-block-button.naa-cta--ghost .wp-block-button__link {
	background: transparent;
	color: var(--naa-brand-fg) !important;
	border: 1px solid rgba(249, 253, 251, 0.6);
}

.naa-lean-blocks-main .wp-block-button.naa-cta--ghost .wp-block-button__link:hover {
	background: rgba(249, 253, 251, 0.1);
}

/* Trailing arrow icon, matching naa_lean_icon( 'arrow-right' ). */
.naa-lean-blocks-main .wp-block-button.naa-cta--arrow .wp-block-button__link::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Leading calendar icon, matching naa_lean_icon( 'calendar' ). */
.naa-lean-blocks-main .wp-block-button.naa-cta--calendar .wp-block-button__link::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* --------------------------------------------------------------------------
   4b. Hero video background.
   One element: the video carries the old hero still as its poster, so the
   image shows instantly and stays put if the video never plays.

   The source is NAA-Website-video-web.mp4, not the original upload. The
   original is 9.2 MB with its moov atom at the very end, so a browser had to
   download the whole file before it could show a single frame - the hero just
   sat on the poster forever. The web version is the same clip remuxed with
   faststart, audio stripped (it plays muted) and re-encoded: 1.4 MB, first
   frame almost immediately.

   No prefers-reduced-motion rule: the clip is silent, slow and decorative, and
   hiding it there would leave the hero on a still for anyone running Reduce
   Motion in macOS. Say the word and it goes back in.
   -------------------------------------------------------------------------- */
.naa-lean-hero__video {
	pointer-events: none;
	background: var(--naa-brand);
}

/* --------------------------------------------------------------------------
   5. Editor parity.
   Loaded through add_editor_style() so the block editor canvas shows the same
   design. The editor wraps content in .editor-styles-wrapper instead of
   body.naa-lean-home, so the tokens need re-declaring there.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper {
	--naa-brand: #163b2c;
	--naa-brand-dark: #0f2a1f;
	--naa-brand-soft: #ecf4f0;
	--naa-brand-fg: #f9fdfb;
	--naa-fg: #09140f;
	--naa-muted: #4b5953;
	--naa-border: rgba(22, 59, 44, 0.12);
	--naa-radius: 16px;
	--naa-max: 1200px;
	--naa-font: "SeasonSans", system-ui, sans-serif;
	--naa-section-pad: 96px;
	--naa-diploma-pad: 128px;
}

.editor-styles-wrapper .naa-lean-section {
	padding: 64px 0;
}

.editor-styles-wrapper .naa-lean-container {
	width: min(100% - 48px, var(--naa-max));
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   6. Utility classes replacing the inline styles used in
   template-parts/lean/sections.php, so the block markup stays clean and the
   values live in CSS rather than in the post content.
   -------------------------------------------------------------------------- */
.naa-lean-intro {
	max-width: 40rem;
	margin-bottom: 40px;
}

.naa-lean-intro--narrow {
	max-width: 32rem;
}

.naa-lean-intro--sm {
	max-width: 36rem;
}

.naa-lean-intro--wide {
	max-width: 48rem;
}

.naa-lean-intro--center {
	margin-inline: auto;
	text-align: center;
}

.naa-lean-intro--lg-gap {
	margin-bottom: 64px;
}

.naa-lean-rel {
	position: relative;
}

/* Diploma cards: link pinned to the bottom of an equal-height card. */
.naa-lean-card--stack {
	display: flex;
	flex-direction: column;
}

.naa-lean-card--stack > p {
	flex: 1;
}

.naa-lean-card--stack .naa-lean-link {
	margin-top: 24px;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   7. Colours on the dark brand sections.
   The PHP template sets these inline; as blocks they come from CSS so the
   editor does not have to carry colour attributes.
   -------------------------------------------------------------------------- */
.naa-lean-blocks-main .naa-lean-section--brand .naa-lean-h2,
.naa-lean-blocks-main .naa-lean-next .naa-lean-h2 {
	color: #fff;
}

.naa-lean-blocks-main .naa-lean-section--brand .naa-lean-lead {
	color: rgba(249, 253, 251, 0.75);
}

.naa-lean-blocks-main .naa-lean-next .naa-lean-lead {
	color: rgba(249, 253, 251, 0.7);
}

/* --------------------------------------------------------------------------
   8. Restore the design's own margins.
   Core prints `.is-layout-flow > * { margin-block-end: 0 }` for every group,
   which wipes the margins lean-redesign.css sets on section heads, cards and
   steps. Each value below is the same number as in lean-redesign.css, just
   re-stated at a specificity that survives core's layout CSS.
   -------------------------------------------------------------------------- */
.naa-lean-blocks-main .naa-lean-section__head {
	margin-bottom: 48px;
}

.naa-lean-blocks-main .naa-lean-intro {
	margin-bottom: 40px;
}

.naa-lean-blocks-main .naa-lean-intro--lg-gap {
	margin-bottom: 64px;
}

.naa-lean-blocks-main .naa-lean-h2 {
	margin-top: 16px;
}

.naa-lean-blocks-main .naa-lean-lead {
	margin-top: 16px;
}

.naa-lean-blocks-main .naa-lean-ctas {
	margin-top: 32px;
}

.naa-lean-blocks-main .naa-lean-disclaimer {
	margin: 48px auto 0;
}

.naa-lean-blocks-main .naa-lean-vsl__frame {
	margin: 40px auto 0;
}

.naa-lean-blocks-main .naa-lean-rail-label {
	margin-bottom: 12px;
}

.naa-lean-blocks-main .naa-lean-faq {
	margin-bottom: 64px;
}

.naa-lean-blocks-main .naa-lean-card h3 {
	margin-top: 24px;
}

.naa-lean-blocks-main .naa-lean-card p {
	margin-top: 16px;
}

.naa-lean-blocks-main .naa-lean-step h3,
.naa-lean-blocks-main .naa-lean-step p {
	margin-top: 12px;
}

/* The card top row and the eyebrow that opens a diploma card sit flush. */
.naa-lean-blocks-main .naa-lean-card > .naa-lean-card__top,
.naa-lean-blocks-main .naa-lean-card > p.naa-lean-eyebrow {
	margin-top: 0;
}

/* Grids and rails that follow a section head keep the head's 48px, no more. */
.naa-lean-blocks-main .naa-lean-pathways,
.naa-lean-blocks-main .naa-lean-tiers,
.naa-lean-blocks-main .naa-lean-grid-3,
.naa-lean-blocks-main .naa-lean-grid-4,
.naa-lean-blocks-main .naa-lean-rail-wrap {
	margin-top: 0;
}

.naa-lean-blocks-main .naa-lean-next {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   9. UAGB + AAB compatibility (education / certification pages).
   These pages use the lean shell but keep UAGB hero containers, buttons and
   Advanced Accordion blocks from the legacy editor. Map them to lean tokens.
   -------------------------------------------------------------------------- */

/* Hero: first full-width UAGB root container in main. */
.naa-lean-blocks-main > .uagb-is-root-container:first-child {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 820px;
	padding-block: 80px !important;
	color: var(--naa-brand-fg);
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(22, 59, 44, 0.88),
		rgba(22, 59, 44, 0.55) 45%,
		rgba(22, 59, 44, 0.35)
	);
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child > .uagb-container-inner-blocks-wrap {
	position: relative;
	z-index: 1;
	width: min(100% - 48px, var(--naa-max));
	margin-inline: auto;
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child h1 {
	margin: 0;
	max-width: 720px;
	font-size: 72px;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -1.8px;
	color: var(--naa-brand-fg) !important;
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child h3 {
	margin: 16px 0 0;
	max-width: 560px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(249, 253, 251, 0.85) !important;
}

/* UAGB buttons — shared pill style. */
.naa-lean-blocks-main .uagb-buttons__wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.naa-lean-blocks-main .wp-block-uagb-buttons-child {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.naa-lean-blocks-main .uagb-buttons-repeater {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 16px 32px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Hero CTAs: ghost + primary on dark background. */
.naa-lean-blocks-main > .uagb-is-root-container:first-child .uagb-buttons-child:first-child .uagb-buttons-repeater {
	background: transparent !important;
	color: var(--naa-brand-fg) !important;
	border: 1px solid rgba(249, 253, 251, 0.6) !important;
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child .uagb-buttons-child:first-child .uagb-buttons-repeater:hover {
	background: rgba(249, 253, 251, 0.1) !important;
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child .uagb-buttons-child:last-child .uagb-buttons-repeater {
	background: var(--naa-brand) !important;
	color: var(--naa-brand-fg) !important;
	border: 0 !important;
}

.naa-lean-blocks-main > .uagb-is-root-container:first-child .uagb-buttons-child:last-child .uagb-buttons-repeater:hover {
	background: var(--naa-brand-dark) !important;
}

/* Content-area UAGB buttons (light background). */
.naa-lean-blocks-main .uagb-is-root-container:not(:first-child) .uagb-buttons-repeater,
.naa-lean-blocks-main .uagb-infobox-cta-link {
	background: var(--naa-brand) !important;
	color: var(--naa-brand-fg) !important;
	border: 0 !important;
}

.naa-lean-blocks-main .uagb-is-root-container:not(:first-child) .uagb-buttons-repeater:hover,
.naa-lean-blocks-main .uagb-infobox-cta-link:hover {
	background: var(--naa-brand-dark) !important;
	color: #fff !important;
}

/* Content sections: alignwide UAGB container. */
.naa-lean-blocks-main > .uagb-is-root-container.alignwide {
	width: min(100% - 48px, var(--naa-max));
	margin-inline: auto;
	padding-block: var(--naa-section-pad) !important;
	padding-inline: 0 !important;
}

.naa-lean-blocks-main .uagb-heading-text,
.naa-lean-blocks-main .wp-block-uagb-advanced-heading h2 {
	margin: 0 0 24px;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -1.2px;
	line-height: 1;
	color: var(--naa-brand);
}

.naa-lean-blocks-main .wp-block-paragraph,
.naa-lean-blocks-main .wp-block-list,
.naa-lean-blocks-main .wp-block-list li {
	font-size: 17px;
	line-height: 1.65;
	color: var(--naa-muted);
}

.naa-lean-blocks-main .wp-block-paragraph strong,
.naa-lean-blocks-main .wp-block-list strong {
	color: var(--naa-brand);
}

.naa-lean-blocks-main .wp-block-separator {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid var(--naa-border);
	opacity: 1;
}

/* Pathways section inserted via wp:group. */
/*
 * naa-section-rhythm: this rule used to be `padding: 0 0 var(--naa-section-pad)`,
 * which left every section flush against its own top edge. On the sections that
 * carry a background tint the eyebrow label then sat right on the seam. The
 * reference pads both ends equally, so it does that now.
 */
.naa-lean-blocks-main .wp-block-group.naa-lean-section {
	padding: var(--naa-section-pad) 0;
}

.naa-lean-blocks-main .wp-block-group.naa-lean-section .naa-lean-container {
	width: min(100% - 48px, var(--naa-max));
	margin-inline: auto;
}

/* Bottom CTA (reusable video block). */
.naa-lean-blocks-main > .uagb-is-root-container:last-child {
	position: relative;
	overflow: hidden;
	margin-top: var(--naa-section-pad);
	border-radius: 24px;
	color: var(--naa-brand-fg);
}

.naa-lean-blocks-main > .uagb-is-root-container:last-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(22, 59, 44, 0.92),
		rgba(22, 59, 44, 0.55)
	);
}

.naa-lean-blocks-main > .uagb-is-root-container:last-child .uagb-container-inner-blocks-wrap {
	position: relative;
	z-index: 1;
	width: min(100% - 48px, var(--naa-max));
	margin-inline: auto;
	padding: 80px 0 !important;
	text-align: center;
}

.naa-lean-blocks-main .uagb-ifb-title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -1.2px;
	line-height: 1.1;
	color: var(--naa-brand-fg) !important;
}

.naa-lean-blocks-main .uagb-ifb-desc {
	margin: 16px auto 32px;
	max-width: 36rem;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(249, 253, 251, 0.8);
}

.naa-lean-blocks-main .uagb-ifb-button-wrapper {
	justify-content: center;
}

/* Advanced Accordion Block (AAB). */
.naa-lean-blocks-main .aagb__accordion_container {
	overflow: hidden;
	margin-bottom: 12px;
	border: 1px solid var(--naa-border) !important;
	border-radius: var(--naa-radius);
	background: #fff !important;
}

.naa-lean-blocks-main .aagb__accordion_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	background: #fff !important;
}

.naa-lean-blocks-main .aagb__accordion_title {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--naa-brand) !important;
}

.naa-lean-blocks-main .aagb__accordion_icon,
.naa-lean-blocks-main .aagb__icon {
	flex: none;
	color: var(--naa-brand) !important;
}

.naa-lean-blocks-main .aagb__accordion_component {
	padding: 0 24px 20px;
}

.naa-lean-blocks-main .aagb__accordion_component > *:first-child {
	margin-top: 0;
}

.naa-lean-blocks-main .wp-block-aab-group-accordion {
	margin-bottom: var(--naa-section-pad);
}

@media (max-width: 768px) {
	.naa-lean-blocks-main > .uagb-is-root-container:first-child {
		min-height: 640px;
		padding-block: 120px 80px !important;
	}

	.naa-lean-blocks-main > .uagb-is-root-container:first-child h1 {
		font-size: 40px;
		letter-spacing: -1px;
	}

	.naa-lean-blocks-main .uagb-heading-text,
	.naa-lean-blocks-main .wp-block-uagb-advanced-heading h2,
	.naa-lean-blocks-main .uagb-ifb-title {
		font-size: 32px;
		letter-spacing: -0.5px;
	}

	.naa-lean-blocks-main .uagb-buttons__wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.naa-lean-blocks-main .uagb-buttons-repeater {
		justify-content: center;
		width: 100%;
	}
}

/*
 * naa-blocks-on-brand: `.naa-lean-blocks-main .wp-block-paragraph` paints every
 * block paragraph in --naa-muted, a dark grey-green. Inside the brand band that
 * is ink on ink: the diploma disclaimer measured a contrast ratio of 1.32
 * against the green, which is invisible. Paragraphs on a dark section take the
 * light ink instead, and the disclaimer gets a little more opacity so it still
 * reads as secondary without disappearing.
 */
.naa-lean-blocks-main .naa-lean-section--brand .wp-block-paragraph,
.naa-lean-blocks-main .naa-lean-next .wp-block-paragraph {
	color: var(--naa-brand-fg);
}

.naa-lean-blocks-main .naa-lean-section--brand .naa-lean-disclaimer {
	color: var(--naa-brand-fg);
	opacity: 0.7;
}