/*
 * The English Lab — component pass
 *
 * Tutor LMS's own compiled CSS (tutor.min.css / tutor-front.min.css) is
 * built on its own custom properties (--tutor-body-color,
 * --tutor-border-color, --tutor-color-primary, etc.) — verified by reading
 * the exact plugin version running live (Tutor LMS 4.0.1) and by checking
 * computed styles on the live page. Remapping THOSE variables to our
 * tokens is what actually re-themes Tutor's components; setting color on
 * body alone does not cascade into them, since Tutor's rules read the
 * variable directly rather than inheriting.
 *
 * A few rules use literal hardcoded values instead of variables (card
 * background, progress-bar track, button radius) — those get direct
 * selector overrides below.
 */

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)),
.tutor-user-public-profile {
	/* Text */
	--tutor-body-color: var(--tel-ink);
	--tutor-color-secondary: var(--tel-ink-soft);
	--tutor-color-subdued: var(--tel-ink-soft);
	--tutor-color-muted: var(--tel-ink-faint);
	--tutor-color-hints: var(--tel-ink-faint);

	/* Borders / hairlines / track backgrounds */
	--tutor-border-color: var(--tel-rule);
	--tutor-color-gray: var(--tel-rule);
	--tutor-color-gray-10: var(--tel-bg-alt);

	/* Brand */
	--tutor-color-primary: var(--tel-cobalt);
	--tutor-color-primary-hover: color-mix(in srgb, var(--tel-cobalt) 85%, black);
	--tutor-color-primary-rgb: var(--tel-cobalt-rgb);
}

/* Card surfaces — Tutor sets background-color:#fff as a literal, not a
   variable, on .tutor-card (course cards, dashboard cards, instructor
   cards all extend this base class). */
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-card,
.tutor-user-public-profile .tutor-card {
	background-color: var(--tel-bg-alt);
	border-radius: var(--tel-radius-card);
}

/* Progress bar track — also a literal (#e3e5eb), not a variable. */
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-progress-bar,
.tutor-user-public-profile .tutor-progress-bar {
	background: var(--tel-rule);
}

/* Pill buttons per brand spec — Tutor's base .tutor-btn ships a 6px
   radius; fully round + weight 600 matches the Card/Pill component spec. */
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-btn,
.tutor-user-public-profile .tutor-btn {
	border-radius: var(--tel-radius-pill);
	font-weight: 600;
}

