/**
 * Theme Name:  Ollie Child Fly
 * Theme URI:   https://vektorrausch.de
 * Description: Child-Theme fuer den Platoon-Aviation-Prototyp. Scroll-getriebene Szenen auf Ollie-Basis.
 * Author:      vektorrausch GmbH
 * Template:    ollie
 * Version:     0.1.0
 * Requires PHP: 8.0
 * Text Domain: ollie-child-fly
 */

/* Ollie-Grundlayout darf die vollflaechigen Szenen nicht einschnueren.
   Wichtig ist vor allem margin-block-start: WordPress setzt zwischen
   Geschwistern in .wp-site-blocks einen Block-Abstand, und der wirkt auch
   auf position:fixed. Ohne das Nullen sitzt die Buehne 20px zu tief. */
.wp-site-blocks > .fly-stage,
.wp-site-blocks > #fly-scrollable {
	max-width: none;
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Der Header liegt ueber der Buehne statt sie nach unten zu schieben,
   so wie im Original. */
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 40;
	margin-block-start: 0;
	background: transparent;
}

/* Ollies Header-Gruppe traegt has-base-background-color. WordPress gibt
   diesen Preset-Klassen ein !important mit, ohne Gegen-!important gewinnt
   nichts. Sonst liegt ein cremefarbener Balken ueber dem Hero. */
.wp-site-blocks > header.wp-block-template-part .has-base-background-color {
	background-color: transparent !important;
}

/* Ollies Trennlinie unter dem Header zieht sonst quer durch jedes Bild.
   Sie kommt als Inline-Style aus den Block-Attributen, deshalb !important. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part * {
	border-bottom: 0 none !important;
}

.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part a {
	color: var(--fly-cream, #fff8ed);
}

/* Bei eingeloggtem Nutzer schiebt die Adminbar das Dokument nach unten.
   Die fixe Buehne muss mit, sonst steht sie 32px zu hoch. */
body.admin-bar .fly-stage {
	top: 32px;
	height: calc(var(--vh, 100vh) - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .fly-stage {
		top: 46px;
		height: calc(var(--vh, 100vh) - 46px);
	}
}