/*
Theme Name: VC Döttingen ALT
Theme URI: https://volleydoettingen.ch/
Author: Patrick Sutter
Description: 1:1-Nachbau des bisherigen Designs von volleydoettingen.ch (vormals OceanWP + Elementor Pro) als eigenständiges, schlankes WordPress-Theme. Ziel: identischer Look ohne Elementor-Abhängigkeit. Inhalte sind in den Templates fest hinterlegt.
Version: 1.1.1
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: vcd-alt
*/

/* ============================================================
   DESIGN-TOKENS  (aus dem Original extrahiert)
   ============================================================ */
:root{
	--green:        #6EBC1D;   /* Akzent / Header-Kante / Trennlinie   */
	--green-hover:  #00ce1b;   /* Dropdown-Hover                       */
	--nav:          #54595f;   /* Navigationstext (grau)              */
	--nav-active:   #FF0202;   /* Navigation aktiv/hover (rot)        */
	--panel:        #30475E;   /* dunkles Panel hinter dem Inhalt     */
	--page-bg:      #0B0B0B;   /* Seitenhintergrund (fast schwarz)    */
	--heading:      #FFFFFF;   /* Überschriften (Nanum Gothic)        */
	--text:         #FFFFFF;   /* Fliesstext auf dem Panel            */
	--yellow:       #F2B705;   /* Vorstand-Unterstrich                */
	--header-bg:    rgba(255,255,255,0.87); /* #FFFFFFDE             */
	--maxw:         1280px;
	--font-head:    "Nanum Gothic", sans-serif;
	--font-body:    "Poppins", sans-serif;
	--font-display: "Oswald", sans-serif;
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
	margin:0;
	font-family:var(--font-body);
	font-size:17px;
	font-weight:300;
	line-height:1.6;
	color:var(--text);
	background:var(--page-bg);
	overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6{
	font-family:var(--font-head);
	color:var(--heading);
	font-weight:600;
	line-height:1.4;
	margin:0 0 .6em;
}
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; }

