/*
Theme Name: Reitverein Gompitz
Theme URI: https://rvgompitz.de
Author: Reitverein Gompitz
Description: Block-Theme (Full Site Editing) fuer den Reitverein Gompitz. Helles, modernes Design mit schwebender Liquid-Glass-Navigation, voll im Gutenberg-Editor bearbeitbar.
Version: 0.3.4
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reitverein
Tags: full-site-editing, block-styles, custom-colors
*/

/* ============================================================
   Reitverein Gompitz – helles, modernes Design
   ============================================================ */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body { text-underline-offset: 0.18em; overflow-x: clip; }

::selection { background: var(--wp--preset--color--accent); color: #fff; }

img { border-radius: 12px; }
.wp-block-cover img { border-radius: 0; }

/* --- Typografie --- */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.wp-block-heading { margin-top: 0; }

.rv-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 1rem !important;
}

/* ============================================================
   Schwebende Liquid-Glass-Navigation
   ============================================================ */
.rv-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	padding: clamp(0.6rem, 1.6vw, 1.1rem) clamp(0.9rem, 3vw, 2rem) 0;
	pointer-events: none;
}

/* schwebende Navigation unter die WordPress-Adminleiste schieben */
body.admin-bar .rv-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .rv-header { top: 46px; }
}

/* Block-Abstand oberhalb von <main> entfernen (24px) */
.wp-site-blocks > main { margin-block: 0; }

.rv-nav {
	pointer-events: auto;
	max-width: 1280px;
	margin-inline: auto;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(20px) saturate(185%);
	backdrop-filter: blur(20px) saturate(185%);
	border: 1px solid rgba(255, 255, 255, 0.65);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(26, 26, 23, 0.04),
		0 14px 34px -14px rgba(26, 26, 23, 0.42);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rv-nav { background-color: rgba(255, 255, 255, 0.96); }
}

.rv-nav .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rv-nav .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rv-nav .wp-block-navigation a:hover,
.rv-nav .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

/* mobiles Overlay-Menue */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff !important; }

/* Inhalt der Unterseiten unter die schwebende Navigation schieben */
body:not(.home) .wp-site-blocks { padding-top: clamp(94px, 12vh, 120px); }

/* ============================================================
   Hero
   ============================================================ */
.rv-hero.wp-block-cover {
	min-height: clamp(480px, 76vh, 760px);
	align-items: flex-end;
	justify-content: flex-start;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.rv-hero .wp-block-cover__inner-container { width: 100%; }

/* Panel laeuft ueber die volle Content-Breite (1312px) */
.rv-hero__panel > * { margin-block: 0; }

/* Eyebrow: kurze Linie + gesperrte Auszeichnung */
.rv-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}
.rv-hero__eyebrow::before {
	content: "";
	flex: none;
	width: 36px;
	height: 1.5px;
	background-color: var(--wp--preset--color--accent);
}

.rv-hero h1 {
	font-weight: 600;
	color: #fff;
	font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.85rem);
	letter-spacing: -0.018em;
	line-height: 1.17;
	margin-top: 1.25rem !important;
}
.rv-hero__panel p:not(.rv-hero__eyebrow) {
	color: rgba(255, 255, 255, 0.84);
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 40em;
	margin-top: 1rem !important;
}

/* ============================================================
   Sektionen
   ============================================================ */
.rv-section__head { margin-bottom: 2.75rem; }
.rv-section__head .rv-eyebrow { margin-bottom: 0.7rem !important; }
.rv-section__head h2 { margin: 0; }

/* ============================================================
   Bildkacheln (Turniere)
   ============================================================ */
.rv-tile.wp-block-cover {
	border-radius: 14px;
	overflow: hidden;
}
.rv-tile .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.rv-tile__flag {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.36em 0.72em;
	border-radius: 5px;
	margin: 0 0 0.85rem !important;
}
.rv-tile__title {
	color: #fff !important;
	font-weight: 600;
	line-height: 1.12;
	margin: 0 !important;
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
.rv-tile--lg .rv-tile__title { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.4rem); }
.rv-tile--sm .rv-tile__title { font-size: 1.3rem; }
.rv-tile__date {
	margin: 0.55rem 0 0 !important;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Buttons – schlicht, ein Akzent, klarer Statuswechsel
   ============================================================ */
.wp-block-button__link { transition: background-color 0.14s linear, color 0.14s linear; }

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1.5px solid #fff;
	color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: #fff;
	color: var(--wp--preset--color--contrast);
	border-color: #fff;
}

/* ============================================================
   Footer
   ============================================================ */
.rv-footer a { color: var(--wp--preset--color--base); }
.rv-footer a:hover { color: var(--wp--preset--color--accent); }

/* ============================================================
   Allgemein / Zugaenglichkeit
   ============================================================ */
a { transition: color 0.14s linear; }

:where(a, button, .wp-block-button__link, input, .wp-block-navigation a):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@media (max-width: 781px) {
	.rv-hero { min-height: clamp(480px, 82vh, 700px); }
	body:not(.home) .wp-site-blocks { padding-top: 88px; }
}