/*
 * MC LearnPress UI — single course
 * Handle: mc-lp-single-course  (depends on mc-lp-base → mc-lp-tokens)
 *
 * Figma: 3705:25761 (promo-video variant) · 4597:32110 (image-only variant).
 *
 * Contents
 *   1.  Page shell & breadcrumb
 *   2.  Two-column grid
 *   3.  Purchase card
 *   4.  Mobile sticky purchase bar
 *   5.  Media slot & image-only hero
 *   6.  Tabs
 *   7.  Overview — sections, chips, bullets
 *   8.  Overview — perks strip
 *   9.  Instructor card
 *   10. FAQ accordion
 *   11. Related courses
 *   12. LearnPress markup we inherit
 *
 * RULES
 *   · Logical properties only — no left / right anywhere in this file.
 *   · Variables only — no raw hex, no raw px for spacing / type.
 *   · Breakpoints hard-coded: 640 / 768 / 1024 / 1280 (custom properties do not
 *     work inside @media).
 *   · Mobile-first: small layout first, then min-width blocks.
 */

/* ==========================================================================
   1. Page shell & breadcrumb
   ========================================================================== */

.mc-course {
	padding-block: var(--mc-space-5) var(--mc-space-12);

	/*
	 * ------------------------------------------------------------------------
	 *  STICKY CLEARANCE — the one value to tune
	 * ------------------------------------------------------------------------
	 * The site header is theme-owned; this plugin cannot measure it and CSS
	 * cannot read another element's height. The offset is therefore composed
	 * from two custom properties, both overridable from anywhere above
	 * `#learn-press-course` (`:root`, the theme stylesheet, the customiser):
	 *
	 *   --mc-lp-header-height   Height of the theme's fixed / sticky header.
	 *                           Defaults to 64px, which clears the common
	 *                           WordPress header. Set it to `0px` when the
	 *                           header scrolls away with the page, or to the
	 *                           real measured height when it does not.
	 *
	 *   --mc-sticky-top         Breathing room *below* that header. Declared in
	 *                           tokens.css (24px) and shared with the other
	 *                           sticky surfaces in this plugin.
	 *
	 * Nothing else in this file hard-codes a header offset — change either
	 * variable and the sticky purchase card and every in-page anchor target
	 * move together.
	 */
	--mc-course-sticky-top: calc(var(--mc-lp-header-height, var(--mc-space-16)) + var(--mc-sticky-top));
}

/*
 * In-page anchors (tab panels, `#mc-related-title`, the FAQ headings) must stop
 * clear of the same header the purchase card clears, otherwise a jump lands the
 * target underneath it. `scroll-margin-*` is inert until an element is actually
 * scrolled to, so the broad selector costs nothing.
 */
.mc-course [id] {
	scroll-margin-block-start: var(--mc-course-sticky-top);
}

/*
 * ---------------------------------------------------------------------------
 *  PAGE WIDTH — this screen only
 * ---------------------------------------------------------------------------
 * `base.css` caps `.mc-container` at `--mc-container` (1200px). This screen is
 * asked to run at 90% of the viewport instead, so the cap is overridden here
 * rather than in `tokens.css` — the archive and the instructor screens keep the
 * 1200px measure because their grids are tuned to it.
 *
 * The `min()` ceiling: a literal `90%` on a 2560px monitor yields a 2304px
 * content row, and the overview prose has no measure of its own, so body copy
 * would run to ~200 characters a line. 1600px keeps the requested 90% exact on
 * every viewport up to 1778px — every laptop and most desktops — and only
 * engages beyond that. Raise or drop the ceiling in this one declaration.
 *
 * The child combinator keeps this to the page shell; `.mc-container` instances
 * nested inside a tab panel (a third-party callback, say) are untouched.
 */
.mc-lp .mc-course > .mc-container {
	max-inline-size: min(90%, 1600px);
}

.mc-breadcrumb {
	margin-block-end: var(--mc-space-5);
}

.mc-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mc-space-2);
	margin: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	color: var(--mc-color-text-muted);
}

.mc-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1-5);
	color: var(--mc-color-text-muted);
}

.mc-breadcrumb__link:hover,
.mc-breadcrumb__link:focus-visible {
	color: var(--mc-color-primary);
}

.mc-breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	color: var(--mc-color-border-strong);
}

.mc-breadcrumb__item--current {
	color: var(--mc-color-text);
	font-weight: var(--mc-font-weight-bold);
}

