/*
Theme Name: Frauenhandball Förderkreis Bensheim
Theme URI: https://example.org/
Author: Frauen Handball Förderkreis e.V. Bensheim
Description: Block-Theme für den Frauen Handball Förderkreis e.V. Bensheim. Vereinsfarben Rot/Schwarz, Schriften lokal eingebunden (DSGVO-freundlich, keine Google-Fonts-Abrufe), fertige Muster für Startseite, Mitgliedschaft, Spenden, News und Sponsoren.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fhf-bensheim
Tags: block-patterns, full-site-editing, custom-colors, custom-logo, editor-style, one-column, wide-blocks
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
:where(a) { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:where(.wp-block-button__link) { transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
:where(.wp-block-button__link):hover { transform: translateY(-1px); }
::selection { background: #C8031D; color: #fff; }

/* ---------- Kopfbereich ---------- */
.fhf-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 3px solid #C8031D;
}
.admin-bar .fhf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fhf-header { top: 0; position: relative; } }
.fhf-header .wp-block-site-logo img { height: auto; }
.fhf-header .wp-block-navigation a { text-decoration: none; }
.fhf-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; padding-block: .35em; }
.fhf-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: #C8031D; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.fhf-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.fhf-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.fhf-header .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem; }

/* ---------- Doppellinie wie im Logo ---------- */
.fhf-lines { position: relative; padding-block: .6em; }
.fhf-lines::before,
.fhf-lines::after {
	content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #C8031D;
}
.fhf-lines::before { top: 0; }
.fhf-lines::after { bottom: 0; }

/* Kleine Dachzeile über Überschriften */
.fhf-kicker {
	display: flex; align-items: center; gap: .75em;
	font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .8125rem;
	color: #C8031D;
}
.fhf-kicker::before { content: ""; width: 2.25em; height: 2px; background: currentColor; }
.has-schwarz-background-color .fhf-kicker,
.has-anthrazit-background-color .fhf-kicker,
.has-schwarz-verlauf-gradient-background .fhf-kicker { color: #E30A2A; }
.has-rot-background-color .fhf-kicker,
.has-rot-verlauf-gradient-background .fhf-kicker { color: #fff; }

/* ---------- Hero ---------- */
.fhf-hero { position: relative; overflow: hidden; isolation: isolate; }
.fhf-hero h1 { line-height: 1; }
.fhf-hero h1 mark { background: none; color: #C8031D; }
.fhf-hero .fhf-hero__logo img { filter: drop-shadow(0 18px 30px rgba(18, 21, 24, .12)); }

/* ---------- Karten ---------- */
.fhf-card {
	height: 100%;
	border-top: 4px solid #C8031D;
	transition: transform .25s ease, box-shadow .25s ease;
}
.fhf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18, 21, 24, .14); }
.has-schwarz-background-color .fhf-card,
.has-anthrazit-background-color .fhf-card { border-top-color: #E30A2A; }
.fhf-number {
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: #C8031D;
}
.has-rot-background-color .fhf-number,
.has-rot-verlauf-gradient-background .fhf-number { color: #fff; }

/* ---------- Diagonale Sektion ---------- */
.fhf-diagonal { clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); }
@media (max-width: 600px) { .fhf-diagonal { clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%); } }

/* Buttons auf Rot */
.has-rot-background-color .wp-block-button__link.has-weiss-background-color:hover,
.has-rot-verlauf-gradient-background .wp-block-button__link.has-weiss-background-color:hover {
	background: #121518 !important; color: #fff !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 2px; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #C8031D; border-color: #C8031D; color: #fff; }

/* ---------- Beitragskarten ---------- */
.fhf-posts .wp-block-post { display: flex; flex-direction: column; background: #fff; box-shadow: 0 10px 30px rgba(18, 21, 24, .08); transition: transform .25s ease, box-shadow .25s ease; }
.fhf-posts .wp-block-post:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18, 21, 24, .14); }
.fhf-posts .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.fhf-posts .wp-block-post-featured-image img { transition: transform .5s ease; aspect-ratio: 16/10; object-fit: cover; }
.fhf-posts .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.fhf-posts .wp-block-post-title { font-size: 1.375rem; }
.fhf-noimg { background: linear-gradient(135deg, #E30A2A 0%, #C8031D 55%, #8E0014 100%); aspect-ratio: 16/10; }

/* ---------- Sponsoren ---------- */
.fhf-sponsors .wp-block-image img { filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; max-height: 70px; width: auto; object-fit: contain; }
.fhf-sponsors .wp-block-image img:hover { filter: none; opacity: 1; }
.fhf-sponsor-slot {
	display: flex; align-items: center; justify-content: center; min-height: 96px;
	border: 2px dashed #D9DADC; color: #6B7078; font-weight: 600; font-size: .8125rem;
	letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* ---------- Fußbereich ---------- */
.fhf-footer a { color: inherit; text-decoration: none; }
.fhf-footer a:hover { color: #E30A2A; }
.fhf-footer .fhf-footer__logo { background: #fff; padding: .9rem 1.1rem; border-radius: 4px; display: inline-block; }
.fhf-footer .wp-block-social-links .wp-social-link { background: #C8031D !important; color: #fff !important; }
.fhf-footer .wp-block-social-links .wp-social-link:hover { background: #E30A2A !important; }

/* ---------- Tabellen (z. B. Termine) ---------- */
.wp-block-table thead { border-bottom: 3px solid #C8031D; }
.wp-block-table th { font-family: var(--wp--preset--font-family--montserrat); text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; text-align: left; }
.wp-block-table td, .wp-block-table th { border-color: #E4E4E6; padding: .75em 1em; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #F3F3F4; }

/* ---------- Formulare (Kontakt-Plugins) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select {
	font: inherit; padding: .75em 1em; border: 2px solid #D9DADC; border-radius: 3px; width: 100%; max-width: 100%;
	background: #fff; color: #121518;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: #C8031D; box-shadow: 0 0 0 3px rgba(200, 3, 29, .15); }

/* ---------- Barrierefreiheit ---------- */
.skip-link.screen-reader-text:focus { background: #C8031D; color: #fff; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 600px) {
	.fhf-header__cta { display: none !important; }
	.fhf-header .wp-block-site-logo img { width: 92px !important; }
}

/* zentrierte Dachzeile */
.fhf-kicker.has-text-align-center { display: flex; justify-content: center; }

/* Doppellinien-Überschrift zentriert */
.wp-block-heading.is-style-fhf-lines.has-text-align-center { display: table !important; margin-inline: auto !important; }

/* Screenreader-Text */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none; display: block; height: auto; left: 5px; top: 5px; width: auto; z-index: 100000;
	padding: 15px 23px 14px; font-size: 1rem; line-height: normal; text-decoration: none;
}

/* Absicherung Textausrichtung */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }