/*
Theme Name:        Helden
Theme URI:         https://einarmhelden-einbeinhelden.de
Author:            Einarmhelden & Einbeinhelden e.V.
Description:       Block-Theme für den Einarmhelden & Einbeinhelden e.V. – barrierearm, schnell, ohne Page Builder. Mitgliederfunktionen kommen aus dem Plugin „Helden Core“.
Requires at least: 6.6
Tested up to:      7.1
Requires PHP:      8.1
Version:           0.5.2
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       helden
*/

/*
 * Fast alles Gestalterische steht in theme.json.
 * Hier nur, was theme.json nicht abbilden kann.
 */

/* Sichtbarer Fokus für Tastatur-Nutzer – wichtig für Barrierefreiheit */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	/* Asphalt-Rahmen + Kreide-Ring: sichtbar auf hellem und dunklem Grund */
	outline: 3px solid var(--wp--preset--color--asphalt);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--kreide);
	border-radius: 2px;
}

/* Sprunglink zum Inhalt */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--asphalt);
	color: var(--wp--preset--color--kreide);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* Klebrige Kopfzeile: sticky muss am Template-Part-Wrapper sitzen,
   sonst klebt sie nur innerhalb ihrer eigenen Höhe. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
body.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.helden-header {
	border-bottom: 3px solid var(--wp--preset--color--asphalt);
	box-shadow: 0 6px 18px rgba(28, 31, 34, .14);
}
.helden-header .wp-block-navigation-item__content:hover,
.helden-header .current-menu-item > .wp-block-navigation-item__content,
.helden-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--rot);
}
/* Untermenüs: weiß mit Schatten, roter Akzent beim Drüberfahren */
.helden-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--papier) !important;
	color: var(--wp--preset--color--asphalt) !important;
	border: 0 !important;
	border-top: 3px solid var(--wp--preset--color--rot) !important;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 10px 24px rgba(28, 31, 34, .18);
	padding: .35rem 0;
	min-width: 240px !important;
}
.helden-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .55rem 1.1rem !important;
	width: 100%;
}
.helden-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--kreide);
}

/* Große Klickflächen in der Navigation (mind. 44 px) */
.helden-header .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Karten: gleichmäßige Höhe und dezenter Hover */
.helden-karte {
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.helden-karte:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.35);
}

/* Schräge Kante in Rot/Blau unter dem Hero – die beiden Vereinsfarben */
.helden-hero {
	position: relative;
	overflow: hidden;
}
.helden-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--wp--preset--color--rot) 0 24px,
		var(--wp--preset--color--blau) 24px 48px
	);
}

/* ==========================================================================
   Startseite
   ========================================================================== */

/* Hero mit Video: Text lesbar halten, Pause-Knopf unten rechts */
.helden-hero--video {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.helden-hero__video,
.helden-hero__abdunkeln {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.helden-hero--video > .helden-hero__video,
.helden-hero--video > .helden-hero__abdunkeln {
	max-width: none !important;
	margin: 0 !important;
}
.helden-hero__video { object-fit: cover; }
.helden-hero__abdunkeln { background: linear-gradient(90deg, rgba(28, 31, 34, .82) 0%, rgba(28, 31, 34, .55) 60%, rgba(28, 31, 34, .35) 100%); }
@media (max-width: 600px) {
	.helden-hero__abdunkeln { background: rgba(28, 31, 34, .65); }
}
.helden-hero--video h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.helden-hero__pause {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 2px solid var(--wp--preset--color--kreide);
	border-radius: 50%;
	background: rgba(28, 31, 34, .6);
	color: var(--wp--preset--color--kreide);
	cursor: pointer;
}
.helden-hero__pause::before { /* Pause-Symbol */
	content: "";
	display: block;
	width: 12px;
	height: 14px;
	margin: auto;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
}
.helden-hero__pause.ist-pausiert::before { /* Play-Dreieck */
	width: 0;
	height: 0;
	margin-left: 15px;
	border: 0;
	border-left: 13px solid currentColor;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
.helden-hero__pause:focus-visible { outline: 3px solid var(--wp--preset--color--kreide); outline-offset: 3px; }

/* Zwei Helden: Logo neben dem Text, auf dem Handy darüber */
.helden-held__logo { flex-shrink: 0; margin: 0; }
.helden-held__logo img { display: block; }

/* Wissen, das weiterbringt: 3 + 2 Karten, komplett klickbar */
.helden-wissen {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.helden-wissen > * { margin: 0 !important; }
.helden-wissen__karte { grid-column: span 2; }
.helden-wissen__karte:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 600px) {
	.helden-wissen .helden-wissen__icon { width: 60px; height: 60px; }
	.helden-wissen .helden-wissen__icon svg { width: 32px; height: 32px; }
	.helden-wissen .helden-wissen__titel { padding-right: 70px; min-height: 60px; }
}
@media (max-width: 960px) {
	.helden-wissen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.helden-wissen__karte,
	.helden-wissen__karte:nth-child(n+4) { grid-column: span 1; }
	.helden-wissen__karte:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.helden-wissen { grid-template-columns: 1fr; }
}
.helden-wissen__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: 8px;
	background: var(--wp--preset--color--kreide);
	border: 2px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.helden-wissen__karte > * { margin: 0 !important; }
.helden-wissen__icon {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	color: var(--wp--preset--color--papier);
	background: var(--wp--preset--color--rot);
}
.helden-wissen__karte--blau .helden-wissen__icon { background: var(--wp--preset--color--blau); }
.helden-wissen__titel { font-size: var(--wp--preset--font-size--gross); padding-right: 84px; min-height: 72px; display: flex; align-items: center; }
.helden-wissen__text { padding-right: 0; }
.helden-wissen__titel a {
	color: var(--wp--preset--color--asphalt);
	text-decoration: none;
}
.helden-wissen__titel a::after { /* ganze Karte klickbar */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}
.helden-wissen__text { color: var(--wp--preset--color--stahl); }
.helden-wissen__mehr {
	margin-top: auto !important;
	padding-top: .5rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--rot);
}
.helden-wissen__karte--blau .helden-wissen__mehr { color: var(--wp--preset--color--blau); }
.helden-wissen__mehr span { display: inline-block; transition: transform .2s ease; }
.helden-wissen__karte:hover,
.helden-wissen__karte:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--karte);
	border-color: var(--wp--preset--color--rot);
}
.helden-wissen__karte--blau:hover,
.helden-wissen__karte--blau:focus-within { border-color: var(--wp--preset--color--blau); }
.helden-wissen__karte:hover .helden-wissen__mehr span { transform: translateX(4px); }
.helden-wissen__titel a:focus-visible { outline: none; }
.helden-wissen__titel a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--asphalt);
	outline-offset: 2px;
}

