/**
 * Courses Register — scoped styles (`.crs`).
 *
 * The /courses page: every academy course, organised as five fields of study.
 * Everything is scoped under `.crs` so it never leaks into other pages.
 *
 * DIRECTION — clean and academic. The page is a course register, not a promo:
 * a cool paper ground, the brand purple used as INK (rules, marks, one filled
 * block) rather than as gradient fills, and a third typeface for the
 * registrar layer.
 *
 * Palette (6):
 *   --crs-paper  #FBFAFD   cool paper ground
 *   --crs-vellum #F1EDFB   pale wash for plates, heads, cells
 *   --crs-rule   #DCD5F0   hairline
 *   --crs-ink    #1B1235   text (violet-black)
 *   --crs-seal   #5B14E6   brand purple, as ink
 *   --crs-ochre  #8A5A00   the single warm mark, dark enough to read on paper
 * Derived: --crs-soft (secondary prose), --crs-deep (the closing block).
 *
 * Type (3 roles, all already in the theme's single Google Fonts request):
 *   display  Noto Kufi Arabic 700      Arabic headings
 *   body     Almarai 400/700           Arabic prose
 *   registrar IBM Plex Sans Arabic 400/600  labels, counts, course names,
 *            the timetable — a documentary voice used nowhere else on the site.
 * IBM Plex ships only 400 + 600 here, so those are the only weights used with
 * it. NOTE: never letter-space Arabic text — it breaks the cursive joins.
 *
 * Signature: the hero timetable figure — one level drawn as the 4-week x
 * 2-session grid it actually is. It states the study system once for the whole
 * register, which is why no course entry repeats it.
 *
 * Sections own their own padding (there is no shared `.crs-section` class) so
 * section spacing can never be cancelled out by a competing selector.
 *
 * @package Novira_Academy
 */

.crs {
	--crs-paper: #fbfafd;
	--crs-vellum: #f1edfb;
	--crs-rule: #dcd5f0;
	--crs-ink: #1b1235;
	--crs-seal: #5b14e6;
	--crs-ochre: #8a5a00;
	--crs-soft: #575075;
	--crs-deep: #2c0a72;
	--crs-radius: 12px;
	--crs-plex: 'IBM Plex Sans Arabic', var(--ff-body, 'Almarai'), sans-serif;
	--crs-display: var(--ff-display, 'Noto Kufi Arabic'), sans-serif;
	--crs-body: var(--ff-body, 'Almarai'), sans-serif;
	/* Fixed site header (72px) + sticky index bar. */
	--crs-nav: 72px;
	--crs-index-h: 61px;

	font-family: var(--crs-body);
	color: var(--crs-ink);
	background: var(--crs-paper);
	overflow-x: clip;
}

.crs *,
.crs *::before,
.crs *::after { box-sizing: border-box; }

.crs-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 24px;
}

.crs :focus-visible {
	outline: 2px solid var(--crs-seal);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Arrow glyphs point along the reading direction; the markup ships the RTL
   form, so mirror them when the document runs left-to-right. */
[dir="ltr"] .crs-month__next svg,
[dir="ltr"] .crs-entry__cta svg:last-child,
[dir="ltr"] .crs-step__link svg { transform: scaleX(-1); }

/* ============================================================= */
/* SHARED PRIMITIVES                                             */
/* ============================================================= */

/* The registrar label: small, plain, no letter-spacing (Arabic). */
.crs-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--crs-plex);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--crs-soft);
	margin: 0 0 14px;
}
.crs-label--mark::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--crs-seal);
	transform: rotate(45deg);
}
.crs-label--invert { color: rgba(255, 255, 255, .72); }

.crs-h2 {
	font-family: var(--crs-display);
	font-size: clamp(22px, 2.6vw, 29px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--crs-ink);
	margin: 0;
}