/* ==========================================================================
   2. Two-column grid
   The Figma is RTL with the purchase card on the visual LEFT. Placing the aside
   in grid column 2 resolves to the inline end, i.e. left under dir="rtl" and
   right under dir="ltr" — correct in both directions without a single
   directional property.
   Source order is aside-first so the stacked layout puts the purchase card
   above the tabs (plan §7.1, 768–1023 and below).

   COLUMN WIDTHS — measured from Figma
   -----------------------------------
   Both variants agree, on a 1440 canvas:

     sidebar card   3705:25912 / 4597:32262   x=72    w=322
     column gap                               394→426  32
     main column    3705:25764 / 4597:32113   x=426   w=942
     content row                              72→1368  1296

   The shell now runs at 90% of the viewport (§1), so on a 1440 canvas the
   content row is ~1296px — the Figma row almost exactly. A flat 350px track at
   every breakpoint from `lg` up is what the brief asks for, and it sits just
   above the design's literal 322px card, which reads correctly next to the
   wider main column. The gap stays at the design's 32px throughout.

   IMPORTANT — the track alone does not size the card. LearnPress's own
   stylesheet forces `width: 300px` onto `.course-summary-sidebar` and
   `.course-summary-sidebar__inner`, the class names our purchase card keeps for
   compatibility, so the card ignored this track entirely until §12.1
   neutralised those rules. Change the number here AND leave §12.1 in place.
   ========================================================================== */

.mc-course__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-6);
	align-items: start;
}

.mc-course__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-6);
}

@media (min-width: 1024px) {
	.mc-course__layout {
		grid-template-columns: minmax(0, 1fr) 350px;
		gap: var(--mc-space-8);
	}

	.mc-course__main {
		grid-column: 1;
		grid-row: 1;
	}

	.mc-course__aside {
		grid-column: 2;
		grid-row: 1;
	}
}

.mc-course__aside {
	min-width: 0;
}

/* --- 2.1 Sticky purchase column ------------------------------------------
 *
 * WHY THE PREVIOUS BUILD DID NOT STICK
 *
 * `position: sticky` was on `.course-summary-sidebar__inner` (the card), whose
 * containing block is its parent `<aside>`. That `<aside>` is a grid item under
 * `align-items: start`, so it is sized to its own content — exactly as tall as
 * the card inside it. A sticky box can only travel inside its containing block,
 * and here that range was zero, so the card never moved. The property applied;
 * it simply had nowhere to go.
 *
 * It also explains the second symptom. `position: sticky` always creates a
 * stacking context, so the card became a positioned box painting in the
 * positioned layer at `z-index: auto`. A theme header that is `position: fixed`
 * without an explicit z-index sits in that same layer but *earlier* in the
 * document, so the later card won the tie and painted over the header.
 *
 * THE FIX
 *
 * Move sticky onto the grid item itself. A grid item's containing block is its
 * grid *area*, which spans the whole row — as tall as the main column — so the
 * card now has the full article height to travel through. `align-items: start`
 * stays: it only start-aligns the item inside that area, it does not shrink it.
 *
 * `inset-block-start` clears the theme header (see `--mc-course-sticky-top` in
 * §1), which is what actually prevents the overlap: geometry, not z-index. The
 * explicit `z-index: 0` is belt-and-braces — sticky forces a stacking context,
 * so `auto` is unavailable, and 0 is the lowest positioned layer we can ask for
 * so the card can never outrank a modal, the admin bar or a properly-layered
 * header.
 *
 * ANCESTOR CHAIN — verified free of anything that would kill sticky. Every one
 * of these computes `overflow: visible`:
 *
 *   .mc-course__layout       §2 above — grid, no overflow
 *   .mc-course__content      no rule in this plugin; LearnPress styles
 *                            `.course-content` only under `.learn-press-courses`
 *   .mc-container            base.css:164 — width / margin / padding only
 *   #learn-press-course      `.mc-course` §1 — padding-block only
 *   body / html              theme-owned, but `overflow` on the root or on
 *                            <body> propagates to the viewport and leaves the
 *                            element itself `visible`, so it cannot break this
 *
 * If the card still refuses to stick on a given theme, the cause is an
 * *intermediate* theme wrapper (`#page`, `.site-content`, a page-builder
 * section) with `overflow` other than `visible`. That is the only remaining
 * possibility and it cannot be neutralised from a descendant.
 *
 * ---------------------------------------------------------------------------
 * WHY THE SELECTOR CARRIES THE PARENT — do not simplify it back
 * ---------------------------------------------------------------------------
 * LearnPress declares, unscoped, in `assets/css/learnpress.css:6688` (identical
 * at the same line in the `-rtl` build WordPress substitutes here):
 *
 *     .course-summary-sidebar { position: relative; }        (0,1,0)
 *
 * Our `<aside>` carries BOTH `course-summary-sidebar` and `mc-course__aside`,
 * so a bare `.mc-course__aside { position: sticky }` is (0,1,0) too — an exact
 * specificity tie, decided only by which stylesheet the browser sees last.
 * Today we win by accident: LearnPress enqueues from `wp_head` at priority -1
 * (`inc/class-lp-assets.php:23`), which runs *before* `wp_enqueue_scripts`,
 * where this plugin enqueues at priority 20 — so our sheet prints later. Any
 * theme, caching plugin or asset optimiser that reorders the two flips
 * `position` back to `relative` and the column silently stops sticking.
 *
 * `.mc-course__layout > .mc-course__aside` is (0,2,0) and wins outright. The
 * matching `max-width: 1023px` block below uses the same selector so the two
 * states are symmetrical and neither can be beaten by the LearnPress rule.
 *
 * ---------------------------------------------------------------------------
 * A CARD TALLER THAN THE VIEWPORT
 * ---------------------------------------------------------------------------
 * The cap and the scroll live on the COLUMN, never on the card. Capping
 * `.mc-purchase-card` itself (what this file used to do) had three defects,
 * all reproduced in Chrome at 1024/1280/1440:
 *
 *   · a scrollbar was drawn *inside* the card's 16px radius, over its own
 *     border and shadow — the "bad" in the bug report;
 *   · `overflow-y: auto` with `overflow-x: visible` is not representable, so
 *     the used value of `overflow-x` became `auto` too (CSS Overflow 3 §3.2).
 *     The card silently became a horizontal scroll container, and because the
 *     meta rows are `justify-content: space-between`, the VALUES sit at the
 *     inline end — the first thing lost the moment anything clipped the card;
 *   · the cap is a `dvh` calculation, so it applied to the card at every
 *     height, not just when the card was genuinely too tall.
 *
 * `overflow` on this element is safe for its own stickiness: only `overflow`
 * on an *ancestor* disables `position: sticky`. The inline padding gives the
 * card's radius and `box-shadow` room to paint inside the scrollport instead
 * of being sheared off by its edge — that is why it is here and not a negative
 * margin, which would be one more way to push a box past the viewport.
 */