/* Presse: Scans oben ausrichten */
.helden-presse .wp-block-post-featured-image img { object-position: top; }
.helden-presse-scan img { border: 1px solid #ddd; border-radius: 4px; }

/* Fließtext lesbar schmal halten, aber linksbündig mit Titel und Karten */
.wp-block-post-content.is-layout-constrained > :is(p, ul, ol, blockquote, .wp-block-list) {
	max-width: min(var(--wp--style--global--content-size), 75ch);
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* Ultimate Member: Verzeichnis, Profil und Konto in voller Breite, Formulare bleiben schmal */
.is-layout-constrained > .um.um-directory,
.is-layout-constrained > .um.um-profile,
.is-layout-constrained > .um.um-account {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* ==========================================================================
   Icons auf Infos-Seiten
   ========================================================================== */
.helden-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: var(--wp--preset--color--papier);
	background: var(--wp--preset--color--rot);
}
.helden-icon--blau { background: var(--wp--preset--color--blau); }
.helden-karte.hat-icon { position: relative; }
.helden-icon--ecke {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
}
.helden-karte.hat-icon > h3:first-of-type,
.helden-karte.hat-icon > .wp-block-heading:first-of-type { padding-right: 76px; min-height: 64px; display: flex; align-items: center; }
.helden-titel-mit-icon { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.helden-titel-mit-icon .wp-block-post-title { margin: 0; }
.helden-icon--titel { width: 72px; height: 72px; }
.helden-icon--titel svg { width: 40px; height: 40px; }
@media (max-width: 600px) {
	.helden-icon--titel { width: 56px; height: 56px; }
	.helden-icon--titel svg { width: 30px; height: 30px; }
}

/* Blauer Button (Einbeinhelden) – Hover wechselt auf Rot */
.helden-button-blau .wp-block-button__link:hover,
.helden-button-blau .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--rot) !important;
	color: var(--wp--preset--color--papier) !important;
}

/* Blog/Seiten: Bilder und Einbettungen nie breiter als der Inhalt */
.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe { max-width: 100%; }
.wp-block-post-content img { height: auto; }
.wp-block-post-content .wp-caption,
.wp-block-post-content figure { max-width: 100% !important; }
.wp-block-post-content .wp-caption img { width: 100%; }
.wp-block-post-content :is(.alignleft, .alignright) { max-width: 50%; }
@media (max-width: 600px) {
	.wp-block-post-content :is(.alignleft, .alignright) { float: none; max-width: 100%; margin-left: 0; margin-right: 0; }
}

/* ==========================================================================
   Kopfzeile auf dem Handy: Menü in voller Breite, Konto-Button oben im Menü
   ========================================================================== */
.helden-header .helden-konto-link { display: none !important; }
@media (max-width: 599px) {
	.helden-header .helden-konto-button { display: none; }
	.helden-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem) 0 2rem;
	}
	.helden-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding: 3.5rem 1.25rem 0;
		width: 100%;
	}
	.helden-header .is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		width: 100%;
		gap: 0 !important;
	}
	.helden-header .is-menu-open .wp-block-navigation-item {
		width: 100%;
		align-items: stretch !important;
		border-bottom: 1px solid #e3ded6;
	}
	.helden-header .is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		padding: .85rem 0 !important;
		font-size: 1.15rem;
		justify-content: flex-start;
	}
	.helden-header .is-menu-open .wp-block-navigation__submenu-container {
		width: 100%;
		box-shadow: none !important;
		border-top: 0 !important;
		padding: 0 0 .5rem 1rem !important;
		background: transparent !important;
	}
	.helden-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
	.helden-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: .55rem 0 !important;
		font-size: 1rem;
	}
	/* Konto-Eintrag als roter Button ganz oben */
	.helden-header .is-menu-open .helden-konto-link {
		display: flex !important;
		order: -1;
		border-bottom: 0;
		margin-bottom: 1rem;
	}
	.helden-header .is-menu-open .helden-konto-link .wp-block-navigation-item__content {
		box-sizing: border-box;
		justify-content: center;
		padding: .9rem 1rem !important;
		border-radius: 6px;
		background: var(--wp--preset--color--rot);
		color: var(--wp--preset--color--papier) !important;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .04em;
	}
}

