/*
Theme Name: Hiataeinzug
Theme URI: https://new.hiataeinzug.at
Description: Child-Theme von Ollie für hiataeinzug.at
Author: Michael Brantner
Template: ollie
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hiataeinzug
*/

/* Eigene Styles bevorzugt in theme.json ablegen. Hier nur, was theme.json nicht abdeckt. */

/* Hero-Animation Startseite: Nachbau des Slider-Revolution-Moduls "home" ohne Plugin.
   Ebenen sind <img> mit --x, --y, --w (Pixel der 1800×700-Bühne), --t (Start) und --d (Dauer).
   Das Hintergrundbild kommt über --hiata-bg aus dem Inhalt, damit die URL beim Domainwechsel mitzieht. */
.hiata-hero {
	position: relative;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	aspect-ratio: 1800 / 700;
	max-height: 700px;
	overflow: hidden;
	background: #d0e8ee var(--hiata-bg) center bottom / contain no-repeat;
}

.hiata-hero img {
	position: absolute;
	display: block;
	height: auto;
	left: calc(var(--x) / 1800 * 100%);
	top: calc(var(--y) / 700 * 100%);
	width: calc(var(--w) / 1800 * 100%);
	opacity: 0;
	animation: hiataFade var(--d, 300ms) cubic-bezier(.65, 0, .35, 1) var(--t) forwards;
}

@keyframes hiataFade {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hiata-hero img {
		animation: none;
		opacity: 1;
	}
}

/* Footer: Links ohne Unterstreichung */
footer.wp-block-group a,
footer.wp-block-group a:hover,
footer.wp-block-group a:focus {
	text-decoration: none;
}

/* Kopfzeile: transparent mit dunklen Links; auf der Startseite über dem Hero */
.hiata-header {
	min-height: 100px;
	background:
		linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) no-repeat left top / 450px 100%,
		linear-gradient(to left, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) no-repeat right top / 550px 100%;
	color: #353535;
	position: relative;
	z-index: 20;
}

.hiata-header a,
.hiata-header a:hover,
.hiata-header a:focus {
	color: #353535;
	text-decoration: none;
}

.hiata-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #fff;
	color: #353535;
}

/* Menü auf allen Seiten durchsichtig über dem Inhalt */
.hiata-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

.admin-bar .hiata-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Seiten ohne Hero: Inhalt beginnt unter dem Menü (Startseite und Geschichte haben ein Hero) */
body:not(.home):not(.page-id-49):not(.page-id-51):not(.page-id-52):not(.page-id-28):not(.page-id-3) .wp-site-blocks > main {
	padding-top: 100px;
}

/* Nach ca. 150 px Scrollen: Menü fährt von oben herein, weiß 50 % transparent, 20 px niedriger */
.hiata-header.is-sticky {
	position: fixed;
	top: 0;
	min-height: 80px;
	background: rgba(255, 255, 255, 0.5);
	animation: hiataMenuDown .3s ease-out;
}

.admin-bar .hiata-header.is-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@keyframes hiataMenuDown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hiata-header.is-sticky {
		animation: none;
	}
}

/* Wappen neben dem Logo: leicht nach rechts gedreht */
.hiata-header-wappen img {
	transform: rotate(10deg);
}

.hiata-header-brand {
	flex-wrap: nowrap;
}

/* Banner „Der Junge Hiata": beim Überfahren 20 % heller */
.hiata-banner img {
	transition: filter .25s ease;
}

.hiata-banner a:hover img,
.hiata-banner a:focus-visible img {
	filter: brightness(1.2);
}

/* Seiten-Hero: Bild in voller Breite, mittig, nie oben/unten angeschnitten */
.hiata-page-hero {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.hiata-page-hero img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* Bild im Text: 160 px breit, links bündig mit dem Inhalt, Text fließt rechts davon */
.wp-block-image.hiata-float-image {
	float: left;
	width: 160px;
	max-width: 100%;
	margin: 20px 1.5em 1em max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)) !important;
}

.hiata-float-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.wp-block-image.hiata-float-image {
		float: none;
		width: 100%;
		max-width: 160px;
		margin: 20px 0 1em !important;
	}
}

/* Logo im Menü: schwarz */
.hiata-header-logo img {
	filter: brightness(0);
}

/* Auf allen Seiten außer der Startseite 60 px Abstand über dem Footer */
body:not(.home) .wp-site-blocks > main {
	padding-bottom: 60px;
}

/* Menüschrift: 3 px größer als die Standardgröße "klein" */
.hiata-header .wp-block-navigation {
	font-size: calc(var(--wp--preset--font-size--small) + 3px) !important;
}

/* Überschriften nach dem Bild im Text beginnen unterhalb des Bildes, links bündig */
.hiata-float-image ~ .wp-block-heading {
	clear: left;
}

