/*
 * Korrektur-Regeln fuer Kopf- und Fussbereich.
 *
 * struktur.css bleibt unangetastet (Nutzervorgabe) - alles hier sind GEZIELTE
 * Nachbesserungen, die WordPress' eigene Block-Layout-Stile (is-layout-flex /
 * is-layout-constrained) ausgleichen. Diese Datei wird ausdruecklich MIT
 * Abhaengigkeit auf 'afro-fse-struktur' eingereiht (siehe inc/kopf-fuss.php),
 * laedt also immer NACH struktur.css und kann dessen Regeln bei Bedarf mit
 * gleicher oder hoeherer Spezifitaet ueberschreiben, ohne dass struktur.css
 * selbst veraendert werden muss.
 */

/* ==================================================================
   KOPFLEISTE
   Fehlerbild laut Rueckmeldung: Menue+Sprachwahl klebten am Logo statt
   rechtsbuendig vor dem "Jetzt anfragen"-Knopf zu stehen. Ursache: die
   WordPress-Flex-Gruppe von header.head/nav.nav (is-layout-flex) erzeugt
   eigene, spezifische Regeln fuer Ausrichtung und Abstand (gap,
   justify-content). Je nach Ladereihenfolge dieser generierten Stile koennen
   sie die einfache Klassenregel .nav{margin-left:auto} aus struktur.css
   unwirksam machen. Die Original-Anordnung (siehe header.php: .nav VOR dem
   .btn-cta, mit margin-left:auto nach rechts gedrueckt) ist aber ein hartes
   Merkmal des Kopfbereichs, deshalb hier mit !important erzwungen statt der
   Ladereihenfolge ueberlassen.
   ================================================================== */
.wp-block-group.head {
	display: flex;
	align-items: center;
}
.wp-block-group.head > .wp-block-group.nav {
	margin-left: auto !important;
}

/* Logo und CTA-Knopf sollen bei knappem Platz nicht schrumpfen - im
   Original ist die Kopfleiste eine Reihe aus drei ungleich breiten
   Elementen (Logo, Menue, Knopf), keiner der Randbloecke soll dabei
   nachgeben, bevor sich das Menue umbricht. */
.wp-block-group.head > .brand,
.wp-block-group.head > .btn-cta {
	flex-shrink: 0;
}

/* ==================================================================
   FUSSBEREICH
   Fehlerbild laut Rueckmeldung: Fussbereich weicht stark vom Original ab.
   Der neue Block afro-soleil-fse/fussbereich gibt sein Ergebnis als
   direkte Kind-Elemente von footer.foot aus (kein wp:columns-Wrapper mehr) -
   damit greifen die ORIGINALEN .foot-Regeln aus struktur.css (Zeile ~328,
   sechsspaltiges Raster) wieder unmittelbar. Diese wurden jedoch in einem
   spaeteren Nachtrag in struktur.css (Abschnitt "Fusszeile: im Vorgaenger
   sechs feste Spalten ...") auf .foot{display:block} umgestellt, weil dort
   noch die vorherige wp:columns-Struktur eine Ebene tiefer lag. Diese
   Nachtrag-Regel gilt aber weiterhin fuer .foot selbst (gleiche Spezifitaet,
   spaeter in der Datei) und wuerde das Raster ohne Korrektur wieder
   aufheben. Deshalb hier erneut auf das Original-Raster gestellt.
   ================================================================== */
.foot {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr 96px;
	gap: 18px;
	padding: 16px 14px;
	align-items: start;
}
/* WordPress' eigene Block-Abstandsregeln (blockGap) wuerden auf die direkten
   Kind-DIVs zusaetzlich einen Aussenabstand legen - im Grid uebernimmt dafuer
   ausschliesslich "gap" oben, ein zusaetzlicher margin wuerde die Spalten nur
   ungleichmaessig verschieben. */
.foot > div {
	margin: 0;
}
/* Die Rechtszeile (.copy) ist im neuen Aufbau ein siebtes Kind von .foot statt
   wie im Original ein Geschwisterelement AUSSERHALB des Fussbereichs - sie
   muss deshalb ausdruecklich ueber alle Rasterspalten hinweg gesetzt werden,
   sonst landet sie als zusaetzliche, schmale Spalte rechts statt als eigene
   volle Zeile darunter. */
.foot > .copy {
	grid-column: 1 / -1;
}

/* Bildschirme bis 1000px: drei statt sechs Spalten, Emblem faellt weg -
   identische Werte wie die Original-Regel in struktur.css bei dieser
   Breite, hier nur erneut gesetzt, weil die Nachtrag-Regel .foot{display:
   block} das Original-Raster fuer .foot ausser Kraft setzt. */
@media (max-width: 1000px) {
	.foot {
		grid-template-columns: repeat( 3, 1fr );
	}
	.foot .emblem {
		display: none;
	}
}

/* Schmale Bildschirme bis 560px: eine Spalte, Menueliste einspaltig - wie im
   Original bei dieser Breite. */
@media (max-width: 560px) {
	.foot {
		grid-template-columns: 1fr;
	}
	.foot ul {
		columns: 1;
	}
}

/* Ab 1400px: groesseres Emblem und mehr Abstand - wie im Original bei
   dieser Breite. */
@media (min-width: 1400px) {
	.foot {
		padding: 18px 16px;
		gap: 20px;
		grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr 112px;
	}
	.foot .emblem {
		width: 112px;
	}
}