/**
 * UNIPLUS Block-Theme – Zusatzstyles, die theme.json nicht abdecken kann.
 */

.site-header-fixed {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--background);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.header-info {
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/**
 * Header-Layout: Logo links (volle Höhe), Rest rechts.
 *
 * Bewusst als explizite Regeln statt sich auf Gutenbergs automatisch generierte
 * Layout-Klassen (is-layout-flex/is-content-justification-*) zu verlassen – deren
 * zugehöriges Basis-CSS (wp-block-library) wird in dieser Umgebung offenbar nicht
 * zuverlässig ausgeliefert (z. B. durch Performance-/Optimierungs-Plugins entfernt).
 *
 * .header-right ist mobil ein Grid mit drei Zeilen (Badges+Toggler / Hauptnav /
 * Utility-Menü) und wird ab 992px auf zwei Zeilen umgestellt (Utility+Badges in
 * einer Zeile, Hauptnav darunter, Toggler ausgeblendet) – dieselben Elemente,
 * nur andere Gruppierung, siehe Media-Query unten.
 */
.header-grid {
	display: flex;
	align-items: stretch;
	padding: 0;
}

.header-logo {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--wp--preset--color--feuer-500);
	padding: 24px 20px;
}

.header-logo-text {
	margin: 0;
	color: var(--wp--preset--color--schnee-white);
	font-family: var(--wp--preset--font-family--author);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.05;
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
}

.header-right {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	column-gap: 12px;
}

.header-badges {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.header-badge {
	position: relative;
	color: inherit;
	text-decoration: none;
}

.header-badge-favorite i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--feuer-300);
	color: var(--wp--preset--color--schnee-white);
	font-size: 0.9rem;
}

.header-badge-cart i {
	font-size: 1.375rem;
	color: var(--wp--preset--color--feuer-500);
}

.header-badge-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--feuer-500);
	color: var(--wp--preset--color--schnee-white);
	font-size: 0.65rem;
	line-height: 16px;
	text-align: center;
}

/**
 * Toggler: eigenes 3-Balken-Icon statt Bootstraps .navbar-toggler-icon (SVG-
 * Hintergrundbild), da das Design deutlich dickere, dunkle Balken zeigt. Steuert
 * per data-bs-target=".header-collapsible" BEIDE Collapse-Bereiche (Hauptnav und
 * Utility-Menü) gleichzeitig – Bootstraps Collapse-JS unterstützt Klassen-Selektoren
 * als gemeinsames Ziel für mehrere Collapse-Elemente.
 */
.header-toggler {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	padding: 0;
	margin-left: 12px;
	border: none;
	border-left: 1px solid #d9d9d9;
	padding-left: 16px;
	background: none;
	cursor: pointer;
}

.header-toggler span {
	display: block;
	height: 3px;
	background-color: var(--wp--preset--color--karbon);
}

.header-collapse-nav {
	grid-column: 1 / -1;
	grid-row: 2;
}

.header-collapse-links {
	grid-column: 1 / -1;
	grid-row: 3;
}

/**
 * Hauptnavigation: Seminarsuche-Link und Menü-Liste sind eigenständige Flex-
 * Geschwister (nicht beide <li> in derselben <ul>), damit die Reihenfolge sich
 * per CSS umschalten lässt – mobil steht die Suche als eigene Pill vor der
 * Menü-Box, ab 992px wird sie zum letzten Eintrag in der horizontalen Nav-Reihe.
 */
.header-navbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 0;
}

.header-nav-search a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 32px;
	background-color: var(--wp--preset--color--feuer-50);
	color: var(--wp--preset--color--feuer-500);
	font-weight: 700;
	text-decoration: none;
}

.header-nav-search a:hover {
	color: var(--wp--preset--color--feuer-700);
}

.navbar-nav {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e5e5e5;
}

.navbar-nav .nav-item {
	border-bottom: 1px solid #e5e5e5;
}

.navbar-nav .nav-item:last-child {
	border-bottom: none;
}

