/* ==========================================================================
   TTI Course Materials — Syllabus-row trigger button + accessible modal
   Loaded only on /courses/<slug>/ pages with at least one attachment.
   Theme tokens: Droip --pathwise_* maroon palette + tti-course-* surfaces.
   ========================================================================== */

:root {
	--ttim-maroon:        rgba(112, 0, 0, 1);
	--ttim-maroon-deep:   rgba(80,  0, 0, 1);
	--ttim-maroon-tint:   rgba(183,15,15,0.10);
	--ttim-maroon-tint-2: rgba(183,15,15,0.20);
	--ttim-yellow:        rgba(255,226,81, 1);
	--ttim-cream:         rgba(245,243,243,1);
	--ttim-pink-soft:     rgba(239,224,224,1);
	--ttim-ink:           #1a1a1a;
	--ttim-ink-soft:      #4a4a4a;
	--ttim-muted:         rgba(115,90,90,1);
	--ttim-radius:        14px;
	--ttim-radius-sm:     10px;
	--ttim-shadow:        0 24px 60px -16px rgba(80,0,0,0.35), 0 8px 18px -8px rgba(0,0,0,0.18);
	--ttim-ring:          0 0 0 3px rgba(255,226,81,0.55);
}

/* ----- Syllabus row: heading + stats (left) + button (right) ----- */

main.tti-course .tti-syllabus-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 24px 0;
}

main.tti-course .tti-syllabus-row > h2.tti-h-syllabus {
	margin: 0;
	flex: 0 1 auto;
}

main.tti-course .tti-syllabus-row > .tti-syllabus-stats {
	margin: 0;
	flex: 1 1 auto;
	color: var(--ttim-muted);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* The button hugs the right edge */
main.tti-course .tti-syllabus-row > .tti-materials-btn {
	margin-left: auto;
}

/* Tablet/mobile: button drops to its own row, full width */
@media (max-width: 768px) {
	main.tti-course .tti-syllabus-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	main.tti-course .tti-syllabus-row > .tti-materials-btn {
		margin-left: 0;
		align-self: stretch;
		justify-content: center;
	}
}

/* ----- Course Materials trigger button ----- */

.tti-materials-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	min-height: 44px;
	border: 1.5px solid var(--ttim-maroon);
	background: #fff;
	color: var(--ttim-maroon);
	font: 600 0.95rem/1.2 inherit;
	border-radius: 999px;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
	white-space: nowrap;
}
.tti-materials-btn:hover,
.tti-materials-btn:focus-visible {
	background: var(--ttim-maroon);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(80,0,0,0.45);
}
.tti-materials-btn:focus-visible {
	outline: none;
	box-shadow: var(--ttim-ring), 0 8px 18px -8px rgba(80,0,0,0.45);
}
.tti-materials-btn:active {
	transform: translateY(0);
}
.tti-materials-btn__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}
.tti-materials-btn__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.tti-materials-btn__label {
	font-weight: 700;
	letter-spacing: 0.01em;
}
.tti-materials-btn__count {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	background: var(--ttim-maroon-tint);
	color: var(--ttim-maroon);
	transition: background 160ms ease, color 160ms ease;
}
.tti-materials-btn:hover .tti-materials-btn__count,
.tti-materials-btn:focus-visible .tti-materials-btn__count {
	background: rgba(255,255,255,0.18);
	color: #fff;
}

/* ----- Modal overlay + dialog (dead-simple display toggle) -----
 * No transitions, no opacity tricks, no [hidden] attr reliance.
 * Default = display:none. Adding .is-open class flips to flex.
 * Inline onclick handlers (see mu-plugin button/close markup) toggle
 * the class. Keeps Droip's interaction system out of our path. */
.tti-materials-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}
.tti-materials-modal.is-open { display: flex; }

.tti-materials-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28, 12, 12, 0.62);
	cursor: pointer;
}

