/*
Theme Name: Schumacher
Theme URI: https://vorbereitung.schumacher.ac
Author: Schumacher
Description: Schlankes Block-/FSE-Theme für Spedition Schumacher. Ersetzt Salient + WPBakery Page Builder durch native Gutenberg-Blöcke und das schumacher-blocks Custom-Block-Plugin.
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schumacher
*/

/* Mindestabstand der Blöcke zum Viewport-Rand: 20px Desktop (theme.json:
   styles.spacing.padding), 10px mobil. theme.json kennt keine Breakpoints,
   darum hier per Media Query die von useRootPaddingAwareAlignments erzeugten
   Custom Properties überschreiben. WordPress deklariert sie direkt auf
   "body" (nicht ":root") und würde unser ":root" darum immer ausstechen -
   deshalb hier ebenfalls "body" treffen, plus !important, da WordPress'
   eigene body-Regel nach diesem Stylesheet ausgegeben wird. */
@media ( max-width: 767px ) {
	body {
		--wp--style--root--padding-left: 10px !important;
		--wp--style--root--padding-right: 10px !important;
	}
}

/* useRootPaddingAwareAlignments kompensiert das Root-Padding nur bei
   Group-Blöcken mit "constrained"-Layout (erkennbar an has-global-padding);
   alignfull-Columns-Blöcke (is-layout-flex) bekommen es nicht automatisch
   und ihr Inhalt klebt sonst am Rand. Denselben Custom Properties folgen,
   damit Desktop/Mobil-Wert oben synchron bleiben. */
.wp-block-columns.alignfull:not( .has-global-padding ) {
	padding-left: var( --wp--style--root--padding-left );
	padding-right: var( --wp--style--root--padding-right );
}

/* Sticky, transparent site header that overlays the hero. */
/* The fixed header no longer takes up space in flow, but WordPress still
   applies its default block-gap margin-top to the next top-level block
   (main) — remove it so page content starts flush at the top again. */
header.wp-block-template-part:has(.site-header) + main {
	margin-top: 0;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: 70px;
	display: flex;
	align-items: center;
	background-color: transparent;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.site-header,
.site-header a,
.site-header .wp-block-navigation {
	color: #fff;
}

.site-header .wp-block-navigation {
	font-size: 16px;
	font-weight: 500;
}

.site-header.is-scrolled,
.site-header.is-scrolled a,
.site-header.is-scrolled .wp-block-navigation {
	color: #000;
}

.site-header .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.site-header.is-scrolled .wp-block-site-logo img {
	filter: none;
}

.site-header .wp-block-buttons .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	padding: 10px 14px;
}

/* Core forces submenus to right-align (right:0) under every "has-child"
   item once the nav is items-justified-right, even for items nowhere
   near the right edge — pushing wide submenus far left of their own
   parent. Force them back to a plain left-aligned flyout, matching the
   original site. */
.site-header .wp-block-navigation.items-justified-right .has-child .wp-block-navigation__submenu-container {
	left: 0;
	right: auto;
}

/* Hover/active underline: a thin line in the current text color (white
   at the top, black once scrolled — see .is-scrolled above) that wipes
   in from the left on hover, and stays permanently on the item matching
   the current page (marked via aria-current by header-scroll.js, since
   the migrated nav links are custom-URL links core can't auto-detect). */
.site-header .wp-block-navigation-item > a {
	position: relative;
}

.site-header .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.52, 0.01, 0.16, 1);
}

