/*
Theme Name: LVS Stommeln
Theme URI: https://www.lv-stommeln.de/
Author: LVS Stommeln
Description: Eigenständiges WordPress-Theme für den Leichtathletik-Verein Stommeln e.V. Angelehnt an die Vereinsfarben Blau und Gelb der aktuellen Vereinskollektion, mit mehrstufigem Dropdown-Menü, breitem Kopfbild und klarer Inhaltsstruktur.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lvs-stommeln
*/

/* ==========================================================================
   Design-Tokens
   ========================================================================== */
:root{
	--lvs-navy:        #16324A;   /* dunkles Vereinsblau, Header/Footer/Nav */
	--lvs-navy-light:  #1E4A6B;   /* Hover-/Sekundärflächen */
	--lvs-yellow:      #F5B300;   /* Vereinsgelb, Akzent & CTA */
	--lvs-yellow-dark: #D99900;
	--lvs-bg:          #FAFAF7;   /* Seitenhintergrund, warmes Off-White */
	--lvs-surface:     #FFFFFF;   /* Karten/Boxen */
	--lvs-line:        #E4E1D8;
	--lvs-text:        #1D2530;
	--lvs-text-muted:  #5B6572;

	--font-display: 'Oswald', 'Arial Narrow', sans-serif;
	--font-body:    'Source Sans 3', 'Segoe UI', sans-serif;

	--radius: 4px;
	--maxw: 1180px;
}

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

html{ scroll-behavior: smooth; }

body{
	margin:0;
	background: var(--lvs-bg);
	color: var(--lvs-text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: var(--lvs-navy-light); text-decoration: none; }
a:hover{ color: var(--lvs-yellow-dark); }

h1, h2, h3, h4{
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--lvs-navy);
	line-height: 1.15;
	margin: 1.4em 0 .5em;
}
h1{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); text-transform: uppercase; letter-spacing: .02em; }
h2{
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	text-transform: uppercase;
	padding-bottom: .35em;
	border-bottom: 3px solid var(--lvs-yellow);
	display: inline-block;
}
h3{ font-size: 1.2rem; color: var(--lvs-navy-light); }