@media (min-width: 1024px) {
	.mc-course__layout > .mc-course__aside {
		position: sticky;
		inset-block-start: var(--mc-course-sticky-top);
		z-index: 0;

		max-block-size: calc(100dvh - var(--mc-course-sticky-top) - var(--mc-space-6));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		scrollbar-width: thin;

		/* Room for the card's shadow and radius inside the scrollport. */
		padding: var(--mc-space-1) var(--mc-space-2);
	}
}

/*
 * Below `lg` the purchase card is simply the first block of a single-column
 * page. Every ≥1024 declaration above is unwound explicitly rather than left
 * to the media query, because two of them are inherited from elsewhere and
 * would otherwise survive:
 *
 *   · `position` — LearnPress' `.course-summary-sidebar { position: relative }`
 *     (learnpress-rtl.css:6688) is unconditional. Measured in Chrome at 784px
 *     and 500px, the column really did compute `position: relative` before this
 *     block existed. Nothing depended on it, but a positioned box paints in the
 *     positioned layer, so it could out-paint a theme's own overlays;
 *   · everything else here is a belt-and-braces assertion that no cap, no
 *     scroll container and no clipping can reach a phone.
 */
@media (max-width: 1023px) {
	.mc-course__layout > .mc-course__aside {
		position: static;
		inset-block-start: auto;
		z-index: auto;
		max-block-size: none;
		overflow: visible;
		padding: 0;
	}
}

/* ==========================================================================
   3. Purchase card

   SPACING — measured from Figma, both variants
   --------------------------------------------
   Card padding      inner frame sits at x=16 / y=24 inside the 322×584 card
                     (3705:25913), last child ends 24px above the card's
                     bottom edge → 24px block, 16px inline.
   thumb → title     4597:32264 ends 185, title at 201                → 16
   title → excerpt   3705:25914 ends 56, 3705:25915 at 68             → 12
   excerpt → meta    3705:25916 ends 96, 3705:25917 at 112            → 16
   meta rows         3705:25918.. at 0/28/56/84/112/140, each 20 tall →  8
   meta → price      4597:32269 ends 160, 4597:32297 at 184           → 24
   price → urgency   4597:32299 ends 28, 4597:32304 at 32             →  4
   price → actions   4597:32263 ends 493, 4597:32307 at 517           → 24
   actions           4597:32308 at 0, 4597:32309 at 52, each 40 tall  → 12

   The card body is a flex column whose `gap` carries the tightest of those
   values (12px, title → excerpt); the three blocks the design separates further
   add the difference as `margin-block-start`. That keeps every gap correct even
   when an optional block (thumbnail, excerpt, meta list, price) is absent.

   The hairline that used to sit above the price block is gone — neither Figma
   variant draws one, and in a card this narrow the 24px of air reads better
   than a rule 8px off the numbers.
   ========================================================================== */

.mc-purchase-card {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-4);
	padding: var(--mc-space-6) var(--mc-space-4);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-xl);
	background: var(--mc-color-bg);
	box-shadow: var(--mc-shadow-card);
}

