/* =========================================================
   NEDA eCAMPUS — EDITORIAL CONTENT PAGES
   Loaded only on the pages listed in src/ContentPages.php.

   WHY THIS FILE EXISTS

   The theme's page template wraps post content in a WHITE CARD with a
   1px lime border, a 16px radius and a narrow measure, then colours the
   text with the `text-gray` preset. On this site `text-gray` resolves to
   #0EC4C5 (Primary Cyan) because the global-styles post overrides the
   theme's palette, so every paragraph on an ordinary page renders CYAN
   inside a bordered box. Neither is the Neda design.

   So this file does two jobs:
     1. undoes the template's card and its colours;
     2. gives the page a band-and-card system that the CONTENT can drive
        entirely from class names, so everything stays as ordinary blocks
        the editor can move, retype and reorder.

   NOTHING HERE ADDS CONTENT. Every word on these pages lives in the
   page's own blocks. See src/ContentPages.php.
   ========================================================= */

body.neda-content-page {
	/* The measure the whole site shares. Not applied here - it is what the
	   theme already gives the content column - but named so the hero can
	   line up with it exactly. */
	--neda-cp-measure: 1200px;
}

/* ---------------------------------------------------------
   1. UNDOING THE TEMPLATE
   --------------------------------------------------------- */

/* The white card. Same rule the five course-type pages use: the card is
   opened rather than replaced, so the block structure the editor sees is
   still the theme's own. */
body.neda-content-page
main > .wp-block-group > .wp-block-group.has-white-background-color {
	max-width: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding-inline: 0 !important;
	padding-block: 0 !important;

	/*
	 * THE FAINT LINES DOWN BOTH SIDES OF THE PAGE. The theme gives this
	 * card a `0 2px 8px rgba(0,0,0,.08)` shadow as well as its border.
	 * Zeroing the border alone left the shadow drawing a box around the
	 * ENTIRE column - 1165x2894px in the measurement - which read both as
	 * two vertical rules and as "the whole page is one block".
	 */
	box-shadow: none !important;

	/*
	 * ONE LEFT EDGE FOR THE WHOLE PAGE. The theme's site content-size is
	 * 720px, and WordPress's constrained layout applies it with
	 * `.is-layout-constrained > * { max-width: var(--wp--style--global--content-size) }`.
	 * That capped the post-content column at 720px and centred it, so the
	 * body copy started 223px inboard of the h1 above it - measured, not
	 * guessed.
	 *
	 * Redefining the variable HERE rather than on the content column is
	 * what makes it work in one line: max-width resolves the variable on
	 * each child, so post-content AND every band inside it inherit the
	 * wider measure together. 1200px is the site's wide-size, the same
	 * measure the header and the hero title already use.
	 */
	--wp--style--global--content-size: var(--neda-cp-measure);
}

/* The band around that card brings 60px of its own padding, which would
   stack on top of the first section's padding and open a gap nobody put
   there. Matched with :has() rather than :last-child so adding a block to
   the template cannot silently retarget it. */
body.neda-content-page
main > .wp-block-group:has(> .wp-block-group.has-white-background-color) {
	padding-block: 0 !important;
}

/* Full-bleed bands are painted with a pseudo-element that reaches past
   the content column (section 3). `clip` rather than `hidden` because
   `hidden` on a block ancestor would also start a scroll container and
   break `position: sticky` anywhere inside. */
body.neda-content-page main {
	overflow-x: clip;
}

/* THE CYAN-PARAGRAPH FIX. The post-content block carries
   `textColor: text-gray`, and that preset is #0EC4C5 on this site. Set
   the colour on the content root so ordinary blocks inherit black and no
   individual paragraph has to carry a colour attribute - which keeps the
   markup clean for whoever edits the page. */
body.neda-content-page .wp-block-post-content {
	color: #000000;
}

/* Links follow the house rule: black, permanently underlined, cherry on
   hover. The theme sets link colour with
   `.wp-elements-<hash> a:where(:not(.wp-element-button))` at (0,1,1), so
   this has to be at least as specific - hence the body class. */
