/*
Theme Name:   PW Twenty Twenty Two Child
Template:     twentytwentytwo
Version:      1.3
*/

/* ============================================================
   POLARWERK · Child-Theme-Styles

   Aufbau
    1  Accordion (.pw-acc)
    2  Symbol-Links (Kontakt, Portfolio, Schließen)
    3  Visual Portfolio – Read-more als Symbol-Link
    4  Visual Portfolio – Kundenname
    5  Visual Portfolio – Load more
    6  Schließen-Button – Position
    7  Menüleiste
    8  Logo – Kontrast über dunklen Abschnitten
    9  Tabellen
   10  Footer Curtain Reveal
   11  Zitatkasten im GutSlider
   12  Hilfsklassen
   13  Reduzierte Bewegung (alle Abschnitte)

   Scroll-Reveal: eigene Datei assets/css/reveal.css.
   Das Feld „Zusätzliches CSS“ im Site-Editor bleibt leer.
   ============================================================ */


/* ============================================================
   1  ACCORDION  ·  .pw-acc
   Baut auf dem Core-Accordion-Block auf.
   – Topline = im Editor fett markiertes Wort (Strg/Cmd+B)
   – Zahl automatisch per CSS-Counter
   – Rahmen rundum, Overlay-Band bei Hover/Fokus/offen
   – Icon: Kreuz aus zwei 1px-Balken statt „+“; offen dreht es
     auf -45deg, der senkrechte Balken blendet aus
   ============================================================ */

/* Ankerpunkt für das sanfte Nachscrollen (assets/js/accordion-scroll.js) */
.wp-block-accordion-item {
	scroll-margin-top: 2rem;
}

.pw-acc {
	--pw-acc-accent: var(--wp--preset--color--foreground, currentColor);
	--pw-hover: var(--wp--preset--color--background);
	counter-reset: pw-acc;
}

/* Zähler, 1px-Rahmen, Overlay-Band. position:relative = Anker für das Icon. */
.pw-acc .wp-block-accordion-item {
	position: relative;
	counter-increment: pw-acc;
	border: 1px solid var(--wp--preset--color--foreground, currentColor);
	transition: background-color .3s ease;
	margin-block: 0;            /* kein unbedeckter Spalt */
	padding-block: calc(var(--wp--style--block-gap, 1rem) / 2);
}

.pw-acc .wp-block-accordion-item:hover,
.pw-acc .wp-block-accordion-item:focus-within,
.pw-acc .wp-block-accordion-item.is-open {
	background: var(--pw-hover);
}

/* Toggle als Raster: [Zahl] [Inhalt]. Rechts Platz für das Icon. */
.pw-acc .wp-block-accordion-heading__toggle {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.25rem;
	align-items: start;
	padding-right: 1.75rem;
}

/* Kleine Zahl (01, 02 …) – Spalte 1 */
.pw-acc .wp-block-accordion-heading__toggle::before {
	content: counter(pw-acc, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--pw-acc-accent);
}

/* Textspalte – Spalte 2 */
.pw-acc .wp-block-accordion-heading__toggle-title {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	transition: transform .4s ease;
}

/* Core-Hover-Unterstreichung abschalten */
.pw-acc .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Topline = im Editor fett markiertes Wort */
.pw-acc .wp-block-accordion-heading__toggle-title strong {
	order: -1;
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pw-acc-accent);
	padding-bottom: .4rem;
}

/* Einzug nur der Headline bei Hover/Fokus/offen – das Icon bleibt stehen */
.pw-acc .wp-block-accordion-item:hover        .wp-block-accordion-heading__toggle-title,
.pw-acc .wp-block-accordion-item:focus-within .wp-block-accordion-heading__toggle-title,
.pw-acc .wp-block-accordion-item.is-open      .wp-block-accordion-heading__toggle-title {
	transform: translateX(.6rem);
}

/* ---------- Icon oben rechts ---------- */

