/*!
Theme Name: Petinesca
Theme URI: https://github.com/tvstudenwebmaster-arch/tvstuden.ch
Author: Turnverein Studen (Lars Merino)
Author URI: https://www.tvstuden.ch
Description: Block-Theme für den Turnverein Studen. Sportlich, dreifarbig (Grün/Gelb/Rot), fotolastig. Gestaltung lebt im Theme, keine Page-Builder-Plugins.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petinesca
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, sticky-post, translation-ready
*/

/* =========================================================================
   Petinesca – Basis-Stile (Phase 2)
   Tokens kommen aus theme.json (--wp--preset--*, --wp--custom--*).
   Hier nur, was theme.json nicht kann: diagonale Kanten, Trikot-Trimmung,
   Link-/Fokus-Feinschliff, Bewegung.
   ========================================================================= */

/* ---- Grundlinien ------------------------------------------------------- */

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a) {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: var(--wp--preset--color--gelb);
	transition: text-decoration-color var(--wp--custom--transition),
		color var(--wp--custom--transition);
}
:where(a:hover) { text-decoration-thickness: 3px; }

/* Sichtbarer Fokus – gelber Ring, trägt auf Papier wie auf Grün */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gelb);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--tinte);
}

/* Kein Lücke zwischen Kopfbereich und Seiteninhalt (WPs Standard-Blockabstand
   zwischen den obersten Blöcken schiebt sonst 20px zwischen Header und Main). */
main { margin-top: 0; }

/* Lesebreite unter 80 Zeichen für zusammenhängenden Text – gilt nicht für
   kurze Taglines/Lauftext in Farbbändern (Hero, CTA), die mit Überschrift
   und Button auf gleicher Breite stehen sollen. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.is-layout-constrained > p {
	max-width: var(--wp--custom--measure);
}
.pt-hero-band > p,
.pt-band-gruen > p,
.pt-band-gelb > p,
.pt-band-rot > p {
	max-width: var(--wp--style--global--content-size, 46rem);
}

/* Silbentrennung nur im Fliesstext */
p { hyphens: auto; }
h1, h2, h3, h4 { hyphens: manual; text-wrap: balance; }

/* ---- Diagonale Kante (Trikot-Saum) ---------------------------------- --
   Eine flache, konstante Schräge. Immer gleiche Richtung: oben-links hoch,
   unten-rechts tief. --wp--custom--kante = vertikale Tiefe der Schräge.   */

.pt-cut-b {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--kante)), 0 100%);
}
.pt-cut-t {
	clip-path: polygon(0 var(--wp--custom--kante), 100% 0, 100% 100%, 0 100%);
}
/* Bild diagonal beschneiden + Sicherheitspuffer, damit keine Köpfe fallen */
.pt-cut-b > img,
.pt-cut-b .wp-block-post-featured-image img { display: block; }

/* ---- Trikot-Trimmung: drei Farbstreifen an einer Kante -------------- */

.pt-trim { position: relative; }
.pt-trim::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--wp--custom--trim);
	background: linear-gradient(
		to right,
		var(--wp--preset--color--gruen-hell) 0 33.333%,
		var(--wp--preset--color--gelb) 33.333% 66.666%,
		var(--wp--preset--color--rot) 66.666% 100%
	);
}

/* ---- Farbbänder ----------------------------------------------------- --
   Volltonflächen mit passender Textfarbe. .alignfull macht sie randlos.  */

.pt-band-gruen { background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--papier-rein); }
.pt-band-gelb  { background: var(--wp--preset--color--gelb);  color: var(--wp--preset--color--tinte); }
.pt-band-rot   { background: var(--wp--preset--color--rot);   color: var(--wp--preset--color--papier-rein); }

.pt-band-gruen :where(h1, h2, h3, h4, a):not(.wp-block-button__link),
.pt-band-rot   :where(h1, h2, h3, h4, a):not(.wp-block-button__link) { color: var(--wp--preset--color--papier-rein); }
.pt-band-gelb  :where(h1, h2, h3, h4, a):not(.wp-block-button__link) { color: var(--wp--preset--color--tinte); }

.pt-band-gruen a, .pt-band-rot a { text-decoration-color: var(--wp--preset--color--gelb); }

/* ---- Abschnittsüberschrift mit gelbem Grundstrich ------------------ */

.pt-h2-strich > h2::after,
h2.pt-strich::after {
	content: "";
	display: block;
	width: 5.5rem;
	height: 5px;
	margin-top: 0.5rem;
	border-radius: 2px;
	background: var(--wp--preset--color--gelb);
}

