/* Volley Seefeld – Ergänzungen zu theme.json */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- Kopfzeile ---------- */

.vs-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .vs-site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.vs-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: #fff !important;
}

.vs-logo { margin: 0; flex-shrink: 1; min-width: 0; }
.vs-logo img,
.vs-logo svg { display: block; height: auto; max-width: 100%; }
.vs-header .vs-logo svg { width: 250px; transition: width .3s ease; }
.vs-footer .vs-logo svg { width: 230px; }
@media (max-width: 600px) {
	.vs-header .vs-logo img,
	.vs-header .vs-logo svg { width: 170px !important; }
}

/* Ball im Logo: rollt beim Laden einmal ein und dreht sich beim Darüberfahren. */
.vs-logo-ball {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}
.vs-header .vs-logo-ball { animation: vs-roll-in 1.1s cubic-bezier(.22, 1, .36, 1) .15s both; }
.vs-header .vs-logo a:hover .vs-logo-ball,
.vs-header .vs-logo a:focus-visible .vs-logo-ball { animation: vs-spin .9s cubic-bezier(.22, 1, .36, 1); }
.vs-footer .vs-logo:hover .vs-logo-ball { animation: vs-bounce .8s ease; }

@keyframes vs-roll-in {
	from { transform: translateX(-160%) rotate(-400deg); opacity: 0; }
	60% { opacity: 1; }
	to { transform: none; opacity: 1; }
}
@keyframes vs-spin { to { transform: rotate(360deg); } }
@keyframes vs-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-22%); }
	55% { transform: translateY(0); }
	72% { transform: translateY(-8%); }
}

/* Kompakte Kopfzeile nach dem Scrollen */
.vs-header { transition: padding .3s ease, box-shadow .3s ease; }
.vs-site-header.is-scrolled .vs-header {
	padding-top: .4rem !important;
	padding-bottom: .4rem !important;
	box-shadow: 0 6px 20px rgba(26, 32, 54, .08);
}
@media (min-width: 601px) {
	.vs-site-header.is-scrolled .vs-header .vs-logo svg { width: 190px; }
}

.vs-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--navy-dark); padding: .25rem 0; }
.vs-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); }

.vs-nav .wp-block-navigation__responsive-container-open svg,
.vs-nav .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.vs-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--navy-dark); }

.vs-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(1.25rem + env(safe-area-inset-top, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)) 2rem max(1.5rem, env(safe-area-inset-left, 0px));
}
.vs-nav .wp-block-navigation__responsive-container-close { color: #fff; }
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
	align-items: flex-start;
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0 !important;
	width: 100%;
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: .9rem 0;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.2;
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* ---------- Blockstile ---------- */

.is-style-vs-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}
.is-style-vs-card > :first-child { margin-top: 0; }
.is-style-vs-card.has-background { border-color: transparent; }

.wp-block-button.is-style-vs-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy-dark);
	box-shadow: inset 0 0 0 2px currentColor;
}
.wp-block-button.is-style-vs-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy-dark);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy-dark);
}
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }

/* ---------- Startseite ---------- */

.vs-hero h1 { margin-top: 0; }
.vs-hero-text > * { max-width: 720px; }

.vs-table table { border-collapse: collapse; width: 100%; }
.vs-table th, .vs-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: .7rem .75rem .7rem 0;
	text-align: left;
	vertical-align: top;
}
.vs-table th {
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}
.vs-table td:first-child { width: 45%; }

.vs-team-tile .wp-block-image { margin: 0 0 .6rem; overflow: hidden; border-radius: 8px; }
.vs-team-tile .wp-block-image img { display: block; width: 100%; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.vs-team-tile:hover .wp-block-image img { transform: scale(1.035); }
.vs-team-tile h3 { margin: 0; font-size: 1.25rem; }
.vs-team-tile h3 a { color: var(--wp--preset--color--navy-dark); text-decoration: none; }
.vs-team-tile h3 a:hover { text-decoration: underline; }

/* ---------- Unterseiten ---------- */

.vs-page-hero { border-bottom: 1px solid var(--wp--preset--color--line); }
.vs-page-hero h1 { margin: 0; }

.vs-role { margin: 0; font-size: .875rem; color: var(--wp--preset--color--muted); }

.vs-content > h2 { margin-top: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--20); }
.vs-content > h2:first-child,
.vs-content > p:first-child { margin-top: 0; }

.vs-people .is-style-vs-card h3 { margin: .2rem 0 .25rem; }
.vs-people .is-style-vs-card p:last-child { margin-bottom: 0; overflow-wrap: anywhere; }