.pw-acc .wp-block-accordion-heading__toggle-icon {
	position: absolute;
	top: .9rem;
	right: .9rem;
	margin: 0;
	width: 10px;
	height: 10px;
	font-size: 0;               /* „+“-Glyph des Core-Blocks ausblenden */
	transform: none;            /* Core-Rotation abschalten */
	transform-origin: center;
	transition: transform .3s ease;
}

.pw-acc .wp-block-accordion-heading__toggle-icon::before,
.pw-acc .wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	background-color: currentColor;
	transition: transform .3s ease, opacity .3s ease;
}

/* Waagrechter Balken – bleibt immer sichtbar */
.pw-acc .wp-block-accordion-heading__toggle-icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

/* Senkrechter Balken – blendet im offenen Zustand aus */
.pw-acc .wp-block-accordion-heading__toggle-icon::after {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.pw-acc .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after {
	transform: translateX(-50%) scaleY(0);
	opacity: 0;
}

/* Eigene Drehung statt der Core-Rotation */
.pw-acc .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(-45deg);
}


/* ============================================================
   2  SYMBOL-LINKS (KONTAKT, PORTFOLIO, SCHLIESSEN)
   Button-Block ohne Button-Optik, Symbol als Maske in Theme-Farbe.
   ============================================================ */

.wp-block-button.pw-contact-icon {
	--pw-icon-color: var(--wp--preset--color--foreground);
	--pw-icon-hover: var(--wp--preset--color--primary);
}

.wp-block-button.pw-contact-icon--mail {
	--pw-icon: url("/wp-content/uploads/mail.svg");
	--pw-icon-w: 34px;
	--pw-icon-ratio: 96.28 / 59.68;
}

.wp-block-button.pw-contact-icon--call {
	--pw-icon: url("/wp-content/uploads/call.svg");
	--pw-icon-w: 30px;
	--pw-icon-ratio: 86.76 / 85.93;
	--pw-icon-label: "+49 421 16 30 49-0";
}

/* Portfolio: Read-more-Link in Visual Portfolio (Abschnitt 3) */
.wp-block-button.pw-contact-icon--open {
	--pw-icon: url("/wp-content/uploads/open.svg");
	--pw-icon-w: 24px;
	--pw-icon-ratio: 1;
}

/* Schließen: zurück zur vorherigen Seite (Abschnitt 6, assets/js/close-button.js) */
.wp-block-button.pw-contact-icon--close {
	--pw-icon: url("/wp-content/uploads/close.svg");
	--pw-icon-w: 30px;
	--pw-icon-ratio: 1;
}

.wp-block-button.pw-contact-icon .wp-block-button__link {
	display: inline-block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	color: var(--pw-icon-color);
	text-decoration: none;
	transition: color .2s ease;
}

.wp-block-button.pw-contact-icon .wp-block-button__link::before {
	content: "";
	display: block;
	width: var(--pw-icon-w);
	aspect-ratio: var(--pw-icon-ratio);
	background-color: currentColor;
	-webkit-mask: var(--pw-icon) center / contain no-repeat;
	mask: var(--pw-icon) center / contain no-repeat;
}

.wp-block-button.pw-contact-icon .wp-block-button__link:hover,
.wp-block-button.pw-contact-icon .wp-block-button__link:focus-visible {
	background: none;
	color: var(--pw-icon-hover);
}

.wp-block-button.pw-contact-icon .wp-block-button__link:focus-visible {
	outline: 1px solid var(--pw-icon-hover);
	outline-offset: 4px;
}

/* Anruf: Nummer als Beschriftung bei Hover/Fokus auf Geräten mit Maus */
@media (hover: hover) and (pointer: fine) {
	.wp-block-button.pw-contact-icon--call .wp-block-button__link {
		position: relative;
	}

	.wp-block-button.pw-contact-icon--call .wp-block-button__link::after {
		content: var(--pw-icon-label);
		position: absolute;
		top: calc(100% + .5rem);
		right: 0;
		font-size: var(--wp--preset--font-size--small, .875rem);
		line-height: 1.2;
		white-space: nowrap;
		color: var(--pw-icon-hover);
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
	}

	.wp-block-button.pw-contact-icon--call .wp-block-button__link:hover::after,
	.wp-block-button.pw-contact-icon--call .wp-block-button__link:focus-visible::after {
		opacity: 1;
	}
}