.tti-materials-modal__dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: min(82vh, 720px);
	display: flex;
	flex-direction: column;
	background: #1a1a1a;
	border-radius: var(--ttim-radius);
	box-shadow: var(--ttim-shadow);
	overflow: hidden;
}

/* ----- Modal header ----- */

.tti-materials-modal__header {
	position: relative;
	padding: 22px 56px 18px 24px;
	background: linear-gradient(135deg, var(--ttim-maroon) 0%, var(--ttim-maroon-deep) 100%);
	color: #fff;
}
.tti-materials-modal__title {
	margin: 0 0 4px;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: #fff;
}
.tti-materials-modal__desc {
	margin: 0;
	font-size: 0.92rem;
	color: rgba(255,255,255,0.85);
	line-height: 1.45;
}
.tti-materials-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background 140ms ease, transform 120ms ease;
}
.tti-materials-modal__close:hover,
.tti-materials-modal__close:focus-visible {
	background: rgba(255,255,255,0.22);
	transform: scale(1.05);
}
.tti-materials-modal__close:focus-visible {
	outline: none;
	box-shadow: var(--ttim-ring);
}

/* ----- Modal list ----- */

.tti-materials-modal__list {
	list-style: none;
	margin: 0;
	padding: 10px 10px;
	overflow-y: auto;
	/* Grow to fill all remaining dialog height between header and
	 * footer — eliminates dead-space rectangles below the last
	 * visible row. Shrink:1 + min-height:0 lets the list scroll
	 * when items overflow. */
	flex: 1 1 auto;
	min-height: 0;
	background: #1a1a1a;
}
.tti-materials-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--ttim-radius-sm);
	background: #2a2a2a;
	color: #fff;
	margin-bottom: 8px;
	border: 1px solid rgba(255,255,255,0.06);
	transition: border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease, background 140ms ease;
}
.tti-materials-item:hover {
	border-color: rgba(255,255,255,0.18);
	background: #333;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -10px rgba(0,0,0,0.6);
}
.tti-materials-item:last-child { margin-bottom: 0; }
.tti-materials-item.is-locked {
	background: #2a2a2a;
}

.tti-materials-item__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.08);
	color: #fff;
	border-radius: 8px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.tti-materials-item__icon svg {
	width: 18px;
	height: 18px;
}

.tti-materials-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.tti-materials-item__title {
	font-size: 0.97rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.tti-materials-item__meta {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.6);
	letter-spacing: 0.02em;
}

.tti-materials-item__action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	min-width: 168px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	background: var(--ttim-maroon);
	border: 1px solid var(--ttim-maroon);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
.tti-materials-item__action:hover,
.tti-materials-item__action:focus-visible {
	background: var(--ttim-maroon-deep);
	border-color: var(--ttim-maroon-deep);
	transform: translateY(-1px);
	color: #fff;
	box-shadow: 0 6px 14px -8px rgba(80,0,0,0.5);
}
.tti-materials-item__action:focus-visible {
	outline: none;
	box-shadow: var(--ttim-ring);
}
/* Locked state — same maroon pill with white text (matches enrolled
 * download button visually so button width is consistent across rows). */
.tti-materials-item__action.is-locked {
	background: var(--ttim-maroon);
	color: #fff;
	border-color: var(--ttim-maroon);
}
.tti-materials-item__action.is-locked:hover,
.tti-materials-item__action.is-locked:focus-visible {
	background: var(--ttim-maroon-deep);
	border-color: var(--ttim-maroon-deep);
	color: #fff;
}

/* ----- Modal footer ----- */

/* Higher specificity than `footer[class*="footer"]` from theme styles
 * (which adds `margin-top: clamp(40px, 5vw, 60px) !important` to any
 * `<footer>` whose class contains "footer" — including ours). Using
 * `.tti-materials-modal .tti-materials-modal__footer` (0,2,0) outweighs
 * the theme's `footer[class*=footer]` (0,1,1). */
