/*** ===================================
     MiMi — Browse Lessons tab

     Lives next to browse-lessons.php in
     mifam-dashboard/includes/tutor/browse-lessons/ and is enqueued by
     it. Do NOT paste into Additional CSS — the version string is this
     file's mtime, so saving it here busts WP Rocket on its own.

     ⚠ browse-lessons.php only runs if it is in the plugin's include
     list — see the note at the top of that file.
     =================================== ***/

/* --- The bar above the grid --------------------------------- */
/* Tabs left, result count right, on one line. Both are printed by
   tutor_course/archive/before_loop, so the whole bar re-renders with
   every filter change instead of going stale. */

.mimi-lesson-browse-bar {
	/* Scroll anchor for the tab links. The offset leaves the top of the
	   filter sidebar on screen too, so the landing position shows the
	   whole control area rather than pinning the tabs to the very edge. */
	scroll-margin-top: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 0 0 24px;
}

/* --- Tabs --------------------------------------------------- */

.mimi-lesson-browse-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.mimi-lesson-browse-tab {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 999px;
	font-family: 'Fredoka One', cursive;
	font-weight: 100;
	font-size: 15px;
	line-height: 1.2;
	color: #6f6462 !important;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}

.mimi-lesson-browse-tab:hover {
	background: #fdf1f4;
	color: #4b4342 !important;
}

.mimi-lesson-browse-tab.is-active {
	background: #ff65ad;
	color: #ffffff !important;
}

/* --- Result count ------------------------------------------- */

.mimi-lesson-browse-count {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6f6462;
}
body.post-type-archive-lesson .tutor-wrap-parent.course-archive-page{
	margin-top: 70px !important;
	margin-bottom: 120px !important;
}

/* --- Lesson card -------------------------------------------- */
/* The card reuses Tutor's own classes and, importantly, does NOT add a
   second .tutor-card of its own — the archive loop already wraps every
   item in one. So borders, radius, shadow, fonts and spacing all come
   from the course cards and stay in step with them. Only what is
   genuinely different is below. */

/* The badges are positioned against this; .tutor-course-thumbnail does
   not declare a position of its own. */
.mimi-lesson-card-thumb {
	position: relative;
}

/* --- Title -------------------------------------------------- */

/* One line, ellipsised.

   ⚠ NOT -webkit-line-clamp. Tutor sets
       .tutor-course-card .tutor-course-name { display: -webkit-box !important }
   and the live site does not apply that rule at all, so the h3 is a
   plain block and every -webkit-line-clamp on it — Tutor's, ours, or one
   typed into devtools — is silently inert, because the property only
   does anything on a -webkit-box. For a SINGLE line the old-fashioned
   nowrap + ellipsis needs no display mode, so it cannot be defeated that
   way. The !important is only there to outrank Tutor's own !important. */
.tutor-course-card .mimi-lesson-card-title {
	display: block !important;
	font-size: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Link colours ------------------------------------------- */

.mimi-lesson-card-body a {
	color: #ff64ad;
	text-decoration: none;
}

.mimi-lesson-card-body a:hover,
.mimi-lesson-card-body a:focus {
	color: #60c6c5;
}

/* The title is body text that happens to be a link, so it stays dark
   until hovered — same as the course cards. */
.mimi-lesson-card-title a {
	color: #4b4342;
}

.mimi-lesson-card-title a:hover,
.mimi-lesson-card-title a:focus {
	color: #60c6c5;
}

/* --- Author row --------------------------------------------- */

/* The theme sets flex-wrap:wrap on .tutor-meta, which is right for the
   course cards: "In Rainbow Cake" is short. A lesson names its whole
   course, so the text is wide enough to push itself onto a second line
   and leave the avatar stranded on its own. Selector is deep enough to
   outrank .tutor-course-card .tutor-meta without !important. */
.tutor-course-card .tutor-card-body .mimi-lesson-card-author {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px;
}

.mimi-lesson-card-avatar {
	flex: 0 0 auto;
}

/* --- Badges over the thumbnail ------------------------------ */

/* Free pill, mirroring the course card's preview badge. */
.mimi-lesson-card-free {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ff4d6c;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* Lock for lessons the visitor cannot reach. A card that looks
   identical to a free one but sends you to a sales page reads as a
   bait-and-switch; this makes the destination honest.

   Uses Tutor's own tutor-icon-lock-line — the same glyph the locked
   curriculum rows show — so "locked" looks the same wherever it
   appears, and it is a real padlock rather than a shape approximating
   one. */
.mimi-lesson-card-lock {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(32, 24, 26, 0.6);
	color: #ffffff;
}

.mimi-lesson-card-lock [class^='tutor-icon-'] {
	font-size: 14px;
	line-height: 1;
}

/* Content type. Top right, where the course cards keep their bookmark
   button — lesson cards have none, so the corner is free. Light rather
   than dark so it does not read as a second duration badge. */
.mimi-lesson-card-type {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #4b4342;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	box-shadow: 0 1px 3px rgba(32, 24, 26, 0.12);
}

.mimi-lesson-card-type [class^='tutor-icon-'] {
	font-size: 12px;
	line-height: 1;
	color: #ff64ad;
}

.mimi-lesson-card-duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(32, 24, 26, 0.78);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
}

/* --- Clearance above the footer ----------------------------- */

/* #footer carries margin-top:-20px so its wave sits over the section
   above it. With pagination present that bites into empty space and
   nobody notices. Filter down to a single page and the pagination is
   gone, the grid ends flush with the archive, and the wave crops the
   last row of cards — which is why this only ever showed up after
   filtering. Applies to both tabs; the courses tab has the same gap. */

/* --- Smart sticky filter sidebar ----------------------------- */

/* ⚠ THE BLOCKER, AND WHY overflow-x: clip IS THE WHOLE TRICK.
   #document (Bellaria's page wrapper) is overflow: hidden. An ancestor
   that is a scroll container disables position: sticky for everything
   inside it, which is why the sticky sidebar on the single course page
   was abandoned as impossible.

   overflow: clip clips exactly like hidden but is NOT a scroll
   container, so sticky survives it. It is also the one value that may
   be paired with visible on the other axis, so vertical layout is
   untouched. Chrome 90+, Firefox 81+, Safari 16+.

   Scoped two ways on purpose: this file is only enqueued on the course
   archive and its taxonomy archives, and the rule is inside the xl
   media query. Below 1200px Tutor turns the sidebar into a fixed
   drawer, which must not be made sticky.

   body #document, not #document, so specificity wins wherever the
   theme's own rule ends up in the cascade. */

@media (min-width: 1200px) {
	body #document {
		overflow-x: clip;
		overflow-y: visible;
	}

	.course-archive-page .tutor-course-filter-container {
		/* Without this the column stretches to the full grid height as a
		   flex item, and a sticky box as tall as its own container can
		   never move. */
		align-self: flex-start;
		position: sticky;
		top: 24px;
		/* No internal scrollbar: a second scrollbar inside the page is
		   awkward to use, and it was repainting the tag labels wrong
		   mid-scroll. browse-lessons.js reaches the bottom of a tall
		   sidebar by moving `top` with the scroll direction instead —
		   which is also what makes it come back when you scroll up.
		   Both properties have to be cleared: max-height was capping the
		   column to the viewport, and clearing only the overflow would
		   leave the cap in place and simply spill the content. */
		max-height: none;
		overflow: visible;
	}
}

/* --- Collapsible filter groups ------------------------------- */

/* The button is created by browse-lessons.js and inherits the h3's
   type, so a group heading looks identical whether or not JS ran. */
.mimi-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* Drawn from two borders rather than an icon font, so it cannot fail
   to load. Shape only — every colour lives in the brand block below,
   so there is one place to change it. */
.mimi-filter-chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-135deg);
	transition: transform .18s ease, color .15s ease;
}