.skip-link{ position:absolute; left:-9999px; top:auto; background:#fff; color:#000; padding:8px 16px; z-index:1000; }
.skip-link:focus{ left:8px; top:8px; }

/* ============================================================
   HEADER  (weiss, halbtransparent, grüne Unterkante, sticky)
   ============================================================ */
.site-header{
	position:sticky; top:0; z-index:100;
	background:var(--header-bg);
	-webkit-backdrop-filter:saturate(120%) blur(2px);
	backdrop-filter:saturate(120%) blur(2px);
	border-bottom:4px solid var(--green);
	box-shadow:0 0 24px rgba(0,0,0,0.15);
}
.header-inner{
	max-width:var(--maxw); margin:0 auto; padding:0 20px;
	display:grid; grid-template-columns:25% 50% 25%; align-items:center;
}
.site-logo{ text-align:right; padding-right:24px; }
.site-logo img{ width:120px; height:auto; display:inline-block; }

.main-nav{ display:flex; justify-content:center; }
.main-nav > ul{ display:flex; list-style:none; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
.main-nav li{ position:relative; }
.main-nav a{
	display:block; font-family:var(--font-head); font-size:17px; font-weight:600;
	text-transform:uppercase; letter-spacing:.2px; color:var(--nav);
	padding:36px 14px; transition:color .2s ease; white-space:nowrap;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav a.active{ color:var(--nav-active); }

.main-nav .sub-menu{
	position:absolute; left:0; top:100%; list-style:none; min-width:200px;
	background:#f2f2f2; box-shadow:0 8px 24px rgba(0,0,0,.18);
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:50;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.main-nav .sub-menu a{ padding:12px 18px; font-family:var(--font-body); font-weight:500; font-size:15px; text-transform:none; letter-spacing:0; color:#000; }
.main-nav .sub-menu a:hover{ color:var(--green-hover); background:#ededed; }
.menu-has-children > a::after{ content:"\25BE"; font-size:.7em; margin-left:6px; vertical-align:middle; }

.menu-toggle{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:10px; color:#000; }
.menu-toggle svg{ width:30px; height:30px; display:block; }

/* ============================================================
   LAYOUT / PANELS
   ============================================================ */
.page-bg{ background:var(--page-bg); }
.panel{ background:var(--panel); max-width:var(--maxw); margin:0 auto; padding:55px 30px 70px; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 30px; }

/* Spalten-Layouts mit durchgehender grüner Trennlinie rechts. */
.split-home,
.split-side,
.split-verein{ display:grid; gap:30px; align-items:stretch; }
.split-home   { grid-template-columns:minmax(0,1fr) 120px; }   /* Home / Kontakt: schmale Linie aussen */
.split-side   { grid-template-columns:minmax(0,1fr) 320px; }   /* Team / Geschichte / Vorstand        */
.split-verein { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } /* Verein: Liste + grosses Bild   */

.accent-col{ border-left:2px solid var(--green); }
.side-col{ border-left:2px solid var(--green); padding-left:32px; }

/* Überschriften */
.page-title{
	font-family:var(--font-head); font-weight:300;
	font-size:42px; line-height:1.45; letter-spacing:.58px;
	color:var(--heading); text-align:center; margin:0 0 .5em;
}
.lead{ font-family:var(--font-body); font-weight:400; font-size:20px; color:var(--heading); text-align:center; margin:0 0 1.6em; }
.side-title{ font-family:var(--font-head); font-weight:700; font-size:21px; color:var(--heading); margin:0 0 .7em; }
.section-title{ font-family:var(--font-head); font-weight:600; font-size:24px; color:var(--heading); margin:1.2em 0 .6em; }
.entry-content{ color:var(--text); }

.rounded{ border-radius:45px; overflow:hidden; }
.rounded img{ border-radius:45px; display:block; width:100%; }

/* Offene Kreis-Bullets (wie Original) */
.circle-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:0 0 22px; }
.circle-list li{ display:flex; align-items:center; gap:12px; font-size:17px; color:var(--text); }
.circle-list li::before{
	content:""; flex:0 0 auto; width:13px; height:13px;
	border:2px solid currentColor; border-radius:50%;
}

/* Ball-Icon im Seitenpanel (zentriert, Link zur Liga-Seite) */
.ball-link{ display:block; width:max-content; margin:2px auto 20px; color:#fff; transition:color .2s ease, transform .2s ease; }
.ball-link:hover{ color:var(--green); transform:scale(1.06); }
.ball-icon{ display:block; width:52px; height:52px; margin:2px auto 20px; color:#fff; }
.ball-link .ball-icon{ margin:0; }

/* ============================================================
   STARTSEITE / KONTAKT  (zentriert)
   ============================================================ */
.centered-col{ text-align:center; }
.home-hero{ margin-top:18px; }

/* ============================================================
   TEAMS
   ============================================================ */
.team-photo{ margin:6px 0 22px; }
.roster p{ margin:.45em 0; }
.roster .label{ color:var(--heading); font-weight:600; }

.coach{ margin:6px 0 0; }
.coach .coach-name{ font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--heading); }
.coach .coach-role{ color:var(--heading); font-weight:400; }
.side-hr{ border:0; border-top:1px solid rgba(255,255,255,.45); margin:20px 0; }
.training-info p{ margin:.15em 0; }
.training-info .label{ color:var(--heading); font-weight:600; margin-top:.9em; }

/* ============================================================
   VEREIN  (Pfeil-Linkliste + Bild)
   ============================================================ */
.linklist{ list-style:none; display:flex; flex-direction:column; gap:30px; margin-top:34px; }
.linklist a{ display:flex; align-items:center; gap:20px; font-family:var(--font-head); font-weight:400; font-size:26px; color:var(--heading); transition:color .2s ease; }
.linklist a:hover{ color:var(--green); }
.linklist .icn{ width:34px; height:34px; flex:0 0 auto; }
.verein-img{ align-self:start; }
.verein-img img{ width:100%; border-radius:4px; }

/* ============================================================
   GESCHICHTE
   ============================================================ */
.history-text{ text-align:center; }
.history-text p{ margin:0 0 1.2em; }
.history-aside img{ width:100%; border-radius:4px; margin-top:8px; }

/* ============================================================
   VORSTAND
   ============================================================ */
.board-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin:28px 0 0; }
.vmember{ position:relative; overflow:hidden; border-bottom:4px solid var(--yellow); }
.vmember img{ width:100%; height:100%; object-fit:cover; display:block; }
.vmember .voverlay{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center;
	background:rgba(25,45,68,.5); color:#fff; padding:14px;
	transition:background .4s ease;
}
.vmember .vname{ font-family:var(--font-head); font-weight:600; font-size:23px; line-height:1.2; transition:opacity .35s ease; }
.vmember .vrole{ font-family:var(--font-body); font-weight:300; font-size:15px; margin-top:8px; transition:opacity .35s ease; }
/* Hover: Overlay wird klar, Name/Funktion blenden aus (wie Elementor-Flip-Box „fade") */
.vmember:hover .voverlay{ background:rgba(25,45,68,0); }
.vmember:hover .vname,
.vmember:hover .vrole{ opacity:0; }

.reps{ text-align:center; }
.reps .side-title{ text-align:center; }
.reps .rep-team{ font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--heading); margin:18px 0 4px; }
.reps .rep-name{ margin:0; }

/* ============================================================
   NEWS
   ============================================================ */
.news-current{ margin:18px 0 32px; text-align:center; }
.news-current h3{ font-size:22px; color:var(--heading); margin-bottom:.3em; }
.archive-list{ list-style:none; display:flex; flex-direction:column; gap:2px; max-width:560px; margin:0 auto; }
.archive-list li a{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:rgba(255,255,255,.04); border-left:3px solid var(--green); transition:background .2s ease; }
.archive-list li a:hover{ background:rgba(110,188,29,.15); }
.archive-list li a::before{ content:"\1F4C4"; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-mail{ font-size:22px; font-weight:600; }
.contact-mail a{ color:var(--green); }
.contact-mail a:hover{ color:var(--green-hover); }
.contact-address{ margin:14px 0 26px; line-height:1.9; }
.map-embed{ border:0; width:100%; height:330px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--page-bg); color:#8a929b; text-align:center; font-size:12px; padding:26px 20px; }

/* Scroll-to-top */
.scroll-top{ position:fixed; right:20px; bottom:20px; width:42px; height:42px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; z-index:90; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.scroll-top.show{ opacity:1; pointer-events:auto; }
.scroll-top:hover{ background:var(--green-hover); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
	.page-title{ font-size:34px; }
	.main-nav a{ font-size:13px; padding:24px 10px; }
	.site-logo{ padding-right:12px; }
	.split-side{ grid-template-columns:minmax(0,1fr) 260px; }
}

@media (max-width:767px){
	.header-inner{ grid-template-columns:1fr auto; padding:14px 18px; }
	.site-logo{ text-align:left; padding-right:0; }
	.site-logo img{ width:70px; }
	.menu-toggle{ display:block; }
	.main-nav{ display:none; grid-column:1 / -1; }
	.main-nav.open{ display:block; margin-top:14px; }
	.main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
	.main-nav a{ padding:12px 4px; text-align:left; }
	.main-nav .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; min-width:0; background:rgba(0,0,0,.06); }
	.menu-has-children > a::after{ float:right; }

	.panel{ padding:40px 18px 50px; }
	.container{ padding:0 18px; }

	.split-home,.split-side,.split-verein{ grid-template-columns:1fr; gap:24px; }
	.accent-col{ display:none; }
	.side-col{ border-left:0; padding-left:0; border-top:2px solid var(--green); padding-top:26px; }
	.board-grid{ grid-template-columns:1fr; }
	.map-embed{ height:280px; }
}