/*
Theme Name: DLB Theme
Description: Classic theme ported from the original dielehrerberater.de site (colors, typography, header/hero/footer structure), built to host the Erste-Hilfe-Kurse plugin.
Author: Die Lehrer Berater
Version: 0.1.0
Text Domain: dlb-theme
*/

:root {
	--dlb-blue: #1368AE;
	--dlb-blue-light: #71A4CE;
	--dlb-blue-pale: #F1F6FA;
	--dlb-blue-paler: #CDDFEE;
	--dlb-orange: #FDA91F;
	--dlb-orange-dark: #F56314;
	--dlb-green: #8DAB7F;
	--dlb-text: #4E4A4A;
	--dlb-font: "PT Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--dlb-font);
	color: var(--dlb-text);
	background: #fff;
	line-height: 1.5;
}

a {
	color: var(--dlb-blue);
}

.frame {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ---------- Header ---------- */

header {
	background: #fff;
	border-bottom: 3px solid var(--dlb-blue);
}

header .frame {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

header .title {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

header .title img {
	max-height: 50px;
}

header .contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
	color: var(--dlb-text);
}

header .contact ul li {
	margin: 0.15rem 0;
}

header .contact a {
	color: var(--dlb-text);
	text-decoration: none;
}

header nav.desktop {
	width: 100%;
	margin-top: 0.75rem;
	border-top: 1px solid var(--dlb-blue-paler);
	padding-top: 0.5rem;
}

header nav.desktop > ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

header nav.desktop > ul > li > a {
	color: var(--dlb-blue);
	font-weight: bold;
	text-decoration: none;
	padding: 0.25rem 0;
	display: inline-block;
}

header nav.desktop > ul > li > a.current,
header nav.desktop > ul > li > a:hover {
	border-bottom: 2px solid var(--dlb-orange);
}

header nav.mobile {
	display: none;
}

@media (max-width: 900px) {
	header nav.desktop {
		display: none;
	}
	header nav.mobile {
		display: block;
		width: 100%;
	}
	header nav.mobile ul {
		list-style: none;
		padding: 0;
	}
}

/* ---------- Hero ---------- */

.dlb-hero-element {
	position: relative;
	color: #fff;
	background: var(--dlb-blue) center/cover no-repeat;
	overflow: hidden;
}

.dlb-hero-element .frame-aligner {
	position: relative;
	z-index: 2;
	padding: 4rem 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

.dlb-hero-element h1 {
	font-size: 2.5rem;
	margin: 0 0 0.5rem;
}

.dlb-hero-element h2 {
	font-size: 1.25rem;
	font-weight: normal;
	margin: 0 0 1.5rem;
}

.dlb-hero-element picture {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dlb-hero-element picture::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(19, 104, 174, 0.85) 0%, rgba(19, 104, 174, 0.35) 100%);
}

.dlb-hero-element picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta a,
.cta.book a {
	display: inline-block;
	background: var(--dlb-orange);
	color: #fff;
	font-weight: bold;
	padding: 0.6rem 1.2rem;
	border-radius: 4px;
	text-decoration: none;
}

.cta a:hover,
.cta.book a:hover {
	background: var(--dlb-orange-dark);
}

/* ---------- Quicknav ---------- */

.dlb-quicknav {
	background: var(--dlb-blue-pale);
	padding: 0.75rem 0;
}

.dlb-quicknav ul {
	list-style: none;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.dlb-quicknav li.highlight {
	font-weight: bold;
	color: var(--dlb-blue);
}

.dlb-quicknav a {
	text-decoration: none;
	color: var(--dlb-text);
}

/* ---------- Text / box sections ---------- */

.dlb-text-element {
	padding: 2.5rem 0;
}

.dlb-text-element.color-bg-white {
	background: #fff;
}

.dlb-boxbackground-element {
	background-color: var(--dlb-blue-pale);
	background-size: cover;
	background-position: center;
	padding: 2.5rem 0;
}

.dlb-boxbackground-element .box {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	padding: 1.5rem 2rem;
	max-width: 640px;
}

.faq-question {
	font-weight: bold;
	color: var(--dlb-blue);
	margin-top: 1.25rem;
	margin-bottom: 0.25rem;
}

.faq-answer {
	margin-top: 0;
}

/* ---------- Event listing (structural rules live in the plugin's CSS;
   these are the color/type rules that make it match the theme) ---------- */

.dlb-event-element {
	padding: 2rem 0 3rem;
}

.events-filter__main ul li a {
	background: var(--dlb-blue-pale);
	color: var(--dlb-blue);
}

.events-filter__main ul li.active a {
	background: var(--dlb-blue);
	color: #fff;
}

.event {
	background: var(--dlb-blue-pale);
	border: 1px solid var(--dlb-blue-paler);
}

.event h5 {
	color: var(--dlb-blue);
}

.event .cta.book.sold-out {
	background: #ccc;
	color: #666;
}

/* ---------- Footer ---------- */

footer {
	background: var(--dlb-blue);
	color: #fff;
	margin-top: 3rem;
}

footer a {
	color: #fff;
}

footer .sitemap {
	padding: 2.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

footer .sitemap > .frame > ul {
	list-style: none;
	display: flex;
	gap: 2.5rem;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}

footer .sitemap ul ul {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

footer .sitemap > .frame > ul > li > a {
	font-weight: bold;
	text-decoration: none;
}

footer .company {
	padding: 2rem 0;
}

footer .company .frame {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}

footer .company img {
	max-height: 40px;
	filter: brightness(0) invert(1);
}

footer .info {
	background: rgba(0, 0, 0, 0.15);
	padding: 1rem 0;
	font-size: 0.85rem;
}

footer .info ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}