.mimi-filter-collapsed .mimi-filter-chevron {
	transform: rotate(45deg);
}

.mimi-filter-collapsed .tutor-widget-content {
	display: none;
}

/* --- The filter sidebar, compact ----------------------------- */
/* Proko's sidebar reads as ONE object: a single bordered card whose
   rows are separated by hairlines. Tutor separates its widgets with
   48px top margins instead, so on short facet lists there is more gap
   than content — the whole sidebar was about twice the height it
   needed to be.

   Everything below trades that whitespace for dividers and moves the
   brand into the accents: the switch, the chevrons, the checked boxes
   and a pink tint on every hoverable row. */

.tutor-course-filter-form {
	background: #ffffff;
	border: 1px solid #f4e9ec;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(75, 67, 66, 0.04);
}

/* The 48px and 32px gaps Tutor puts between widgets. A 1px divider
   does the same job of separating them. Specificity is enough to beat
   .tutor-mt-48 without !important — those utilities are not flagged. */
.tutor-course-filter-form .tutor-widget {
	margin: 0;
	border-bottom: 1px solid #f8f0f3;
}

.tutor-course-filter-form .tutor-widget:last-child {
	border-bottom: 0;
}

/* --- Close button, mobile drawer only --- */
/* Tutor pulls it out of the card with .tutor-mr-n8 (margin-right:-8px).
   That utility is a single class and carries no !important, so two
   classes is all it takes to win — no source-order gamble. */

.tutor-course-filter .tutor-mr-n8 {
	margin-right: 5px;
}

/* --- Drop Down --- */
.course-archive-page .tutor-form-select-dropdown {
	min-width: 200px;
}

/* --- Search --- */

.tutor-course-filter-form .tutor-widget-search {
	padding: 12px;
}

.tutor-course-filter-form .tutor-widget-search .tutor-form-control {
	height: 40px;
	border-radius: 999px;
	border-color: #f2e7ea;
	background: #faf5f7;
	font-size: 14px;
}

/* --- Free preview switch --- */

.mimi-free-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 0;
	cursor: pointer;
	transition: background .15s ease;
}

.mimi-free-toggle:hover {
	background: #fff7fa;
}