.container{
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

table{ border-collapse: collapse; width: 100%; margin: 1.2em 0; }
th, td{ border: 1px solid var(--lvs-line); padding: .6em .8em; text-align: left; }
th{ background: var(--lvs-navy); color: #fff; font-family: var(--font-display); font-weight: 500; letter-spacing: .03em; }
tr:nth-child(even) td{ background: #F3F1E9; }

/* Skip link */
.skip-link{
	position:absolute; left:-9999px; top:0; background:var(--lvs-yellow); color:var(--lvs-navy);
	padding:10px 16px; z-index:10000; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* ==========================================================================
   Site Header
   ========================================================================== */
.site-header{
	background: var(--lvs-surface);
	border-bottom: 1px solid var(--lvs-line);
}
.site-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 24px;
	padding: 18px 24px;
	max-width: var(--maxw);
	margin: 0 auto;
}
.site-branding{
	display:flex;
	align-items:center;
	gap: 16px;
}
.site-branding img{ max-height: 64px; width:auto; }
.site-branding .site-title{
	font-family: var(--font-display);
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--lvs-navy);
	margin:0;
}
.site-branding .site-title a{ color: inherit; }
.site-branding .site-tagline{
	margin:2px 0 0;
	font-size: .85rem;
	color: var(--lvs-text-muted);
}

/* ==========================================================================
   Primary Navigation (mehrstufig, wie im Original)
   ========================================================================== */
.primary-nav{ background: var(--lvs-navy); position: relative; }
.primary-nav .container{ display:flex; align-items:center; }

.menu-toggle{
	display:none;
	align-items:center;
	gap: 10px;
	background:none; border:0; color:#fff; font-family:var(--font-display);
	text-transform:uppercase; letter-spacing:.05em; font-size:.95rem;
	padding: 14px 4px; cursor:pointer;
	margin-left:auto;
}
.menu-toggle__bars{
	display:flex; flex-direction:column; justify-content:center; gap:4px;
	width: 22px; height: 16px;
}
.menu-toggle__bars span{
	display:block; height:2px; width:100%; background:#fff; border-radius:1px;
	transition: transform .2s ease, opacity .2s ease;
}
.primary-nav.is-open .menu-toggle__bars span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.primary-nav.is-open .menu-toggle__bars span:nth-child(2){ opacity:0; }
.primary-nav.is-open .menu-toggle__bars span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Akkordeon-Pfeil für Untermenü-Eltern (nur mobil aktiv, siehe Media Query) */
.menu-item-has-children > a{ position:relative; }
.submenu-arrow{
	display:none;
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	width:32px; height:32px; align-items:center; justify-content:center;
	background:none; border:0; color:#fff; cursor:pointer;
}
.submenu-arrow::before{
	content:"";
	width:8px; height:8px;
	border-right:2px solid currentColor; border-bottom:2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.sub-open > .submenu-arrow::before{ transform: rotate(-135deg); }


.primary-nav ul{
	list-style:none; margin:0; padding:0;
	display:flex; flex-wrap:wrap;
}
.primary-nav > .container > ul{ width:100%; }
.primary-nav li{ position:relative; }

.primary-nav a{
	display:block;
	padding: 15px 16px;
	color:#fff;
	font-family: var(--font-display);
	font-size: .92rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a{
	color:#fff;
	border-bottom-color: var(--lvs-yellow);
	background: var(--lvs-navy-light);
}

/* Dropdown Level 2+ */
.primary-nav ul ul{
	display:none;
	position:absolute; left:0; top:100%;
	min-width: 260px;
	background: var(--lvs-navy-light);
	box-shadow: 0 8px 18px rgba(0,0,0,.18);
	flex-direction:column;
	z-index: 200;
}
.primary-nav ul ul ul{ top:0; left:100%; }
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul{ display:flex; }
.primary-nav ul ul a{
	padding: 12px 18px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: .85rem;
	letter-spacing: .02em;
}
.primary-nav ul ul a:hover{ background: var(--lvs-yellow); color: var(--lvs-navy); border-bottom-color: transparent; }

/* ==========================================================================
   Hero / Kopfbild
   ========================================================================== */
.site-hero{
	position: relative;
	background: var(--lvs-navy);
	overflow: hidden;
}
.site-hero img{
	width:100%;
	height: clamp(160px, 26vw, 340px);
	object-fit: cover;
	opacity: .92;
}
/* Bahnen-Stripe als Signature-Element: erinnert an Lauf-/Sprintbahnen */
.site-hero::after{
	content:"";
	position:absolute; left:0; right:0; bottom:0; height:10px;
	background: repeating-linear-gradient(
		90deg,
		var(--lvs-yellow) 0 60px,
		var(--lvs-navy) 60px 66px
	);
}
.site-hero__title{
	background: var(--lvs-navy);
	padding: 14px 0;
}
.site-hero__title h1{
	color:#fff;
	margin:0;
	padding-left: 16px;
	border-left: 6px solid var(--lvs-yellow);
}

/* ==========================================================================
   Content
   ========================================================================== */
.site-content{
	max-width: var(--maxw);
	margin: 40px auto;
	padding: 0 24px;
	display:grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
.entry-content .container,
.entry-content{ }

article.page,
article.post{
	background: var(--lvs-surface);
	border: 1px solid var(--lvs-line);
	border-radius: var(--radius);
	padding: 32px clamp(20px, 4vw, 48px);
}

.entry-content p{ margin: 0 0 1.1em; }
.entry-content ul, .entry-content ol{ padding-left: 1.4em; margin: 0 0 1.1em; }
.entry-content li{ margin-bottom: .35em; }

.entry-content a{
	border-bottom: 1px solid var(--lvs-yellow);
}
.entry-content a:hover{ background: var(--lvs-yellow); color: var(--lvs-navy); border-bottom-color: var(--lvs-yellow); }

/* PDF-/Download-Links etwas hervorheben, wie im Original */
.entry-content a[href$=".pdf"]{
	display:inline-flex; align-items:center; gap:.5em;
	background: #F3F1E9; border: 1px solid var(--lvs-line); border-bottom:1px solid var(--lvs-line);
	padding: .4em .8em; border-radius: var(--radius); font-size:.92em;
}
.entry-content a[href$=".pdf"]:hover{ background: var(--lvs-yellow); }

/* Bildergalerien im Text (Nikolausaktion etc.) */
.entry-content img{
	border-radius: var(--radius);
}

blockquote{
	border-left: 4px solid var(--lvs-yellow);
	margin: 1.4em 0; padding: .4em 0 .4em 1.2em;
	color: var(--lvs-text-muted); font-style: italic;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
	background: var(--lvs-navy);
	color: #D9E2EA;
	margin-top: 48px;
}
.site-footer__inner{
	max-width: var(--maxw); margin:0 auto; padding: 36px 24px 24px;
	display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 28px;
}
.site-footer h4{ color:#fff; font-size:1rem; margin-top:0; }
.site-footer a{ color:#D9E2EA; }
.site-footer a:hover{ color: var(--lvs-yellow); }
.site-footer__bottom{
	border-top: 1px solid rgba(255,255,255,.12);
	text-align:center; padding: 16px; font-size:.85rem; color:#9FB0BE;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px){
	.menu-toggle{ display:flex; }

	.primary-nav .container{ position:relative; }

	/* Panel schwebt über der Seite statt sie zu verschieben/aufzublähen.
	   WICHTIG: display:block statt flex – so kann bei Höhenüberlauf niemals
	   in eine zweite Spalte umgebrochen werden (das war der eigentliche Bug:
	   flex-direction:column + geerbtes flex-wrap:wrap + feste Höhe = Spalten). */
	.primary-nav > .container > ul{
		display:block;
		position:fixed;
		top: 0; right: 0;
		width: min(320px, 86vw);
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		margin:0;
		background: var(--lvs-navy);
		box-shadow: -8px 0 24px rgba(0,0,0,.25);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		transition: transform .28s ease;
		z-index: 999;
		padding: 72px 0 24px;
	}
	.primary-nav.is-open > .container > ul{ transform: translateX(0); }

	/* Abdunkelung hinter dem Panel */
	.primary-nav::before{
		content:"";
		position: fixed; inset:0;
		background: rgba(10,20,30,.5);
		opacity:0; visibility:hidden;
		transition: opacity .25s ease;
		z-index: 998;
	}
	.primary-nav.is-open::before{ opacity:1; visibility:visible; }

	.menu-toggle{ position: relative; z-index: 1000; }

	/* Jede Ebene ist eine ganz normale Blockliste – keine Flexbox, kein
	   Spaltenumbruch möglich, egal wie lang der Inhalt wird. */
	.primary-nav ul,
	.primary-nav ul ul{
		display:block;
		width: 100%;
		flex-wrap: initial;
	}
	.primary-nav li{
		display:block;
		width: 100%;
	}
	.primary-nav ul ul{
		display:none;
		position:static;
		box-shadow:none;
		min-width:0;
		background: rgba(0,0,0,.15);
	}
	.primary-nav li.sub-open > ul{ display:block; }
	.primary-nav li:hover > ul,
	.primary-nav li:focus-within > ul{ display:none; }
	.primary-nav li.sub-open:hover > ul,
	.primary-nav li.sub-open:focus-within > ul{ display:block; }

	.primary-nav ul ul a{ padding-left: 32px; }
	.primary-nav ul ul ul a{ padding-left: 48px; }

	.primary-nav a{
		padding: 13px 20px;
		white-space: normal;
		word-break: break-word;
	}
	.submenu-arrow{ display:flex; }

	.site-hero__title h1{ font-size: 1.4rem; padding: 8px 14px; }
}

/* Scroll-Lock, wenn das mobile Menü offen ist (Klasse wird per JS auf <html> gesetzt) */
html.lvs-menu-open{ overflow: hidden; }