/*
Theme Name: LB Base
Theme URI: https://lukasbudimaier.com
Author: Lukas Budimaier
Author URI: https://lukasbudimaier.com
Description: Reduziertes Block-Theme von Lukas Budimaier. Basiert auf Spiekermann von Anders Norén (https://andersnoren.se), GPLv2 or later.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: lb-base
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Inhalt
   1. Grundlagen
   2. Variablen (Logo, Textbreite)
   3. Typografie
   4. Header und Navigation
   5. Raster für Unterseiten (1/3 zu 2/3)
   6. Bausteine (Daten-Zeilen, Icons, Logos, FAQ)
   7. Startseite (Projektraster)
   8. Footer
   ========================================================================== */


/* 1. Grundlagen
   ========================================================================== */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'salt' on, 'calt' off, 'liga' off;
	font-synthesis: small-caps style;
}

:root :where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a,
.wp-element-button {
	transition: color .1s linear, background-color .1s linear, border-color .1s linear, opacity .1s linear;
}

thead {
	background-color: var(--wp--preset--color--contrast);
	border: none;
	color: var(--wp--preset--color--base);
}

th {
	font-weight: 400;
}

/* Schrift-Varianten (OpenType) im Seiteninhalt: alternative Zeichenformen der Nudica.
   Prägt das Schriftbild im Inhalt, bitte nicht entfernen. */
.entry-content {
	font-feature-settings: 'cv10' on, 'ss01' on, 'ss03' on, 'ss02' on, 'liga' off, 'calt' off;
}

/* Leere Gruppen ausblenden (z. B. Seitennavigation ohne Inhalt) */
.hide-empty:not(:has(*)) {
	display: none !important;
}

/* Sprungmarken (z. B. /downloads/#agb): etwas Luft nach oben */
[id] {
	scroll-margin-top: var(--wp--preset--spacing--80);
}


/* 2. Variablen
   ========================================================================== */

:root {
	/* Logo: Breite und Seitenverhältnis (Höhe / Breite). Pro Kunde anpassen. */
	--lb-base-logo-width: 298px;   /* Desktop */
	--lb-base-logo-ratio: 0.28;    /* germann.-Logo */

	/* Maximale Textbreite in der rechten Spalte der Unterseiten (wie Spiekermann) */
	--lb-base-text-max: 788px;
}

@media (max-width: 768px) {
	:root {
		--lb-base-logo-width: 200px;  /* Handy */
	}
}


/* 3. Typografie
   Stufen: 36 px (Überschriften, Einleitung), 24 px (Mittel), 16 px (Klein)
   ========================================================================== */

/* Handy: Überschriften 28 px (Fließtext überall fix 16 px, siehe theme.json) */
@media (max-width: 781px) {
	body {
		--wp--preset--font-size--heading-1: 28px;
		--wp--preset--font-size--display: 28px;
	}
}

/* Stufe "Mittel" (18–24 px): einheitlicher Zeilenabstand 1,3 */
.has-medium-font-size {
	line-height: 1.3;
}

/* Blockstil "Einleitung": Überschrift mit Fließtext, erster Satz unterstrichen (Home, Leistungen) */
.wp-block-heading.is-style-lb-base-intro {
	font-size: var(--wp--preset--font-size--heading-1) !important;
	font-weight: 400 !important;
	line-height: 1.2; /* wie alle Überschriften, nah am Standard der Nudica (1,22) */
	margin-bottom: 0;
	margin-top: 0;
}

/* Unterstreichung in Überschriften: feine Linie mit Abstand */
:where(h1, h2, h3) span[style*="underline"] {
	text-decoration-thickness: 0.04em;
	text-underline-offset: 0.14em;
}


/* 4. Header und Navigation
   ========================================================================== */

.lb-base-logo img {
	height: auto;
}

.lb-base-logo,
.lb-base-logo img {
	width: var(--lb-base-logo-width) !important;
}

/* Mobiles Menü (ausgeklappt): Hintergrund und Schrift wie die Seite */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}


/* 5. Raster für Unterseiten (Spiekermann-Logik)
   Links 1/3 Überschrift, rechts 2/3 Inhalt, Text maximal 788 px breit.
   ========================================================================== */

@media (min-width: 782px) {
	.lb-base-split > .wp-block-column:first-child {
		flex-basis: 33.33% !important;
	}
	.lb-base-split > .wp-block-column:last-child {
		flex-basis: 66.66% !important;
		flex-grow: 0 !important;
	}
	.lb-base-split > .wp-block-column:last-child > * {
		max-width: var(--lb-base-text-max);
	}
}

