/* JRL Tutor Platform — frontend styles for jrl/ widgets */

.jrl-course-grid {
	--jrl-grid-columns: 4;
	--jrl-grid-gap: 24px;
	display: grid;
	grid-template-columns: repeat(var(--jrl-grid-columns), 1fr);
	gap: var(--jrl-grid-gap);
}

.jrl-course-grid--compact-list {
	grid-template-columns: 1fr;
}

.jrl-course-card {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.jrl-course-grid--compact-list .jrl-course-card {
	flex-direction: row;
	align-items: center;
}

.jrl-course-grid--overlay .jrl-course-card {
	position: relative;
}

.jrl-course-grid--overlay .jrl-course-card__body {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent);
	color: #fff;
}

.jrl-course-card__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.jrl-course-card__body {
	padding: 16px;
}

.jrl-course-card__title {
	margin: 0 0 8px;
	font-size: 1.05em;
}

.jrl-course-card__title a {
	color: inherit;
	text-decoration: none;
}

.jrl-course-grid__pagination {
	margin-top: 24px;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.jrl-dept-nav {
	position: relative;
}

.jrl-dept-nav__hamburger {
	position: relative;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
	z-index: 1001;
}

/* Override Hello Elementor's reset.css `button:hover,:focus{background-color:#c36;color:#fff}`.
   The `color` half of that rule is the real culprit behind "button disappears on hover/tap,
   reappears once you move the mouse/tap elsewhere" reported on Safari/Chrome/Edge alike —
   the icon uses `currentColor`, so flipping to white text made it invisible against a
   light background for as long as :hover/:focus stayed active. */
.jrl-dept-nav__hamburger:hover,
.jrl-dept-nav__hamburger:focus {
	background-color: transparent;
	color: inherit;
}

/* The icon span itself had no visual styling at all — button rendered but was
   effectively invisible (transparent, empty). 3-bar hamburger via box-shadow trick. */
.jrl-dept-nav__hamburger-icon {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Separate, static "X" glyph — swapped in place of the bars via plain display:none/block
   (no transform/transition morph). A CSS-transition-driven pseudo-element morph proved
   unreliable in this project's test environment (delayed repaint until an unrelated
   interaction), so two plain elements toggled by display is used instead for reliability. */
.jrl-dept-nav__close-icon {
	display: none;
	font-size: 26px;
	line-height: 1;
}

.jrl-dept-nav--mobile-open .jrl-dept-nav__hamburger-icon {
	display: none;
}

.jrl-dept-nav--mobile-open .jrl-dept-nav__close-icon {
	display: block;
}

/* Row wrapper for the scrollable department list + its prev/next arrows. A separate
   flex context from `.jrl-dept-nav__list` itself (which stays its own flex row, laid
   out via the `list_display` Elementor control) so the arrows can sit beside the list
   rather than above/below it — `.jrl-dept-nav__list` needs `min-width: 0` below so it
   can actually shrink and scroll inside this row instead of stretching it. */
.jrl-dept-nav__list-wrap {
	display: flex;
	align-items: center;
}

.jrl-dept-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24px;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.jrl-dept-nav__list::-webkit-scrollbar {
	display: none;
}

.jrl-dept-nav__item {
	position: relative;
	flex: 0 0 auto;
}

.jrl-dept-nav__link {
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	padding: 8px 0;
	white-space: nowrap;
}

/* Same look as .jrl-dept-nav__arrow (submenu scroll buttons) — kept as a distinct
   class since these live in a different DOM context (beside .jrl-dept-nav__list,
   not inside a .jrl-dept-nav__panel), toggled the same way: hidden by default,
   shown via JS (department-nav.js) only when the list actually overflows. */
.jrl-dept-nav__list-arrow {
	flex: 0 0 auto;
	border: 0;
	background: rgba( 0, 0, 0, .05 );
	cursor: pointer;
	display: none;
}

/* Override Hello Elementor's reset.css `button:hover{background-color:#c36}` —
   this widget's hover feedback comes only from the Style tab's Hover Color control. */
.jrl-dept-nav__link:hover,
.jrl-dept-nav__link:focus {
	background-color: transparent;
}

.jrl-dept-nav__empty {
	margin: 0;
	padding: 8px 16px;
	white-space: nowrap;
	cursor: default;
	opacity: .6;
}

/* Desktop full-width hover panel — full-bleed edge-to-edge, same negative-margin/100vw
   trick as the theme's own .alignfull (assets/css/theme.css), adapted for an
   absolutely-positioned element (needs left:50%+margin-left instead of margin-inline). */
.jrl-dept-nav__panels {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -50vw;
	width: 100vw;
	max-width: 100vw;
	z-index: 20;
	background: #1c1d1f;
	box-sizing: border-box;
}

.jrl-dept-nav--panel-open > .jrl-dept-nav__panels {
	display: block;
}

.jrl-dept-nav__panel {
	display: none;
	max-width: 1140px;
	margin-inline: auto;
	padding: 24px 20px;
	text-align: center;
}

.jrl-dept-nav__panel--active {
	display: block;
}

.jrl-dept-nav__pointer {
	position: absolute;
	top: -8px;
	left: var(--jrl-dept-nav-pointer-x, 0px);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #1c1d1f;
	transform: translateX(-50%);
	pointer-events: none;
}

.jrl-dept-nav__submenu {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	gap: 32px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.jrl-dept-nav__submenu::-webkit-scrollbar {
	display: none;
}

.jrl-dept-nav__cat {
	flex: 0 0 auto;
}

.jrl-dept-nav__cat-link {
	white-space: nowrap;
}

.jrl-dept-nav__arrow {
	flex: 0 0 auto;
	border: 0;
	background: rgba( 0, 0, 0, .05 );
	cursor: pointer;
	display: none;
}

/* Mobile-only in-flow copy of the same submenu body — nested inside its own <li> so the
   accordion can stack trigger + body vertically per department; never full-bleed, never
   position:absolute, so it needs none of the desktop panel's positioning rules. */
.jrl-dept-nav__mobile-submenu {
	display: none;
}

.jrl-dept-nav--mobile-open .jrl-dept-nav__item--open > .jrl-dept-nav__mobile-submenu {
	display: flex;
	flex-direction: column;
	/* Padding Top/Bottom (Submenu Item section) also targets this element and defaults
	   to 24px — that extra space sits only ABOVE the first row (nothing "extra" exists
	   between subsequent rows), making the first row look taller than the rest even
	   after the gap/border fix above. Zeroed here so every row's spacing comes only
	   from .jrl-dept-nav__cat-link's own uniform padding.
	   !important is required: Elementor's own control selector for this same property
	   is `{{WRAPPER}} .jrl-dept-nav__mobile-submenu` (3 class selectors, specificity 0,3,0),
	   equal to or higher than any plain override here, so without !important the control's
	   value (default 24px) silently wins and this reset never actually applies. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.jrl-dept-nav--mobile-open .jrl-dept-nav__submenu {
	flex-direction: column;
	overflow: visible;
	padding: 0;
	/* `gap` only adds space BETWEEN items, so with a border on each item the first row
	   (no preceding gap) always reads as a different height than the rest (gap + content).
	   Zeroed here — vertical rhythm between mobile rows comes from the link's own
	   top/bottom padding below instead, which is uniform for every item including the first.
	   !important is required: Elementor's "Submenu Item Spacing" control targets
	   `{{WRAPPER}} .jrl-dept-nav__submenu`, which expands to 3 class selectors
	   (specificity 0,3,0) — higher than this rule's 2 classes (0,2,0), so the control's
	   gap value (default 32px) always won here and this reset was silently never applied. */
	gap: 0 !important;
}

.jrl-dept-nav--mobile-open .jrl-dept-nav__cat-link {
	display: block;
	/* Padding now owned by the "Item Padding" widget control (submenu_item_padding) —
	   its generated selector includes {{WRAPPER}}, which always out-specifies this plain
	   rule, so no default is set here to avoid a dead/duplicate declaration. */
}

.jrl-dept-nav--mobile-open .jrl-dept-nav__arrow {
	display: none;
}

.jrl-dept-nav__backdrop {
	display: none;
}

/* Off-canvas drawer (mobile/tablet only). `display:flex` stays on at every breakpoint
   now (list_display control) so the "hidden" state below can be a transform the browser
   can actually animate — display:none can't be transitioned. Scoped to Elementor's
   default tablet breakpoint (1024px); if the site's breakpoints are ever customized in
   Elementor Site Settings, this value should be updated to match. */
@media (max-width: 1024px) {
	.jrl-dept-nav__list {
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: column;
		width: min(85vw, 320px);
		height: 100vh;
		margin: 0;
		padding: 24px 20px;
		background: #ffffff;
		box-shadow: 2px 0 16px rgba(0, 0, 0, .2);
		overflow-y: auto;
		z-index: 1000;
		transform: translateX(-100%);
		transition: transform .3s ease;
	}

	.jrl-dept-nav--mobile-open .jrl-dept-nav__list {
		transform: translateX(0);
	}

	/* The drawer scrolls vertically at this breakpoint (see .jrl-dept-nav__list above) —
	   the horizontal scroll arrows are desktop-only, JS already skips showing them here
	   via isMobileMode(), this is just a CSS safety net against a flash of the button
	   before JS runs. */
	.jrl-dept-nav__list-arrow {
		display: none !important;
	}

	/* Closed state deliberately stays untouched (follows wherever Elementor's own Container
	   layout places it). Only while the drawer is OPEN does the button move to a fixed spot
	   just past the drawer's right edge, over the dimmed backdrop — "beside" the drawer,
	   not inside its white panel. */
	.jrl-dept-nav--mobile-open .jrl-dept-nav__hamburger {
		position: fixed;
		top: 20px;
		left: calc(min(85vw, 320px) + 12px);
		z-index: 1001;
	}

	.jrl-dept-nav__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
		z-index: 999;
	}

	.jrl-dept-nav--mobile-open .jrl-dept-nav__backdrop {
		opacity: 1;
		pointer-events: auto;
	}
}

.jrl-course-search {
	display: flex;
}

.jrl-course-search__field {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 1;
	overflow: hidden; /* clips input/button to the field's own border-radius */
}

.jrl-course-search__input {
	flex: 1;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	outline: none;
	/* `type="search"` gets native OS/browser chrome (-webkit-appearance: searchfield) by
	   default — its focus ring is baked into that native rendering, not a normal CSS
	   `outline`, so `outline: none` alone can't remove it (finding 2026-07-08). Turning
	   off native appearance makes the input a plain box fully controlled by our own CSS;
	   the trade-off is Chrome/Safari's native "x" clear-icon disappears too. */
	-webkit-appearance: none;
	appearance: none;
}

.jrl-course-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border: 0;
	color: #fff;
	cursor: pointer;
	outline: none;
}