/*
 * ---------------------------------------------------------------------------
 *  MEASURE BELOW `lg` — this is the "blank card" bug
 * ---------------------------------------------------------------------------
 * The card is the inline-end column only from 1024 up. Below that the grid is
 * a single `minmax(0, 1fr)` track and the card stretches to the full content
 * width — 658px at a 784px viewport, 418px at 500px, measured in Chrome.
 *
 * Nothing clips and nothing is hidden at that size, but §3.1 lays every meta
 * row out with `justify-content: space-between`, which is correct for the 322px
 * card the design specifies and absurd at 658px: the label pins to the inline
 * start, the value to the inline end, and the two are left 511px apart. Six
 * rows of that under a full-width title is precisely the "image, then a large
 * blank white region, then the price" the bug report describes — the text is
 * present and legible, it has just been thrown at the two far edges of a very
 * wide white box.
 *
 * A measure fixes it at the source and keeps the design's proportions. `auto`
 * inline margins centre it over the main column below it.
 *
 * 24rem = 384px, just above the 322px card the Figma specifies, which restores
 * the label/value gap to roughly the ratio the design draws. Measured empty gap
 * per meta row at a 784px viewport: 511px before, 237px after; the ≥1024 column
 * itself sits at 177px, so the two now read the same.
 *
 * A real phone never reaches the cap — at 375px the 90% shell leaves a ~305px
 * card, so this rule only engages between roughly 430px and 1023px, which is
 * exactly the tablet range where the single column got too wide.
 *
 * NOTE: §12.1 must NOT re-assert `max-inline-size: none` on this element or
 * this rule is dead — see the comment there.
 */
@media (max-width: 1023px) {
	.mc-purchase-card {
		max-inline-size: 24rem;
		margin-inline: auto;
		max-block-size: none;
		overflow: visible;
	}
}

.mc-purchase-card__media {
	border-radius: var(--mc-radius-md);
	overflow: hidden;
	background: var(--mc-color-surface);
	aspect-ratio: 16 / 10;
}

.mc-purchase-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Base rhythm = the design's tightest gap, title → excerpt (68 − 56 = 12). */
.mc-purchase-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-3);
}

.mc-purchase-card__title {
	margin: 0;
	font-size: var(--mc-font-size-xl);
	line-height: var(--mc-leading-xl);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-purchase-card__excerpt {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

/* --- 3.1 Meta rows: label at the inline start, value at the inline end ----- */

.mc-purchase-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-2);
	margin: 0;
	/* + the 12px body gap = the design's 16px above the meta list. */
	margin-block-start: var(--mc-space-1);
}

.mc-purchase-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-3);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-purchase-card__label {
	flex: none;
	margin: 0;
	color: var(--mc-color-text);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-purchase-card__value {
	margin: 0;
	min-width: 0;
	color: var(--mc-color-text-muted);
	text-align: end;
	overflow-wrap: anywhere;
}

.mc-purchase-card__value a {
	color: var(--mc-color-text-muted);
}

.mc-purchase-card__value a:hover,
.mc-purchase-card__value a:focus-visible {
	color: var(--mc-color-primary);
}

/*
 * The Figma prints the numeric average *after* the star row in reading order
 * (…, then 4.8 nearest the inline end of the group). The shared rating-stars
 * part emits stars-then-value, so the row is reversed here rather than forking
 * the shared part.
 */
.mc-purchase-card__rating .mc-stars {
	flex-direction: row-reverse;
}

/* --- 3.2 Price ----------------------------------------------------------- */

.mc-purchase-card__pricing {
	display: flex;
	flex-direction: column;
	/* Price row → urgency line: 32 − 28 = 4. */
	gap: var(--mc-space-1);
	/* + the 12px body gap = the design's 24px above the price block. */
	margin-block-start: var(--mc-space-3);
}

.mc-purchase-card__price {
	margin: 0;
	gap: var(--mc-space-2);
}

.mc-purchase-card__price .mc-price__current {
	font-size: var(--mc-font-size-xl);
	line-height: var(--mc-leading-xl);
	font-weight: var(--mc-font-weight-extrabold);
}

/* LearnPress wraps prices in its own spans; neutralise their inherited styles. */
.mc-purchase-card__price .course-price,
.mc-purchase-card__price .course-item-price,
.mc-purchase-card__price .price,
.mc-purchase-card__price .origin-price {
	all: unset;
	font: inherit;
	color: inherit;
}

.mc-purchase-card__urgency {
	display: flex;
	align-items: center;
	gap: var(--mc-space-1-5);
	margin: 0;
	color: var(--mc-color-danger);
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-purchase-card__urgency .mc-icon {
	color: var(--mc-color-danger);
}

/* --- 3.3 Actions --------------------------------------------------------- */

.mc-purchase-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-3);
	/* + the 12px body gap = the design's 24px above the button stack. */
	margin-block-start: var(--mc-space-3);
}

/*
 * LearnPress ships `form.enroll-course, form.purchase-course { display:
 * inline-flex; flex-direction: column; gap: 10px }` at `learnpress-rtl.css:8429`,
 * unscoped and at (0,1,1). An inline-level flex container shrink-wraps, so the
 * `width: 100%` we put on the button below resolved against a form that was only
 * as wide as its own label: the primary CTA rendered visibly narrower than the
 * secondary "أضف إلى السلة" button stacked under it. Reproduced at 768px and
 * 500px before this rule existed.
 *
 * (0,2,1) — one class above the LearnPress rule, so this does not depend on
 * stylesheet order the way a bare `.mc-purchase-card__cta form` would.
 */