/* Zwei Helden: auf dem Handy Logo oben rechts in der Ecke */
@media (max-width: 600px) {
	.helden-held { position: relative; flex-direction: column; align-items: flex-start !important; }
	.helden-held__logo {
		position: absolute;
		top: var(--wp--preset--spacing--30);
		right: var(--wp--preset--spacing--30);
	}
	.helden-held__logo img { width: 72px !important; height: 72px !important; }
	.helden-held h2 { padding-right: 84px; min-height: 72px; display: flex; align-items: center; }
}

/* ==========================================================================
   Beitragsnavigation (Blog und Presse): zwei Karten mit Vorschaubild
   ========================================================================== */
.helden-beitragsnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.helden-beitragsnav > * { margin: 0 !important; }
.helden-beitragsnav__karte {
	display: flex;
	align-items: stretch;
	min-height: 140px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--asphalt);
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(28, 31, 34, .08);
	transition: box-shadow .2s ease, transform .2s ease;
}
.helden-beitragsnav__karte:hover,
.helden-beitragsnav__karte:focus-visible {
	box-shadow: var(--wp--preset--shadow--karte), 0 12px 28px rgba(28, 31, 34, .18);
	transform: translateY(-3px);
}
.helden-beitragsnav__karte:focus-visible { outline: 3px solid var(--wp--preset--color--asphalt); outline-offset: 2px; }
.helden-beitragsnav__karte--nachher { flex-direction: row-reverse; text-align: right; }
.helden-beitragsnav__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .4rem;
	padding: var(--wp--preset--spacing--30);
}
.helden-beitragsnav__label {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rot);
}
.helden-beitragsnav__karte--nachher .helden-beitragsnav__label { color: var(--wp--preset--color--blau); }
.helden-beitragsnav__titel {
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.helden-beitragsnav__bildrahmen { flex: 0 0 38%; max-width: 220px; }
.helden-beitragsnav__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 700px) {
	.helden-beitragsnav { grid-template-columns: 1fr; }
	.helden-beitragsnav__platz { display: none; }
	.helden-beitragsnav__karte { min-height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
	.helden-beitragsnav__karte { transition: none; }
	.helden-beitragsnav__karte:hover, .helden-beitragsnav__karte:focus-visible { transform: none; }
}

/* Seitenzahlen unter Blog, Archiv, Suche: große Tasten (min. 48 px), auf dem Handy umbrechend */
.wp-block-query-pagination {
	gap: .5rem;
	align-items: center;
	font-weight: 700;
	font-size: 1.05rem;
}
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 1rem;
	margin: 0 !important;
	border: 2px solid var(--wp--preset--color--asphalt);
	border-radius: 6px;
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--asphalt);
	text-decoration: none;
	line-height: 1;
	transition: background-color .15s, color .15s, border-color .15s;
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--rot);
	border-color: var(--wp--preset--color--rot);
	color: var(--wp--preset--color--papier);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--asphalt);
	color: var(--wp--preset--color--kreide);
}
.wp-block-query-pagination .page-numbers.dots {
	min-width: auto;
	padding: 0 .25rem;
	border: 0;
	background: none;
}
@media (max-width: 600px) {
	/* Zahlen oben über die ganze Breite, darunter „Neuere“ / „Ältere“ nebeneinander */
	.wp-block-query-pagination {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
	.wp-block-query-pagination-numbers {
		grid-column: 1 / -1;
		order: -1;
	}
	.wp-block-query-pagination-previous { grid-column: 1; }
	.wp-block-query-pagination-next { grid-column: 2; }
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		width: 100%;
		min-height: 52px;
	}
}

/* Lange deutsche Wörter (z. B. „Datenschutzerklärung“) sauber trennen statt mitten im Wort umbrechen */
h1, h2, h3, .wp-block-post-title {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
	.helden-karte { transition: none; }
	.helden-karte:hover { transform: none; }
	.helden-wissen__karte,
	.helden-wissen__mehr span { transition: none; }
	.helden-wissen__karte:hover,
	.helden-wissen__karte:focus-within,
	.helden-wissen__karte:hover .helden-wissen__mehr span { transform: none; }
}