/* ============================================================
   3  VISUAL PORTFOLIO – READ-MORE ALS SYMBOL-LINK
   – Markup aus dem Template-Override
     visual-portfolio/items-list/item-parts/read-more.php
     (Core-Button-Block mit .pw-contact-icon .pw-contact-icon--open)
   – Symbol, Größe, Farben: Abschnitt 2; hier nur Ausrichtung und
     Farbsicherung gegen die Caption-Linkfarbe des Plugins
   ============================================================ */

.vp-portfolio__item-meta > .wp-block-button {
	display: flex;
	justify-content: flex-end;
}

.vp-portfolio .vp-portfolio__item-meta .pw-contact-icon .wp-block-button__link {
	color: var(--pw-icon-color);
}

.vp-portfolio .vp-portfolio__item-meta .pw-contact-icon .wp-block-button__link:hover,
.vp-portfolio .vp-portfolio__item-meta .pw-contact-icon .wp-block-button__link:focus-visible {
	color: var(--pw-icon-hover);
}


/* ============================================================
   4  VISUAL PORTFOLIO – KUNDENNAME ÜBER DEM PROJEKTTITEL
   ============================================================ */

.vp-portfolio__item-meta .vp-portfolio__item-meta-kunde {
	margin: 3em 0 !important;
	font-size: var(--wp--preset--font-size--small, .8125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground);
	opacity: 1;
}


/* ============================================================
   5  VISUAL PORTFOLIO – LOAD MORE
   – Markup und Nachladen bleiben beim Plugin
   – rechtsbündig; Hinweistext (.vp-pagination__label) links neben dem
     Symbol, beide Teil des Links; Typografie wie Fließtext
   – Symbol als Maske wie Abschnitt 2, Größe wie das Portfolio-Symbol
   – beim Laden gedimmt, am Ende der Liste ausgeblendet
   ============================================================ */

.vp-portfolio__layout-elements:has(.vp-pagination[data-vp-pagination-type="load-more"]) {
	justify-content: flex-end;
}

.vp-portfolio__pagination-wrap:has(.vp-pagination[data-vp-pagination-type="load-more"]) {
	flex: 1 1 100%;
}

.vp-pagination[data-vp-pagination-type="load-more"] {
	justify-content: flex-end !important;
	align-items: center;
}

.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__load-more {
	--pw-icon: url("/wp-content/uploads/load-more.svg");
	--pw-icon-w: 24px;
	--pw-icon-ratio: 1;
	--pw-icon-color: var(--wp--preset--color--foreground);
	--pw-icon-hover: var(--wp--preset--color--primary);
	display: inline-flex;
	align-items: center;
	column-gap: var(--wp--style--block-gap, 1.5rem);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	color: var(--pw-icon-color);
	transition: color .2s ease, opacity .2s ease;
}

/* Symbol rechts vom Text */
.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__load-more::before {
	content: "";
	display: block;
	order: 2;
	flex: 0 0 auto;
	width: var(--pw-icon-w);
	aspect-ratio: var(--pw-icon-ratio);
	background-color: currentColor;
	-webkit-mask: var(--pw-icon) center / contain no-repeat;
	mask: var(--pw-icon) center / contain no-repeat;
}

/* Plugin-Texte im Link ausblenden, nur der Hinweistext bleibt */
.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__load-more > span:not(.vp-pagination__label) {
	font-size: 0;
	line-height: 0;
}

.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__label {
	color: inherit;
}

/* Hover (schlägt die Hover-Farbe des VP-Minimal-Stils) */
.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__item > .vp-pagination__load-more:hover,
.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__item > .vp-pagination__load-more:focus-visible {
	color: var(--pw-icon-hover);
}

.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__load-more:focus-visible {
	outline: 1px solid var(--pw-icon-hover);
	outline-offset: 4px;
}

/* Während des Nachladens */
.vp-portfolio__loading .vp-pagination .vp-pagination__load-more {
	opacity: .4;
	cursor: progress;
}