.site-header .wp-block-navigation-item > a:hover::after,
.site-header .wp-block-navigation-item > a[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Layout system: every row ("Block") spans 100% width. A Block can be
   split into ratio-based columns ("Bereiche"). Image-Bereiche stay
   edge-to-edge; text-Bereiche get a 10% inset relative to their OWN
   width. Percentage padding on a flex item (the column) resolves
   against the flex container (the row), not the item itself — so the
   inset lives on this inner wrapper instead, whose containing block is
   the column, giving a true 10%-of-Bereich result. */
.schu-bereich-text {
	padding-left: 10%;
	padding-right: 10%;
}

/* Flip-card tile headings: only 2px larger than the body text below them. */
.schu-tile-heading {
	font-size: 22px;
}

/* H2 sitewide kleiner als der theme.json-Standard (40px).
   Breakpoint 991px übernommen von der Live-Seite (WPBakery/Ultimate-Addons
   "tablet_portrait", wo dieselbe Überschrift von 40px auf 20px wechselt). */
h2 {
	font-size: 39px;
}

@media (max-width: 991px) {
	h2 {
		font-size: 20px;
	}
}

/* Sitewide Absatz-Zeilenhöhe. */
p {
	line-height: 22px;
}

/* Unterseiten (alles außer Startseite): Fließtext etwas kleiner als der
   theme.json-Standard (1rem = 16px browserabhängig). */
body:not( .home ) p {
	font-size: 19px;
}

/* Sitewide: Bild-neben-Text-Blöcke ("schu-bereich-text") animieren beim
   Reinscrollen. Headline slidet seitlich rein - von der Seite, auf der ihre
   Spalte im Grid steht -, Fließtext von unten; beides ease-out. Die Klasse
   .is-revealed wird per IntersectionObserver gesetzt, siehe
   assets/js/scroll-reveal.js. Ursprünglich nur auf der Startseite (body.home
   Scope), inzwischen auch auf anderen Seiten (z.B. Karriere) im Einsatz -
   die Klasse selbst ist bereits eindeutig genug, daher sitewide. */
@media ( prefers-reduced-motion: no-preference ) {
	.schu-bereich-text > :is( h2, h3, h4 ),
	.schu-bereich-text > p {
		opacity: 0;
		transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	}

	.wp-block-column:first-child .schu-bereich-text > :is( h2, h3, h4 ) {
		transform: translateX( -60px );
	}

	.wp-block-column:last-child .schu-bereich-text > :is( h2, h3, h4 ) {
		transform: translateX( 60px );
	}

	.schu-bereich-text > p {
		transform: translateY( 30px );
		transition-delay: 0.15s;
	}

	.wp-block-column:first-child .schu-bereich-text.is-revealed > :is( h2, h3, h4 ),
	.wp-block-column:last-child .schu-bereich-text.is-revealed > :is( h2, h3, h4 ),
	.schu-bereich-text.is-revealed > p {
		opacity: 1;
		transform: none;
	}

	/* Karriere: "Benefits"-Kacheln (Icon + Headline, ohne Button/Hintergrund).
	   Slidet beim Reinscrollen von unten rein statt seitlich - anders als
	   schu-bereich-text sind das keine gepaarten Bild/Text-Spalten, sondern
	   ein Raster gleichartiger Kacheln, darum ein einfacher Bottom-Slide mit
	   leichtem Stagger pro Spaltenposition in der Reihe (spaltenweise, nicht
	   global gezählt - wiederholt sich darum pro Dreier-Reihe). */
	.schu-benefit-tile {
		opacity: 0;
		transform: translateY( 40px );
		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	}

	.schu-benefit-tile:nth-child( 2 ) {
		transition-delay: 0.1s;
	}

	.schu-benefit-tile:nth-child( 3 ) {
		transition-delay: 0.2s;
	}

	.schu-benefit-tile.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* Karriere: "Benefits"-Kacheln - Icon zentrieren (gleicher Grund wie bei
   .schu-jobs-tile: das Icon-Markup selbst zentriert sich nicht), Headline
   kleiner als der Default. */
.schu-benefit-tile .schu-icon-block {
	display: flex;
	justify-content: center;
	width: 100%;
}

.schu-benefit-tile .schu-icon {
	/* Die Icon-Sprite-Symbole selbst setzen stroke="currentColor" (siehe
	   assets/icons/sprite.svg) - das löst gegen die CSS-Property "color"
	   auf, nicht gegen "stroke". Ein stroke-Override hier hätte darum nur
	   auf das äußere, unsichtbare <svg> gewirkt, nicht auf die eigentlichen
	   Pfade im <symbol>. Icons erben sonst die normale Fließtextfarbe
	   (Anthrazit) statt des dunkelblauen Marken-Indigo, das die Headline
	   darunter schon nutzt. */
	color: var( --wp--preset--color--primary );
}

.schu-benefit-tile h4 {
	font-size: 18px;
}

/* Karriere: "Offene Stellen"-Kacheln (Icon + Headline + Button). Das
   Icon-Block-Markup selbst ist inline-flex ohne eigene Zentrierung, darum
   hier per text-align zentrieren statt im Block-Attribut.
   .schu-jobs-tile sitzt direkt auf dem wp:column-Element (Flex-Item der
   Reihe). max-width allein lässt die Items zwar schmaler werden, aber ohne
   Gegenmaßnahme bleibt der dadurch freiwerdende Platz am Zeilenende
   ungenutzt statt sich zu verteilen - darum hier zusätzlich die Reihe
   selbst auf space-between stellen. */
.wp-block-columns:has( > .schu-jobs-tile ) {
	justify-content: space-between;
}

.schu-jobs-tile {
	text-align: center;
	transition: background-color 0.25s ease;
	flex-grow: 0;
	max-width: 220px;
	min-height: 340px;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.schu-jobs-tile .schu-icon-block {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Unterhalb von WP-Cores Columns-Stack-Breakpoint (782px) wird jede Spalte
   100% breit und die Kacheln stapeln sich - dann läuft space-between auf
   der Reihe ins Leere (nur 1 Item pro Zeile) und die auf max-width
   geschrumpfte Kachel bliebe linksbündig mit Leerraum daneben. */
@media ( max-width: 781px ) {
	.schu-jobs-tile {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.schu-jobs-tile h4 {
	font-size: 18px;
}

.schu-jobs-tile:hover {
	/* !important nötig: WordPress gibt .has-primary-background-color selbst
	   mit !important aus (core Standardverhalten für has-*-background-color
	   Utility-Klassen), das würde diese Regel sonst immer überstimmen. */
	background-color: #343c3d !important;
}