/* Course archive filter sidebar — Categoria / Nível / Tag.
 * Real structure (verified live, /courses/):
 *   .tutor-widget > h3.tutor-widget-title
 *   .tutor-widget-content > ul.tutor-list > li.tutor-list-item > label > input[checkbox]
 * Converts the vertical checkbox list into a wrapped row of toggle chips,
 * matching the tag-filter pattern from the Phrase Bank mockup. Checkbox
 * inputs stay in the DOM (filtering logic is untouched) but are visually
 * replaced by the label's own pill styling; :has() drives the checked
 * state without JS. */
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-title {
	font-family: var(--tel-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tel-ink-faint);
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list-item,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list-item,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list-item {
	margin-bottom: 0;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list-item label,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list-item label,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list-item label {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: var(--tel-radius-pill);
	border: 1px solid var(--tel-rule);
	background: var(--tel-bg-alt);
	color: var(--tel-ink-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list-item label:hover,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list-item label:hover,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list-item label:hover {
	border-color: var(--tel-cobalt);
	color: var(--tel-ink);
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list-item label:has(input:checked),
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list-item label:has(input:checked),
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list-item label:has(input:checked) {
	background: var(--tel-cobalt);
	border-color: var(--tel-cobalt);
	color: #fff;
}

/* Checkbox stays in the DOM/tab order for accessibility, just visually
   collapsed — the label itself is the pill. */
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list-item input[type='checkbox'],
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list-item input[type='checkbox'],
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list-item input[type='checkbox'] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-categories .tutor-list-item label:has(input:focus-visible),
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-tags .tutor-list-item label:has(input:focus-visible),
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-widget-course-levels .tutor-list-item label:has(input:focus-visible) {
	outline: 2px solid var(--tel-cobalt);
	outline-offset: 2px;
}

/* Search + sort controls in the same sidebar/toolbar. */
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-form-control,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) .tutor-form-select {
	background: var(--tel-bg-alt);
	border: 1px solid var(--tel-rule);
	border-radius: 10px;
	color: var(--tel-ink);
}

/* Lesson sidebar "Mais" popover (Recados / Avaliações / Informações do
 * curso) — Tutor's own CSS only sets color/transition on
 * .tutor-learning-pages-item svg, never width/height; it relies on the
 * SVG's own size attribute (rendered server-side via
 * SvgIcon::size(20)) holding once teleported into the popover. Something
 * in that context isn't respecting it, so icons fall back to an
 * oversized intrinsic render. Forcing the size directly is a defensive
 * fix regardless of the exact upstream cause. */
body.tutor-frontend .tutor-popover .tutor-learning-pages-item svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0;
}

body.tutor-frontend .tutor-popover .tutor-learning-pages-item .tutor-lock-icon {
	width: 12px !important;
	height: 12px !important;
}

/* Lesson header "back to dashboard" button — exists already
 * (Icon::LEFT, icon-only, links to /painel/) but as a bare unlabeled
 * ghost icon it doesn't read as clickable. Give it a visible chip +
 * hover state so it's an obvious affordance rather than decoration.
 *
 * Tutor's own .tutor-btn-ghost:hover:not(:disabled):not(.disabled) rule
 * has specificity (0,4,0); our original .tutor-btn-icon-targeted rule
 * at (0,3,1)/(0,4,1) should out-rank it on paper, but on this site's
 * combination of deferred/async stylesheet loading it didn't visibly
 * apply in practice (same class of issue as the footer and SVG-sizing
 * fixes elsewhere in this file). Broadened to hit every class the
 * button actually carries, with !important, rather than continuing to
 * chase the exact cause blind. */
body.tutor-frontend .tutor-learning-header-back a,
body.tutor-frontend .tutor-learning-header-back .tutor-btn,
body.tutor-frontend .tutor-learning-header-back .tutor-btn-ghost,
body.tutor-frontend .tutor-learning-header-back .tutor-btn-icon {
	background: var(--tel-bg-alt) !important;
	border: 1px solid var(--tel-rule) !important;
	border-radius: var(--tel-radius-pill) !important;
	color: var(--tel-ink-soft) !important;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

body.tutor-frontend .tutor-learning-header-back a:hover,
body.tutor-frontend .tutor-learning-header-back .tutor-btn:hover,
body.tutor-frontend .tutor-learning-header-back .tutor-btn-ghost:hover,
body.tutor-frontend .tutor-learning-header-back .tutor-btn-icon:hover {
	background: var(--tel-bg) !important;
	border-color: var(--tel-cobalt) !important;
	color: var(--tel-cobalt) !important;
}

body.tutor-frontend .tutor-learning-header-back a svg,
body.tutor-frontend .tutor-learning-header-back .tutor-btn svg {
	color: inherit !important;
}

/* Dashboard Home stat cards + "Continue Learning" course titles
 * (templates/dashboard/student/stats.php, continue-learning.php →
 * course-card-header.php — all @since 4.0.0, the newer
 * --tutor-surface-* and --tutor-text-* system, tutor-dashboard.min.css).
 * Both .tutor-stat-card-title and .tutor-progress-card-title set
 * color:var(--tutor-text-primary) at (0,1,0) specificity — our
 * body.tutor-frontend h3 rule in base.css is (0,2,2) and should
 * out-rank that on paper, but doesn't apply in practice on this site
 * (same deferred-stylesheet-loading pattern as the back button and
 * footer fixes above). Targeting the exact classes directly with
 * !important instead of relying on the generic heading selector. */
body.tutor-frontend .tutor-stat-card-title,
body.tutor-frontend .tutor-progress-card-title {
	color: var(--tel-ink) !important;
}

/* Homepage "Cursos que se adaptam..." course grid — a live Tutor course
 * listing pulled in via the tutor-lms-elementor-addons plugin's
 * Elementor widget (.elementor-widget-etlms-course-list), not a Tutor
 * LMS page itself. The homepage doesn't get body.tutor-frontend, so
 * none of the rules above reach it — same root cause as the instructor
 * profile page.
 *
 * Unlike that page, this one gets its OWN fixed-dark palette rather
 * than joining the conditional light/[data-tutor-theme=dark] system
 * above: the homepage's dark section background is set directly in
 * Elementor and does NOT respond to Tutor's toggle at all, so tying
 * these cards to that toggle would put light-mode cards on an
 * always-dark section for any visitor who hasn't touched Tutor's
 * Preferences (the default state). Same reasoning as footer.css's
 * always-dark footer band. */
.elementor-widget-etlms-course-list {
	--tel-cobalt: #4a90e2;
	--tel-cobalt-rgb: 74, 144, 226;
	--tel-bg-alt: #22293a;
	--tel-ink: #f5f7fa;
	--tel-ink-soft: rgb(245 247 250 / 66%);
	--tel-ink-faint: rgb(245 247 250 / 32%);
	--tel-rule: rgb(245 247 250 / 14%);
	--tel-radius-card: 14px;
	--tel-radius-pill: 999px;

	--tutor-body-color: var(--tel-ink);
	--tutor-color-secondary: var(--tel-ink-soft);
	--tutor-color-subdued: var(--tel-ink-soft);
	--tutor-color-muted: var(--tel-ink-faint);
	--tutor-color-hints: var(--tel-ink-faint);
	--tutor-border-color: var(--tel-rule);
	--tutor-color-gray: var(--tel-rule);
	--tutor-color-gray-10: var(--tel-bg-alt);
	--tutor-color-primary: var(--tel-cobalt);
	--tutor-color-primary-hover: color-mix(in srgb, var(--tel-cobalt) 85%, black);
	--tutor-color-primary-rgb: var(--tel-cobalt-rgb);
}

.elementor-widget-etlms-course-list .tutor-card {
	background-color: var(--tel-bg-alt);
	border-radius: var(--tel-radius-card);
}

.elementor-widget-etlms-course-list .tutor-btn {
	border-radius: var(--tel-radius-pill);
	font-weight: 600;
}

/* Tutor renders its login/register modal nested INSIDE this widget's own
 * DOM (confirmed live — .tutor-login-modal is a descendant of
 * .elementor-widget-etlms-course-list, not appended to <body>), so the
 * dark-card custom properties above were inheriting straight into a
 * modal that has a plain white background, making headings/labels
 * nearly invisible (white-on-white). Reset back to a dark ink for this
 * subtree specifically — the modal's own white background never
 * changes, so it always needs dark text regardless of what the rest of
 * the widget is doing. */
.elementor-widget-etlms-course-list .tutor-modal {
	--tel-ink: #1a202c;
	--tel-ink-soft: rgb(26 32 44 / 68%);
	--tel-ink-faint: rgb(26 32 44 / 36%);
	--tutor-body-color: #1a202c;
}

/* Lesson content — H5P (and any other iframe-embedded) content.
 * Tutor's own CSS only constrains iframe width (max-width:100%), never
 * height, so a small default embed size is coming from the H5P content
 * itself, not the theme. Giving it a taller minimum box so it isn't
 * cramped by default; doesn't force H5P's own internal layout to
 * rescale, just gives it more room if its own resizer script wants it. */
body.tutor-frontend .tutor-lesson-wrapper iframe {
	min-height: 700px;
}