/* Hero mit gleichem Seitenverhältnis wie auf der Anfahrtsplan-Seite (1920 × 814), Bild wird zugeschnitten */
.hiata-page-hero--anfahrt img {
	aspect-ratio: 1920 / 814;
	object-fit: cover;
	object-position: center;
}

/* Menüpunkte: schwarz und im Vordergrund */
.hiata-header .wp-block-navigation {
	position: relative;
	z-index: 2;
}

.hiata-header .wp-block-navigation a,
.hiata-header .wp-block-navigation a:hover,
.hiata-header .wp-block-navigation a:focus {
	color: #000;
}

/* Menüschrift schwarz: WordPress setzt die Link-Farbe auf "inherit", daher Farbe am Menü und mit höherer Spezifität */
.hiata-header .wp-block-navigation {
	color: #000;
}

.hiata-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.hiata-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.hiata-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	color: #000;
}

/* Handy: Logo 30 % schmäler, Menü steht im Seitenfluss über der Animation/dem Hero (nicht darüber gelegt) */
@media (max-width: 600px) {
	.hiata-header-logo img {
		width: 154px !important;
		height: auto;
	}

	.hiata-header:not(.is-sticky) {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}

	/* Platz reservieren, damit die Seite beim Umschalten auf das Scroll-Menü nicht springt */
	.wp-site-blocks > .wp-block-template-part:first-child {
		min-height: 100px;
	}

	/* Seiten ohne Hero brauchen oben keinen Zusatzabstand mehr */
	body:not(.home):not(.page-id-49):not(.page-id-51):not(.page-id-52):not(.page-id-28):not(.page-id-3) .wp-site-blocks > main {
		padding-top: 0;
	}
}

/* Foto-Galerie: Masonry per CSS-Spalten, Vorschaubilder mindestens 180 px breit
   (bei 1000 px Inhaltsbreite ergibt das 5 Spalten), Tablet bis 4, Handy 2 Spalten */
.wp-block-gallery.hiata-masonry {
	display: block;
	column-width: 180px;
	column-count: 6;
	column-gap: 8px;
}

.wp-block-gallery.hiata-masonry.has-nested-images figure.wp-block-image,
.wp-block-gallery.hiata-masonry.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 0 8px !important;
	break-inside: avoid;
}

.wp-block-gallery.hiata-masonry.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

@media (max-width: 900px) {
	.wp-block-gallery.hiata-masonry {
		column-count: 4;
	}
}

@media (max-width: 600px) {
	.wp-block-gallery.hiata-masonry {
		column-width: auto;
		column-count: 2;
	}
}

/* Niedriger Hero (400 px hoch) auf Impressum und Datenschutzerklärung; Bild wird zugeschnitten */
.hiata-page-hero--400 img {
	height: 400px;
	object-fit: cover;
	object-position: center;
}

/* Handy: Burger-Menü deutlicher (dunkle Fläche, weißes, größeres Symbol); nur unter 600 px, am Desktop bleibt es ausgeblendet */
@media (max-width: 599px) {
	.hiata-header .wp-block-navigation__responsive-container-open {
		width: 52px;
		height: 52px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #353535;
		color: #fff;
		border-radius: 8px;
	}

	.hiata-header .wp-block-navigation__responsive-container-open svg {
		width: 34px;
		height: 34px;
		fill: #fff;
	}

	.hiata-header .wp-block-navigation__responsive-container-open:hover,
	.hiata-header .wp-block-navigation__responsive-container-open:focus {
		background: #000;
		color: #fff;
	}
}

/* Handy/Tablet hochkant: Footer mittig ausrichten, sobald die Spalten untereinander stehen */
@media (max-width: 781px) {
	footer.wp-block-group .wp-block-columns .wp-block-column {
		align-items: center !important;
		text-align: center;
	}

	footer.wp-block-group .wp-block-image {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	footer.wp-block-group .wp-block-image img {
		margin-left: auto;
		margin-right: auto;
	}

	footer.wp-block-group .is-layout-flex {
		justify-content: center !important;
		text-align: center;
	}
}

/* Tablet (600–1100 px): Logo, Wappen und Menü skalieren mit der Breite, damit das Menü nicht umbricht */
@media (min-width: 600px) and (max-width: 1100px) {
	.hiata-header-logo img {
		width: clamp(130px, 18vw, 220px) !important;
		height: auto;
	}

	.hiata-header-wappen img {
		width: clamp(52px, 7.5vw, 80px) !important;
		height: auto;
	}

	.hiata-header .wp-block-navigation {
		font-size: clamp(0.8rem, 1.9vw, calc(var(--wp--preset--font-size--small) + 3px)) !important;
		white-space: nowrap;
	}

	.hiata-header .wp-block-navigation .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: clamp(0.5rem, 1.6vw, 1rem);
	}
}