/*
 * tutor.css — Tutor LMS integration
 *
 * Written against markup captured from the running local site on 29 Aug 2026,
 * not against the plugin's documentation. Every selector below was observed in
 * the rendered HTML of course 4989, lesson 4991, the student dashboard (page
 * 6213), the logged-out login state and the permission-denied state.
 *
 * Loaded only where alrasly_page_needs_tutor() is true — see
 * inc/asset-trimming.php.
 *
 * Tutor ships its own palette assuming a LIGHT theme. This site is dark
 * (--ground #0E0A24), so the work here is mostly reclaiming surfaces and text
 * colour rather than layout.
 */

/* ══════════════════════════════════════════════════════════════════════ *
 * TUTOR PALETTE — the single source of truth
 *
 * Tutor 3.9.11 defines its palette in TWO places, which is why a per-selector
 * re-skin kept missing surfaces:
 *
 *   1. A static :root in assets/css/tutor{,-rtl,-front}.min.css — 14 variables:
 *      --tutor-text-size, --tutor-color-white, and the -success / -warning /
 *      -danger / -secondary / -subdued / -hints / -muted / -gray / -gray-10
 *      families with their -rgb companions.
 *
 *   2. A DYNAMIC :root built in PHP by Assets::load_color_palette() and injected
 *      with wp_add_inline_style( 'tutor-frontend', ... ). Five variables, each
 *      read from a saved option, each with an -rgb companion:
 *
 *        tutor_primary_color       -> --tutor-color-primary
 *        tutor_primary_hover_color -> --tutor-color-primary-hover
 *        tutor_text_color          -> --tutor-body-color
 *        tutor_border_color        -> --tutor-border-color
 *        tutor_gray_color          -> --tutor-color-gray
 *
 * WHERE THE GOLD CAME FROM. Not --tutor-color-warning, as it looks. The saved
 * options on this install still hold the consultancy theme's colours:
 *
 *        tutor_border_color        #dfcd30   <- the gold border on the enrol box
 *        tutor_gray_color          #de8162   <- an orange
 *        tutor_primary_color       #1d63a9   <- the blue active tab underline
 *        tutor_primary_hover_color #eff0f1   <- near-white; a broken hover state
 *
 * Overriding here rather than editing those options is deliberate: the options
 * are a database write, they do not travel with the theme, and production is
 * read-only. The values above should still be corrected in Tutor's settings
 * eventually — see plan/theme-plan.md.
 *
 * WHY :root:root. Tutor's dynamic block is inline CSS attached to the
 * tutor-frontend handle, so it prints at the same specificity as a plain :root.
 * Today alrasly-tutor is enqueued after it and would win on source order alone
 * (measured: tutor-frontend-inline at line 81, alrasly-tutor at line 108). The
 * doubled selector raises specificity to 0,2,0 so the re-skin cannot be silently
 * undone by a future change in enqueue order.
 *
 * --tutor-color-white is deliberately NOT remapped. It is used 11x as a
 * background but 3x as a text colour, so darkening it would put dark text on
 * dark fills. Surfaces are handled below instead.
 *
 * --tutor-color-success (#24a148) and --tutor-color-danger (#f44337) are kept.
 * They are semantic, and both clear AA on --card: 5.11 and 4.66.
 * ══════════════════════════════════════════════════════════════════════ */