.tti-materials-modal .tti-materials-modal__footer {
	margin: 0 !important;
	padding: 16px 22px;
	border-top: 1px solid rgba(255,255,255,0.08);
	background: #1a1a1a;
}
.tti-materials-modal .tti-materials-modal__header,
.tti-materials-modal .tti-materials-modal__list { margin: 0 !important; }
.tti-materials-modal__footer-note {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.7);
	line-height: 1.45;
}
.tti-materials-modal__footer-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.tti-materials-modal__footer-cta .tti-materials-modal__footer-note {
	flex: 1 1 220px;
}
.tti-materials-modal__enroll {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 0 0 auto;
	min-width: 168px;
	padding: 10px 22px;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	background: var(--ttim-maroon);
	border: 1px solid var(--ttim-maroon);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 14px -8px rgba(80,0,0,0.4);
	transition: transform 120ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}
.tti-materials-modal__enroll:hover,
.tti-materials-modal__enroll:focus-visible {
	background: var(--ttim-maroon-deep);
	border-color: var(--ttim-maroon-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 18px -8px rgba(80,0,0,0.5);
}
.tti-materials-modal__enroll:focus-visible {
	outline: none;
	box-shadow: var(--ttim-ring), 0 10px 18px -8px rgba(80,0,0,0.5);
}

/* ==========================================================================
   Enrolled state — green ✓ Enrolled badge replacing Enroll Now CTAs
   Applied server-side via class `is-enrolled` on every `?tti-enroll=`
   anchor when the visitor is already enrolled (functions.php ob_start).
   ========================================================================== */

:root {
	--ttim-green:        #16a34a;  /* tailwind green-600 */
	--ttim-green-deep:   #15803d;  /* tailwind green-700 */
	--ttim-green-soft:   #22c55e;  /* tailwind green-500 */
}

/* Universal enrolled-state styling — outweighs any Droip per-page
 * `.post-N-*` background rule via attribute selectors + !important. */
main.tti-course a.is-enrolled[href*="tti-enroll="],
main.tti-course .tti-hero__enroll.is-enrolled,
main.tti-course .tti-course-final-cta__primary.is-enrolled,
.tti-course-sticky .tti-course-sticky__cta.is-enrolled,
body a.is-enrolled[href*="tti-enroll="] {
	background: var(--ttim-green) !important;
	color: #fff !important;
	border-color: var(--ttim-green) !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
main.tti-course a.is-enrolled[href*="tti-enroll="]:hover,
main.tti-course .tti-hero__enroll.is-enrolled:hover,
main.tti-course .tti-course-final-cta__primary.is-enrolled:hover,
.tti-course-sticky .tti-course-sticky__cta.is-enrolled:hover,
body a.is-enrolled[href*="tti-enroll="]:hover {
	background: var(--ttim-green-deep) !important;
	border-color: var(--ttim-green-deep) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(21,128,61,0.5);
}
main.tti-course a.is-enrolled[href*="tti-enroll="]:focus-visible,
main.tti-course .tti-hero__enroll.is-enrolled:focus-visible,
main.tti-course .tti-course-final-cta__primary.is-enrolled:focus-visible,
.tti-course-sticky .tti-course-sticky__cta.is-enrolled:focus-visible,
body a.is-enrolled[href*="tti-enroll="]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(34,197,94,0.45);
}

/* Checkmark icon — inherits currentColor (white) from button */
.tti-enrolled-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-block;
}

/* Tablet/mobile: no special sizing override needed — the buttons
 * inherit their existing per-CTA sizing rules; only colors flip. */

/* ----- Strip stray Droip lesson/quiz player anchors -----------------
 * Some courses ship a hand-placed Droip inline-element anchor that
 * links to the lesson or quiz player page (e.g. FMCSA's standalone
 * "FMCSA / DOT COMPLIANCE FINAL" link rendering below the syllabus
 * card). These duplicate the lesson/quiz titles already shown inside
 * the module accordion via .tti-module-lessons. Hide them — users
 * launch lessons/quizzes from the player after enrollment, not from
 * stray anchors on the marketing landing page.
 *
 * Scope: main.tti-course only (course landing pages); excludes our
 * own .tti-module-detail render which doesn't use a.droip-inline-element. */
