/**
 * REHAVISTA Online-Lehrgänge (LeO).
 *
 * Overview page (page-courses.php) and detail page (single-course.php).
 * Colours come from the theme palette registered in hello_block_editor_settings().
 */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- Design tokens ------------------------------------------------------ */

/*
 * style.css is loaded from header.php AFTER wp_head(), so it wins every
 * specificity tie against this sheet. Anything below that overrides a theme
 * rule is therefore written with one extra class - see .course-filter__submit
 * against .button, which is the only real collision.
 */
:root {
	--rv-navy:      #003e67;
	--rv-blue:      #153e68;
	--rv-blue-soft: #a9c4dd;
	--rv-tint:      #eef3f8;
	--rv-line:      #dde5ee;
	--rv-muted:     #5d6b7a;
	--rv-shadow:    0 1px 2px rgba(0, 62, 103, .05);
	--rv-shadow-lift: 0 12px 28px rgba(0, 62, 103, .13);
	--rv-ring:      0 0 0 3px rgba(21, 62, 104, .2);
}

/* -- Filter toolbar ------------------------------------------------------ */

.course-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 25px;
	margin: 0 0 25px;
	padding: 16px 20px;
	background-color: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 15px;
	box-shadow: var(--rv-shadow);
}

.course-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
}

/* style.css sets a blanket `label { width: calc(100% - 85px) }`, which made the
   label claim a whole row and pushed the select and button onto the next one. */
.course-filter__label {
	width: auto;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--rv-navy);
	white-space: nowrap;
}

/* Wrapper exists only to hang the chevron on, since the native one goes with
   appearance: none. */
.course-filter__field {
	position: relative;
	display: inline-flex;
}

.course-filter__field::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 17px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--rv-blue);
	border-bottom: 2px solid var(--rv-blue);
	transform: rotate(45deg);
	pointer-events: none;
}

.course-filter__select {
	-webkit-appearance: none;
	appearance: none;
	min-width: 250px;
	max-width: 100%;
	height: 44px;
	padding: 0 42px 0 15px;
	font-family: inherit;
	font-size: 16px;
	color: #3c3c3b;
	background-color: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.course-filter__select:hover {
	border-color: var(--rv-blue-soft);
}

.course-filter__select:focus {
	outline: none;
	border-color: var(--rv-blue);
	box-shadow: var(--rv-ring);
}

/* Extra class: .button in style.css sets height/line-height/padding and loads later. */
.course-filter .course-filter__submit {
	height: 44px;
	margin: 0;
	padding: 0 24px;
	line-height: 44px;
}

.course-filter__reset {
	font-size: 15px;
	color: var(--rv-blue);
	text-decoration: underline;
}

.course-toolbar__count {
	margin: 0;
	font-size: 15px;
	color: var(--rv-muted);
	white-space: nowrap;
}

.course-toolbar__count strong {
	font-weight: 500;
	color: var(--rv-navy);
}

/* -- List ---------------------------------------------------------------- */

/*
 * auto-fill/460px lands on two columns inside .container.lrg and collapses to
 * one below roughly 960px, so 12 Lehrgänge are six rows on a laptop instead of
 * the twelve full-width bands the legacy list scrolls through.
 */
.course-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
	gap: 20px;
}

.course-list__empty {
	padding: 45px 25px;
	text-align: center;
	background-color: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 15px;
}

.course-list__empty p {
	margin: 0 0 20px;
	font-size: 18px;
	color: var(--rv-muted);
}

/* -- Card ---------------------------------------------------------------- */

.course-card {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 15px;
	box-shadow: var(--rv-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.course-card:hover {
	transform: translateY(-2px);
	border-color: var(--rv-blue-soft);
	box-shadow: var(--rv-shadow-lift);
}

/* The card's only link is the title, stretched over the whole card below, so
   the keyboard focus ring has to be drawn on the card instead. */
.course-card:focus-within {
	border-color: var(--rv-blue);
	box-shadow: var(--rv-ring);
}

/*
 * Date as a calendar leaf - weekday, day, month-year stacked - shared by the
 * overview cards and the detail hero so the two pages read as one component.
 * The legacy "DI. 08.09.2026" ran as one line across a 190px slab.
 */
.course-date {
	flex: 0 0 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 8px;
	color: #fff;
	text-align: center;
	background-color: var(--rv-navy);
}

.course-date__weekday,
.course-date__month {
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	/* "OKT. 2026" wraps to two lines in the rail without this. */
	white-space: nowrap;
	opacity: .8;
}

.course-date__day {
	font-family: 'BoosterNextMed', sans-serif;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.1;
}

.course-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 18px 22px;
}

.course-card__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.course-topic {
	margin: 0;
	padding: 3px 11px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--rv-blue);
	background-color: var(--rv-tint);
	border-radius: 999px;
}

/* 30% down from the theme's h3 (35px), which this used to inherit via .h3. */
.course-card__title {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.25;
}

.course-card__title a {
	color: var(--rv-navy);
	text-decoration: none;
}

/* Stretched link: makes the whole card clickable without a second <a>. */
.course-card__title a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.course-card:hover .course-card__title a {
	text-decoration: underline;
}