.mimi-free-toggle-text {
	font-family: 'Fredoka One', cursive;
	font-weight: 100;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #4b4342;
}

/* Stays in the form and stays keyboard-reachable — moved behind the
   track rather than display:none, so it is still focusable and still
   serialised with the filter. */
.mimi-free-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

.mimi-free-toggle-track {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #e7dcdf;
	transition: background .18s ease;
}

.mimi-free-toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(32, 24, 26, 0.25);
	transition: transform .18s ease;
}

.mimi-free-toggle-input:checked ~ .mimi-free-toggle-track {
	background: #60c6c5;
}

.mimi-free-toggle-input:checked ~ .mimi-free-toggle-track::after {
	transform: translateX(16px);
}

.mimi-free-toggle-input:focus-visible ~ .mimi-free-toggle-track {
	outline: 2px solid #ff64ad;
	outline-offset: 2px;
}

/* --- Group headings --- */
/* The pill is gone on purpose: a filled block per heading is exactly
   the weight that made the column tall. Uppercase Fredoka at 13px
   holds the same brand voice in a third of the height. */

.tutor-course-filter .tutor-widget-title {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	font-family: 'Fredoka One', cursive;
	font-weight: 100;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #4b4342;
}

/* The button carries the row padding, so the whole row is the hit area. */
.mimi-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease;

	/*
	 * ⚠ These three cannot be left to inherit from the h3.
	 *
	 * text-transform and letter-spacing ARE inherited properties, but
	 * the theme sets them on `button` directly, and a declaration on the
	 * element always beats a value inherited from its parent — which is
	 * why `text-transform: uppercase` on .tutor-widget-title had no
	 * effect no matter how much !important it was given. The h3 computed
	 * to uppercase; the button inside it computed to none.
	 *
	 * The theme also gives buttons a 30px radius, which turned the row
	 * hover into a pill.
	 *
	 * `font: inherit` does not cover any of them — the shorthand resets
	 * only the font-* properties and line-height.
	 */
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mimi-filter-toggle:hover {
	background: #fff7fa;
}

.mimi-filter-toggle:focus-visible {
	outline: 2px solid #ff64ad;
	outline-offset: -2px;
}

/* --- Facet lists --- */

.tutor-course-filter-form .tutor-widget-content {
	padding: 0 0 8px;
}

.tutor-course-filter-form .tutor-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Tutor puts margin-bottom:16px between facet rows, which together with
 * its 29px line-height made every row 51px tall — more gap than row.
 *
 * ⚠ The extra .tutor-list in this selector is load-bearing. Tutor's rule
 * is `.tutor-list-item:not(:last-child)`, and :not() contributes the
 * specificity of its ARGUMENT even though the :not() itself adds none —
 * so :last-child counts and Tutor's selector weighs two classes, exactly
 * the same as `.tutor-course-filter-form .tutor-list-item`. On a tie the
 * later stylesheet wins, and tutor.min.css loads after ours, so the
 * obvious selector silently lost. Three classes settles it without
 * reaching for !important.
 */
.tutor-course-filter-form .tutor-list .tutor-list-item {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
}

.tutor-course-filter-form .tutor-list .tutor-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 14px;
	border-radius: 0;
	line-height: 1.35;
	color: #6f6462;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.tutor-course-filter-form .tutor-list .tutor-list-item label:hover {
	background: #fff7fa;
	color: #4b4342;
}

/* Tutor draws its own box at 24px with appearance:none, so this is a
   resize and a recolour, not a replacement — the tick it paints on
   :checked still lands correctly. */
.tutor-course-filter-form .tutor-form-check-input {
	width: 18px;
	height: 18px;
	margin: 0;
	border-width: 2px;
	border-radius: 5px;
	border-color: #e8dde1;
	background-size: 10px;
}

.tutor-course-filter-form .tutor-form-check-input:checked {
	background-color: #ff4d6c;
	border-color: #ff4d6c;
}

/* --- Clear all filters --- */

.tutor-course-filter-form .tutor-widget-course-filter {
	padding: 12px 14px;
}

.tutor-course-filter-form .tutor-widget-course-filter .tutor-widget-content {
	padding: 0;
}

.tutor-course-filter-form .tutor-widget-course-filter .tutor-btn {
	width: 100%;
	justify-content: center;
	border-radius: 999px;
	font-size: 13px;
}

/* --- Collapsed state --- */

.mimi-filter-collapsed .tutor-widget-content {
	display: none;
}

/* --- Chevron --- */
/* Drawn from two borders rather than an icon font, so it cannot fail
   to load. Shape here, colour with the other accents. */

.mimi-filter-chevron {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	color: #ff91a4;
	transform: rotate(-135deg);
	transition: transform .18s ease, color .15s ease;
}

.mimi-filter-toggle:hover .mimi-filter-chevron {
	color: #ff4d6c;
}

.mimi-filter-collapsed .mimi-filter-chevron {
	color: #c6b5bb;
	transform: rotate(45deg);
}

@media only screen and (max-width: 767px) {
	.mimi-lesson-browse-tab {
		padding: 8px 16px;
		font-size: 14px;
	}
}