/* Buttons — squared off, closer to a form control than a marketing pill. */
.crs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--crs-plex);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 13px 22px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.crs-btn svg { flex: none; }
.crs-btn--solid { background: var(--crs-seal); color: #fff; }
.crs-btn--solid:hover { background: var(--crs-deep); transform: translateY(-1px); }
.crs-btn--quiet { background: transparent; border-color: var(--crs-rule); color: var(--crs-ink); }
.crs-btn--quiet:hover { background: var(--crs-vellum); border-color: var(--crs-seal); color: var(--crs-seal); }
.crs-btn--white { background: #fff; color: var(--crs-deep); }
.crs-btn--white:hover { transform: translateY(-1px); }
.crs-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .42); color: #fff; }
.crs-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* The theme sets a global `section { padding: var(--space-3xl) 5% }`. Left
   alone it injects its own gutters and rhythm here — and `.crs-field` sits
   INSIDE a container, so its 5% gutters would shrink the register grid. Every
   section below therefore states padding as a shorthand, covering all four
   sides; media queries may then adjust single sides safely. */

/* ============================================================= */
/* 1. HERO                                                        */
/* ============================================================= */
.crs-hero {
	padding: calc(var(--crs-nav) + 56px) 0 68px;
	border-bottom: 1px solid var(--crs-rule);
}
.crs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
	gap: 56px;
	align-items: center;
}
.crs-hero__title {
	font-family: var(--crs-display);
	font-size: clamp(28px, 3.6vw, 43px);
	font-weight: 700;
	line-height: 1.34;
	margin: 0 0 18px;
}
.crs-hero__title span { display: block; color: var(--crs-seal); }
.crs-hero__desc {
	font-size: clamp(15px, 1.5vw, 16.5px);
	line-height: 1.95;
	color: var(--crs-soft);
	max-width: 56ch;
	margin: 0 0 24px;
}

/* The study system, stated once for the whole register. */
.crs-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.crs-fact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--crs-plex);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--crs-ink);
	background: var(--crs-vellum);
	border: 1px solid var(--crs-rule);
	border-radius: 8px;
	padding: 7px 12px;
}
.crs-fact svg { flex: none; color: var(--crs-seal); }

.crs-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Signature: one level as the timetable it actually is ---- */
.crs-month { margin: 0; }
.crs-month__frame {
	background: #fff;
	border: 1px solid var(--crs-rule);
	border-radius: 14px;
	overflow: hidden;
}
.crs-month__head,
.crs-month__row {
	display: grid;
	grid-template-columns: minmax(78px, .95fr) 1fr 1fr;
}
.crs-month__head {
	background: var(--crs-vellum);
	border-bottom: 1px solid var(--crs-rule);
}
.crs-month__level,
.crs-month__col {
	font-family: var(--crs-plex);
	font-size: 11.5px;
	font-weight: 600;
	padding: 11px 10px;
	color: var(--crs-soft);
	text-align: center;
}
.crs-month__level { color: var(--crs-seal); text-align: start; padding-inline-start: 14px; }
.crs-month__col { border-inline-start: 1px solid var(--crs-rule); }

.crs-month__row { border-bottom: 1px solid var(--crs-rule); }
.crs-month__wk {
	display: flex;
	align-items: center;
	font-family: var(--crs-plex);
	font-size: 12.5px;
	font-weight: 400;
	color: var(--crs-soft);
	padding-inline: 14px;
}
.crs-month__cell {
	display: grid;
	place-items: center;
	min-height: 53px;
	font-family: var(--crs-plex);
	font-size: 15px;
	font-weight: 600;
	color: var(--crs-seal);
	background: var(--crs-vellum);
	border-inline-start: 1px solid var(--crs-rule);
	/* Filled in sequence once the figure scrolls in — see .is-in below. */
	opacity: 0;
	transform: scale(.86);
	transition: opacity .34s ease, transform .34s ease;
	transition-delay: calc(180ms + var(--n, 0) * 55ms);
}
.crs-month.is-in .crs-month__cell { opacity: 1; transform: none; }

.crs-month__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: var(--crs-vellum);
	font-family: var(--crs-plex);
	font-size: 12px;
	font-weight: 400;
	color: var(--crs-soft);
}
.crs-month__next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--crs-seal);
}
.crs-month figcaption {
	font-family: var(--crs-plex);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--crs-soft);
	margin-top: 12px;
	padding-inline-start: 2px;
}

/* ============================================================= */
/* 2. INDEX (sticky)                                              */
/* ============================================================= */
.crs-index {
	position: sticky;
	top: var(--crs-nav);
	z-index: 20;
	background: rgba(251, 250, 253, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--crs-rule);
}
.crs-index__wrap {
	display: flex;
	align-items: center;
	gap: 16px;
}
.crs-index__label {
	flex: none;
	font-family: var(--crs-plex);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--crs-soft);
	padding-inline-end: 16px;
	border-inline-end: 1px solid var(--crs-rule);
	align-self: stretch;
	display: flex;
	align-items: center;
}
.crs-index__chips {
	display: flex;
	gap: 8px;
	padding-block: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.crs-index__chips::-webkit-scrollbar { display: none; }

.crs-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--crs-plex);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--crs-soft);
	background: transparent;
	border: 1px solid var(--crs-rule);
	border-radius: 8px;
	padding: 8px 13px;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.crs-chip:hover { color: var(--crs-seal); border-color: var(--crs-seal); }