.course-card__meta {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.course-card__meta li {
	display: inline;
	margin: 0;
	font-size: 15px;
	color: var(--rv-muted);
}

.course-card__meta li + li::before {
	content: "\00b7";
	margin: 0 8px;
}

.course-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 15px;
	margin-top: auto;
}

.course-fee {
	padding: 4px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--rv-navy);
	background-color: var(--rv-tint);
	border-radius: 999px;
}

.course-fee--free {
	color: #5a6100;
	background-color: #edefd4;
}

.course-card__cta {
	position: relative;
	padding-right: 24px;
	font-weight: 500;
	color: var(--rv-blue);
	white-space: nowrap;
}

.course-card__cta .fas {
	position: absolute;
	top: 50%;
	right: 0;
	width: 1em;
	height: 1em;
	margin-top: -.5em;
	transition: transform .18s ease;
}

.course-card:hover .course-card__cta .fas {
	transform: translateX(4px);
}

/* -- Pagination ---------------------------------------------------------- */

.course-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 35px;
}

.course-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: var(--rv-blue);
	background-color: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 10px;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.course-pagination a.page-numbers:hover {
	border-color: var(--rv-blue);
	box-shadow: var(--rv-shadow);
}

.course-pagination .page-numbers.current {
	color: #fff;
	background-color: var(--rv-navy);
	border-color: var(--rv-navy);
}

.course-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* -- Detail hero -------------------------------------------------------- */

.course-hero__card {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 15px;
	box-shadow: var(--rv-shadow);
}

/* Same leaf as the cards, one size up. */
.course-hero__date {
	flex-basis: 120px;
	padding: 28px 12px;
}

.course-hero__date .course-date__day {
	font-size: 44px;
}

.course-hero__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 25px;
}

.course-hero__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

/*
 * Half the theme's h1 scale (60/40/30px in style.css), tracking the same two
 * breakpoints. .course-detail__title repeats the same text further down the
 * page as an h2, so it is pinned to the hero size - left at the theme's 45px it
 * would outweigh the h1 it restates.
 */
.course-hero__title,
.course-detail__title {
	margin: 0 0 10px;
	font-size: 30px;
	color: var(--rv-navy);
}

@media all and (max-width: 900px) {

	.course-hero__title,
	.course-detail__title {
		font-size: 20px;
	}
}

@media all and (max-width: 675px) {

	.course-hero__title,
	.course-detail__title {
		font-size: 15px;
	}
}

.course-hero__meta,
.course-hero__fee {
	margin: 0 0 10px;
}

.course-hero .course-cta {
	margin-top: 10px;
}

/* -- Detail body -------------------------------------------------------- */

.course-detail__title {
	margin: 0 0 20px;
}

.course-detail__more {
	margin-top: 30px;
}

/* Tinted panel so the fact list reads as a summary block rather than more body
   copy - this section sits on white, unlike the hero. */
.course-detail__facts {
	margin-top: 35px;
	padding: 22px 25px;
	background-color: var(--rv-tint);
	border-radius: 15px;
}

.course-detail__facts h3 {
	margin-bottom: 12px;
	font-size: 22px;
	color: var(--rv-navy);
}

.course-detail__facts dl {
	margin: 0;
}

.course-detail__facts dt {
	float: left;
	clear: left;
	margin-right: 6px;
	font-weight: 700;
}

.course-detail__facts dd {
	margin: 0 0 4px;
}

.course-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 35px;
}

.course-cta {
	padding-right: 45px;
}

a.button.course-cta--back {
	color: #003e67 !important;
	background-color: #a9c4dd;
}

a.button.course-cta--back .fas {
	color: #003e67;
}

/* -- Mobile -------------------------------------------------------------- */

/* The grid needs no breakpoint - auto-fill drops to one column on its own once
   the container is narrower than a 460px track. These are the pieces that do. */

@media all and (max-width: 900px) {

	.course-card__title {
		font-size: 20px;
	}
}

@media (max-width: 767px) {

	.course-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.course-filter {
		flex-direction: column;
		align-items: stretch;
	}

	.course-filter__field,
	.course-filter__select {
		width: 100%;
		min-width: 0;
	}

	.course-filter .course-filter__submit {
		width: 100%;
		text-align: center;
	}

	.course-hero__card {
		flex-direction: column;
	}

	.course-hero__date {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 8px;
		padding: 14px 20px;
	}

	.course-hero__date .course-date__day {
		font-size: 22px;
	}

	.course-hero__date .course-date__weekday,
	.course-hero__date .course-date__month {
		align-self: center;
	}

	.course-detail__facts dt {
		float: none;
	}
}

@media all and (max-width: 675px) {

	.course-card__date {
		padding: 16px 6px;
	}

	.course-card__day {
		font-size: 28px;
	}

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

	.course-card__title {
		font-size: 18px;
	}
}

/* -- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.course-card,
	.course-card__cta .fas,
	.course-filter__select,
	.course-pagination .page-numbers {
		transition: none;
	}

	.course-card:hover {
		transform: none;
	}

	.course-card:hover .course-card__cta .fas {
		transform: none;
	}
}