/* ---- Zahlen / Resultate: Saira Condensed --------------------------- */

.pt-score,
.wp-block-table.is-style-resultate td.pt-num,
.pt-date {
	font-family: var(--wp--preset--font-family--cond);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}
.pt-date {
	display: inline-block;
	padding: 0.1em 0.5em;
	font-weight: 700;
	color: var(--wp--preset--color--papier-rein);
	background: var(--wp--preset--color--rot);
	border-radius: 3px;
}

/* Resultat-Tabelle: grüner Kopf, gelbe Summenzeile, roter Rang */
.wp-block-table.is-style-resultate { font-family: var(--wp--preset--font-family--cond); }
.wp-block-table.is-style-resultate th {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--papier-rein);
	text-align: left;
}
.wp-block-table.is-style-resultate td { border-bottom: 1px solid var(--wp--preset--color--linie); }
.wp-block-table.is-style-resultate tr:last-child td {
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--tinte);
	font-weight: 700;
	border-bottom: 0;
}

/* ---- Kopfbereich --------------------------------------------------- */

.wp-block-template-part.site-header,
.pt-header {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--papier-rein);
}
.pt-header a { color: var(--wp--preset--color--papier-rein); }
.pt-header .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.pt-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.pt-header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.pt-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.pt-header .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gelb);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Logo weiss auf grünem Kopf (schwarze Wortmarke wird invertiert) */
.pt-header .wp-block-site-logo img {
	filter: brightness(0) invert(1);
	width: clamp(120px, 30vw, 160px);
	height: auto;
}

/* Aufklapp-Untermenü im Kopf: auf Hover, dunkelgrüne Fläche */
.pt-header .wp-block-navigation .wp-block-navigation-submenu {
	--wp--preset--color--gruen-dunkel: #0b2a1e;
}
.pt-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--gruen-dunkel);
	border: 0;
	border-top: 3px solid var(--wp--preset--color--gelb);
	min-width: 13rem;
	padding-block: 0.4rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.pt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--papier-rein);
	padding: 0.5rem 1rem;
}
.pt-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background-color: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}
/* Chevron am Elternpunkt */
.pt-header .wp-block-navigation__submenu-icon { fill: currentColor; }

/* ---- Fussbereich: diagonal angeschnitten ------------------------- */

.pt-footer {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--papier-rein);
}
.pt-footer :where(a, h1, h2, h3, h4) { color: var(--wp--preset--color--papier-rein); }
.pt-footer a { text-decoration-color: var(--wp--preset--color--gelb); }

/* ---- Galerie: Kontaktbogen, immer rechtwinklig ---------------- */

.wp-block-gallery.is-style-kontaktbogen { --wp--style--unstable-gallery-gap: 6px; }
.wp-block-gallery.is-style-kontaktbogen .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
}

/* ---- Bewegung --------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* Startseiten-Moment: Aufmacherbild setzt sich einmal (kein Endlos-Parallax) */
	.pt-hero .wp-block-post-featured-image img,
	.pt-hero > .wp-block-image img,
	.pt-hero-slideshow {
		animation: pt-settle 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	@keyframes pt-settle { from { transform: scale(1.06); } }

	/* Hero-Bilder lösen sich sanft ab – Endlosschlaufe, drei Bilder */
	.pt-hero-slideshow img {
		animation: pt-hero-crossfade 18s infinite;
	}
	.pt-hero-slideshow img:nth-child(1) { animation-delay: 0s; }
	.pt-hero-slideshow img:nth-child(2) { animation-delay: 6s; }
	.pt-hero-slideshow img:nth-child(3) { animation-delay: 12s; }
	@keyframes pt-hero-crossfade {
		0%, 100% { opacity: 0; }
		4%, 30% { opacity: 1; }
		36% { opacity: 0; }
	}

	/* Drei Einstiege staffeln beim Scrollen herein */
	@supports (animation-timeline: view()) {
		.pt-einstieg > * {
			animation: pt-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
		@keyframes pt-rise { from { opacity: 0; transform: translateY(16px); } }
	}
}

/* =========================================================================
   Bausteine für Templates & Patterns (Phase 3)
   ========================================================================= */

/* ---- Hero ------------------------------------------------------ --
   Aufmacherbild diagonal beschnitten, Farbband schiebt sich darunter.   */

.pt-hero { position: relative; }
.pt-hero .pt-hero-media img,
.pt-hero .wp-block-post-featured-image img {
	width: 100%;
	max-height: min(64vh, 30rem);
	object-fit: cover;
}

/* Drei Aufmacherbilder übereinander gestapelt, eines bestimmt die Höhe */
.pt-hero-slideshow { position: relative; }
.pt-hero-slideshow img:not(:first-child) {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
}
.pt-hero .pt-hero-band {
	margin-top: calc(var(--wp--custom--kante) * -1);
	position: relative;
	z-index: 1;
}

/* ---- Anlass: Datumsblock (Anzeigetafel) ---------------------- */

.pt-anlass {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linie);
}
.pt-anlass:last-of-type { border-bottom: 1px solid var(--wp--preset--color--linie); }
.pt-anlass > * { align-self: flex-start; }
.pt-anlass .wp-block-group { align-self: stretch; }
.pt-anlass .pt-date { margin-bottom: 0.15rem; }
.pt-anlass .wp-block-post-title { margin: 0; }
.pt-anlass .wp-block-post-excerpt { margin: 0.15rem 0 0; color: var(--wp--preset--color--grau); }
.pt-anlass .wp-block-post-featured-image { display: none; }