.mc-purchase-card .mc-purchase-card__cta form {
	display: flex;
	margin: 0;
}

/*
 * Fallback styling for LearnPress buttons we did not rebuild — the warning
 * message branch of html_btn_purchase_course(), or a third party that filtered
 * our rebuilt markup away.
 */
.mc-purchase-card__cta .lp-button:not(.mc-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--mc-btn-height);
	padding-block: var(--mc-space-3);
	padding-inline: var(--mc-space-6);
	border: 1px solid transparent;
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-primary);
	color: var(--mc-color-text-invert);
	font-weight: var(--mc-font-weight-bold);
	cursor: pointer;
}

.mc-purchase-card__widgets {
	padding-block-start: var(--mc-space-4);
	border-block-start: 1px solid var(--mc-color-border);
}

/* ==========================================================================
   4. Mobile purchase bar — REMOVED
   --------------------------------------------------------------------------
   This section used to emit a `position: fixed` price + CTA bar pinned to the
   bottom of the viewport below 768px, plus 96px of bottom padding on
   `.mc-course` to keep the last section clear of it.

   Measured at a 500px viewport it was 77px tall and covered the full width of
   the page for the whole scroll, which is the report "on mobile still on sticky
   hide all the page content". The user's follow-up — "in mobile, its not sticky
   at all" — settles the intent: no sticky surface on mobile at all.

   Nothing is lost by removing it. Source order in `content.php` puts the
   `<aside>` before `.mc-course__main`, so on a single-column page the purchase
   card — price, urgency line and both CTAs — is already the first thing under
   the breadcrumb. The duplicate bar was covering the content it was meant to
   sell.

   The markup is gone from `templates/single-course/sidebar.php` too; both were
   removed together so no orphan rules or orphan nodes remain.
   ========================================================================== */

/* ==========================================================================
   5. Media slot & image-only hero
   ========================================================================== */

.mc-course__media {
	width: 100%;
}

.mc-course__media .mc-media {
	border-radius: var(--mc-radius-lg);
	box-shadow: var(--mc-shadow-card);
}

/* The image-only variant (4597:32110): the thumbnail moved into the purchase
   card and this column becomes a title + description panel. */
.mc-course__hero {
	padding: var(--mc-space-6);
	border-radius: var(--mc-radius-xl);
	background: var(--mc-color-surface);
}

.mc-course__hero-title {
	margin: 0 0 var(--mc-space-3);
	font-size: clamp(var(--mc-font-size-2xl), 3vw, var(--mc-font-size-4xl));
	line-height: var(--mc-leading-tight);
	font-weight: var(--mc-font-weight-extrabold);
	color: var(--mc-color-text);
}

.mc-course__hero-text {
	margin: 0;
	max-width: 62ch;
	color: var(--mc-color-dark-blue-400);
	font-size: var(--mc-font-size-lg);
	line-height: var(--mc-leading-body);
}

@media (min-width: 1024px) {
	.mc-course__hero {
		padding: var(--mc-space-10);
	}
}

/* ==========================================================================
   6. Tabs
   The radio inputs are the no-JS mechanism. Inputs and panels are emitted in
   the same order, so :nth-of-type(n):checked pairs with :nth-child(n) — key
   agnostic, which matters because third parties may register extra tabs.
   ========================================================================== */

.mc-tabs {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-6);
}

.mc-tabs__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	/* Keep it in the tab order so the no-JS path stays keyboard operable.
	   tabs.js sets tabindex="-1" once the ARIA tablist takes over. */
	appearance: none;
}

.mc-tabs__scroller {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mc-tabs__scroller::-webkit-scrollbar {
	display: none;
}

.mc-tabs__nav {
	display: flex;
	align-items: stretch;
	gap: var(--mc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.mc-tabs__item {
	flex: none;
}

.mc-tabs__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--mc-tap-target);
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-1);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-semibold);
	cursor: pointer;
	transition: color var(--mc-transition-fast);
}

.mc-tabs__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	border-radius: var(--mc-radius-full);
	background: transparent;
	transition: background-color var(--mc-transition-fast);
}

.mc-tabs__link:hover {
	color: var(--mc-color-text);
}

/*
 * Keyboard focus.
 *
 * With JS the labels are the focusable tabs, so the ring goes on the label.
 * Without JS the focused control is a clipped radio that cannot show a ring of
 * its own; a general-sibling selector (the scroller follows every input) puts
 * the ring on the tablist instead, which is the group the arrow keys drive.
 */
.mc-tabs__link:focus-visible {
	outline: 2px solid var(--mc-color-focus);
	outline-offset: 2px;
	border-radius: var(--mc-radius-sm);
}