/* Use double class + parent context for specificity (some Droip
 * post-N-* rules ship with !important, so we need to outweigh them). */
main.tti-course a.droip-inline-element[href*="/lessons/"],
main.tti-course a.droip-inline-element[href*="/quizzes/"],
main.tti-course a.droip-inline-element[href*="/tutor_quiz/"],
main.tti-course a.droip-inline-element[href*="/assignments/"],
main.tti-course .droip-body a[href*="/lessons/"][class*="dpx9hzf9"],
main.tti-course .droip-body a[href*="/quizzes/"][class*="dpx9hzf9"],
main.tti-course .droip-body a[href*="/tutor_quiz/"][class*="dpx9hzf9"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
}
/* Hide the immediate parent wrapper too if it ONLY contains the stray
 * link — Droip nests the link in dpuppf9r-style padding wrappers that
 * still take vertical space when the link itself is hidden. */
main.tti-course .post-3206-dpuppf9r:has(> a.droip-inline-element[href*="/quizzes/"]),
main.tti-course .post-3206-dpuppf9r:has(> a.droip-inline-element[href*="/lessons/"]) {
	display: none !important;
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
	.tti-materials-btn,
	.tti-materials-modal,
	.tti-materials-modal__dialog,
	.tti-materials-modal__close,
	.tti-materials-item,
	.tti-materials-item__action,
	.tti-materials-modal__enroll {
		transition: none !important;
	}
}

/* ----- Tablet (≤ 768px): wider dialog, action drops below body ----- */

@media (max-width: 768px) {
	.tti-materials-modal { padding: 16px; }
	.tti-materials-modal__dialog {
		width: 100%;
		max-height: min(86vh, 720px);
		height: auto;
	}
	.tti-materials-modal__header { padding: 20px 56px 16px 20px; }
	.tti-materials-modal__title { font-size: 1.2rem; }
	.tti-materials-modal__desc { font-size: 0.88rem; }
	.tti-materials-item {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px 14px;
	}
	.tti-materials-item__body { flex-basis: calc(100% - 56px); }
	.tti-materials-item__action {
		margin-left: 56px;
		min-width: 0;
		flex: 1 1 auto;
		padding: 10px 14px;
	}
}

/* ----- Mobile (≤ 480px): stack action below row, full-width pill ----- */

@media (max-width: 480px) {
	.tti-materials-modal { padding: 8px; }
	/* Dialog wraps content tightly — only grows to scrollable max when
	 * the list overflows. Avoids the "huge footer empty space" bug. */
	.tti-materials-modal__dialog {
		max-height: min(92vh, 720px);
		height: auto;
		border-radius: 12px;
	}
	.tti-materials-modal__header { padding: 16px 50px 12px 16px; }
	.tti-materials-modal__title { font-size: 1.1rem; }
	.tti-materials-modal__desc { font-size: 0.85rem; }
	.tti-materials-modal__list { padding: 8px; }
	.tti-materials-item {
		padding: 12px;
		gap: 10px;
	}
	.tti-materials-item__icon { width: 36px; height: 36px; font-size: 0.65rem; }
	.tti-materials-item__title { font-size: 0.92rem; }
	.tti-materials-item__action {
		margin-left: 0;
		flex: 1 1 100%;
		padding: 11px 14px;
		font-size: 0.9rem;
	}
	.tti-materials-modal__footer { padding: 14px 16px; }
	.tti-materials-modal__footer-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	/* Override the desktop `flex: 1 1 220px` — in a column flex, that
	 * basis grows vertically and adds 200+ px of empty space. */
	.tti-materials-modal__footer-cta .tti-materials-modal__footer-note {
		flex: 0 0 auto;
	}
	.tti-materials-modal__enroll { justify-content: center; }
}