/*
 * Optischer Ausgleich: Die Großbuchstaben der ersten Textzeile rechts beginnen
 * auf der Höhe der Kleinbuchstaben (x-Höhe) der Überschrift links.
 * Nudica (hhea): Oberlänge 963, Unterlänge 257, Versalhöhe 700, x-Höhe 511.
 *   x-Höhe Überschrift (Zeilenhöhe 1,2):   Schriftgröße × 0,442
 *   Versalhöhe Fließtext (Zeilenhöhe 1,6): Schriftgröße × 0,453
 */
.lb-base-split {
	--lb-base-head-size: var(--wp--preset--font-size--display);
}

.lb-base-split:has(> .wp-block-column:first-child .has-heading-1-font-size) {
	--lb-base-head-size: var(--wp--preset--font-size--heading-1);
}

@media (min-width: 782px) {
	.lb-base-split > .wp-block-column:last-child:has(> p:first-child) {
		padding-top: calc(var(--lb-base-head-size) * 0.442 - var(--wp--preset--font-size--x-small) * 0.453);
	}
}


/* 6. Bausteine
   ========================================================================== */

/* Daten-Zeilen: Gruppen mit Linie oben, Beschriftung links, Wert rechts */
.lb-base-kv-group {
	border-top: 1px solid var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--80) !important;
	padding-top: var(--wp--preset--spacing--80);
}

.lb-base-kv-row {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--grid-gutter);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin: 0 !important;
}

.lb-base-kv-row + .lb-base-kv-row {
	margin-top: var(--wp--preset--spacing--70) !important;
}

.lb-base-kv-row > * {
	margin: 0 !important;
}

.lb-base-kv-label {
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.6;
	padding-top: 0.25em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.lb-base-kv-row {
		grid-template-columns: 1fr;
	}
}

/* Linien-Icons (Leistungen, Büro) */
.lb-base-icon {
	color: var(--wp--preset--color--contrast);
	line-height: 0;
}

.lb-base-icon svg {
	height: 48px;
	width: 48px;
}

/* Logos (Impressum): ohne weißen Kasten auf dem Hintergrund */
.lb-base-logos {
	gap: var(--wp--preset--spacing--50) !important;
	margin-top: var(--wp--preset--spacing--50) !important;
}

.lb-base-logo-item {
	margin: 0 !important;
}

.lb-base-logo-item img {
	mix-blend-mode: multiply;
	width: auto !important;
}

.lb-base-logo-strip {
	margin-top: var(--wp--preset--spacing--40) !important;
}

.lb-base-logo-strip img {
	height: auto !important;
	max-width: 100%;
	width: 420px !important;
}

/* FAQ (Akkordeon): schwarze Linien, Fragen Stufe Mittel, Antworten grau */
.lb-base-faq-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--80) !important;
}

.lb-base-faq-toggle {
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0;
}

.lb-base-faq-toggle:hover {
	text-decoration: underline;
}

.lb-base-faq {
	border-top: 1px solid var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--30) !important;
}

.lb-base-faq .lb-base-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	margin: 0 !important;
}

.lb-base-faq .lb-base-faq-item > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	gap: 2em;
	justify-content: space-between;
	line-height: 1.3;
	list-style: none;
	padding: 1.25em 0;
}

.lb-base-faq .lb-base-faq-item > summary::-webkit-details-marker {
	display: none;
}

.lb-base-faq .lb-base-faq-item > summary::after {
	border-bottom: 1.5px solid var(--wp--preset--color--contrast);
	border-right: 1.5px solid var(--wp--preset--color--contrast);
	content: "";
	flex: none;
	height: .5em;
	margin-right: .3em;
	transform: translateY(-25%) rotate(45deg);
	transition: transform .2s ease;
	width: .5em;
}