.crs-chip__n {
	font-size: 11px;
	font-weight: 400;
	color: var(--crs-soft);
	background: var(--crs-vellum);
	border-radius: 5px;
	padding: 1px 6px;
}
.crs-chip[aria-pressed="true"] {
	color: #fff;
	background: var(--crs-seal);
	border-color: var(--crs-seal);
}
.crs-chip[aria-pressed="true"] .crs-chip__n { color: #fff; background: rgba(255, 255, 255, .2); }

/* ============================================================= */
/* 3. REGISTER                                                    */
/* ============================================================= */
.crs-register {
	padding-top: 66px;
	padding-bottom: 84px;
	scroll-margin-top: calc(var(--crs-nav) + var(--crs-index-h));
}

/* Announced to screen readers when the index filters the register. */
.crs-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.crs-field {
	padding: 0; /* see the note above .crs-hero */
	scroll-margin-top: calc(var(--crs-nav) + var(--crs-index-h) + 24px);
}
.crs-field[hidden] { display: none; }
/* Separate consecutive fields — but never leave a stray rule at the top of a
   filtered view, so the preceding field has to be visible too. */
.crs-field:not([hidden]) + .crs-field {
	margin-top: 76px;
	padding-top: 76px;
	border-top: 1px solid var(--crs-rule);
}

/* Figure, title block, tally at the far margin — the register's own header. */
.crs-field__head {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, auto) minmax(28px, 1fr) auto;
	gap: 30px;
	align-items: center;
	margin-bottom: 32px;
}
/* A contents-page leader: it ties the field's title to its tally instead of
   leaving the far margin empty. */
.crs-field__leader { height: 1px; background: var(--crs-rule); }
.crs-field__plate { margin: 0; }
.crs-field__plate img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--crs-vellum);
	border: 1px solid var(--crs-rule);
	border-radius: var(--crs-radius);
}
.crs-field__meta .crs-label { margin-bottom: 10px; }
.crs-field__note {
	font-size: 15px;
	line-height: 1.9;
	color: var(--crs-soft);
	max-width: 48ch;
	margin: 10px 0 0;
}
.crs-field__tally {
	font-family: var(--crs-plex);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--crs-ochre);
	margin: 0;
}

/* ---- Register entries ---- */
.crs-entries {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* A field with one, two or three courses would leave empty tracks and read as a
   truncated row. Give those fields their own track count, capped so the entries
   stay close to the width they have everywhere else.
   Scoped to wide viewports on purpose: below this the auto-fill grid above
   already picks the right count, and these selectors would outrank the
   responsive rules on specificity. Browsers without :has() keep the auto-fill
   grid — ragged, never broken. */
@media (min-width: 1001px) {
	.crs-entries:has(> .crs-entry:first-child:last-child) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 372px;
	}
	.crs-entries:has(> .crs-entry:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 760px;
	}
	.crs-entries:has(> .crs-entry:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 900px;
	}
}
.crs-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--crs-rule);
	border-radius: var(--crs-radius);
	padding: 20px 20px 16px;
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
/* Margin mark: the register row you are pointing at. */
.crs-entry::before {
	content: "";
	position: absolute;
	inset-block: 14px;
	inset-inline-start: -1px;
	width: 3px;
	border-radius: 2px;
	background: var(--crs-seal);
	transform: scaleY(0);
	transition: transform .26s ease;
}
.crs-entry:hover,
.crs-entry:focus-within {
	border-color: var(--crs-seal);
	box-shadow: 0 10px 26px rgba(27, 18, 53, .08);
	transform: translateY(-3px);
}
.crs-entry:hover::before,
.crs-entry:focus-within::before { transform: scaleY(1); }