/* ---- Startseite: News als Zeilen-Liste statt Kachel ----------- */

.pt-news-row {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linie);
}
.pt-news-list .wp-block-post-template > :last-child .pt-news-row { border-bottom: 1px solid var(--wp--preset--color--linie); }
.pt-news-row .wp-block-post-featured-image { flex: 0 0 96px; margin: 0; }
.pt-news-row .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 96px; display: block; border-radius: 3px; }
.pt-news-row .wp-block-post-title { margin: 0; }

/* ---- Startseite: Riegen als schlanke Linkliste in der Seitenspalte */

.pt-side-list .wp-block-post-title { margin: 0; }
.pt-side-list .wp-block-post-title a { text-decoration: none; }

/* ---- Karten-Raster (News, Riegen, Vorstand) ----------------- */

/* Raster kommt vom nativen Grid-Layout des post-template-Blocks;
   hier nur Lücken und Kartenlook. */
.pt-grid .wp-block-post-template.is-layout-grid { gap: var(--wp--preset--spacing--50); }
.pt-grid .wp-block-post,
.pt-grid > li {
	background: var(--wp--preset--color--papier-rein);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	transition: transform var(--wp--custom--transition);
}
.pt-grid .wp-block-post:hover { transform: translateY(-2px); }
.pt-grid .wp-block-post-featured-image { margin: 0; position: relative; }
.pt-grid .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block; }
.pt-grid .wp-block-post-title,
.pt-grid .wp-block-post-excerpt,
.pt-grid .wp-block-post-date,
.pt-grid .wp-block-post-terms { padding-inline: var(--wp--preset--spacing--40); }
.pt-grid .wp-block-post-title { margin-top: var(--wp--preset--spacing--40); }
.pt-grid .wp-block-post-date,
.pt-grid .wp-block-post-terms { margin-block: var(--wp--preset--spacing--20); }
.pt-grid .wp-block-post > :last-child { margin-bottom: var(--wp--preset--spacing--40); }

/* Diagonaler Eck-Keil – NUR auf dem Bild, nie über dem Text.
   Karten ohne Bild bekommen stattdessen eine grüne Oberkante. */
.pt-grid.is-news .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--wp--preset--color--gruen);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
}
.pt-grid.is-news .wp-block-post:not(:has(.wp-block-post-featured-image img)) {
	border-top: 4px solid var(--wp--preset--color--gruen);
}

/* Kategorie als Chip – erklärt sich als Filter, nicht als Streutext */
.pt-grid .wp-block-post-terms a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--cond);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gruen);
	background: var(--wp--preset--color--gruen-schleier);
	padding: 0.15em 0.6em;
	border-radius: 3px;
	text-decoration: none;
}
.pt-grid .wp-block-post-terms a:hover {
	background: var(--wp--preset--color--rot);
	color: var(--wp--preset--color--papier-rein);
}

/* Buttons auf Farbbändern lesbar machen; Hover überall rot */
.pt-band-gruen .wp-block-button__link,
.pt-band-rot .wp-block-button__link {
	background: var(--wp--preset--color--papier-rein);
	color: var(--wp--preset--color--gruen);
}
.pt-band-gruen .wp-block-button__link:hover,
.pt-band-gruen .wp-block-button__link:focus,
.pt-band-gelb .wp-block-button__link:hover,
.pt-band-gelb .wp-block-button__link:focus,
.pt-band-rot .wp-block-button__link:hover,
.pt-band-rot .wp-block-button__link:focus {
	background: var(--wp--preset--color--rot);
	color: var(--wp--preset--color--papier-rein);
}

