/*
Theme Name:        KMM
Theme URI:         https://github.com/Alsterbuben/kmm-website
Description:       Block-Theme für kinder-medien-monitor.de. Keine externen Anfragen, Schriften lokal.
Author:            Alsterbuben GmbH
Version:           0.3.0
Requires at least: 6.8
Requires PHP:      8.3
License:           GPL-2.0-or-later
Text Domain:       kmm
*/

/* Alles Gestalterische steht in theme.json; hier nur, was theme.json nicht ausdrücken kann. */

/* Navigation: keine Unterstreichung; aktiver Punkt, Hover und Fokus unterstrichen (wie heute). */
.wp-block-navigation a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible,
.wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Fokus sichtbar, auch auf grünem Grund (currentcolor ist dort Weiß). */
:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

/* Kopf-, Inhalts- und Fußbereich stoßen ohne Fuge aneinander; sonst blitzt der weiße Seitengrund durch. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Buttons: Text weiß, der Ring liegt außerhalb auf weißem Grund, daher Anthrazit. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--anthracite);
	outline-offset: 2px;
}

/* Mobiles Menü: größere Trefferfläche für das Schließen-Kreuz. */
.wp-block-navigation__responsive-container-close {
	padding: 8px;
}

/* Hero (Pattern kmm/hero): Schild links, Claim rechts, Illustration bündig am unteren Rand. */
.kmm-hero .kmm-hero__schild img {
	width: min(100%, 380px);
	height: auto;
}

.kmm-hero .kmm-hero__claim {
	color: var(--wp--preset--color--white);
}

.kmm-hero .kmm-hero__illustration {
	margin-bottom: 0;
	/* Das Deckbild trägt eigenes Innenabstand-Padding; alignfull bricht daraus nicht aus. */
	margin-inline: calc(-1 * var(--wp--preset--spacing--30));
}

.kmm-hero .kmm-hero__illustration img {
	display: block;
	width: 100%;
	height: auto;
}

/* Teaser-Karten (Pattern kmm/teaser-karten): weiße Karte, Icon neben der Überschrift, ganze Karte verlinkt. */
.kmm-karte {
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.kmm-karte a {
	text-decoration: none;
}

.kmm-karte .kmm-karte__titel {
	/* Ebene h2 wegen der Überschriftenfolge, Größe wie eine Unterüberschrift. */
	font-size: var(--wp--preset--font-size--large);
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

.kmm-karte .kmm-karte__titel img {
	width: 1.4em;
	height: 1.4em;
}

.kmm-karte .kmm-karte__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.kmm-karte .kmm-karte__text {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* Schlagwort-Kästen (Pattern kmm/studien-intro). */
.kmm-schlagwort {
	display: inline-block;
	margin: 0 0.5rem 0.75rem 0;
	padding: 0.3em 0.9em;
	border-radius: 8px;
	background: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	text-transform: uppercase;
}

/* Fußnote (Pattern kmm/studien-intro). */
.kmm-fussnote {
	font-size: var(--wp--preset--font-size--small);
}

/* Steckbrief-Tabelle (Pattern kmm/steckbrief): zweispaltig, Zeilen abwechselnd hellgrau, ohne Rahmen. */
.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--light-gray);
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
	padding: 0.75rem 1rem;
	border: 0;
	vertical-align: top;
}

.wp-block-table.is-style-stripes td:first-child {
	width: 34%;
	font-weight: 600;
}

.wp-block-table.is-style-stripes img {
	width: auto;
	max-height: 40px;
	margin-right: 0.75rem;
	vertical-align: middle;
}

.kmm-band .kmm-band__logo {
	margin: 0 0 var(--wp--preset--spacing--20);
	text-align: center;
}

.kmm-band .kmm-band__logo img {
	width: auto;
	max-height: 60px;
}

/* Plugin-Blöcke: Feinheiten, die Grundfunktion liegt im Plugin-CSS. */
.kmm-logo-slider .kmm-logo-slider__pause {
	color: var(--wp--preset--color--gray);
}

.kmm-logo-grid--bg-green .kmm-logo-grid__text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
}

.kmm-logo-grid--bg-green .kmm-logo-grid__list {
	align-items: stretch;
}

.kmm-downloads .kmm-downloads__eintrag {
	border-top-color: #d6d6d6;
}

.kmm-downloads .kmm-downloads__jahr {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
}

/* Bänder mit grünem Hintergrund: Überschriften, Text und Links weiß. */
.kmm-band h1,
.kmm-band h2,
.kmm-band h3,
.kmm-band h4,
.kmm-band p,
.kmm-band li,
.kmm-band td,
.kmm-band figcaption,
.kmm-band a {
	color: var(--wp--preset--color--white);
}

/* Nur für Vorleseprogramme: sichtbar ausgeblendet, im Textfluss vorhanden. */
.kmm-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Platz für den „Nach oben“-Knopf freihalten: Ohne das verdeckt der fest positionierte Knopf bei
   mittleren und großen Bildschirmbreiten (getestet 700–1280px) das letzte Social-Icon (Xing) in der
   Fußzeile, weil dessen Zeile bis dorthin reicht. Bei sehr breiten oder sehr schmalen Bildschirmen
   entsteht der Platz ohnehin (Inhaltsbreite bzw. Umbruch), hier wird er für alle Breiten erzwungen. */
footer .kmm-teilen {
	margin-inline-end: 3.5rem;
}

/* „Nach oben“: runder Knopf unten rechts, wie ihn die bisherige Website hatte. Das Ziel #top ist im
   HTML-Standard der Seitenanfang und braucht kein eigenes Element. */
.kmm-nach-oben {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 10;
	display: flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.85;
}

.kmm-nach-oben::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-top: 2px solid var(--wp--preset--color--white);
	border-left: 2px solid var(--wp--preset--color--white);
	transform: translateY(0.15rem) rotate(45deg);
}

.kmm-nach-oben:hover,
.kmm-nach-oben:focus-visible {
	opacity: 1;
}

/* Eigene Ringfarbe statt currentcolor: Der Knopf ist ein normaler Link und bekäme sonst die
   grüne Standard-Linkfarbe des Themes als Ring — auf dem eigenen grünen Kreis und dem meist
   ebenfalls grünen Fußzeilenhintergrund (der Knopf liegt zuletzt in der Tab-Reihenfolge, direkt
   nach den Fußzeilen-Links) wäre das kaum zu erkennen. Anthrazit wie beim Knopf-Fokusring oben. */
.kmm-nach-oben:focus-visible {
	outline-color: var(--wp--preset--color--anthracite);
}

/* Kennt der Browser scrollgesteuerte Animationen, erscheint der Knopf erst nach etwas Scrollen;
   sonst steht er dauerhaft. In Prozent statt fester Pixelwerte, damit er auch auf kurzen Seiten
   (z. B. Impressum, kaum mehr als eine Bildschirmhöhe scrollbar) sicher erscheint. */
@supports (animation-timeline: scroll()) {
	.kmm-nach-oben {
		visibility: hidden;
		opacity: 0;
		animation: kmm-einblenden linear both;
		animation-timeline: scroll();
		animation-range: 20% 50%;
	}
}

@keyframes kmm-einblenden {
	to {
		visibility: visible;
		opacity: 0.85;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}