/*
Theme Name: Wolfsthaler Theaterverein
Theme URI: https://wolfsthaler-theaterverein.at
Author: Florian Schodritz
Description: Individuelles Block-Theme (Full Site Editing) für den Wolfsthaler Theaterverein. Landingpage-Template in den Vereinsfarben Schwarz, Gold und Weiß, aufgebaut mit den Google Fonts Poppins (Headlines) und Inter (Fließtext).
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wolfsthaler-theaterverein
Tags: block-theme, full-site-editing, one-page, non-profit

Diese theme.json und die Templates definieren den Großteil des Designs.
Diese Datei liefert nur den Theme-Header (von WordPress zwingend benötigt)
sowie kleine Ergänzungen, die theme.json nicht abdeckt.
*/

/* Sanfter Hover-Übergang für Buttons */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Outline-Button (siehe Hero-Sektion) */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #ffffff;
	color: #000000 !important;
}

/* Etwas Luft zwischen den Navigationspunkten im Header */
.wp-block-navigation .wp-block-navigation-item {
	margin-left: 8px;
}

/* ===== Hero-Card: nächster Termin + Newsletter-Anmeldung ===== */
.hero-card {
	background: #ffffff;
	color: #000000;
	border-radius: 20px;
	padding: 32px 30px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	text-align: left;
}
.hero-card .hero-card-badge {
	display: inline-block;
	background: #EEB519;
	color: #000000;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.hero-card .hero-card-date {
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 1rem;
}
.hero-card .hero-card-title {
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	margin: 6px 0 8px;
}
.hero-card .hero-card-sub {
	font-size: 0.92rem;
	color: #333333;
	margin: 0;
}
.hero-card hr {
	border: none;
	border-top: 1px solid #e5e5e5;
	margin: 22px 0;
}
.hero-card .hero-card-nl-title {
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 4px;
}
.hero-card .hero-card-nl-sub {
	font-size: 0.85rem;
	color: #555555;
	margin: 0 0 14px;
}