/* Browser default focus outline on the <input>/<button> gets clipped square by
   .jrl-course-search__field's overflow:hidden, breaking the pill shape (see finding
   2026-07-08). Replaced with a focus ring on the field itself, which respects the
   field's own border-radius and only shows for keyboard navigation. */
.jrl-course-search__field:focus-within {
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
}

.jrl-course-search__submit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Icon Position: On Button (default, or no icon at all) — button stays a separate block
   after the input, matching the original layout before icon support was added. */
.jrl-course-search--icon-button .jrl-course-search__field,
.jrl-course-search--icon-none .jrl-course-search__field {
	gap: 8px;
}

/* Icon Position: Inside Input (left/right) — the button overlays the input itself,
   icon-only. Background is NOT stripped here — Button Background (Style tab) applies
   normally, so it becomes the colored block behind the icon merged into the pill (see
   reference screenshot). Field's own overflow:hidden + border-radius clips the button's
   outer corner to match; the inner corner (against the input) stays square by design. */
.jrl-course-search--icon-input-left .jrl-course-search__submit,
.jrl-course-search--icon-input-right .jrl-course-search__submit {
	position: absolute;
	top: 0;
	bottom: 0;
	padding: 0 12px;
}

.jrl-course-search--icon-input-left .jrl-course-search__submit {
	left: 0;
}

.jrl-course-search--icon-input-right .jrl-course-search__submit {
	right: 0;
}

/* Reserved space = icon size + the overlay button's own 12px horizontal padding on each
   side (see .jrl-course-search__submit above). Was a flat 44px, which only matched the
   16px default Icon Size — any larger value made the button wider than the reserved gap
   and it started covering the input's own text (bug found 2026-07-08, screenshot with
   Icon Size ~32px). --jrl-search-icon-size is set by the Icon Size control itself.
   Left variant gets +8px extra breathing room past the icon block — typed text started
   flush against the icon otherwise (finding 2026-07-08); right variant has no such
   complaint since text there ends before reaching the icon, not up against it. */
.jrl-course-search--icon-input-left .jrl-course-search__input {
	padding-left: calc(var(--jrl-search-icon-size, 16px) + 32px);
}

.jrl-course-search--icon-input-right .jrl-course-search__input {
	padding-right: calc(var(--jrl-search-icon-size, 16px) + 24px);
}

/* Responsive column counts per breakpoint are generated by Elementor itself
   (add_responsive_control on --jrl-grid-columns) — no manual media queries needed here. */

.jrl-course-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.jrl-course-sort__label {
	white-space: nowrap;
}

.jrl-course-sort__select {
	padding: 8px 12px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.jrl-breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jrl-breadcrumb__link {
	text-decoration: none;
}

.jrl-breadcrumb__link:hover {
	text-decoration: underline;
}

.jrl-account-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.jrl-account-menu--guest {
	text-decoration: none;
}

.jrl-account-menu__trigger {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	padding: 0;
}

/* Override Hello Elementor's reset.css `button:hover,:focus{background-color:#c36;color:#fff}` —
   same fix already applied to .jrl-dept-nav__hamburger/.jrl-dept-nav__link; this widget's
   hover feedback comes only from the Style tab's Hover Color control. */
.jrl-account-menu__trigger:hover,
.jrl-account-menu__trigger:focus {
	background-color: transparent;
}

.jrl-account-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.jrl-account-menu__dropdown {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 160px;
	z-index: 100;
	background: #ffffff;
}

.jrl-account-menu--open .jrl-account-menu__dropdown {
	display: flex;
}

.jrl-account-menu__dropdown-link {
	white-space: nowrap;
	text-decoration: none;
}

.jrl-page-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.jrl-page-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}