:root:root {
	/* --- the dynamic set (PHP) --------------------------------------- */
	--tutor-color-primary: var(--wp--preset--color--brand);
	--tutor-color-primary-rgb: 124, 58, 245;

	/* Darker, not lighter: #6B2FD9 holds 6.92 against white, where a lighter
	   hover measured 4.33 and would have failed AA on the button label. */
	--tutor-color-primary-hover: #6b2fd9;
	--tutor-color-primary-hover-rgb: 107, 47, 217;

	--tutor-body-color: var(--wp--preset--color--text);
	--tutor-body-color-rgb: 255, 255, 255;

	/* Replaces the #dfcd30 gold. A hairline, not a drawn border. */
	--tutor-border-color: rgba(255, 255, 255, 0.12);
	--tutor-border-color-rgb: 255, 255, 255;

	/* Replaces the #de8162 orange. */
	--tutor-color-gray: rgba(255, 255, 255, 0.10);
	--tutor-color-gray-rgb: 255, 255, 255;

	/* --- the static set ---------------------------------------------- */
	--tutor-color-gray-10: var(--wp--preset--color--ground-alt);

	/* All four of Tutor's secondary text tones are dark greys chosen for a
	   light theme. They collapse into --text-2 here. --text-3 is not used:
	   it measures 4.03 on --card, which fails AA for small text, and every
	   one of these tones carries small text. */
	--tutor-color-secondary: var(--wp--preset--color--text-2);
	--tutor-color-subdued: var(--wp--preset--color--text-2);
	--tutor-color-hints: var(--wp--preset--color--text-2);
	--tutor-color-muted: var(--wp--preset--color--text-2);

	/* The gold, removed at the source. This drives the star ratings. Anything
	   FILLED with it needs --ground text, never white: white on --accent is
	   1.76. See the contrast rule in plan/design-system.md. */
	--tutor-color-warning: var(--wp--preset--color--accent);
	--tutor-color-warning-rgb: 255, 178, 122;

	/* --- used by Tutor but never defined by it ------------------------ *
	 * These four resolve to nothing today, so the declarations using them are
	 * dropped and the element falls back to a browser default. On a light
	 * theme that reads as "fine"; on a dark one it is invisible text. */
	--tutor-color-black: var(--wp--preset--color--text);
	--tutor-disabled-color: var(--wp--preset--color--text-3);
	--tutor-disabled-bg: var(--wp--preset--color--ground-alt);
	--tutor-progress-value: var(--wp--preset--color--brand);
}

/* ══════════════════════════════════════════════════════════════════════ *
 * SURFACES THE VARIABLES CANNOT REACH
 *
 * 49 rules in tutor-rtl.min.css paint a light surface with a LITERAL value —
 * 39 with #fff, the rest with #eff1f6 or #e3e5eb. No variable override can
 * touch them, which is why the palette block above is necessary but not
 * sufficient. These are the ones that surface on the course, lesson, quiz and
 * dashboard screens; the remainder are admin-only or inside date pickers.
 *
 * This is the answer to "override variables rather than per-selector rules":
 * variables carry the palette, and these carry the surfaces, because Tutor
 * left no other handle on them.
 * ══════════════════════════════════════════════════════════════════════ */