body.neda-content-page .wp-block-post-content a:where(:not(.wp-element-button)) {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

body.neda-content-page .wp-block-post-content a:where(:not(.wp-element-button)):hover,
body.neda-content-page .wp-block-post-content a:where(:not(.wp-element-button)):focus-visible {
	color: #D7263D;
}

/* ---------------------------------------------------------
   2. THE HERO
   The theme prints the page title in a full-width band above the
   content. That band IS the hero - the same decision as the course-type
   pages, so a second title never has to be hidden.
   --------------------------------------------------------- */

body.neda-content-page main > .wp-block-group:first-child {
	background-color: #ECF9F8 !important;
	padding-block: clamp(56px, 7vw, 92px) !important;
}

body.neda-content-page .wp-block-post-title {
	max-width: var(--neda-cp-measure);
	margin: 0 auto !important;
	color: #000000 !important;
	/* Left, not centred: the body copy below starts on this line, and a
	   centred title would be the only thing on the page that does not. */
	text-align: start !important;
	font-size: clamp(34px, 4.4vw, 54px) !important;
	line-height: 1.15 !important;
}

/* ---------------------------------------------------------
   3. BANDS
   A section's background is painted by a pseudo-element stretched to the
   viewport, while the words stay on the shared measure. This is how the
   Creators' Corner does it, and the reason is the same: an `alignfull`
   block inside post content cannot escape here, because the escape
   depends on root padding variables the post-content block never sets.
   --------------------------------------------------------- */

/*
 * THE BAND IS THE ELEMENT, NOT A PSEUDO-ELEMENT BEHIND IT.
 *
 * This started as a `::before` at `z-index: -1` stretched to the viewport -
 * the Creators' Corner technique. It does not work here, and the failure is
 * invisible to a computed-style check: the rule applies, the pseudo-element
 * has the right background, and it still paints NOTHING, because the theme's
 * own wrapper (`bg-light`, an opaque #FFFFFF) sits between it and the eye. A
 * negative z-index only reaches behind its stacking context; it cannot get
 * behind an opaque ancestor. Every band colour was silently white.
 *
 * So the band paints its own background and reaches the viewport edges with a
 * negative margin instead, cancelled by an equal padding. Percentages in
 * margin and padding both resolve against the CONTAINING BLOCK's width, so
 * the two are always the same number and the content lands back exactly on
 * the measure - 1165px at 1280, 315px at 375, no media queries. `overflow-x:
 * clip` on main (section 1) absorbs the scrollbar's share of 50vw.
 */
.neda-cp-band {
	position: relative;
	padding-block: clamp(48px, 6vw, 80px);
	padding-inline: calc(50vw - 50%);
	/*
	 * !important on both, and neither is optional. WordPress's constrained
	 * layout emits
	 * `.is-layout-constrained > :where(...) { max-width: ...; margin-left: auto !important; margin-right: auto !important }`
	 * - so a plain negative margin is overridden and a plain max-width caps
	 * the band back to the measure. The first attempt had neither and the
	 * bands stayed exactly the width of the text column.
	 */
	margin-inline: calc(50% - 50vw) !important;
	max-width: none !important;
	background-color: var(--neda-cp-band-bg, transparent);
}

.neda-cp-band--tint { --neda-cp-band-bg: #F8F9EA; }
.neda-cp-band--cyan { --neda-cp-band-bg: #ECF9F8; }

/* WordPress gives every non-first child of a flow-layout group a stray
   top margin (the theme's blockGap). It has bitten this codebase on the
   ecosystem cards four times, so it is cancelled pre-emptively on
   everything this file lays out rather than after it is noticed. */
.neda-cp-band > *,
.neda-cp-grid > *,
.neda-cp-card > * {
	margin-block-start: 0;
}

.neda-cp-band > * + * {
	margin-block-start: 18px;
}

/* ---------------------------------------------------------
   4. TYPE
   --------------------------------------------------------- */

body.neda-content-page .neda-cp-band h2 {
	margin: 0;
	color: #000000;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

body.neda-content-page .neda-cp-band h3 {
	margin: 0;
	color: #000000;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

body.neda-content-page .neda-cp-band p {
	color: #000000;
	font-size: 15px;
	line-height: 1.65;
	/* A comfortable reading measure. The band still spans the page; only
	   the paragraph is held back, which is what keeps long prose legible
	   on a 1920 screen. */
	max-width: 78ch;
}

/* The opening sentence of a section. A class rather than a font-size
   attribute on the block: WordPress emits its font-size presets as
   `!important`, so a block-level size here would fight this file instead
   of being overridable by it.

   It USED to be set larger - clamp(19px, 1.7vw, 23px). Under the 15px body
   rule it is the same size as the prose it opens and carries its weight
   instead, which is the trade the one-body-size decision makes. */
body.neda-content-page .neda-cp-lede {
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.5 !important;
	max-width: 62ch;
}

/* ---------------------------------------------------------
   4b. IMAGE + TEXT
   A plain two-column split, so the picture and the words stay ordinary
   blocks the editor can swap, resize or reorder.
   --------------------------------------------------------- */

.neda-cp-split {
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

.neda-cp-split .wp-block-column > * {
	margin-block-start: 0;
}

.neda-cp-split .wp-block-column > * + * {
	margin-block-start: 18px;
}

/* The illustration carries no background of its own, so it sits directly
   on the white band - no plate, no frame, nothing for it to fight. */
.neda-cp-figure {
	margin: 0;
}

.neda-cp-figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 12px;
}

/*
 * A small supporting mark beside a block of prose - not the full-width
 * illustration above. It is pushed to the far side of its column with
 * `margin-inline-start: auto` rather than a float or `text-align`, so RTL
 * mirrors it with no second rule, and no radius: these marks are drawn on
 * transparency and a corner radius would clip nothing but air.
 */
.neda-cp-aside {
	margin: 0;
}

.neda-cp-aside img {
	display: block;
	inline-size: 400px;
	/* Still yields on a narrow column, so the doubled size cannot push the
	   panel wider than its box on a phone. */
	max-inline-size: 100%;
	block-size: auto;
	margin-inline-start: auto;
}

/* ---------------------------------------------------------
   4c. TEXT PANEL
   A section held in a tinted box rather than run across a full-bleed
   band. Uses "text box 3" (#F8F9EA) - the same fill the front page's
   sections alternate with, so it is not a new colour.
   --------------------------------------------------------- */

.neda-cp-box {
	background: #F8F9EA;
	border: 0;
	border-radius: 12px;
	padding: clamp(26px, 3vw, 40px);
}

/* "Text box 4" (#F1F3D6), for a panel that has to sit apart from a text
   box 3 one elsewhere on the same page. */
.neda-cp-box--4 {
	background: #F1F3D6;
}

/*
 * Centred, because this panel is a closing note rather than a section of
 * prose - a single short sentence left-aligned in a full-width box reads
 * as text that failed to fill its container. The reading measure is kept
 * and centred with it, so the line does not stretch across 1165px.
 */
body.neda-content-page .neda-cp-box--4 p {
	margin-inline: auto;
	text-align: center;
}

/* Centred section: heading and prose both, with the reading measure
   centred along with the text so the lines do not run the full width. */
body.neda-content-page .neda-cp-centred,
body.neda-content-page .neda-cp-centred h2,
body.neda-content-page .neda-cp-centred p {
	text-align: center;
}

body.neda-content-page .neda-cp-centred p {
	margin-inline: auto;
}

/*
 * A centred section intro above a centred card, so heading, lede and card
 * read as one column rather than a left-aligned block with a centred box
 * under it.
 *
 * DIRECT CHILDREN ONLY. The contact form's own rows are `<p>` elements as
 * well, and a descendant selector here would centre every label and field
 * inside the card.
 */
body.neda-content-page .neda-cp-band--centred-intro > h2,
body.neda-content-page .neda-cp-band--centred-intro > p {
	text-align: center;
	margin-inline: auto;
}

/*
 * NO ZOOM, by request. Stated for the hover and focus states too, so
 * that if this class is ever combined with a card the card's lift cannot
 * come back through it: a panel of prose does not go anywhere when you
 * click it, and lifting it would promise that it does.
 */
.neda-cp-box,
.neda-cp-box:hover,
.neda-cp-box:focus-within {
	transform: none;
	box-shadow: none;
	transition: none;
}

.neda-cp-box > * {
	margin-block-start: 0;
}

.neda-cp-box > * + * {
	margin-block-start: 18px;
}

/* ---------------------------------------------------------
   4d. THE PARALLAX COVER
   A core Cover block with "Fixed background" ticked - `hasParallax` in the
   markup, `background-attachment: fixed` in the browser. The picture holds
   still while the words travel over it.
   --------------------------------------------------------- */

/*
 * Full bleed by the same margin/padding pair the bands use, NOT by
 * `align: full` - an alignfull block inside post content cannot escape on
 * this template, and both declarations need !important to beat WordPress's
 * constrained-layout rule. See section 3.
 */
.neda-cp-cover {
	margin-inline: calc(50% - 50vw) !important;
	max-width: none !important;
	padding-inline: calc(50vw - 50%) !important;
	padding-block: clamp(56px, 7vw, 96px) !important;
	min-block-size: clamp(320px, 34vw, 440px);
}

.neda-cp-cover .wp-block-cover__inner-container {
	inline-size: 100%;
}

/*
 * WHITE TEXT ON A PHOTOGRAPH, AND THE VEIL IS MEASURED - NOT GUESSED.
 *
 * Sampling every third pixel of this photo (266,800 samples) and compositing
 * white text over a black veil gives worst-case contrast of:
 *   35% -> 2.44:1   40% -> 2.85:1   45% -> 3.35:1
 *   50% -> 3.98:1   55% -> 4.76:1   60% -> 5.74:1
 * Only 55% and up clear the 4.5:1 body-text floor, and core defines its
 * `has-background-dim-*` opacities in steps of ten - so 60% it is. The 40%
 * used on the course-type heroes would have failed outright here.
 *
 * The text-shadow is the same one those heroes use; it is insurance against
 * a bright highlight, never the thing doing the work.
 */
body.neda-content-page .neda-cp-cover h2,
body.neda-content-page .neda-cp-cover p {
	color: #FFFFFF;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

body.neda-content-page .neda-cp-cover h2 {
	font-size: 24px;
	font-weight: 700;
}

/* Bold, and on the body size like every other line of prose. The lede rule
   in section 4 carries !important (it has to beat WordPress's font-size
   presets), so this does too or it would lose to it.

   This was clamp(20px, 2vw, 28px) - "bigger and bold, as asked". The bold
   is kept; the bigger is what the 15px body rule takes away. */
body.neda-content-page .neda-cp-cover .neda-cp-lede {
	font-size: 15px !important;
	font-weight: 700;
}

body.neda-content-page .neda-cp-cover p {
	font-size: 15px;
	font-weight: 700;
	/* The band rules do not reach inside the cover, so the reading measure
	   is restated here rather than letting lines run the full 1165px. */
	max-width: 62ch;
	margin-inline: auto;
}

/*
 * `background-attachment: fixed` is switched OFF on narrow and touch
 * screens on purpose. iOS Safari does not honour it - it re-rasterises the
 * background at the wrong scale and the image jumps as you scroll, which
 * looks like a broken page rather than an effect. Scrolling with the
 * content is the honest fallback.
 */
@media (max-width: 900px), (hover: none), (prefers-reduced-motion: reduce) {
	.neda-cp-cover.has-parallax {
		background-attachment: scroll !important;
	}
}

/* ---------------------------------------------------------
   5. CARD GRIDS
   --------------------------------------------------------- */

/*
 * The base is a plain auto-fit grid, which is what every narrow width
 * gets. The two arrangements below only take over once there is room for
 * them, so no card is ever squeezed to make a shape work.
 */
.neda-cp-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

@media (min-width: 900px) {
	/* Four cards read better two-up than four-up: at the 1200px measure
	   four across leaves each card about 290px, which is too narrow for a
	   heading plus two paragraphs. */
	.neda-cp-grid--pair {
		grid-template-columns: repeat(2, 1fr);
		/*
		 * EVERY CARD THE SAME SIZE. Stretch already equalises the cards
		 * WITHIN a row; `1fr` rows equalise them BETWEEN rows too, so a
		 * short card in row two is not visibly smaller than a long one in
		 * row one.
		 */
		grid-auto-rows: 1fr;
	}

	/*
	 * FIVE CARDS, THREE THEN TWO - and every card the SAME width. Auto-fit
	 * gives four across and one orphan on the second row.
	 *
	 * The six-column trick is the front page's, reused deliberately: every
	 * card spans exactly 2 of 6, and the second row is CENTRED by starting
	 * its two cards at columns 2 and 4 rather than letting them stretch.
	 * Never widen row 2 to fill the row - equal size is the point.
	 */
	.neda-cp-grid--five {
		grid-template-columns: repeat(6, 1fr);
		/* Equal between the rows as well as within them, so the three-card
		   row and the two-card row are the same height. */
		grid-auto-rows: 1fr;
	}

	.neda-cp-grid--five > * {
		grid-column: span 2;
	}

	.neda-cp-grid--five > :nth-child(4) { grid-column: 2 / span 2; }
	.neda-cp-grid--five > :nth-child(5) { grid-column: 4 / span 2; }
}

/* Cards are surface and elevation, never an outline - the palette rule
   that took the lime hairline off the front page's feature cards. */
.neda-cp-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #FFFFFF;
	border: 0;
	border-radius: 12px;
	padding: 26px 26px 28px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover fills the card with "text box 4" (#F1F3D6) - the same pale lime
   the front page's cards use, so the interaction reads the same way
   everywhere and no ninth colour enters the palette. */
.neda-cp-card:hover,
.neda-cp-card:focus-within {
	background: #F1F3D6;
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

/* ---- the audience icons ---------------------------------------------------
 * A FIXED SLOT, not just a width. Three of the four illustrations are 3:2 and
 * the fourth is square, so sizing by width alone would make one icon half
 * again as tall as its neighbours and push that card's text down out of step
 * with the rest of the row. The slot is 150px wide as asked; `contain` lets
 * the square one sit inside it without being stretched or cropped.
 */
.neda-cp-icon {
	margin: 0;
}

.neda-cp-icon img {
	display: block;
	inline-size: 150px;
	max-inline-size: 100%;
	block-size: 100px;
	object-fit: contain;
	/* object-position has no logical keyword safe to ship, so this stays
	   physical and the RTL mirror lives in neda-rtl.css section 2. The
	   comment that used to sit here called it "logical, so RTL mirrors
	   with no second rule" - it is not, and there WAS a second rule. */
	object-position: left center;
}

/* The mirror that used to be here matched `html[lang="fa"]` exactly, so
   fa-IR missed it, and it listed neither ar nor ckb - the icons stayed
   pinned to the left in two of the three RTL languages. Replaced by the
   five-hook rule in neda-rtl.css, which prefix-matches. */

body.neda-content-page .neda-cp-card p {
	font-size: 15px;
	max-width: none;
}

/* ---------------------------------------------------------
   6. THE FIVE LEARNING FORMATS
   Each card is keyed to its type's brand colour. The colour arrives as an
   accent bar and never as text: Cyan is 2.6:1 and Golden Yellow 1.9:1 on
   white, so a coloured label would fail outright. Same reasoning as the
   course-type pages and the catalogue badges.
   --------------------------------------------------------- */

.neda-cp-format {
	position: relative;
	overflow: hidden;
	padding-block-start: 30px;
}

.neda-cp-format::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 6px;
	background: var(--neda-cp-accent, #0EC4C5);
}

.neda-cp-format--audio-pro   { --neda-cp-accent: #D7263D; }
.neda-cp-format--live-class  { --neda-cp-accent: #6A4C93; }
.neda-cp-format--flex-learn  { --neda-cp-accent: #0EC4C5; }
.neda-cp-format--skill-bites { --neda-cp-accent: #2F80ED; }
.neda-cp-format--quest-lab   { --neda-cp-accent: #F2B705; }

/* The type icon: square, so all five sit on the same baseline. Smaller
   than the audience illustrations because these are pictograms - at 150px
   they would outweigh the words beside them. */
.neda-cp-icon--type img {
	inline-size: 96px;
	block-size: 96px;
}

/*
 * The action is pinned to the bottom of the card with `auto`, so a
 * one-line description and a two-line one still put their buttons on the
 * same line across the row. The card is a flex column, which is what
 * makes that work.
 */
.neda-cp-cardaction {
	margin-block-start: auto !important;
	padding-block-start: 6px;
}

/* ---------------------------------------------------------
   7. BUTTONS
   The sitewide rules already give every button 700 weight and the 10px
   corner. The cherry hover is NOT sitewide - it is scoped to the front
   page's hero - so it is restated here for this page's actions.
   --------------------------------------------------------- */

.neda-cp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 26px !important;
}

body.neda-content-page .neda-cp-actions .wp-block-button__link,
body.neda-content-page .neda-cp-cardaction .wp-block-button__link {
	padding: 14px 26px;
	border: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.neda-content-page .neda-cp-actions .wp-block-button__link:hover,
body.neda-content-page .neda-cp-actions .wp-block-button__link:focus-visible,
body.neda-content-page .neda-cp-cardaction .wp-block-button__link:hover,
body.neda-content-page .neda-cp-cardaction .wp-block-button__link:focus-visible {
	background-color: #D7263D !important;
	color: #FFFFFF !important;
}

/*
 * The secondary action is CYAN with a black label and no border - a solid
 * fill, not an outline, so the two buttons differ by colour rather than by
 * weight.
 *
 * Black on #0EC4C5 measures about 11:1. White on it is 2.3:1 and is never
 * used anywhere in this system: cyan is a FILL, never something a reader
 * has to look through.
 */
body.neda-content-page .neda-cp-actions .neda-cp-btn-cyan .wp-block-button__link {
	background-color: #0EC4C5 !important;
	color: #000000 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/*
 * Restated rather than left to the shared hover rule above. The rest state
 * here is (0,4,1) and that rule is (0,3,2) - so without this the button
 * would keep its cyan on hover while the label went white, which is the
 * one combination the palette forbids.
 */
body.neda-content-page .neda-cp-actions .neda-cp-btn-cyan .wp-block-button__link:hover,
body.neda-content-page .neda-cp-actions .neda-cp-btn-cyan .wp-block-button__link:focus-visible {
	background-color: #D7263D !important;
	color: #FFFFFF !important;
}

/* Focus has to be legible on the RESTING surface, not on the hover fill a
   keyboard never triggers - so the ring is drawn OUTSIDE the button, at 3px,
   where it sits on the page background rather than on the cherry fill. */
body.neda-content-page .neda-cp-actions .wp-block-button__link:focus-visible,
body.neda-content-page .neda-cp-cardaction .wp-block-button__link:focus-visible {
	outline: 3px solid #D7263D;
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   9. IN-PAGE ANCHORS
   The Contact Us menu points at parts of one page, so a target must not
   land underneath the header.
   --------------------------------------------------------- */

body.neda-content-page [id] {
	scroll-margin-block-start: 110px;
}

html:has(body.neda-content-page) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.neda-content-page) {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------
   10. THE CONTACT FORM
   --------------------------------------------------------- */

/*
 * Centred, and the same 860px card the sign-in page uses at its two-panel
 * width. The card KEEPS the site's own chrome - 12px corners, solid white,
 * the standard shadow - rather than copying the login card's 18px glass,
 * because that translucency only reads against the animated background that
 * page has and there is none here. What is borrowed is the GEOMETRY.
 */
/*
 * THE CARD IS THE WRAPPER, NOT THE FORM.
 *
 * The heading and the two lines of intro live inside the glass with the
 * fields, so the whole section reads as one object floating on the animated
 * background rather than as loose text with a box under it. That means the
 * card chrome belongs to a group in the PAGE (which the editor can retype),
 * not to the shortcode's own output.
 */
.neda-form-card {
	position: relative;
	z-index: 1;
	/*
	 * 75% glossy, over the animated background below. The blur is what makes
	 * it read as glass rather than as a flat wash: without it the moving
	 * lines show through sharply and the labels become hard to hold on to.
	 * Same technique as the sign-in card, one step more opaque.
	 */
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border-radius: 12px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
	max-inline-size: min(860px, 100%);
	margin-inline: auto;
}

/* WordPress's flow layout gives every non-first child a stray top margin;
   the rhythm inside the card is set here instead. */
.neda-form-card > * {
	margin-block-start: 0;
}

.neda-form-card > * + * {
	margin-block-start: 16px;
}

/* The intro is centred inside the card. DIRECT CHILDREN ONLY - the form's
   own rows are <p> elements too and must keep their left alignment. */
body.neda-content-page .neda-form-card > h2,
body.neda-content-page .neda-form-card > p {
	text-align: center;
	margin-inline: auto;
}

body.neda-content-page .neda-form-card > h2 {
	margin-block-start: 0;
}

/* The shortcode's own wrapper now carries no chrome at all. */
.neda-form {
	position: relative;
	z-index: 1;
	margin-block-start: 22px;
}

/*
 * Fallback for browsers with no backdrop-filter: go opaque rather than
 * leave 75% white over a moving background, which is where the contrast
 * would actually be lost.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.neda-form {
		background: #FFFFFF;
	}
}

.neda-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block: 0 18px !important;
}

/* The divider only exists in the two-panel layout below. */
.neda-form__divider {
	display: none;
}

/* ---- the two-panel layout ------------------------------------------------
 * Mirrors the sign-in page: one centred card split into two columns by a
 * 1px lime rule, `minmax(0, …)` tracks so a long word can never push a
 * column wider than its share, and the same 2rem column gap.
 *
 * 992px is the sign-in page's own breakpoint, kept so the two pages change
 * shape at the same width. Below it the form stays the single column it
 * already was - three fields and a textarea side by side on a phone would
 * be two unusably narrow columns.
 *
 * The short fields go left and the message right, because one tall textarea
 * balances three short rows; the action and the privacy line then run the
 * full width beneath both.
 */
@media (min-width: 992px) {
	.neda-form__form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.15fr);
		column-gap: 2rem;
		row-gap: 1.1rem;
		align-items: start;
	}

	/* Hidden inputs are display:none in every UA stylesheet, so they never
	   become stray grid items; the honeypot is taken out of flow already. */
	.neda-form__row--name    { grid-column: 1; grid-row: 1; }
	.neda-form__row--email   { grid-column: 1; grid-row: 2; }
	.neda-form__row--topic   { grid-column: 1; grid-row: 3; }

	/* The message spans all three left-hand rows and stretches to match
	   them, so the two columns finish level. */
	.neda-form__row--message {
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: stretch;
		block-size: 100%;
	}

	body.neda-content-page .neda-form__row--message textarea {
		flex: 1 1 auto;
		min-block-size: 0;
	}

	.neda-form__divider {
		display: block;
		grid-column: 2;
		/*
		 * An explicit span count, not `1 / -1`. With no `grid-template-rows`
		 * declared the explicit grid has no rows, so a negative line number
		 * resolves against that empty grid and collapses back to line 1
		 * instead of covering the rows the placed items actually created.
		 * The sign-in page carries the same note for the same reason.
		 */
		grid-row: 1 / span 3;
		align-self: stretch;
		inline-size: 1px;
		background: #C4C40E;
		border-radius: 1px;
	}

	.neda-form__row:last-of-type,
	.neda-form__row { margin-block-end: 0 !important; }

	/* The action belongs to the message it sends, so it sits under the
	   message in the right-hand column - not spanning both. */
	.neda-form__actions {
		grid-column: 3;
		grid-row: 4;
		margin-block: 6px 0 !important;
	}

	/* The privacy line fills the space opposite it, so the row reads as one
	   line rather than as a button with a gap beside it. */
	body.neda-content-page .neda-form__hint--privacy {
		grid-column: 1;
		grid-row: 4;
		align-self: center;
		margin-block: 6px 0 !important;
	}

	/* The confirmation and error notes sit above the whole grid. */
	.neda-form__note {
		grid-column: 1 / -1;
	}
}

body.neda-content-page .neda-form label {
	font-weight: 700;
	color: #000000;
}

/* `.neda-select__button` is the Neda select (neda-commerce-bridge,
   assets/neda-select.js) standing in for the subject <select>: the native
   control stays in the form unseen and this button is what the reader sees
   and operates, so it takes every rule the select does - the field look,
   the hover, the ring. Its arrow, corners and open list come from the
   bridge's neda-select.css, enqueued on this page since bridge 1.65.0.
   Without that script the native select renders exactly as before. */
body.neda-content-page .neda-form input[type="text"],
body.neda-content-page .neda-form input[type="email"],
body.neda-content-page .neda-form select,
body.neda-content-page .neda-form .neda-select__button,
body.neda-content-page .neda-form textarea {
	inline-size: 100%;
	background-color: #FFFFFF;
	color: #000000;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	/* A field is a bordered control, not a card - and 10px like every other
	   control in the system. */
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.neda-content-page .neda-form .neda-select__button {
	display: block;
	text-align: start;
	font-weight: 400;
	cursor: pointer;
	/* Room for the 34px arrow square the bridge draws at the end. */
	padding-inline-end: 52px;
}

/* The open list's rows: the bridge's 10px, taken in to 8px here - slightly
   shorter rows on this form (user, 2026-09-04). The list itself keeps the
   bridge's white card, corners and shadow. */
body.neda-content-page .neda-form .neda-select__option {
	padding-block: 8px;
}

/* The open list must paint over the message column beside it. The row is
   a stacking context above its siblings; the list's own z-index then only
   has to beat the rows inside this one. */
body.neda-content-page .neda-form__row--topic {
	position: relative;
	z-index: 2;
}

body.neda-content-page .neda-form textarea {
	resize: vertical;
	min-block-size: 160px;
}

body.neda-content-page .neda-form :is(input, select, textarea, .neda-select__button):hover {
	border-color: rgba(0, 0, 0, 0.32);
}

/* The canonical field geometry (2026-09-02): one solid 3px cherry ring, 3px
   outside the control, following its corner, resting border untouched. What
   was here before broke the rule three ways -- it recoloured the border, its
   indicator was an 18%-opacity TINT rather than solid cherry, and there was no
   ring at all, only the halo.

   DELIBERATE DEVIATION FROM THE IMPLEMENTATION PATTERN, and the only one in
   the estate. Everywhere else the ring is two box-shadow layers whose first
   layer paints the 3px gap in the surface colour. That cannot be done here and
   be correct: this form sits on `.neda-form-card`, which is
   `rgba(255, 255, 255, 0.75)` -- TRANSLUCENT -- over the Vanta animated canvas,
   measured overlapping the card on 2026-09-02. There is no static colour that
   matches an animated backdrop, and painting the gap white would lay an opaque
   seam across a card deliberately built to let the animation through.

   `outline` + `outline-offset` gives a genuinely transparent gap -- nothing is
   painted between the border box and the outline -- so the animation shows
   through it, which is the result the rule is asking for. Current Chromium,
   Firefox and WebKit all follow `border-radius` on an outline, so the corner is
   still followed; the box-shadow technique exists for older engines that did
   not. Same colour, same widths, same offset, same `:focus-visible`.

   Flagged for a ruling: if this is accepted, the canonical rule wants a clause
   for translucent and animated surfaces. Do not copy this to a field sitting on
   a solid colour. */
body.neda-content-page .neda-form :is(input, select, textarea):focus-visible {
	outline: 3px solid #D7263D;
	outline-offset: 3px;
	/* No `border-color` here on purpose: saying nothing lets the resting rule
	   stand, which is what "the resting border does not change" means. Naming
	   the resting value again would just be a second copy to drift. The halo is
	   reset explicitly because that is what this rule used to paint. */
	box-shadow: none;
}

body.neda-content-page .neda-form__hint {
	font-size: 14px !important;
	color: #000000;
	opacity: 0.75;
	margin: 0 !important;
}

.neda-form__submit {
	background: #C4C40E;
	color: #000000;
	border: 0;
	border-radius: 10px;
	padding: 14px 28px;
	font-family: inherit;
	/* 15px: it was the only visible thing on a content page still above the
	   body size, which made one button on one page the loudest text on it. */
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.neda-form__submit:hover,
.neda-form__submit:focus-visible {
	background: #D7263D;
	color: #FFFFFF;
}

.neda-form__submit:focus-visible {
	outline: 3px solid #D7263D;
	outline-offset: 3px;
}

.neda-form__actions {
	margin-block: 24px 8px !important;
}

/*
 * The honeypot. Taken out of the layout and out of the accessibility tree,
 * but NOT with `display: none` - some bots skip anything a browser would
 * not render, and this one has to look fillable to them.
 */
.neda-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.neda-content-page .neda-form__note {
	border-radius: 10px;
	padding: 14px 18px;
	margin-block: 0 22px !important;
	font-size: 15px;
}

.neda-form__note--ok {
	background: #ECF9F8;
}

/* Cherry as a hairline and in the heading, never as a fill behind the
   words - error text has to stay black to stay legible. */
.neda-form__note--error {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 2px #D7263D;
}

body.neda-content-page .neda-form__note ul {
	margin: 8px 0 0;
	padding-inline-start: 20px;
}

/* ---------------------------------------------------------
   10b. THE ANIMATED BACKGROUND BEHIND THE FORM
   The one Neda background - VANTA.NET, brand cyan on white, canvas faded
   to 50% - mounted on the band that holds the contact form by
   assets/neda-vanta.js. Every value here matches the course-type pages'
   copy; this is the same asset, not a second design.
   --------------------------------------------------------- */

.neda-cp-vanta-section {
	position: relative;
	isolation: isolate;
	/* The band's own colour would sit on top of the animation. */
	background-color: transparent !important;
}

#ne-vanta-form {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;   /* every click and scroll goes to the content */
	background: #FFFFFF;    /* solid white behind the faded canvas */

	/*
	 * The band is a constrained-layout child, and WordPress caps EVERY such
	 * child at the content size and auto-centres it - an absolutely
	 * positioned injected layer included. Both halves are undone so the
	 * layer spans the band edge to edge.
	 */
	max-width: none !important;
	margin: 0 !important;
}

/* VANTA.NET has no line-opacity option, so the CANVAS is faded, not the
   layer - the white behind it is the same white the canvas paints, so the
   fill stays solid and only the cyan lines drop to half. Fading the layer
   instead would grey the fill. */
/*
 * FULL OPACITY, matching the MOODLE LOGIN - not the 50% fade used on the
 * Moodle/WordPress page backgrounds.
 *
 * The 50% canvas is the right treatment when the animation sits behind a
 * whole page of reading matter and must stay out of the way. Here it sits
 * behind one card on an otherwise empty band, and halving it left the net
 * looking like stray disconnected lines rather than a pattern - which is
 * exactly what was reported. Moove's Additional HTML section 10 describes
 * its login background as "cyan lines, white bg, full opacity"; this now
 * matches it, and the card's own 75% glass is what keeps the form legible
 * over the top.
 */
#ne-vanta-form canvas {
	opacity: 1 !important;
}

/* Lift the real content above the layer. */
.neda-cp-vanta-section > *:not(#ne-vanta-form) {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------
   8. MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.neda-cp-card,
	.neda-cp-card:hover,
	.neda-cp-card:focus-within {
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   THE ABOUT HERO                                        (owner, 2026-09-09)

   Built from the owner's mock, through a design-governance review taken
   BEFORE any of it was written. The mock carried six decorative devices
   around one illustration; four are not here, and each refusal is recorded
   at the rule that would otherwise have implemented it.

   THE THEME'S TITLE BAND IS GONE, which reverses a decision recorded a few
   rules up: that band WAS the hero, "so a second title never has to be
   hidden". It is hidden now, because this block is the hero instead, and the
   two cannot both be. That comment is stale where it stands and this is the
   note that says so.

   The consequence is that THIS h1 is the page's only one -- every other
   heading on the page is an h2 and now sits correctly beneath it.
   ========================================================================= */

body.neda-content-page main > .wp-block-group:first-child:has(> .wp-block-post-title) {
    display: none;
}

.neda-cp-hero {
    /* Flat, not the mock's white-to-pale-cyan wash. No gradient exists in
       this estate, and this one is unbuildable besides: the two ends are
       1.08:1 apart -- too close to read as a designed ground, far enough to
       band on an 8-bit panel and look like a fault. */
    background-color: #ECF9F8 !important;
    padding-block: clamp(56px, 7vw, 92px) !important;
}

.neda-cp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    max-width: var(--neda-cp-measure);
    margin-inline: auto;
}

/* Desktop puts the illustration on the end side; below 900px it follows the
   words, which is the order the DOM already has -- so the small screen needs
   no reordering and RTL mirrors for free. */
@media (min-width: 900px) {
    .neda-cp-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* The eyebrow's lime dash is the ONE lime mark in this hero. The mock also
   drew a hand-drawn lime swash under the headline; that is out -- a script
   mark in a system whose geometry is prisms and rings, doing a typographic
   job, attached to the very headline the rules refuse to colour. A straight
   lime rule would be admissible vocabulary, but adding one here would simply
   be the second lime mark. */
.neda-cp-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    /* Capitals from CSS, never typed into the string: a literal all-caps
       word is spelled out letter by letter by some screen readers. */
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.72);
}
.neda-cp-hero__eyebrow::before {
    content: "";
    flex: none;
    inline-size: 24px;
    block-size: 3px;
    border-radius: 2px;
    background: #C4C40E;
}

/* BOTH LINES BLACK. The mock set the second in Royal Purple, and purple on
   white is 6.85:1 -- it passes contrast and still fails the rule, which says
   titles are always black and enumerates its own exceptions. Purple is not
   among them; contrast is the rule's reason, not its test. The two-tone
   rhythm comes from weight.

   400 and 700 only: Candara ships Regular and Bold, so 500 or 600 either
   synthesise or snap to 700 and the pair renders differently per machine. */
body.neda-content-page .neda-cp-hero__title {
    margin: 0 0 16px !important;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    color: #000000;
    text-align: start;
}
.neda-cp-hero__em { font-weight: 700; }
@media (min-width: 900px) {
    .neda-cp-hero__em { display: block; }
}

body.neda-content-page .neda-cp-hero__lede {
    max-width: 62ch;
    margin: 0 0 6px !important;
}

/* 40px, the sitewide standard. `.neda-cp-actions` sets padding only and
   lands nearer 48px, which is why this is stated rather than inherited. */
body.neda-content-page .neda-cp-hero__actions .wp-block-button__link {
    min-height: 40px;
    padding: 8px 22px;
    border-radius: 10px;
}
body.neda-content-page .neda-cp-hero__actions .neda-cp-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #C4C40E;
    color: #000000;
}
/* The arrow is a pseudo-element, so it has no accessibility-tree entry and
   no aria-hidden to get wrong, and it mirrors explicitly for RTL -- an
   inline glyph would not. */
body.neda-content-page .neda-cp-hero__actions .neda-cp-hero__cta::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}
[dir="rtl"] body.neda-content-page .neda-cp-hero__actions .neda-cp-hero__cta::after { transform: rotate(225deg); }

/* The three words are a strip, not a breadcrumb: they are not links and
   nothing navigates. The separators are pseudo-elements rather than arrow
   CHARACTERS, so they stay out of the accessibility tree and out of
   translation, and nothing announces a path that does not exist. */
.neda-cp-hero__path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    list-style: none;
    margin: 22px 0 0 !important;
    padding: 0;
    font-size: 14px;
    color: #000000;
    opacity: 0.75;
}
.neda-cp-hero__path li { display: flex; align-items: center; gap: 14px; }
.neda-cp-hero__path li + li::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}
[dir="rtl"] .neda-cp-hero__path li + li::before { transform: rotate(225deg); }

/* One background shape, seated behind the illustration and never crossing
   into the words. The mock stacked four: this disc, a giant outlined
   "KNOWLEDGE", a lime quarter-circle and a three-colour stripe.

   The watermark is out -- it was the largest object in the hero and not the
   message, outlined display type exists nowhere in this estate, and text as
   decoration is either an image of text or a word that joins the reading
   order twice. The lime bleed is out because it sat under the primary
   button, where lime on lime-tint is 1.65:1 and the button loses its edge in
   the one place it must not. The stripe is out: three brand colours in one
   graphic, and it borrows the format cards' accent bar, where one colour
   means one learning type. */
.neda-cp-hero__art {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.neda-cp-hero__art::before {
    content: "";
    position: absolute;
    z-index: -1;
    inline-size: min(86%, 460px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFFFFF;
}

/* No radius: the illustration is drawn on transparency, so a corner radius
   clips air rather than artwork. `.neda-cp-figure` would have applied 12px,
   which is why this does not reuse it. */
.neda-cp-hero__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: 0;
}