/* SV Auingen – Custom Theme CSS
   Ergänzungen zu theme.json für Dinge, die der Block-Editor nicht abdeckt */

/* ─── Basis & Reset ──────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Sticky Footer ──────────────────────────────────────────────────────── */
/* .wp-site-blocks ist der FSE-Hauptcontainer, der Header, Main und Footer   */
/* umschließt. Flex-Spalte + min-height 100vh → Main dehnt sich aus,         */
/* Footer klebt immer am unteren Bildschirmrand.                             */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* ─── Skip Link (Barrierefreiheit) ───────────────────────────────────────── */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 9999;
	background: var(--wp--preset--color--sva-blau);
	color: #fff;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: 0 0 6px 0;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.sva-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 12px rgba(28, 35, 48, 0.2);
	padding-top: 3px; /* Platz für Gold-Leiste */
}

/* ─── NEU #1: Gold-Leiste ────────────────────────────────────────────────── */
.sva-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--sva-gold);
	z-index: 1;
}

.sva-header .wp-block-site-title a {
	color: #fff !important;
	text-decoration: none;
}

.sva-header .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.15s ease;
}

.sva-header .wp-block-navigation a:hover,
.sva-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--sva-gold);
}

/* ─── NEU #6: Navigation Slide-In-Unterstrich in Gold ───────────────────── */
.sva-header .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 3px;
}

.sva-header .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--sva-gold);
	border-radius: 1px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
	pointer-events: none;
}

.sva-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ─── NEU #8: Shop-Button im Header ─────────────────────────────────────── */
.sva-header-shop .wp-block-button__link {
	background-color: var(--wp--preset--color--sva-gold) !important;
	color: #fff !important;
	transition: background-color 0.15s ease, transform 0.12s ease !important;
	white-space: nowrap;
}

.sva-header-shop .wp-block-button__link:hover {
	background-color: #b58f00 !important;
	transform: translateY(-1px) !important;
}

/* Mobile-Menü-Icon weiß */
.sva-header .wp-block-navigation__responsive-container-open,
.sva-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* ─── Post Cards ─────────────────────────────────────────────────────────── */

.sva-post-card {
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.25s ease;
	/* ─── NEU #4: Transparentes Inset-Shadow vorhalten für flüssige Transition */
	box-shadow: 0 1px 4px rgba(28, 35, 48, 0.07), inset 0 0px 0 0 rgba(211, 166, 0, 0);
}

.sva-post-card:hover {
	transform: translateY(-4px);
	/* Gold-Oberkante (3px, inset) + stärkerer Schatten – folgt border-radius */
	box-shadow: 0 8px 24px rgba(28, 35, 48, 0.13), inset 0 3px 0 0 rgba(211, 166, 0, 1);
}

.sva-post-card .wp-block-post-title a {
	color: #1c2330;
	text-decoration: none;
}

.sva-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--sva-blau);
}

.sva-post-card .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--sva-blau);
	font-weight: 600;
	font-size: 0.85rem;
}

/* Karte ohne Beitragsbild: trotzdem ordentlich aussehen */
.sva-post-card .wp-block-post-featured-image:empty,
.sva-post-card .wp-block-post-featured-image a:empty {
	display: none;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.sva-hero .wp-block-cover__background {
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--sva-blau-dunkel) 0%,
		var(--wp--preset--color--sva-blau) 100%
	);
}

/* ─── Inhalt: Typografie ─────────────────────────────────────────────────── */

.wp-block-post-content p,
.wp-block-post-content li {
	max-width: 72ch;
}

.wp-block-post-content h2,
.wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--60);
}

/* Gold-Akzentlinie unter Abschnittsüberschriften (opt-in via Klasse) */
.sva-headline-accent {
	position: relative;
	padding-bottom: 12px;
}

.sva-headline-accent::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--wp--preset--color--sva-gold);
	border-radius: 2px;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

/* ─── Download-Items ─────────────────────────────────────────────────────── */

.sva-download-item {
	transition: background-color 0.15s ease;
}

.sva-download-item:hover {
	background-color: var(--wp--preset--color--sva-blau-hell);
	border-radius: 6px;
}

/* ─── Kontakt-Karte ──────────────────────────────────────────────────────── */

.sva-kontakt-karte {
	box-shadow: 0 1px 4px rgba(28, 35, 48, 0.07);
	transition: box-shadow 0.2s ease;
}

.sva-kontakt-karte:hover {
	box-shadow: 0 4px 16px rgba(28, 35, 48, 0.12);
}

.sva-kontakt-foto img {
	object-fit: cover;
	width: 80px;
	height: 80px;
}

/* ─── Mannschaftsfoto ────────────────────────────────────────────────────── */

.sva-team-foto img {
	width: 100%;
	height: auto;
	display: block;
}

/* ─── Suchergebnisse ─────────────────────────────────────────────────────── */

.sva-search-result .wp-block-post-featured-image {
	flex-shrink: 0;
}

.sva-search-result .wp-block-post-featured-image img {
	object-fit: cover;
	border-radius: 6px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.wp-block-query-pagination {
	gap: 4px;
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 6px;
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--wp--preset--color--sva-blau);
	background: var(--wp--preset--color--sva-weiss);
	border: 1px solid var(--wp--preset--color--sva-blau-hell);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination-numbers a:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
	background: var(--wp--preset--color--sva-blau);
	color: #fff;
	border-color: var(--wp--preset--color--sva-blau);
}

.wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--sva-blau);
	color: #fff;
	border-color: var(--wp--preset--color--sva-blau);
}

/* ─── NEU #2: Diagonaler Übergang Hero → nächste Sektion ────────────────── */
/* Wird als .sva-hero-divider Group Block direkt nach dem Hero eingefügt    */
.sva-hero-divider {
	position: relative;
	height: 56px;
	margin-top: -56px;
	z-index: 2;
	pointer-events: none;
	background: transparent !important;
	padding: 0 !important;
	min-height: unset !important;
}

.sva-hero-divider::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #ffffff; /* muss zur Hintergrundfarbe der nächsten Sektion passen */
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

/* ─── NEU #7: Wappen-Wasserzeichen im Footer ────────────────────────────── */
.sva-footer {
	position: relative;
}

.sva-footer::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 220px;
	height: 270px;
	background: url('../images/Wappen-Gold-gr.png') no-repeat bottom right;
	background-size: contain;
	opacity: 0.06;
	pointer-events: none;
}

.sva-footer .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color 0.15s ease;
}

.sva-footer .wp-block-navigation a:hover {
	color: #fff;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.wp-block-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 599px) {
	.sva-header .wp-block-site-title {
		font-size: 0.95rem !important;
	}
}

/* ─── Druck ──────────────────────────────────────────────────────────────── */

@media print {
	.sva-header,
	.sva-footer,
	.wp-block-navigation {
		display: none !important;
	}

	.wp-block-post-content {
		max-width: 100% !important;
	}
}