/*
Theme Name: Baar-Flieger
Theme URI: https://baar-flieger.de
Author: Baar-Flieger Fürstenberg-Geisingen e.V.
Description: Modernes Block-Theme mit Live-Startplatz-Kacheln, Brand-Blau und klarer Typografie.
Version: 1.0.2
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baar-flieger
*/

/* --- Header & Navigation --- */
.bf-site-header {
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bf-site-header .wp-block-navigation-item__content,
.bf-site-header .wp-block-navigation-item__content:visited {
	color: rgba(255, 255, 255, 0.94) !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.bf-site-header .wp-block-navigation-item__content:hover {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.bf-site-header .wp-block-navigation__responsive-container-open::before {
	filter: brightness(0) invert(1);
}

/* --- Live-Kacheln --- */
.bf-live-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: var(--wp--preset--spacing--50, 1.5rem);
	margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

.bf-startplatz-card {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: 20px;
	overflow: hidden;
	box-shadow:
		0 4px 6px -1px rgba(15, 23, 42, 0.08),
		0 20px 40px -12px rgba(15, 53, 87, 0.35);
	background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bf-startplatz-card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 8px 16px -4px rgba(15, 23, 42, 0.12),
		0 24px 48px -14px rgba(15, 53, 87, 0.42);
}

.bf-startplatz-card__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #1e293b;
}

.bf-startplatz-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.bf-startplatz-card__title {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #0f172a;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.bf-startplatz-card__weather {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 6px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.32);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.bf-startplatz-card__weather iframe {
	display: block;
	width: 180px;
	height: 120px;
	border: 0;
}

@media (max-width: 600px) {
	.bf-startplatz-card__weather iframe {
		width: 158px;
		height: 105px;
	}
}

/* --- Hero --- */
.bf-hero {
	position: relative;
	padding: clamp(3.25rem, 9vw, 6.5rem) var(--wp--preset--spacing--50, 1rem);
	border-radius: 0 0 28px 28px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 120% 80% at 20% 20%, rgba(56, 189, 248, 0.18) 0%, transparent 55%),
		linear-gradient(145deg, #1a5f96 0%, #0d2840 55%, #0a1f33 100%);
	color: #fff;
}

.bf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.9;
	pointer-events: none;
}

.bf-hero .bf-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 38rem;
}

.bf-hero h1 {
	font-size: clamp(1.85rem, 4.2vw, 2.65rem);
	line-height: 1.12;
	margin-bottom: 0.85rem;
	letter-spacing: -0.03em;
	font-weight: 700;
	text-wrap: balance;
}

.bf-hero p.lead {
	font-size: 1.125rem;
	line-height: 1.55;
	opacity: 0.94;
	margin: 0;
	max-width: 36em;
}

/* --- Abschnitte --- */
.bf-section-live {
	background: linear-gradient(180deg, var(--wp--preset--color--surface, #f4f7fb) 0%, #ffffff 100%);
	border-radius: 0 0 24px 24px;
	margin-top: -8px;
	padding-top: 0.5rem;
}

main h2.wp-block-heading {
	position: relative;
	padding-bottom: 0.35rem;
}

main h2.wp-block-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3rem;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary, #1a5f96), transparent);
}

/* --- Beitrags-Karten --- */
main .wp-block-query .wp-block-post-template .wp-block-group.has-background {
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	border: 1px solid rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

main .wp-block-query .wp-block-post-template .wp-block-group.has-background:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}