/* ===== Newsletter-Formulare (Hero-Card + untere Sektion) ===== */
.wolfsthaler-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wolfsthaler-newsletter-form input[type="email"] {
	padding: 13px 16px;
	border-radius: 10px;
	border: 2px solid #e5e5e5;
	font-family: "Inter", "Segoe UI", Arial, sans-serif;
	font-size: 0.95rem;
	background: #fafafa;
	color: #000000;
	width: 100%;
	box-sizing: border-box;
}
.wolfsthaler-newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: #EEB519;
}
.wolfsthaler-newsletter-form .consent-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.78rem;
	line-height: 1.4;
	color: #555555;
}
.wolfsthaler-newsletter-form .consent-row input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}
.wolfsthaler-newsletter-form .consent-row a {
	color: #555555;
	text-decoration: underline;
}
.wolfsthaler-newsletter-form button {
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	border-radius: 999px;
	padding: 13px 24px;
	border: none;
	background: #EEB519;
	color: #000000;
	cursor: pointer;
	font-size: 0.95rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wolfsthaler-newsletter-form button:hover {
	background: #000000;
	color: #EEB519;
}
.hero-card .fineprint-dark {
	font-size: 0.75rem;
	color: #888888;
	margin: 10px 0 0;
	text-align: center;
}

/* Dunkle Variante (untere Newsletter-Sektion auf schwarzem Grund) */
.newsletter-dark .wolfsthaler-newsletter-form {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 520px;
	margin: 0 auto;
}
.newsletter-dark .wolfsthaler-newsletter-form input[type="email"] {
	flex: 1 1 260px;
	width: auto;
	border-radius: 999px;
	border: 2px solid #EEB519;
	background: #000000;
	color: #ffffff;
}
.newsletter-dark .wolfsthaler-newsletter-form input[type="email"]::placeholder {
	color: #bbbbbb;
}
.newsletter-dark .wolfsthaler-newsletter-form input[type="email"]:focus {
	border-color: #ffffff;
}
.newsletter-dark .wolfsthaler-newsletter-form button {
	flex: 0 0 auto;
}
.newsletter-dark .wolfsthaler-newsletter-form .consent-row {
	flex-basis: 100%;
	color: #bbbbbb;
	justify-content: center;
	text-align: left;
}
.newsletter-dark .wolfsthaler-newsletter-form .consent-row a {
	color: #EEB519;
}

@media (max-width: 900px) {
	.hero-card { max-width: 480px; margin: 0 auto; }
}

/* ===== Kopfbereich (Logo + Vereinsname): überall etwas kompakter =====
   Der Standard-Blockabstand zwischen "Theaterverein Wolfsthal" und
   "Laientheater seit 2008" war zu groß und das Logo (52px) wirkte im
   Vergleich zur Textgruppe zu klein – das galt nicht nur mobil, sondern
   genauso am Desktop. Gilt für alle Breiten; die Mobile-Regeln direkt
   darunter override das für ganz schmale Bildschirme nochmal enger. */
.wp-block-site-logo img {
	width: 62px !important;
	height: 62px !important;
}
.wp-block-group:has(> .wp-block-site-title) {
	row-gap: 6px !important;
}

/* ===== Mobile: Kopfbereich (Logo + Vereinsname) kompakter =====
   Bei schmalen Handy-Breiten war "Theaterverein Wolfsthal" zu groß für
   die verfügbare Breite und brach hässlich um. Der Abstand zum Untertitel
   war zudem viel zu groß und das Logo im Vergleich zur Schrift zu klein –
   beides jetzt ausbalanciert. */
@media (max-width: 600px) {
	header.wp-block-group {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.wp-block-site-logo img {
		width: 50px !important;
		height: 50px !important;
	}
	.wp-block-site-title,
	.wp-block-site-title a {
		font-size: 1.15rem !important;
		line-height: 1.15 !important;
		letter-spacing: 0.2px !important;
	}
	/* Vertikale Gruppe aus Vereinsname + Untertitel (nur diese, nicht
	   andere verschachtelte Gruppen im Header) enger zusammenrücken. */
	.wp-block-group:has(> .wp-block-site-title) {
		row-gap: 2px !important;
	}
}

/* ===== Mobile: Hero-Sektion – Überschrift & oberer Abstand =====
   Die Hauptüberschrift "Wolfsthaler Theaterverein" hatte auf dem Handy
   weiterhin die feste Desktop-Schriftgröße (60px) und war damit breiter
   als die Spalte – dadurch brach sie mitten im Wort um ("Wolfsthal-er").
   Außerdem war der Abstand vom oberen Rand bis zum Logo unnötig groß.
   :has() wählt gezielt den Hero-Cover-Block aus (den mit der <h1> drin),
   nicht den Foto-Trennbanner weiter unten, der ebenfalls "alignfull" ist. */
@media (max-width: 600px) {
	.wp-block-cover.alignfull:has(h1.wp-block-heading) {
		padding-top: 64px !important;
		padding-bottom: 56px !important;
	}
	.wp-block-cover.alignfull:has(h1.wp-block-heading) h1.wp-block-heading {
		font-size: 2.15rem !important;
	}
}

/* ===== "Über uns"-Bild: festes Seitenverhältnis erzwingen =====
   WordPress schreibt beim Bildaustausch im Editor teils ein falsches
   inline aspect-ratio in den style-Attribut des <img> (Bug, unabhängig
   von unserem Theme) – das Bild wird dadurch zu einem hauchdünnen
   Streifen gequetscht. Wir überschreiben das hier mit !important. */
#ueber-uns figure.wp-block-image img {
	aspect-ratio: 4 / 5 !important;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ===== Foto-Trennbanner (Cover-Block "Bühne frei") ===== */
.photo-divider.wp-block-cover .wp-block-cover__inner-container {
	padding: 0 32px 20px;
}
.photo-divider .divider-caption {
	color: #ffffff;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
}

/* ===== Galerie "Impressionen" ===== */
.impressionen-gallery.wp-block-gallery figure.wp-block-image {
	border-radius: 14px;
	overflow: hidden;
}
.impressionen-gallery.wp-block-gallery figure.wp-block-image img {
	transition: transform 0.35s ease;
}
.impressionen-gallery.wp-block-gallery figure.wp-block-image:hover img {
	transform: scale(1.06);
}
.impressionen-gallery.wp-block-gallery figcaption {
	font-size: 0.8rem;
}