/*
Theme Name: Floo Streifen
Theme URI: https://floo.eu
Description: Kind-Theme von Ollie. Blau-weiß gestreifter Grund, weiße Papierfelder, Markisenkante. Alle Inhalte bleiben ganz normale WordPress-Blöcke.
Author: Florian Weber
Author URI: https://floo.eu
Template: ollie
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: floo-streifen
*/

/* ------------------------------------------------------------------
   1 · Der gestreifte Grund der ganzen Seite
   Sehr geringer Kontrast: man spürt ihn mehr, als dass man ihn sieht.
   ------------------------------------------------------------------ */

:root body {
	background-color: #ffffff;
	background-image: repeating-linear-gradient(
		90deg,
		#ffffff 0 56px,
		#e8f0f6 56px 112px
	);
	background-attachment: fixed;
}

@media (max-width: 781px) {
	:root body {
		background-image: repeating-linear-gradient(
			90deg,
			#ffffff 0 32px,
			#e8f0f6 32px 64px
		);
	}
}

/* ------------------------------------------------------------------
   2 · Papierfeld
   Klasse: floo-papier   (auf eine Gruppe legen)
   Das weiße Blatt, das auf den Streifen liegt.
   ------------------------------------------------------------------ */

.floo-papier {
	background-color: #ffffff;
	border: 1px solid #d6e2ec;
	border-radius: 24px;
	overflow: hidden;
}

/* Variante in Ostseeblau, für das Termin-Band */
.floo-papier-blau {
	background-color: #15537f;
	border-radius: 24px;
	overflow: hidden;
	color: #ffffff;
}

.floo-papier-blau :is(h1, h2, h3, h4, p, li) {
	color: #ffffff;
}

/* Variante in Bordeaux, für den Kontaktabschnitt */
.floo-papier-rot {
	background-color: #96232a;
	border-radius: 24px;
	overflow: hidden;
	color: #ffffff;
}

.floo-papier-rot :is(h1, h2, h3, h4, p, li) {
	color: #ffffff;
}

/* ------------------------------------------------------------------
   3 · Die Markise
   Klasse: floo-markise   (auf einen Abstandhalter, Höhe 44 px)
   Streifen in voller Kraft plus Bogenkante, als Kopf eines Papierfelds.
   ------------------------------------------------------------------ */

.floo-markise {
	height: 44px !important;
	background-image:
		radial-gradient(circle 12px at 12px 0, #ffffff 97%, rgba(255, 255, 255, 0) 100%),
		repeating-linear-gradient(90deg, #15537f 0 24px, #ffffff 24px 48px);
	background-size: 24px 14px, auto;
	background-repeat: repeat-x, repeat;
	background-position: bottom left, top left;
}

/* ------------------------------------------------------------------
   4 · Die Borte
   Klassen: floo-borte-blau / floo-borte-rot
   (auf einen Abstandhalter, Höhe 10 px)
   Schmaler Deckel auf Karten. Blau = Schule, Bordeaux = Bühne.
   ------------------------------------------------------------------ */

.floo-borte-blau {
	height: 10px !important;
	background-image: repeating-linear-gradient(90deg, #15537f 0 16px, #ffffff 16px 32px);
}

.floo-borte-rot {
	height: 10px !important;
	background-image: repeating-linear-gradient(90deg, #96232a 0 16px, #ffffff 16px 32px);
}

.floo-borte-weiss {
	height: 10px !important;
	background-image: repeating-linear-gradient(
		90deg,
		#ffffff 0 20px,
		rgba(255, 255, 255, 0) 20px 40px
	);
}

/* ------------------------------------------------------------------
   5 · Kleinigkeiten
   ------------------------------------------------------------------ */

/* Schlagwort-Pille: Klasse floo-pille auf einen Absatz */
.floo-pille {
	display: inline-block;
	font-size: 0.875rem;
	color: #15537f;
	border: 1px solid #c5dae8;
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	margin: 0 0.4rem 0.4rem 0;
}

/* Kleine Vorzeile über einer Überschrift: Klasse floo-vorzeile */
.floo-vorzeile {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #15537f;
	margin-bottom: 0.5rem;
}

.floo-papier-blau .floo-vorzeile,
.floo-papier-rot .floo-vorzeile {
	color: rgba(255, 255, 255, 0.85);
}

/* Bilder in Papierfeldern bekommen dieselbe Rundung */
.floo-papier figure img,
.floo-papier .wp-block-image img {
	border-radius: 18px;
}

/* Berührziele: nichts unter 44 px */
.wp-block-button__link,
.wp-block-navigation a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}