.vs-team h2 { margin: .2rem 0 .75rem; }
.vs-team .wp-block-image { margin: 0; }
.vs-facts-list { list-style: none; padding: 0; margin: 0; }
.vs-facts-list li { padding: .65rem 0; border-top: 1px solid var(--wp--preset--color--line); overflow-wrap: anywhere; }
.vs-facts-list li strong {
	display: block;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vs-sponsor { min-height: 7rem; }
.vs-sponsor .wp-block-image { margin: 0; }
.vs-plain-list { padding-left: 1.2rem; }
.vs-highlight h2 { margin-top: 0; }

.vs-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--navy-dark);
	padding: .25rem 0;
}
.vs-details[open] summary { margin-bottom: 1rem; }
.vs-details ol { font-size: .9375rem; }

.vs-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--sand);
}
.vs-map a { display: inline-block; margin-top: .6rem; font-size: .875rem; }

/* ---------- Fusszeile ---------- */

.vs-footer .vs-footer-title {
	font-size: 1.125rem !important;
	color: var(--wp--preset--color--gold);
	margin-bottom: .75rem;
}
.vs-footer p { color: #D5DAEA; }
.vs-footer p,
.vs-footer li { font-size: .9375rem; line-height: 1.55; }
.vs-footer a { text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.vs-footer a:hover { text-decoration-color: currentColor; }
.vs-footer-links { list-style: none; padding: 0; margin: 0; }
.vs-footer-links li { margin: 0 0 .4rem; }
.vs-footer-sep { border-color: rgba(255, 255, 255, .15) !important; opacity: 1; }

/* ---------- Allgemein ---------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

img { height: auto; }
.vs-people .is-style-vs-card h3 { font-size: 1.25rem; }

/* ---------- Bewegung ---------- */

.wp-block-button__link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

.vs-anim .vs-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease var(--vs-delay, 0ms), transform .7s cubic-bezier(.22, 1, .36, 1) var(--vs-delay, 0ms);
}
.vs-anim .vs-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.vs-logo-ball { animation: none !important; }
	.vs-anim .vs-reveal { opacity: 1; transform: none; }
}

/* ---------- Spielplan ---------- */

.vs-games { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
.vs-game {
	display: grid;
	grid-template-columns: 4.75rem 1fr auto;
	gap: .25rem 1rem;
	align-items: baseline;
	padding: .7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.vs-game-date { font-weight: 600; color: var(--wp--preset--color--navy-dark); white-space: nowrap; }
.vs-game-main { min-width: 0; }
.vs-game-opp { display: block; overflow-wrap: anywhere; }
.vs-game-meta { display: block; font-size: .8125rem; color: var(--wp--preset--color--muted); }
.vs-game.is-home .vs-game-opp { font-weight: 600; }
.vs-game-time { font-weight: 600; color: var(--wp--preset--color--navy); }
.vs-game-score {
	font-weight: 700;
	padding: .1rem .55rem;
	border-radius: 6px;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--muted);
}
.vs-game-score.is-win { background: var(--wp--preset--color--gold-soft); color: var(--wp--preset--color--navy-dark); }
.vs-games-empty { color: var(--wp--preset--color--muted); }
.vs-team .vs-games-title { font-size: 1rem; margin: 1.5rem 0 .25rem; color: var(--wp--preset--color--muted); }
.vs-team .vs-game { grid-template-columns: 4.75rem 1fr auto; font-size: .9375rem; }

/* Tabelle (Rangliste) */
.vs-standings { margin-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); padding-top: .75rem; }
.vs-standings summary { cursor: pointer; font-weight: 600; color: var(--wp--preset--color--navy-dark); }
.vs-standings[open] summary { margin-bottom: .5rem; }
.vs-standings-scroll { overflow-x: auto; }
.vs-standings table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.vs-standings th, .vs-standings td { padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--wp--preset--color--line); text-align: right; white-space: nowrap; }
.vs-standings th { font-size: .8125rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.vs-standings th:nth-child(2), .vs-standings td.vs-st-team { text-align: left; white-space: normal; width: 100%; }
.vs-standings th:first-child, .vs-standings td:first-child { text-align: left; padding-left: .4rem; }
.vs-standings tr.is-us td { background: var(--wp--preset--color--gold-soft); font-weight: 600; }

/* Geschützte E-Mail-Adressen */
.vs-at::before { content: "@"; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Abschnitte: gleiche linke Kante wie die breiten Abschnitte, Text bleibt lesbar schmal */
.vs-section > p,
.vs-section > .wp-block-table,
.vs-section > .wp-block-buttons {
	max-width: 760px !important;
	margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
	margin-right: auto !important;
}

/* Heute */
.vs-table tr.is-today td { background: var(--wp--preset--color--gold-soft); }
.vs-table tr.is-today td:first-child { padding-left: .6rem; }
.vs-game.is-today { background: var(--wp--preset--color--gold-soft); padding-left: .6rem; padding-right: .6rem; }