.tutor-card,
.tutor-card-list-item,
.tutor-accordion-item,
.tutor-certificate-template-inner,
.tutor-offcanvas .tutor-offcanvas-main,
.tutor-modal-content-white,
.tutor-modal-header,
.tutor-modal-footer,
.tutor-large-notification,
.tutor-form-select-dropdown,
.tutor-dropdown-select-options-container,
.tutor-dropdown-select-selected,
.tutor-bg-white {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* The curriculum list. This is the white-on-white one: Tutor paints the row
   #fff and the theme had already set the text to --text-2. */
.tutor-course-content-list-item,
.tutor-accordion-item-header.is-active,
.tutor-bg-gray-10,
.tutor-bg-gray-20 {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}

.tutor-course-content-list-item:hover {
	background-color: var(--wp--preset--color--card);
}

.tutor-table tr td,
.tutor-table tr th {
	background-color: transparent;
	color: var(--wp--preset--color--text-2);
	border-color: var(--tutor-border-color);
}

/* Tabs. The container and the active tab were both painted #fff; the active
   underline came from --tutor-color-primary, which the block above has already
   turned from #1d63a9 blue to --brand. */
.tutor-nav-tabs-container,
.tutor-nav-tabs .tutor-nav-link.is-active {
	background-color: transparent;
	color: var(--wp--preset--color--text);
}

.tutor-nav-tabs .tutor-nav-link {
	color: var(--wp--preset--color--text-2);
}

.tutor-progress-bar,
.tutor-progress-circle:before {
	background-color: var(--wp--preset--color--ground-alt);
}

/* Alerts keep their semantic hue as a border and a tint, on a --card ground,
   rather than as a near-white panel. */
.tutor-alert.tutor-primary,
.tutor-alert.tutor-success,
.tutor-alert.tutor-danger,
.tutor-alert.tutor-warning {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

/* .tutor-avatar is painted #fff as the fallback behind an avatar image, so a
   missing photo flashes a white disc on a dark page. */
.tutor-avatar {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}

.tutor-btn-tertiary {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* ------------------------------------------------------------------ *
 * SURFACES
 *
 * tutor-wrap / tutor-page-wrap are the outermost Tutor containers on every
 * Tutor screen. Tutor paints them white; without this the whole course area
 * is a white slab inside a dark page.
 * ------------------------------------------------------------------ */

.tutor-wrap,
.tutor-page-wrap,
.tutor-frontend,
.tutor-screen-frontend-dashboard {
	background-color: transparent;
	color: var(--wp--preset--color--text);
}

/* ── THE GROUND ON EVERY TUTOR VIEW ─────────────────────────────────────
 * The rule above assumed the page ground comes from theme.json, as it does on
 * every block-template page. It does not on Tutor's own screens: the lesson,
 * quiz and dashboard are rendered through tutor_custom_header(), which prints
 * its own document shell and never the global-styles body rule, so <html> and
 * <body> stay transparent — a white page under white headings and --text-2
 * paragraphs. Measured on staging 12 Sep as an enrolled student: 16 unreadable
 * text runs on the first lesson, every one of them on rgb(255,255,255) that no
 * element had painted. rtl-guards.css already paints body.single-courses; this
 * covers the rest of Tutor's bodies, including the dashboard page (a normal
 * page whose body class Tutor adds) and any future Tutor post type. */
html:has(body.tutor-lms),
html:has(body.tutor-frontend),
body.tutor-lms,
body.tutor-frontend,
body.single-lesson,
body.single-tutor_quiz,
body.single-tutor_assignments,
body.single-tutor_zoom_meeting,
body.tutor-screen-frontend-dashboard,
body.tutor-dashboard-page {
	background-color: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--text);
}
.tutor-course-single-content-wrapper,
.tutor-course-spotlight-wrapper,
.tutor-quiz-wrapper,
.tutor-quiz-attempt-page,
.tutor-course-single-content-wrapper .tutor-course-topic-single-body {
	background-color: transparent;
}

/* The spotlight «next / previous» pill: Tutor paints it #f2ebfe (a light lilac)
   and its label inherits --text (white) — 1.16:1 on the lesson page. Give the
   pill the card surface so the inherited white label is right. */
.tutor-course-spotlight-wrapper .tutor-btn-ghost,
.tutor-course-spotlight-wrapper .tutor-btn-outline-primary,
.tutor-spotlight-mobile-progress-complete,
.tutor-topbar-mark-btn,
.tutor-course-spotlight-wrapper [class*="tutor-btn"]:not(.tutor-btn-primary):not(.tutor-btn-secondary) {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* Lesson comments. .tutor-actual-comment is a #fff speech bubble (with a #fff
   :before/:after tail) and the author name is #161d25; the comment text itself
   inherits --text. Measured on staging 12 Sep on the lesson's «التعليقات» tab:
   15 white-on-white comment bodies. Card surface, tail included. */
/* Written at Tutor's own depth: on the lesson it repeats the rule as
   `.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list
   .tutor-single-comment .tutor-actual-comment` (0,5,0), so a bare class loses. */
.tutor-actual-comment,
.tutor-actual-comment:before,
.tutor-actual-comment:after,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list .tutor-single-comment .tutor-actual-comment,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list .tutor-single-comment .tutor-actual-comment:before,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list .tutor-single-comment .tutor-actual-comment:after {
	background-color: var(--wp--preset--color--card);
	border-color: var(--tutor-border-color);
}
.tutor-actual-comment .tutor-comment-author span:first-child,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list .tutor-single-comment .tutor-actual-comment .tutor-comment-author span:first-child { color: var(--wp--preset--color--text); }
.tutor-actual-comment .tutor-comment-author span:last-child,
.tutor-course-spotlight-wrapper .tutor-conversation .tutor-comments-list .tutor-single-comment .tutor-actual-comment .tutor-comment-author span:last-child { color: var(--wp--preset--color--text-2); }
.tutor-actual-comment .tutor-comment-textarea textarea,
.tutor-comment-textarea textarea,
.tutor-comment-box textarea {
	background-color: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* Course Q&A. The thread is two chat bubbles: the asker's is #e3e9f7 and the
   answer's #dbe9eb, both with --tutor-body-color (our --text-2) — 2.09:1 on
   the course page's «الأسئلة» tab, measured on staging 12 Sep. The bubble tail
   (:before) is painted with the same colour. Card for the asker, ground-alt for
   the answer, so the two sides still read as two voices. */
.tutor-qna-single-question .tutor-qa-chatlist .tutor-qna-chat .tutor-qna-text,
.tutor-qna-single-question:not([data-context="backend-dashboard-qna-single"]) .tutor-qna-left .tutor-qna-text,
.tutor-qna-single-question:not([data-context="backend-dashboard-qna-single"]) .tutor-qna-left .tutor-qna-text:before {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}
.tutor-qna-single-question:not([data-context="backend-dashboard-qna-single"]) .tutor-qna-right .tutor-qna-text,
.tutor-qna-single-question:not([data-context="backend-dashboard-qna-single"]) .tutor-qna-right .tutor-qna-text:before {
	background: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}
.tutor-qna-single-question .tutor-qa-reply,
.tutor-qa-reply-wrapper .tutor-qa-reply {
	background-color: transparent;
}

/* The certificate page (Tutor Pro, ?cert_hash=). The PDF / JPG / copy / print /
   share controls are <button class="tutor-iconic-btn-outline"> with no
   background rule of their own, so they sit on the browser's default button
   face (#f0f0f0) with Tutor's inline color:#fff on the links — 1.14:1, five
   labels, measured on staging 12 Sep. The field labels were .tutor-color-secondary,
   covered below once this sheet is enqueued on the page at all (asset-trimming). */
.tutor-download-certificate .tutor-iconic-btn,
.tutor-download-certificate .tutor-iconic-btn-outline {
	background-color: var(--wp--preset--color--card);
	border: 1px solid var(--tutor-border-color);
	color: var(--wp--preset--color--text);
}
.tutor-download-certificate .tutor-iconic-btn-outline:hover,
.tutor-download-certificate .tutor-iconic-btn-outline:focus {
	background-color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: #fff;
}
.tutor-download-certificate .tooltip-txt { color: var(--wp--preset--color--text); }
/* Tutor Pro's certificate-page.css re-declares .tutor-color-secondary (#41454f)
   and is printed after this sheet; the field labels need the scoped form. */
.tutor-download-certificate .tutor-color-secondary { color: var(--wp--preset--color--text-2); }
.tutor-download-certificate .tutor-color-black { color: var(--wp--preset--color--text); }

/* Dashboard → settings: the photo-size hints are #7a7a7a with the numbers in
   literal #000 (1.23:1 on --card), and the empty cover slot is an #e9edfb
   slab. Measured on staging 12 Sep on /settings/. */
.tutor-dashboard .tutor-dashboard-content #tutor_profile_cover_photo_editor #tutor_photo_meta_area > span { color: var(--wp--preset--color--text-2); }
.tutor-dashboard .tutor-dashboard-content #tutor_profile_cover_photo_editor #tutor_photo_meta_area > span > span { color: var(--wp--preset--color--text); }
#tutor_cover_area { background-color: var(--wp--preset--color--ground-alt); }

/* The dashboard's «complete your profile» alert link is --brand (#7C3AF5) on the
   alert tint — 2.7:1. The alert already carries the hue in its border. */
.tutor-alert .tutor-btn,
.tutor-alert .alert-btn-group a,
.tutor-alert.tutor-primary .tutor-btn:not(.tutor-btn-outline-primary) { color: var(--wp--preset--color--text); }

.tutor-card,
.tutor-dashboard-content,
.tutor-course-single-sidebar,
.tutor-lesson-sidebar {
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	color: var(--wp--preset--color--text);
}

/* Tutor sets colours on a wide range of utility classes; pin the common ones
   rather than using a blanket descendant rule, which would also repaint
   deliberately coloured badges and status pills. */
.tutor-wrap p,
.tutor-wrap li,
.tutor-wrap dd,
.tutor-wrap td,
.tutor-wrap label {
	color: var(--wp--preset--color--text-2);
}

.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-wrap h4,
.tutor-wrap h5,
.tutor-wrap h6 {
	color: var(--wp--preset--color--text);
}

/* Metadata — see plan/design-system.md §1: --text-3 clears AA on --ground only.
   Inside .tutor-card the surface is --card, where it drops to 4.0 and is legal
   for large text only. So metadata on cards uses --text-2, not --text-3. */
.tutor-meta,
.tutor-meta-value,
.tutor-color-muted {
	color: var(--wp--preset--color--text-3);
}

.tutor-card .tutor-meta,
.tutor-card .tutor-meta-value,
.tutor-card .tutor-color-muted {
	color: var(--wp--preset--color--text-2);
}

/* ------------------------------------------------------------------ *
 * THE REST OF THE HARDCODED SURFACES
 *
 * Found by scanning the RENDERED DOM of all four Tutor screens as an enrolled
 * student (course 4989, a lesson, quiz 5031, the dashboard) for any element
 * computing to a light background or dark text — rather than by reading the
 * stylesheet, which is mostly wp-admin and date-picker rules that never reach
 * the front end.
 *
 * Tutor paints these with 23 different light literals (#fff, #eff1f6, #f4f6f9,
 * #fcfcfd, #e9e9ea, ...) and its text utilities with 7 dark ones. None of them
 * reads a variable, so none can be reached by the palette block above.
 * ------------------------------------------------------------------ */

.tutor-course-single-sidebar-wrapper,
.tutor-quiz-sidebar,
.tutor-course-single-sidebar-title,
.tutor-accordion-item-body,
.tutor-card-body,
.tutor-course-details-instructors,
.tutor-course-details-widget {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* The sticky course header fades in over the page on scroll at 60% white. */
.tutor-is-sticky {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}

.tutor-btn-secondary {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* Tooltips are white bubbles with dark text — correct on a light theme, a white
   flash here. The arrow is a bordered pseudo-element, so it needs the same
   colour or it points at nothing. */
.tooltip-txt,
.tooltip-txt.tooltip-top,
.tooltip-txt.tooltip-bottom,
.tooltip-txt.tooltip-left,
.tooltip-txt.tooltip-right {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

/* Tutor's text utility classes set a dark literal directly rather than reading
   --tutor-color-secondary / -subdued / -hints, which is why remapping those
   variables did not move them. .tutor-color-secondary alone appears in 10 rules
   and carries the course meta list: level, enrolled count, last updated,
   certificate. All four were #41454f on --card — invisible. */
.tutor-color-secondary,
.tutor-color-subdued,
.tutor-color-hints,
.tutor-color-muted,
.tutor-color-black {
	color: var(--wp--preset--color--text-2);
}

/* .tutor-tag sets #202223 on a light pill. */
.tutor-tag,
.tutor-tag.tag-success {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text-2);
}

/* The video player is Plyr, shipped inside Tutor. Its controls are designed as a
   light-on-dark overlay already and are left alone deliberately — only the
   tooltip bubble, which follows the same white-bubble pattern as above. */
.plyr__tooltip {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * SURFACES PAINTED THROUGH AN ANCESTOR
 *
 * The rules above target the element's own class, which is what the rendered
 * DOM reports. But Tutor paints several of these from a DESCENDANT selector in
 * tutor-front.min.css and tutor-pro, at specificity 0,2,0 or 0,3,0 — so a
 * single-class override loses no matter how late it loads. Measured, e.g.:
 *
 *   .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body  #f4f6f9
 *   .tutor-single-course-sidebar .tutor-course-single-info-card        #fcfcfd
 *   .tutor-single-course-sidebar-more > div                            #fcfcfd
 *   .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body    #fff
 *   .tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky
 *                                                        rgba(255,255,255,.6)
 *
 * Each selector below mirrors Tutor's own, so specificity ties and the later
 * source order of alrasly-tutor decides it. Copying the selector rather than
 * inflating it with !important keeps the cascade readable and means a Tutor
 * update that drops a rule drops ours with it, instead of leaving an orphan.
 * ------------------------------------------------------------------ */

.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body,
.tutor-single-course-sidebar .tutor-card-body:has(.tutor-subscription-plans),
.tutor-single-course-sidebar .tutor-course-single-info-card,
.tutor-single-course-sidebar-more > div,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body,
.tutor-accordion-item-header {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border-color: var(--tutor-border-color);
}

/* Zebra striping on card lists — kept as striping, one step off --card. */
.tutor-card-list-item:nth-child(2n) {
	background-color: var(--wp--preset--color--ground-alt);
}

.tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}

/* Disabled buttons are #e9e9ea, a light grey slab on a dark page. The lesson
   screen shows one whenever the learner is on the first or last lesson. */
.tutor-btn-secondary[disabled],
.tutor-btn-secondary.disabled,
.tutor-btn[disabled],
.tutor-btn.disabled {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text-3);
	border-color: var(--tutor-border-color);
}

/* ------------------------------------------------------------------ *
 * THE LESSON SIDEBAR CURRICULUM, AND THE CERTIFICATE
 *
 * Two last surfaces, both painted through selectors the element's own class
 * does not reveal:
 *
 *   .tutor-course-single-sidebar-wrapper .tutor-course-topic-item a   #fff
 *   .tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a
 *                                                                    #eff1f6
 *
 * Note the class is .tutor-course-topic-ITEM. The theme already styled
 * .tutor-course-topic a, which is a different element in the same tree — which
 * is why the curriculum looked handled on the course page and was still white
 * inside a lesson and a quiz.
 *
 * The certificate showcase is painted from an ID, #tutor-certificate-showcase,
 * at specificity 1,1,0 — the only place in Tutor's CSS where an ID paints a
 * front-end surface. Nothing below an ID can be overridden by a class, so the
 * ID is repeated here. Its outer element also carries a light gradient used as
 * a hairline border, which is replaced rather than removed so the card keeps
 * its edge.
 * ------------------------------------------------------------------ */

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a {
	background-color: transparent;
	color: var(--wp--preset--color--text-2);
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a:hover,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a:focus-visible {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}

/* The lesson the learner is currently on. */
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
}

#tutor-certificate-showcase .tutor-cs-text {
	background: var(--tutor-border-color);
}

#tutor-certificate-showcase .tutor-cs-text > div {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * BUTTONS — 44px minimum hit area
 *
 * Tutor's .tutor-btn is around 36px tall by default. design-system.md §
 * "Touch targets" requires 44px even where the visible control is smaller.
 * ------------------------------------------------------------------ */

.tutor-btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: 0.5rem;
	padding-inline: 1.25rem;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.tutor-btn-primary {
	background-color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: #ffffff; /* 5.55 on --brand — passes AA. See design-system.md. */
}

.tutor-btn-primary:hover,
.tutor-btn-primary:focus-visible {
	background-color: #6b2ee0;
	border-color: #6b2ee0;
	color: #ffffff;
}

/* The enrol / buy button is the one accent moment on a course page.
   White on --accent is 1.76 — a hard fail. The label must be --ground. */
.tutor-course-entry-box .tutor-btn-primary,
.tutor-course-entry-box [type="submit"] {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
}

.tutor-btn-outline-primary,
.tutor-btn-secondary {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * FORMS — login, permission-denied and dashboard inputs
 * ------------------------------------------------------------------ */

.tutor-form-control,
.tutor-login-form-wrapper input[type="text"],
.tutor-login-form-wrapper input[type="password"],
.tutor-login-form-wrapper input[type="email"] {
	min-height: 44px;
	background-color: var(--wp--preset--color--ground-alt);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	padding-inline: 0.875rem;
	font-family: inherit;
}

.tutor-form-control::placeholder {
	color: var(--wp--preset--color--text-3);
}

.tutor-form-control:focus,
.tutor-login-form-wrapper input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: transparent;
}

.tutor-login-wrap,
.tutor-page-permission-denied {
	background-color: var(--wp--preset--color--card);
	border-radius: 16px;
	color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * DASHBOARD NAVIGATION
 *
 * .tutor-dashboard-permalinks is the student's side menu. Tutor gives each
 * row a left border for the active state, which is backwards in RTL.
 * ------------------------------------------------------------------ */

.tutor-dashboard-permalinks a {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--wp--preset--color--text-2);
	border-inline-start: 3px solid transparent;
	border-inline-end: 0;
	padding-inline: 1rem;
	border-radius: 0 8px 8px 0;
}

.tutor-dashboard-permalinks li.active a,
.tutor-dashboard-permalinks a:hover,
.tutor-dashboard-permalinks a:focus-visible {
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--ground-alt);
	border-inline-start-color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * CURRICULUM
 *
 * .tutor-course-topic appears 162 times on a lesson page — it is the whole
 * course tree in the sidebar, so it carries most of the visual weight.
 * ------------------------------------------------------------------ */

.tutor-course-topic {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.08);
}

.tutor-course-topic a,
.tutor-course-topic .tutor-course-content-list-item {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--text-2);
	padding-inline: 0.75rem;
}

.tutor-course-topic a:hover,
.tutor-course-topic a:focus-visible {
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--ground-alt);
}