.mc-tabs__input:focus-visible ~ .mc-tabs__scroller .mc-tabs__nav {
	outline: 2px solid var(--mc-color-focus);
	outline-offset: 4px;
	border-radius: var(--mc-radius-sm);
}

.mc-tabs--js .mc-tabs__input:focus-visible ~ .mc-tabs__scroller .mc-tabs__nav {
	outline: none;
}

.mc-tabs__panels {
	min-width: 0;
}

.mc-tabs__panel {
	display: none;
}

.mc-tabs__panel:focus-visible {
	outline: 2px solid var(--mc-color-focus);
	outline-offset: 4px;
}

/* --- 6.1 Positional pairing, up to eight tabs ---------------------------- */

.mc-tabs__input:nth-of-type(1):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(1),
.mc-tabs__input:nth-of-type(2):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(2),
.mc-tabs__input:nth-of-type(3):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(3),
.mc-tabs__input:nth-of-type(4):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(4),
.mc-tabs__input:nth-of-type(5):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(5),
.mc-tabs__input:nth-of-type(6):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(6),
.mc-tabs__input:nth-of-type(7):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(7),
.mc-tabs__input:nth-of-type(8):checked ~ .mc-tabs__panels > .mc-tabs__panel:nth-child(8) {
	display: block;
}

.mc-tabs__input:nth-of-type(1):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(1) .mc-tabs__link,
.mc-tabs__input:nth-of-type(2):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(2) .mc-tabs__link,
.mc-tabs__input:nth-of-type(3):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(3) .mc-tabs__link,
.mc-tabs__input:nth-of-type(4):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(4) .mc-tabs__link,
.mc-tabs__input:nth-of-type(5):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(5) .mc-tabs__link,
.mc-tabs__input:nth-of-type(6):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(6) .mc-tabs__link,
.mc-tabs__input:nth-of-type(7):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(7) .mc-tabs__link,
.mc-tabs__input:nth-of-type(8):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(8) .mc-tabs__link {
	color: var(--mc-color-text);
	font-weight: var(--mc-font-weight-bold);
}

.mc-tabs__input:nth-of-type(1):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(1) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(2):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(2) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(3):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(3) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(4):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(4) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(5):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(5) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(6):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(6) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(7):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(7) .mc-tabs__link::after,
.mc-tabs__input:nth-of-type(8):checked ~ .mc-tabs__scroller .mc-tabs__item:nth-child(8) .mc-tabs__link::after {
	background: var(--mc-color-primary);
}

/*
 * JS-enhanced state. tabs.js maintains aria-selected and .is-active, which take
 * priority over the positional rules above once the script has booted (it sets
 * .mc-tabs--js on the container).
 */
.mc-tabs--js .mc-tabs__panel {
	display: none;
}

.mc-tabs--js .mc-tabs__panel.is-active {
	display: block;
}

.mc-tabs--js .mc-tabs__link[aria-selected="true"] {
	color: var(--mc-color-text);
	font-weight: var(--mc-font-weight-bold);
}

.mc-tabs--js .mc-tabs__link[aria-selected="true"]::after {
	background: var(--mc-color-primary);
}

@media (min-width: 768px) {
	.mc-tabs__nav {
		gap: var(--mc-space-8);
	}

	.mc-tabs__link {
		font-size: var(--mc-font-size-lg);
	}
}

/* ==========================================================================
   7. Overview — sections, chips, bullets
   ========================================================================== */

.mc-overview {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-10);
}

.mc-overview__section {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-4);
}

.mc-overview__title,
.mc-course__section-title {
	margin: 0;
	font-size: var(--mc-font-size-2xl);
	line-height: var(--mc-leading-2xl);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-overview__prose {
	color: var(--mc-color-dark-blue-400);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-body);
}

.mc-overview__prose > *:last-child {
	margin-block-end: 0;
}

.mc-overview__prose img {
	border-radius: var(--mc-radius-md);
}

.mc-overview__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-chip--skill {
	border-radius: var(--mc-radius-md);
	color: var(--mc-color-text);
}

/* Target-audience bullets: one column on mobile, two from md (Figma). */
.mc-overview__bullets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-3) var(--mc-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.mc-overview__bullets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mc-overview__bullet {
	position: relative;
	padding-inline-start: var(--mc-space-5);
	color: var(--mc-color-dark-blue-400);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-body);
}

.mc-overview__bullet::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: var(--mc-radius-sm);
	background: var(--mc-color-text);
}

/* ==========================================================================
   8. Overview — perks strip ("امتلك أدوات النجاح")
   Panel is blue-50; heading sits at the inline start, four cards follow.
   4 across ≥1280 · 2×2 at 768–1279 · stacked below (plan §7.1).
   ========================================================================== */

.mc-perks__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-4);
	padding: var(--mc-space-5);
	border-radius: var(--mc-radius-xl);
	background: var(--mc-color-surface-alt);
}

.mc-perks__intro {
	display: flex;
	align-items: center;
}