/* ---- Vorstand-Karten -------------------------------------- */

.pt-grid.is-vorstand .wp-block-post-title { margin-top: var(--wp--preset--spacing--30); }
.pt-grid.is-vorstand .pt-person-amt {
	padding-inline: var(--wp--preset--spacing--40);
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--grau);
	font-family: var(--wp--preset--font-family--grotesk);
}
.pt-person-kontakt {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--meta);
}
.pt-person-kontakt p { margin: 0.1rem 0; }
.pt-person-kontakt .pt-person-tel a {
	font-family: var(--wp--preset--font-family--cond);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}
.pt-person-kontakt .pt-person-mail a { word-break: break-all; }

/* ---- Riegen-Steckbrief -------------------------------------- */

.pt-steckbrief {
	background: var(--wp--preset--color--papier-rein);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.pt-steckbrief dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.pt-steckbrief dt {
	font-family: var(--wp--preset--font-family--cond);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	color: var(--wp--preset--color--grau);
}
.pt-steckbrief dd { margin: 0; font-family: var(--wp--preset--font-family--grotesk); }

/* ---- Vereinsblitz-Download ------------------------------- */

.pt-blitz-download { margin-block: var(--wp--preset--spacing--40); }
.pt-blitz-download .wp-block-button__link::before {
	content: "\2193\00a0"; /* Pfeil nach unten */
	font-weight: 700;
}
/* im Karten-Raster kleiner und randbündig */
.pt-grid .pt-blitz-download { margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.pt-grid .pt-blitz-download .wp-block-button__link {
	font-size: 0.8rem;
	padding: 0.4rem 0.8rem;
}

/* ---- Downloads-Liste -------------------------------------- */

.pt-downloads { list-style: none; margin: 0; padding: 0; }
.pt-downloads li {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--meta);
}
.pt-downloads li::before { content: "▸"; color: var(--wp--preset--color--gruen-hell); }

/* ---- Navigation: aktiver Punkt, Mobile-Overlay ----------- */

.pt-header .wp-block-navigation {
	--wp--style--block-gap: var(--wp--preset--spacing--50);
}
.pt-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--gruen);
}
.pt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	align-items: flex-start;
}
.pt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
	align-items: flex-start;
}
.pt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	align-items: flex-start !important;
}

/* Schliessen-Knopf: deutlicher Kreis statt nacktem Kreuz, Abstand zum Rand */
.pt-header .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40) !important;
	right: var(--wp--preset--spacing--40) !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	transition: background var(--wp--custom--transition);
}
.pt-header .wp-block-navigation__responsive-container-close:hover,
.pt-header .wp-block-navigation__responsive-container-close:focus {
	background: rgba(255, 255, 255, 0.22);
}

/* Dropdown-Pfeil im Overlay sichtbar lassen (Kern-CSS blendet ihn dort sonst aus)
   und beim Öffnen drehen, damit klar ist, was auf-/zuklappt. */
.pt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: inline-flex !important;
	align-self: flex-start !important;
	margin-top: -0.75em;
}
.pt-header .wp-block-navigation__submenu-icon svg {
	transition: transform var(--wp--custom--transition);
}
.pt-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}
.pt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding-block: 0.4rem;
}

/* WP zeigt Untermenüs im Overlay per Default immer ausgeklappt
   (openSubmenusOnClick wirkt nur auf die Desktop-Hover-Variante) –
   hier explizit zuklappen und nur bei aria-expanded="true" öffnen. */
.pt-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	padding-top: 0;
}
.pt-header .wp-block-navigation__responsive-container.is-menu-open .has-child.pt-submenu-open > .wp-block-navigation__submenu-container {
	height: auto;
	overflow: initial;
	visibility: visible;
	opacity: 1;
	padding-top: var(--wp--style--block-gap, 2em);
}

/* ---- Volltonband randlos ---------------------------------- */

.pt-band-gruen.alignfull,
.pt-band-gelb.alignfull,
.pt-band-rot.alignfull {
	padding-inline: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--70);
}

/* ---- Kleinkram ------------------------------------------------- */

.pt-measure { max-width: var(--wp--custom--measure); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 0.5rem; left: 0.5rem;
	z-index: 100000;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--papier-rein);
	color: var(--wp--preset--color--tinte);
}