.tutor-course-topic .is-completed,
.tutor-course-topic .tutor-course-content-list-item-completed {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * RTL CORRECTIONS
 *
 * Tutor's own RTL sheet does not load here — we serve one stylesheet for
 * both languages and rely on logical properties. These are the places where
 * Tutor hardcodes a physical direction that logical properties cannot reach
 * because the value comes from a transform or a float.
 * ------------------------------------------------------------------ */

html[dir="rtl"] .tutor-icon-angle-left,
html[dir="rtl"] .tutor-icon-angle-right,
html[dir="rtl"] .tutor-icon-previous,
html[dir="rtl"] .tutor-icon-next {
	transform: scaleX(-1);
}

html[dir="rtl"] .tutor-course-topic,
html[dir="rtl"] .tutor-dashboard-permalinks {
	text-align: right;
}

/* Tutor floats the progress bar fill from the left. */
html[dir="rtl"] .tutor-progress-bar .tutor-progress-value {
	float: right;
}

/* Never letter-space Arabic — rtl-guards.css sets this globally, but Tutor
   applies tracking to buttons and headings with high specificity. */
html[dir="rtl"] .tutor-btn,
html[dir="rtl"] .tutor-wrap * {
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ *
 * VIDEO
 * ------------------------------------------------------------------ */

.tutor-video-player {
	background-color: #000;
	border-radius: 12px;
	overflow: hidden;
}

/* Plyr's accent — Tutor bundles Plyr for lesson video. */
.tutor-video-player .plyr {
	--plyr-color-main: var(--wp--preset--color--brand);
}