/**
 * knowhow: Tutor LMS visual harmony.
 *
 * Tutor ships its own (Helvetica-based, blue-accented) design system that lands
 * inside the theme's `.content-wrapper` between our navbar and footer. Out of the
 * box its pages jam against the navbar (no top padding), use a foreign font and
 * a hard-coded accent that ignores the theme's color palette. This sheet only
 * re-skins Tutor to match KNOW-HOW; it deliberately touches layout tokens, not
 * Tutor's component structure, so it survives plugin updates.
 *
 * Enqueued (inc/tutor.php) ONLY on pages where Tutor's front CSS is present, and
 * loaded last so these rules win. Keep it override-only — no new components.
 */

/* -- Accent follows the active theme palette -------------------------------- */
/* Tutor hard-codes --tutor-color-primary on :root via its color setting; a
   body-scoped rule outranks :root and re-points it at the Bootstrap palette so
   Courses re-tint automatically when the KNOW-HOW palette changes. */
body.tutor-lms {
	--tutor-color-primary: var(--bs-primary);
	--tutor-color-primary-rgb: var(--bs-primary-rgb);
	--tutor-color-primary-hover: color-mix(in srgb, var(--bs-primary) 82%, #000);
}

/* -- Typography matches the theme body font --------------------------------- */
/* Inherit Inter across Tutor's text surfaces. The icon font (`font-family:tutor`)
   must be re-asserted below or glyphs turn into letters. */
.tutor-wrap,
.tutor-modal,
.tutor-dashboard,
.tutor-course-details-page,
.tutor-course-single-content-wrapper {
	font-family: var(--bs-body-font-family);
}
[class^="tutor-icon-"],
[class*=" tutor-icon-"] {
	font-family: tutor !important;
}

/* -- Vertical rhythm: give Tutor pages room under the navbar / above footer -- */
/* The plugin drops a single top-level Tutor wrapper right after our <header>.
   Padding here restores the breathing room the theme's own `section.wrapper`
   blocks have, so Courses no longer collide with the nav or the dark footer.
   (The lesson/quiz "learning area" is a full-screen player with no theme chrome,
   so it is intentionally NOT in this list — it needs no navbar clearance.) */
.content-wrapper > .tutor-wrap,
.content-wrapper > .tutor-page-wrap,
.content-wrapper > .tutor-wrap-parent,
.tutor-course-top-info.tutor-page-wrap {
	padding-top: 3.5rem;
	padding-bottom: 5rem;
}
@media (min-width: 992px) {
	.content-wrapper > .tutor-wrap,
	.content-wrapper > .tutor-page-wrap,
	.content-wrapper > .tutor-wrap-parent,
	.tutor-course-top-info.tutor-page-wrap {
		padding-top: 4.5rem;
		padding-bottom: 7rem;
	}
}

/* -- Course cards echo the theme's soft-shadow card look --------------------- */
.tutor-card {
	border-radius: 0.4rem;
	border-color: rgba(164, 174, 198, 0.2);
	box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tutor-card:hover {
	box-shadow: 0 0.5rem 1.5rem rgba(30, 34, 40, 0.09);
	transform: translateY(-3px);
}
.tutor-card .tutor-course-thumbnail img {
	transition: transform 0.4s ease;
}
.tutor-card:hover .tutor-course-thumbnail img {
	transform: scale(1.04);
}

/* -- Buttons & pills pick up the theme's radius / weight -------------------- */
.tutor-btn {
	border-radius: 0.4rem;
	font-weight: 600;
}
.tutor-form-control,
.tutor-form-select,
.tutor-input-group .tutor-form-control {
	border-radius: 0.4rem;
}

/* -- Headings sit at the theme's ink color --------------------------------- */
.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-wrap h4,
.tutor-course-details-page h1,
.tutor-course-details-page h2,
.tutor-course-details-page h3 {
	color: var(--bs-gray-800, #21262c);
}

/* -- Code blocks in lesson / course content --------------------------------- */
/* Lesson & course bodies render `the_content()`, so editor-authored <pre>/<code>
   arrive as bare tags — Tutor styles neither, so code samples (e.g. the Python
   snippets in a lesson) show as unpadded, background-less text indistinguishable
   from prose. Give them a proper code surface: monospace, a soft tinted panel,
   padding and horizontal scroll for long lines. Scoped to Tutor content wrappers
   so it never leaks onto Tutor's own UI. `--tutor-fontfamily-mono` exists in the
   learning area; fall back to a system mono stack elsewhere. */
.tutor-lesson-wrapper pre,
.tutor-course-details-page pre,
.tutor-course-single-content-wrapper pre {
	/* A palette-independent tint: some palettes set --bs-gray-100 to ~#fefefe,
	   which is indistinguishable from the white content — use a fixed cool grey so
	   the code panel is always visibly set apart from the surrounding prose. */
	background: rgba(164, 174, 198, 0.12);
	border: 1px solid rgba(164, 174, 198, 0.22);
	border-radius: 0.5rem;
	padding: 1rem 1.15rem;
	margin: 0 0 1.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-family: var(--tutor-fontfamily-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
	font-size: 0.9em;
	line-height: 1.6;
	color: var(--bs-gray-800, #343f52);
	tab-size: 4;
}
/* Inline code: a small tinted chip, primary ink to read as "code" in prose. */
.tutor-lesson-wrapper :not(pre) > code,
.tutor-course-details-page :not(pre) > code,
.tutor-course-single-content-wrapper :not(pre) > code {
	background: var(--bs-primary-bg-subtle, rgba(164, 174, 198, 0.14));
	color: var(--bs-primary);
	padding: 0.15em 0.4em;
	border-radius: 0.3rem;
	font-family: var(--tutor-fontfamily-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
	font-size: 0.88em;
}
/* Code inside a <pre> inherits the panel — strip the inline chip treatment.
   highlight.js (assets/js/tutor-highlight.js) adds `.hljs` here and pulls in
   github.min.css, which paints its own white background + 1em padding on the
   code element; neutralise both so hljs contributes ONLY token colors while our
   tinted panel above stays the surface. (tutor.css loads after the hljs theme.) */
.tutor-lesson-wrapper pre code,
.tutor-course-details-page pre code,
.tutor-course-single-content-wrapper pre code,
.tutor-lesson-wrapper pre code.hljs,
.tutor-course-details-page pre code.hljs,
.tutor-course-single-content-wrapper pre code.hljs {
	background: none;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

/* ===========================================================================
   Rich content in the course overview ("About Course") + lesson bodies
   -----------------------------------------------------------------------------
   Both the course About block (course-content.php) and lesson overviews
   (learning-area/lesson/overview.php, single/lesson/parts/overview.php) render
   editor-authored `the_content()`. Tables, blockquotes, lists and images come
   out as bare tags — Tutor styles none of them, so editor-inserted tables show
   as unbordered floating columns and quotes/lists read as plain prose. Give them
   the SAME look the theme already applies to `.article-body` (see theme.css) so
   Tutor content matches the KB articles.

   Scoped to the editor-content containers only — NOT the whole course page
   (`.tutor-course-details-page`) — so Tutor's own UI (curriculum, reviews, Q&A)
   is never touched:
     .tutor-course-details-content  — the "About Course" body
     .tutor-lesson-wrapper          — lesson body (classic + learning area)
   =========================================================================== */

/* -- Tables: bordered, rounded, tinted header, zebra rows (mirrors article) -- */
.tutor-course-details-content table,
.tutor-lesson-wrapper table {
	width: 100%;
	margin-bottom: 1.5rem;
	border: 1px solid var(--bs-table-border-color, #edeff3);
	border-radius: 0.5rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	vertical-align: top;
}
.tutor-course-details-content table th,
.tutor-course-details-content table td,
.tutor-lesson-wrapper table th,
.tutor-lesson-wrapper table td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--bs-table-border-color, #edeff3);
	vertical-align: top;
	text-align: left;
}
/* Header: subtle primary tint + bold, thicker hairline against the body. */
.tutor-course-details-content table thead th,
.tutor-lesson-wrapper table thead th {
	background: var(--bs-primary-bg-subtle, rgba(164, 174, 198, 0.12));
	color: var(--bs-heading-color, #343f52);
	font-weight: 600;
	border-bottom: 2px solid var(--bs-table-border-color, #edeff3);
}
/* Zebra striping for scan-ability on wide, data-heavy tables. */
.tutor-course-details-content table tbody tr:nth-of-type(odd) > *,
.tutor-lesson-wrapper table tbody tr:nth-of-type(odd) > * {
	background: rgba(164, 174, 198, 0.06);
}
.tutor-course-details-content table tbody tr:hover > *,
.tutor-lesson-wrapper table tbody tr:hover > * {
	background: rgba(164, 174, 198, 0.12);
}
/* Drop the last row's hairline so it doesn't double the container border. */
.tutor-course-details-content table tbody tr:last-child > *,
.tutor-lesson-wrapper table tbody tr:last-child > * {
	border-bottom: 0;
}
/* Small screens: let a wide table scroll horizontally instead of overflowing. */
@media (max-width: 767.98px) {
	.tutor-course-details-content table,
	.tutor-lesson-wrapper table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
}

/* -- Blockquote: left accent bar + tinted panel, matching KB prose ---------- */
.tutor-course-details-content blockquote,
.tutor-lesson-wrapper blockquote {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1.25rem;
	border-left: 3px solid var(--bs-primary);
	background: rgba(164, 174, 198, 0.08);
	border-radius: 0 0.4rem 0.4rem 0;
	color: var(--bs-gray-700, #60697b);
	font-style: italic;
}
.tutor-course-details-content blockquote > :last-child,
.tutor-lesson-wrapper blockquote > :last-child {
	margin-bottom: 0;
}

/* -- Lists: restore markers + indent Tutor's resets strip on content ul/ol -- */
/* Tutor's learning-area sheet forces `padding-inline-start:16px` on content lists
   via `.tutor-lesson-content .tutor-lesson-wrapper ol` — specificity (0,2,1), which
   beats a plain `.tutor-lesson-wrapper ol` (0,1,1), so our indent never applied
   ("dí sát lề"). Match that specificity by doubling the wrapper class (self-
   contained — no dependency on Tutor's exact ancestor chain), and override the
   SAME logical property Tutor uses (`padding-inline-start`, not `padding-left`). */
.tutor-course-details-content.tutor-course-details-content ul,
.tutor-course-details-content.tutor-course-details-content ol,
.tutor-lesson-wrapper.tutor-lesson-wrapper ul,
.tutor-lesson-wrapper.tutor-lesson-wrapper ol {
	margin: 0 0 1.25rem;
	/* Enough gutter that a two-digit marker ("10.") sits fully inside instead of
	   poking to the very edge; markers hang in this padding (list-position outside). */
	padding-inline-start: 2.25rem;
}
/* Keep the marker in the gutter and give the wrapped text a clean hanging indent. */
.tutor-course-details-content.tutor-course-details-content :is(ul, ol) > li,
.tutor-lesson-wrapper.tutor-lesson-wrapper :is(ul, ol) > li {
	list-style-position: outside;
	padding-inline-start: 0.35rem;
}
.tutor-course-details-content ul,
.tutor-lesson-wrapper ul {
	list-style: disc;
}
.tutor-course-details-content ol,
.tutor-lesson-wrapper ol {
	list-style: decimal;
}
.tutor-course-details-content li,
.tutor-lesson-wrapper li {
	margin-bottom: 0.35rem;
}
.tutor-course-details-content li > ul,
.tutor-course-details-content li > ol,
.tutor-lesson-wrapper li > ul,
.tutor-lesson-wrapper li > ol {
	margin: 0.35rem 0 0.35rem;
}

/* -- Headings authored inside the body get consistent rhythm + a sane scale -- */
/* Tutor leaves in-content headings near browser-default sizing, which on this
   20px root reads oversized (the "Tóm tắt kiến thức" / section titles balloon).
   Size them in `em` (relative to the body copy) so the scale stays proportional
   whether zoomed or not, and steps down cleanly h2→h6. */
.tutor-course-details-content :is(h2, h3, h4, h5, h6),
.tutor-lesson-wrapper :is(h2, h3, h4, h5, h6) {
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
	color: var(--bs-gray-800, #21262c);
	font-weight: 600;
	line-height: 1.3;
}
.tutor-course-details-content h2,
.tutor-lesson-wrapper h2 {
	font-size: 1.6em;
}
.tutor-course-details-content h3,
.tutor-lesson-wrapper h3 {
	font-size: 1.35em;
}
.tutor-course-details-content h4,
.tutor-lesson-wrapper h4 {
	font-size: 1.15em;
}
.tutor-course-details-content h5,
.tutor-lesson-wrapper h5 {
	font-size: 1em;
}
.tutor-course-details-content h6,
.tutor-lesson-wrapper h6 {
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bs-gray-700, #60697b);
}
.tutor-course-details-content :is(h2, h3, h4, h5, h6):first-child,
.tutor-lesson-wrapper :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}
/* Paragraph rhythm: comfortable line-height, consistent gap; no trailing gap. */
.tutor-course-details-content p,
.tutor-lesson-wrapper p {
	margin: 0 0 1rem;
	line-height: 1.7;
}
.tutor-course-details-content > :last-child,
.tutor-lesson-wrapper > :last-child {
	margin-bottom: 0;
}

/* -- Media, links, dividers ------------------------------------------------- */
/* Images/iframes never overflow the column; rounded to echo the card look. */
.tutor-course-details-content :is(img, iframe, video),
.tutor-lesson-wrapper :is(img, iframe, video) {
	max-width: 100%;
	height: auto;
	border-radius: 0.4rem;
}
.tutor-course-details-content :is(img, figure),
.tutor-lesson-wrapper :is(img, figure) {
	margin-bottom: 1.25rem;
}
/* Content links read as the theme accent (Tutor leaves body links unstyled). */
.tutor-course-details-content a:not(.tutor-btn),
.tutor-lesson-wrapper a:not(.tutor-btn) {
	color: var(--bs-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.tutor-course-details-content a:not(.tutor-btn):hover,
.tutor-lesson-wrapper a:not(.tutor-btn):hover {
	color: var(--tutor-color-primary-hover, var(--bs-primary));
}
.tutor-course-details-content hr,
.tutor-lesson-wrapper hr {
	margin: 1.75rem 0;
	border: 0;
	border-top: 1px solid rgba(164, 174, 198, 0.25);
	opacity: 1;
}

/* -- Captions: quiet, small, centred under the media/table ------------------ */
.tutor-course-details-content figcaption,
.tutor-course-details-content table caption,
.tutor-lesson-wrapper figcaption,
.tutor-lesson-wrapper table caption {
	margin-top: 0.5rem;
	font-size: 0.85em;
	color: var(--bs-gray-600, #86909f);
	text-align: center;
}
.tutor-course-details-content table caption,
.tutor-lesson-wrapper table caption {
	caption-side: bottom;
}

/* -- Description lists ------------------------------------------------------ */
.tutor-course-details-content dl,
.tutor-lesson-wrapper dl {
	margin: 0 0 1.25rem;
}
.tutor-course-details-content dt,
.tutor-lesson-wrapper dt {
	font-weight: 600;
	color: var(--bs-gray-800, #21262c);
}
.tutor-course-details-content dd,
.tutor-lesson-wrapper dd {
	margin: 0 0 0.75rem;
	padding-left: 1rem;
}

/* -- Inline semantics: emphasis, highlight, keys, abbreviations ------------- */
.tutor-course-details-content strong,
.tutor-course-details-content b,
.tutor-lesson-wrapper strong,
.tutor-lesson-wrapper b {
	font-weight: 700;
	color: var(--bs-gray-800, #21262c);
}
.tutor-course-details-content mark,
.tutor-lesson-wrapper mark {
	background: var(--bs-warning-bg-subtle, #fff3cd);
	color: inherit;
	padding: 0.05em 0.3em;
	border-radius: 0.2rem;
}
/* <kbd>: a small key-cap, distinct from the code chip above. */
.tutor-course-details-content kbd,
.tutor-lesson-wrapper kbd {
	display: inline-block;
	padding: 0.1em 0.45em;
	font-family: var(--tutor-fontfamily-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--bs-gray-800, #343f52);
	background: var(--bs-gray-100, #f5f6f7);
	border: 1px solid rgba(164, 174, 198, 0.35);
	border-bottom-width: 2px;
	border-radius: 0.3rem;
}
.tutor-course-details-content abbr[title],
.tutor-lesson-wrapper abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}
.tutor-course-details-content :is(sub, sup),
.tutor-lesson-wrapper :is(sub, sup) {
	font-size: 0.75em;
}
.tutor-course-details-content small,
.tutor-lesson-wrapper small {
	font-size: 0.85em;
	color: var(--bs-gray-600, #86909f);
}

/* ===========================================================================
   Student dashboard  (/dashboard/ — rendered inside our header/footer)
   Structure: .tutor-dashboard-layout > .tutor-dashboard-sidebar
                                        + .tutor-dashboard-main > .tutor-dashboard-header
                                                                 + .tutor-dashboard-body
   =========================================================================== */

/* Sidebar as a soft theme card rather than a flat panel. */
.tutor-dashboard-sidebar {
	background: var(--bs-white);
	border: 1px solid rgba(164, 174, 198, 0.2);
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.04);
	overflow: hidden;
}

/* Sidebar brand. With no custom logo set, Tutor prints a bare <span.site-title>
   here; dress it up to echo the header brand — the primary ring glyph followed
   by the wordmark (theme ink, tight tracking). The ring uses the Unicons webfont
   the theme already loads site-wide (uil-life-ring = \ebc4). */
.tutor-dashboard-sidebar-logo {
	border-bottom-color: rgba(164, 174, 198, 0.2);
}
.tutor-dashboard-sidebar-logo .site-title {
	display: inline-flex;
	align-items: center;
	/* No `gap`: "know" (<strong>) and "-how" are separate flex items, so a gap
	   would split the wordmark ("know -how"). The icon gets its own margin. */
	font-family: var(--bs-body-font-family);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--bs-gray-800, #21262c);
}
/* The template override wraps "know" in <strong> (matching the header brand);
   keep the rest regular so the wordmark reads "know‑how". */
.tutor-dashboard-sidebar-logo .site-title strong {
	font-weight: 700;
}
.tutor-dashboard-sidebar-logo .site-title::before {
	content: "\ebc4"; /* uil-life-ring */
	font-family: "Unicons";
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--bs-primary);
	margin-right: 0.5rem;
	flex-shrink: 0;
}

/* Sidebar nav links: quiet by default, accent pill when active — mirrors the
   theme's live-search / pagination active treatment (primary on a subtle bg). */
.tutor-dashboard-sidebar-nav a {
	border-radius: 0.4rem;
	color: var(--bs-gray-800, #343f52);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.tutor-dashboard-sidebar-nav a:hover {
	background: var(--bs-gray-100, #f5f6f7);
	color: var(--bs-primary);
}
.tutor-dashboard-sidebar-nav a.active {
	background: var(--bs-primary-bg-subtle, #ebebec);
	color: var(--bs-primary);
	font-weight: 600;
}
.tutor-dashboard-sidebar-nav a.active svg [fill],
.tutor-dashboard-sidebar-nav a.active svg [stroke] {
	color: var(--bs-primary);
}

/* Dashboard header: a light rule instead of Tutor's heavier divider. */
.tutor-dashboard-header,
.tutor-dashboard-header-inner {
	border-color: rgba(164, 174, 198, 0.2);
}

/* Metric / list surfaces reuse the theme card radius set above. */
.tutor-dashboard-body .tutor-card,
.tutor-dashboard-content-inner {
	border-radius: 0.5rem;
}

/* ===========================================================================
   Font-size normalization — the fix for Tutor text rendering too large
   -----------------------------------------------------------------------------
   Tutor authors ALL its CSS in `rem` against the browser-default 16px root
   (course titles/headings use 1.5–4rem, body/labels use the .tutor-fs-* rem
   scale). This theme sets :root font-size to 20px (--bs-root-font-size), so every
   rem-based Tutor size renders 25% too large — cards, headings, buttons balloon
   ("bị quá to"). `rem` is root-relative and can't be rescoped to a subtree.
   IMPORTANT: we must NOT change the root font-size — that would also shrink the
   theme navbar/footer (they're rem-based too), and those are the theme's, not
   Tutor's. Instead we `zoom` ONLY Tutor's own top-level content wrapper by
   16/20 = 0.8, bringing its text back to the intended size while leaving the
   KB chrome (navbar, footer — siblings outside this wrapper) completely
   untouched. Every Tutor screen puts `.tutor-wrap` on that wrapper. */
.content-wrapper > .tutor-wrap {
	zoom: 0.8;
}
/* EXCEPTION — the student dashboard. Tutor 4's UserPreference (classes/UserPreference.php,
   on wp_head) prints an inline `:root{font-size:16px}` on the dashboard + learning area,
   normalising its own modern UI to a 16px root. On the dashboard that hijacks the GLOBAL
   root the theme sets to 20px, shrinking the theme's rem-based navbar + footer by 20%.

   LOGGED OUT the dashboard is just Tutor's login card wrapped in the theme chrome, so we
   re-assert the theme's 20px root — restoring the model every other Tutor screen uses (20px
   root + the 0.8 zoom above on Tutor content = 16, Tutor's intended size) so the navbar/
   footer and the login form all render full size.

   LOGGED IN the dashboard is Tutor's own app UI, which we want at Tutor's NATIVE 16px root
   with no zoom ("như cũ" — as Tutor ships it). So there we do the opposite: leave Tutor's
   16px root in place (no 20px re-assert) AND cancel the 0.8 zoom, otherwise 16 x 0.8 = 12.8
   would shrink it. Accepted trade-off: on the logged-in dashboard the theme navbar/footer
   follow Tutor's 16px root (a touch smaller than elsewhere).

   Scoped via :has()/.logged-in on the stable Tutor body class; the learning area (which also
   wants 16px root, no theme chrome) is handled separately below. Specificity (0,1,2) beats
   Tutor's `:root` (0,1,0), so no !important is needed. */
html:has(body.tutor-screen-frontend-dashboard:not(.logged-in)) {
	font-size: var(--bs-root-font-size, 20px);
}
body.tutor-screen-frontend-dashboard.logged-in .content-wrapper > .tutor-wrap {
	zoom: 1;
}
/* zoom shrinks widths as well as text, which would leave Tutor content in a
   column ~20% narrower than the (un-zoomed) navbar/footer. Widen Tutor's own
   max-width container by 1/0.8 = 1.25 so that, once zoomed, it lands back on the
   same ~1320px measure as the rest of the site. */
@media (min-width: 1200px) {
	.content-wrapper > .tutor-wrap.tutor-container,
	.content-wrapper > .tutor-wrap .tutor-container {
		max-width: 1650px;
	}
}

/* The full-screen learning area (lesson/quiz) has NO theme chrome on the page,
   so there we can normalise the root directly instead of zooming — avoids
   scaling its 100vh/height-locked player layout. */
html:has(.tutor-learning-area) {
	font-size: 16px;
}
.tutor-learning-area {
	font-size: 1rem; /* re-peg base so inherited text isn't 0.8rem×16 = 12.8px */
}

/* Accent: Tutor already auto-generates a brand ramp from its configured primary
   (set to the theme navy #2B303B), output inline on :root as --tutor-brand-*,
   covering both the dashboard and the learning area. We therefore do NOT remap
   the ramp ourselves — Tutor's generated mid-tones (e.g. --tutor-brand-500
   #8393ae) are more correct than a flat navy would be. If the theme palette is
   ever changed, update Tutor ▸ Settings ▸ Design ▸ Brand colour to match. */

/* ===========================================================================
   Course-card short info (theme addition — knowhow_tutor_loop_card_info()).
   A compact level + lesson-count badge row and a 2-line teaser under each
   card title in the course loop, so the list reads richer than Tutor's stock
   title + author card. Sized against Tutor's rem scale (renders inside the
   0.8-zoomed .tutor-wrap on archive/list views). */
.knowhow-course-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0.75rem 0 0.5rem;
}
.knowhow-course-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	line-height: 1.2;
	color: var(--bs-gray-600, #60697b);
}
.knowhow-course-badge [class^="tutor-icon-"] {
	font-size: 1.05em;
	color: var(--tutor-color-primary, var(--bs-primary, #2b303b));
}
.knowhow-course-desc {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--bs-gray-600, #60697b);
	/* Clamp to two lines so uneven descriptions keep the cards aligned. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}