.mc-perks__title {
	margin: 0;
	font-size: var(--mc-font-size-xl);
	line-height: var(--mc-leading-xl);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-perks__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-perks__cell {
	display: flex;
}

@media (min-width: 768px) {
	.mc-perks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.mc-perks__panel {
		grid-template-columns: minmax(180px, 0.9fr) minmax(0, 3fr);
		gap: var(--mc-space-6);
		padding: var(--mc-space-6);
	}

	.mc-perks__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mc-perk-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mc-space-2);
	padding: var(--mc-space-4);
	border-radius: var(--mc-radius-lg);
	background: var(--mc-color-bg);
	box-shadow: var(--mc-shadow-sm);
}

.mc-perk-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-surface-alt);
	color: var(--mc-color-accent);
}

.mc-perk-card__title {
	margin: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-perk-card__text {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-body);
}

/* ==========================================================================
   9. Instructor card
   ========================================================================== */

.mc-instructor-card {
	display: flex;
	align-items: flex-start;
	gap: var(--mc-space-4);
	padding-block: var(--mc-space-5);
	border-block-start: 1px solid var(--mc-color-border);
}

.mc-instructor-card--tab {
	padding-block: 0;
	border-block-start: 0;
}

.mc-instructor-card__avatar {
	flex: none;
	line-height: 0;
}

.mc-instructor-card__avatar img,
.mc-instructor-card__avatar .avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--mc-radius-full);
	object-fit: cover;
}

.mc-instructor-card--tab .mc-instructor-card__avatar img,
.mc-instructor-card--tab .mc-instructor-card__avatar .avatar {
	width: 96px;
	height: 96px;
}

.mc-instructor-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-1-5);
	min-width: 0;
	flex: 1 1 auto;
}

.mc-instructor-card__name {
	margin: 0;
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-instructor-card--tab .mc-instructor-card__name {
	font-size: var(--mc-font-size-xl);
	line-height: var(--mc-leading-xl);
}

.mc-instructor-card__role {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-instructor-card__stats {
	margin: 0;
	padding: 0;
}

.mc-instructor-card__bio {
	margin-block-start: var(--mc-space-2);
	color: var(--mc-color-dark-blue-400);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-body);
}

.mc-instructor-card__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mc-space-3);
	margin-block-start: var(--mc-space-1);
}

/* LearnPress emits the social row as bare <a> elements. */
.mc-instructor-card__social a,
.mc-instructor-card__social .instructor-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mc-tap-target);
	height: var(--mc-tap-target);
	border-radius: var(--mc-radius-full);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-base);
	transition: color var(--mc-transition-fast), background-color var(--mc-transition-fast);
}

.mc-instructor-card__social a:hover,
.mc-instructor-card__social a:focus-visible {
	background: var(--mc-color-surface);
	color: var(--mc-color-primary);
}

.mc-instructor-card__social img,
.mc-instructor-card__social svg {
	width: var(--mc-icon-size);
	height: var(--mc-icon-size);
}

@media (min-width: 768px) {
	.mc-instructor-card__social {
		gap: var(--mc-space-1);
	}

	.mc-instructor-card__social a,
	.mc-instructor-card__social .instructor-social a {
		width: 32px;
		height: 32px;
	}
}

/* ==========================================================================
   10. FAQ accordion
   Extends the shared .mc-accordion primitive from base.css — only the visual
   deltas the Figma asks for live here.
   ========================================================================== */

.mc-faq__list {
	gap: var(--mc-space-2);
}

.mc-faq__item {
	border-radius: var(--mc-radius-md);
}

.mc-faq__item[hidden] {
	display: none;
}