.navbar-nav .nav-link {
	display: block;
	padding: 20px 24px;
	color: var(--wp--preset--color--karbon);
	font-weight: 700;
	text-decoration: none;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link[aria-expanded="true"] {
	color: var(--wp--preset--color--feuer-500);
}

/**
 * Dropdown mobil: Akkordeon statt Overlay – position:static hebt Bootstraps
 * Standard-Positionierung auf. data-bs-display="static" (siehe
 * UniBootstrapNavWalker) verhindert, dass Popper.js dabei eigene Inline-Styles
 * setzt, die diese Regel überschreiben würden.
 */
.dropdown-menu {
	position: static;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
}

.dropdown-item {
	padding: 16px 24px 16px 40px;
	border-top: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	margin-left: 24px;
	color: var(--wp--preset--color--karbon);
	font-weight: 700;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
	background-color: transparent;
	color: var(--wp--preset--color--feuer-500);
}

/**
 * Utility-Menü (Karriere/Kontakt/Login ILIAS): eigene, in einer Box gruppierte
 * Liste unterhalb der Hauptnav (mobil) bzw. eigene Zeile über der Hauptnav
 * (Desktop, siehe Media-Query unten).
 */
.header-utility {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e5e5;
	background-color: var(--wp--preset--color--schnee-base);
	font-size: var(--wp--preset--font-size--small);
}

.header-utility-brand,
.utility-nav .nav-item {
	border-bottom: 1px solid #e5e5e5;
}

.header-utility .utility-nav {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-utility .utility-nav .nav-item:last-child {
	border-bottom: none;
}

.header-utility-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	color: var(--wp--preset--color--karbon);
	font-weight: 700;
	text-decoration: none;
}

.utility-nav .nav-link {
	display: block;
	padding: 16px 24px;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.header-utility a:hover,
.header-utility a:focus,
.header-utility .nav-link[aria-expanded="true"] {
	color: var(--wp--preset--color--feuer-500);
}

.header-utility .dropdown-item {
	padding-left: 48px;
}

@media (min-width: 992px) {
	.header-right {
		grid-template-columns: 1fr auto;
		row-gap: 0;
	}

	.header-toggler {
		display: none;
	}

	.header-collapse-links {
		grid-column: 1;
		grid-row: 1;
		display: block !important;
	}

	.header-badges {
		grid-column: 2;
		grid-row: 1;
	}

	.header-collapse-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		display: block !important;
	}

	.header-navbar {
		flex-direction: row;
		align-items: stretch;
		padding: 0;
	}

	.header-nav-search {
		order: 1;
		border-left: 1px solid #e5e5e5;
	}

	.header-nav-search a {
		height: 100%;
		border-radius: 0;
		padding: 0 24px;
	}

	.navbar-nav {
		flex-direction: row;
		border: none;
	}

	.navbar-nav .nav-item {
		border-bottom: none;
		border-left: 1px solid #e5e5e5;
	}

	.navbar-nav .nav-item:first-child {
		border-left: none;
	}

	.navbar-nav .nav-link {
		padding: 0 24px;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.dropdown-menu {
		position: absolute;
		width: auto;
		min-width: 240px;
		background-color: var(--wp--preset--color--schnee-white);
		border: 1px solid #e5e5e5;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.dropdown-item {
		padding: 16px 24px;
		border-top: none;
		border-left: none;
		margin-left: 0;
	}

	.dropdown-item + .dropdown-item {
		border-top: 1px solid #e5e5e5;
	}

	.header-utility {
		flex-direction: row;
		align-items: center;
		border: none;
		padding: 0 20px;
	}

	.header-utility .utility-nav {
		flex-direction: row;
	}

	.header-utility-brand,
	.utility-nav .nav-item {
		border-bottom: none;
		border-left: 1px solid #d9d9d9;
		padding-left: 16px;
		margin-left: 16px;
	}

	.header-utility-brand {
		padding: 10px 0;
		margin-left: 0;
		border-left: none;
	}

	.utility-nav .nav-link {
		padding: 10px 0;
	}

	.header-utility .dropdown-item {
		padding-left: 24px;
	}
}

/**
 * Kundenportal: Formulare & Pagination.
 *
 * .uni-form (uniplus-formularwesen) und .pagination-wrapper/.pagination/
 * .pagination-item (uniplus-base/inc/UniPagination.php, do_action('uni_pagination'))
 * werden von plattformweiten Plugins ausgegeben und erwarten Default-Styling
 * durch das Theme. Da uni-blocktheme nicht in der is_uni_base_20_theme()-Whitelist
 * steht, rendert UniPagination die Legacy-Variante (<li class="pagination-item">
 * statt Bootstraps <li class="page-item">) – Bootstraps eigenes .pagination
 * (Flex, kein List-Style) greift zwar automatisch, .pagination-item braucht aber
 * eigenes Styling.
 */

.uni-form {
	background-color: var(--wp--preset--color--surface);
	padding: 20px;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
}

.pagination-wrapper {
	display: flex;
	justify-content: center;
	margin: 24px 0;
}

.pagination-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	margin: 0 2px;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 4px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
}

.pagination-item a,
.pagination-item span {
	color: inherit;
	text-decoration: none;
}

.pagination-item:hover {
	background-color: var(--wp--preset--color--surface);
}

.pagination-item.active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/**
 * Kundenportal: Breadcrumb.
 *
 * .uni-breadcrump-menu/.uni-breadcrump-item werden von
 * uniplus-base/inc/UniplusBreadcrump.php ausgegeben (do_action('uni_breadcrump')),
 * ebenfalls über die Legacy-Variante _breadcrump_func(), da uni-blocktheme nicht in
 * der is_uni_base_20_theme()-Whitelist steht.
 */

.uni-breadcrump-menu {
	padding: 12px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.uni-breadcrump-menu p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.uni-breadcrump-item {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.uni-breadcrump-item:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* uniplus-base verdrahtet an mehreren Stellen (Pagination, Breadcrumb) feste
   FontAwesome-Klassen (fas fa-chevron-left/right) – FontAwesome ist in diesem
   Theme nicht geladen, daher reine CSS-Pfeile ohne zusätzliche Icon-Font-Abhängigkeit. */
.fa-chevron-left::before {
	content: "\2039";
}

.fa-chevron-right::before {
	content: "\203A";
}

/**
 * Button-Komponente (Bildungsakademien-Design).
 *
 * Bewusst eigene Klassen statt Bootstraps .btn-primary/.btn-secondary, da die
 * Designfarben (Feuer/Saphir) nicht mit Bootstraps Standardpalette übereinstimmen
 * und das Theme kein Sass-Build hat, um Bootstrap-Variablen zu überschreiben.
 * .btn (Bootstrap) liefert weiterhin Fokus-Ring/Reset, .btn-uni-* nur Farbe/Maße.
 */

.btn-uni {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 24px;
	border: 2px solid transparent;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--satoshi);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn-uni-sm {
	padding: 10px 20px;
}

.btn-uni-icon-only {
	padding: 12px;
}

.btn-uni-icon-only.btn-uni-sm {
	padding: 8px;
}

.btn-uni-primary {
	background-color: var(--wp--preset--color--feuer-500);
	border-color: var(--wp--preset--color--feuer-500);
	color: var(--wp--preset--color--schnee-white);
}

.btn-uni-primary:hover,
.btn-uni-primary:focus-visible {
	background-color: var(--wp--preset--color--feuer-700);
	border-color: var(--wp--preset--color--feuer-700);
	color: var(--wp--preset--color--schnee-white);
}

.btn-uni-primary-alt {
	background-color: var(--wp--preset--color--saphir-500);
	border-color: var(--wp--preset--color--saphir-500);
	color: var(--wp--preset--color--schnee-white);
}

.btn-uni-primary-alt:hover,
.btn-uni-primary-alt:focus-visible {
	background-color: var(--wp--preset--color--saphir-700);
	border-color: var(--wp--preset--color--saphir-700);
	color: var(--wp--preset--color--schnee-white);
}

.btn-uni-secondary {
	background-color: transparent;
	border-color: var(--wp--preset--color--feuer-500);
	color: var(--wp--preset--color--karbon);
}

.btn-uni-secondary:hover,
.btn-uni-secondary:focus-visible {
	border-color: var(--wp--preset--color--feuer-700);
	color: var(--wp--preset--color--karbon);
}

.btn-uni-secondary-alt {
	background-color: transparent;
	border-color: var(--wp--preset--color--saphir-500);
	color: var(--wp--preset--color--karbon);
}

.btn-uni-secondary-alt:hover,
.btn-uni-secondary-alt:focus-visible {
	border-color: var(--wp--preset--color--saphir-700);
	color: var(--wp--preset--color--karbon);
}

.btn-uni-tertiary {
	background-color: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
	color: var(--wp--preset--color--karbon);
}

.btn-uni-tertiary:hover,
.btn-uni-tertiary:focus-visible {
	opacity: 0.6;
	color: var(--wp--preset--color--karbon);
}

.btn-uni-link {
	background-color: transparent;
	border-color: transparent;
	padding: 0;
	color: var(--wp--preset--color--feuer-500);
}

.btn-uni-link:hover,
.btn-uni-link:focus-visible {
	color: var(--wp--preset--color--feuer-700);
}