/* Ende der Liste */
.vp-pagination.vp-pagination__no-more {
	display: none;
}


/* ============================================================
   6  SCHLIESSEN-BUTTON – POSITION
   – Block „Schließen (zurück)“ in den Templates „Tools“ und
     „Einzelne Beiträge“ (Buttons-Block .pw-close-bar)
   – rechts bündig mit dem Menü-Button (spacing--50), oben spacing--30
   – Admin-Leiste wird berücksichtigt; z-index wie die Menüleiste
   ============================================================ */

.wp-block-buttons.pw-close-bar {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--30));
	right: var(--wp--preset--spacing--50);
	z-index: 2000;
	margin: 0;
}


/* ============================================================
   7  MENÜLEISTE
   Leiste lässt Klicks durch, nur der Button selbst fängt sie ab.
   ============================================================ */

.pw-menu-bar,
.pw-menu-bar > .wp-block-buttons {
	pointer-events: none;
}

.pw-menu-bar .wp-block-button {
	pointer-events: auto;
}


/* ============================================================
   8  LOGO – KONTRAST ÜBER DUNKLEN ABSCHNITTEN
   Klasse .pw-logo--on-dark setzt assets/js/pw-logo-contrast.js.
   ============================================================ */

.wp-block-site-logo img {
	transition: filter .3s ease;
}

.pw-logo--on-dark .wp-block-site-logo img {
	filter: invert(1);
}


/* ============================================================
   9  TABELLEN
   Nur horizontale Linien, Text oben ausgerichtet.
   !important übersteuert Core-Rahmen und Rahmen aus dem Editor.
   ============================================================ */

.wp-block-table td,
.wp-block-table th {
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--primary) !important;
	vertical-align: top;
	padding: 10px;
}


/* ============================================================
   10  FOOTER CURTAIN REVEAL
   Hauptinhalt deckend, darunter Scroll-Freiraum in Footer-Höhe.
   Bewusst ohne position/z-index (kein Containing-Block für absolut
   positionierte Kindelemente). Wert muss zur Footer-Höhe passen.
   Greift nur in Templates mit <main> direkt in .wp-site-blocks.
   ============================================================ */

.wp-site-blocks > main {
	background-color: var(--wp--preset--color--background);
	margin-bottom: calc(58vh + 480px);
}


/* ============================================================
   11  ZITATKASTEN IM GUTSLIDER (Vorlage „Zitatkasten“, .pw-zitat)
   Zeilen ohne Absatzabstand, volle Inhaltsbreite statt 80 %.
   ============================================================ */

.wp-block-gutsliders-any-content .pw-zitat > p {
	margin-block: 0;
}

.wp-block-gutsliders-any-content .gutslider-content-inner:has(> .pw-zitat) {
	max-width: 100%;
}


/* ============================================================
   12  HILFSKLASSEN
   ============================================================ */

/* Kein Zeilenumbruch innerhalb des Elements */
.kein-umbruch {
	white-space: nowrap;
}


/* ============================================================
   13  REDUZIERTE BEWEGUNG
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.pw-acc .wp-block-accordion-item,
	.pw-acc .wp-block-accordion-heading__toggle-title,
	.pw-acc .wp-block-accordion-heading__toggle-icon,
	.pw-acc .wp-block-accordion-heading__toggle-icon::before,
	.pw-acc .wp-block-accordion-heading__toggle-icon::after,
	.wp-block-button.pw-contact-icon .wp-block-button__link,
	.wp-block-button.pw-contact-icon--call .wp-block-button__link::after,
	.vp-pagination[data-vp-pagination-type="load-more"] .vp-pagination__load-more,
	.wp-block-site-logo img {
		transition: none;
	}

	.pw-acc .wp-block-accordion-item:hover        .wp-block-accordion-heading__toggle-title,
	.pw-acc .wp-block-accordion-item:focus-within .wp-block-accordion-heading__toggle-title,
	.pw-acc .wp-block-accordion-item.is-open      .wp-block-accordion-heading__toggle-title {
		transform: none;
	}
}