.mc-faq__header {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.mc-faq__trigger {
	background: var(--mc-color-bg);
	padding-block: var(--mc-space-3);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-faq__trigger:hover {
	background: var(--mc-color-surface);
}

.mc-faq__question {
	overflow-wrap: anywhere;
}

.mc-faq__indicator {
	color: var(--mc-color-text-subtle);
}

.mc-faq__answer {
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-body);
}

.mc-faq__answer > *:last-child {
	margin-block-end: 0;
}

.mc-faq__more {
	display: flex;
	justify-content: center;
	margin: 0;
}

.mc-faq__toggle {
	color: var(--mc-color-text);
	font-size: var(--mc-font-size-sm);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-faq__toggle-icon {
	transition: transform var(--mc-transition);
}

.mc-faq__toggle[aria-expanded="true"] .mc-faq__toggle-icon {
	transform: rotate(180deg);
}

@media (min-width: 768px) {
	.mc-faq__trigger {
		padding-block: var(--mc-space-4);
		font-size: var(--mc-font-size-base);
	}
}

/* ==========================================================================
   11. Related courses ("دورات ذات صله")
   ========================================================================== */

.mc-related {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-5);
	margin-block-start: var(--mc-space-6);
}

.mc-related__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-related__item {
	display: flex;
	min-width: 0;
}

.mc-related__item > * {
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 640px) {
	.mc-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mc-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   12. LearnPress markup we inherit
   Third-party callbacks still fire on `learn-press/course-content-summary`, and
   LearnPress's own message helper is used by the tab template. Neutralise the
   stray wrappers so nothing escapes the grid.
   ========================================================================== */

.mc-course__main > .lp-content-area,
.mc-course__main .course-detail-info,
.mc-course__main .lp-entry-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* --- 12.1 LearnPress's legacy sidebar geometry ----------------------------
 *
 * THIS IS THE RULE SET THAT BROKE THE LAYOUT. Read before touching §2.
 *
 * The purchase card deliberately keeps LearnPress's `course-summary-sidebar`
 * and `course-summary-sidebar__inner` class names so third-party code that
 * queries them keeps working. LearnPress styles those same names for its own
 * legacy float layout, in `assets/css/learnpress.css:6075-6121` (identical in
 * the `-rtl` build that WordPress substitutes on this Arabic site):
 *
 *     .lp-archive-courses .course-summary-sidebar              (0,2,0)
 *         width: 300px;  margin-top: -180px;
 *     .lp-archive-courses .course-summary-sidebar__inner       (0,2,0)
 *         width: 300px;
 *     .lp-archive-courses .course-summary-sidebar__inner > div (0,2,1)
 *         padding: 20px;  background: #fff;
 *     .lp-archive-courses .course-summary-sidebar__inner .course-sidebar-secondary
 *         margin-top: 30px;                                    (0,3,0)
 *
 * `.lp-archive-courses` is NOT an archive-only wrapper despite the name:
 * `inc/lp-template-hooks.php:46` opens `<div class="lp-archive-courses">` on
 * `learn-press/before-main-content` at priority -100, unconditionally, on every
 * LearnPress route — the single-course page included. So every rule above is
 * live on this screen, and each one outranks our single-class components.
 *
 * Consequences, all reproduced from the cascade:
 *
 *   · above 768px the card rendered 300px wide no matter what the grid track in
 *     §2 said — the "sidebar is still small" report. Raising the track from
 *     340px to 350px alone would have changed nothing;
 *   · `margin-top: -180px` pulled the aside — the FIRST item in source order —
 *     180px up out of the grid row. That collapses the row box by 180px and
 *     drags the main column up with it, so at 769-1023px (tablet, and any phone
 *     in landscape) the page slid up behind a fixed theme header and read as
 *     empty. LearnPress zeroes the width and margin below 768px, which is why
 *     the damage is confined to widths above it;
 *   · the 20px padding and the 30px margin are never reset at any width, so the
 *     card's measured Figma spacing was wrong on every screen.
 *
 * Neutralised at (0,3,0)/(0,4,0) so the plugin wins on specificity alone and
 * does not depend on the order in which the two stylesheets are enqueued.
 * Logical properties throughout, so nothing here re-introduces a physical edge.
 *
 * TWO CHANGES FROM THE EARLIER VERSION, both load-bearing:
 *
 * 1. `max-inline-size: none` now applies to the `<aside>` ONLY, never to the
 *    card. At (0,4,0) on the card it beat every measure this file could give
 *    it, including the `max-width: 1023px` cap in §3 that fixes the stretched
 *    meta rows. The card does not need it: LearnPress' only `max-width` here is
 *    `.lp-archive-courses .course-summary-sidebar { max-width: 100% }`
 *    (learnpress-rtl.css:6077), which lands on the aside, and the card's
 *    `width: 300px` (:6095) is already overridden by `inline-size: 100%`.
 *
 * 2. The `> div` reset now clears `background` as well as `padding`.
 *    `learnpress-rtl.css:6118` sets BOTH on every direct child of
 *    `.course-summary-sidebar__inner`, and only the padding was being undone —
 *    `.mc-purchase-card__body` was measurably computing
 *    `background-color: rgb(255, 255, 255)` from LearnPress rather than
 *    inheriting the card's own surface.
 */
.mc-lp .mc-course .mc-course__aside {
	inline-size: 100%;
	max-inline-size: none;
	margin-block-start: 0;
}

.mc-lp .mc-course .mc-course__aside .mc-purchase-card {
	inline-size: 100%;
	margin-block-start: 0;
}

/* Strip LearnPress's blanket 20px/white on the card's own blocks... */
.mc-lp .mc-course .mc-purchase-card > div {
	padding: 0;
	background: none;
}

/* ...then restore the two that carry deliberate values of their own. */
.mc-lp .mc-course .mc-purchase-card > .mc-purchase-card__media {
	background: var(--mc-color-surface);
}

.mc-lp .mc-course .mc-purchase-card > .mc-purchase-card__widgets {
	padding-block-start: var(--mc-space-4);
	margin-block-start: 0;
}

.mc-course .learn-press-message {
	border-radius: var(--mc-radius-md);
}

.mc-course .learn-press-template-warning {
	display: none;
}