/**
 * 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;
}

/* ===========================================================================
   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;
}
/* 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. */