.lb-base-faq .lb-base-faq-item[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.lb-base-faq .lb-base-faq-item > :not(summary) {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	margin-top: 0;
	max-width: 40em;
	padding-bottom: 1.5em;
}


/* Projekttext in Beiträgen auf derselben linken Linie wie Titel und Beitragsbild */
.single-post .wp-block-post-content > p {
	max-width: var(--wp--style--global--wide-size);
}

/* Beitragsbild in Projekten: immer ganz im Bildschirm sichtbar, Seitenverhältnis bleibt */
.single-post .wp-block-post-featured-image img {
	height: auto;
	max-height: calc(100svh - 2 * var(--wp--preset--spacing--body-margin));
	max-width: 100%;
	width: auto;
}

/*
 * Horizontale Galerie in Beiträgen (wie früher Meow Gallery bei Schnick Schnack):
 * Ein normaler Galerie-Block wird zu einer Bildreihe mit gleicher Höhe,
 * die seitlich gescrollt wird und rechts bis an den Bildschirmrand läuft.
 */
.single-post .wp-block-post-content .wp-block-gallery.has-nested-images {
	--lb-base-gallery-height: 500px;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-left: calc((100% - min(100%, var(--wp--style--global--wide-size))) / 2) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--body-margin))) !important;
	max-width: none !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--body-margin));
	scrollbar-width: none;
}

.single-post .wp-block-post-content .wp-block-gallery.has-nested-images::-webkit-scrollbar {
	display: none;
}

.single-post .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	height: var(--lb-base-gallery-height);
	margin: 0;
	max-width: none;
	width: auto;
}

.single-post .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	height: 100%;
	max-width: none;
	object-fit: cover;
	width: auto;
}

@media (max-width: 781px) {
	.single-post .wp-block-post-content .wp-block-gallery.has-nested-images {
		--lb-base-gallery-height: 300px;
	}
}

/* Pfeile unter der Galerie, rechts am Seitenrand wie das Header-Menü
   (werden per JavaScript eingefügt, nur wenn die Reihe scrollbar ist) */
.lb-base-gallery-nav {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--40) !important;
}

.lb-base-gallery-nav[hidden] {
	display: none;
}

.lb-base-gallery-nav button {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	transition: opacity .2s ease;
	width: 32px;
}

/* Pfeil wie beim Aufklappen in den FAQ */
.lb-base-gallery-nav button::before {
	border-bottom: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	content: "";
	height: 10px;
	width: 10px;
}

.lb-base-gallery-nav .lb-base-gallery-prev::before {
	transform: translateX(25%) rotate(135deg);
}

/* Spitze des rechten Pfeils genau auf dem Seitenrand */
.lb-base-gallery-nav .lb-base-gallery-next {
	justify-content: flex-end;
}

.lb-base-gallery-nav .lb-base-gallery-next::before {
	transform: translateX(-25%) rotate(-45deg);
}

.lb-base-gallery-nav button:disabled {
	cursor: default;
	opacity: .25;
}

/* Handy und Touch: nur wischen, keine Pfeile */
@media (max-width: 781px), (hover: none) {
	.lb-base-gallery-nav {
		display: none !important;
	}
}


/* 7. Startseite
   ========================================================================== */

/* Abstand Einleitung zu Raster = Abstand Header-Menü zu Einleitung */
.lb-base-front-grid {
	padding-top: calc( var(--wp--preset--spacing--110) + ( var(--lb-base-logo-width) * var(--lb-base-logo-ratio) - 1.5 * var(--wp--preset--font-size--x-small) ) / 2 ) !important;
}

/* Projektraster: auf dem Handy ohne Einblend-Animation */
@media (max-width: 768px) {
	.is-style-lb-base-post-template-asymmetrical-grid-animate > li.will-animate {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}


/* 8. Footer
   ========================================================================== */

/* Abstand unten = Abstand der Menüzeile zum oberen Rand (gespiegelt) */
.lb-base-footer {
	padding-bottom: calc( var(--wp--preset--spacing--body-margin) + ( var(--lb-base-logo-width) * var(--lb-base-logo-ratio) - 1.6 * var(--wp--preset--font-size--x-small) ) / 2 );
}

/* Links im Footer wie im Header-Menü: ohne Unterstreichung, beim Darüberfahren unterstrichen */
.lb-base-footer-menu a {
	text-decoration: none;
}

.lb-base-footer-menu a:hover {
	text-decoration: underline;
}

/* Spalten so breit wie ihr Inhalt, gleich große Abstände, letzte Spalte rechtsbündig */
@media (min-width: 782px) {
	.lb-base-footer-menu {
		justify-content: space-between;
	}
	.lb-base-footer-menu > .wp-block-column {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.lb-base-footer-end {
		text-align: right;
	}
}

@media (max-width: 781px) {
	.lb-base-footer {
		padding-bottom: var(--wp--preset--spacing--body-margin);
	}
}