.crs-entry__name {
	font-family: var(--crs-plex);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--crs-ink);
	margin: 0 0 8px;
}
.crs-entry__desc {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--crs-soft);
	margin: 0 0 18px;
}
.crs-entry__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: auto;
	padding-top: 14px;
	border-top: 1px solid var(--crs-rule);
	font-family: var(--crs-plex);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--crs-seal);
	text-decoration: none;
	transition: gap .2s ease;
}
.crs-entry__cta svg { flex: none; }
.crs-entry__cta span { margin-inline-end: auto; }
.crs-entry__cta:hover { gap: 10px; }
.crs-entry__cta:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================= */
/* 4. ENROLMENT + CLOSE                                           */
/* ============================================================= */
.crs-enroll { padding: 0 0 88px; } /* see the note above .crs-hero */
.crs-enroll__inner {
	background: var(--crs-deep);
	border-radius: 20px;
	padding: 54px 46px 48px;
	color: #fff;
}
.crs-enroll__title {
	font-family: var(--crs-display);
	font-size: clamp(21px, 2.7vw, 30px);
	font-weight: 700;
	line-height: 1.45;
	max-width: 30ch;
	margin: 0 0 40px;
}

.crs-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0 0 44px;
	padding: 0;
}
.crs-step { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .24); }
.crs-step__n {
	display: block;
	font-family: var(--crs-plex);
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, .66);
	margin-bottom: 10px;
}
.crs-step__t {
	font-family: var(--crs-display);
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 8px;
}
.crs-step__b {
	font-size: 14px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .78);
	margin: 0;
}
.crs-step__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: var(--crs-plex);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(255, 255, 255, .45);
	transition: text-decoration-color .2s ease, gap .2s ease;
}
.crs-step__link:hover { text-decoration-color: #fff; gap: 9px; }
/* On the deep block a purple ring would disappear. White reads against the
   block — and the 3px offset keeps it off the white button's own edge. */
.crs-enroll .crs-step__link:focus-visible,
.crs-enroll .crs-btn--ghost:focus-visible,
.crs-enroll .crs-btn--white:focus-visible { outline-color: #fff; }

.crs-enroll__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================= */
/* REVEAL                                                        */
/* ============================================================= */
.crs [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s ease;
	transition-delay: calc(var(--i, 0) * 70ms);
}
.crs [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.crs [data-reveal],
	.crs-month__cell,
	.crs-entry,
	.crs-entry::before,
	.crs-btn { transition: none !important; }
	.crs [data-reveal] { opacity: 1; transform: none; }
	.crs-month__cell { opacity: 1; transform: none; }
	.crs-entry:hover { transform: none; }
	.crs-btn--solid:hover,
	.crs-btn--white:hover { transform: none; }
}

/* ============================================================= */
/* RESPONSIVE                                                    */
/* ============================================================= */
@media (max-width: 1000px) {
	.crs-hero { padding-top: calc(var(--crs-nav) + 40px); padding-bottom: 56px; }
	.crs-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.crs-month { max-width: 460px; }
	.crs-field__head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.crs-field__plate { max-width: 460px; }
	/* Stacked: the tally reads as another line of the title block, and the
	   leader has no gap left to bridge. */
	.crs-field__leader { display: none; }
	.crs-field__tally { margin-top: -8px; }
	.crs-register { padding-top: 52px; }
	/* Same selector as the base rule — a plainer one would lose on specificity. */
	.crs-field:not([hidden]) + .crs-field { margin-top: 60px; padding-top: 60px; }
}

@media (max-width: 760px) {
	.crs-enroll__inner { padding: 42px 26px 38px; }
	.crs-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 36px; }
	.crs-enroll__title { margin-bottom: 30px; }
}

@media (max-width: 560px) {
	.crs-hero { padding-top: calc(var(--crs-nav) + 30px); }
	.crs-index__label { display: none; }
	.crs-entries { grid-template-columns: minmax(0, 1fr); }
	.crs-month__cell { min-height: 44px; }
	.crs-month__level,
	.crs-month__col { font-size: 11px; padding: 10px 6px; }
	.crs-month__wk { font-size: 12px; padding-inline: 11px; }
	.crs-hero__cta .crs-btn,
	.crs-enroll__actions .crs-btn { flex: 1 1 100%; }
	.crs-register { padding-bottom: 64px; }
	.crs-enroll { padding-bottom: 64px; }
}

@media (max-width: 400px) {
	.crs-container { padding-inline: 18px; }
	.crs-entry { padding: 18px 18px 14px; }
	.crs-month__head,
	.crs-month__row { grid-template-columns: minmax(64px, .8fr) 1fr 1fr; }
}