/*
ab v3.0 setzen wir eigene childThemes ein. für agrar.shop und hobby.agrar.shop bauen wir den kompletten footer selbst und überschreiben den themeware mist.
Dort sind alle einzelteile aus textbausteinen (HTML fragmente) aufgebaut und lassen sich kaum wirklich pflegen.
Auch das layout ist wild gewürfelt.

Wir bauen das sauber im eigenen Theme mit twi und minimalem HTML/CSS neu.

BEACHTE: wir überschreiben den kompletten <footer class="footer-main"> von themware, nutzen aber einige der widgets
und geben die in unserem aufgeräumten layout wieder aus.
*/

/*Das ist nur der oberste container für den dunkelgrauen balken und unten die Texte.
Die Texte in .mtc-footer-content erzeugen ihren satzspiegel mit randabstand selbst
*/
.mtc-footer{
	/*Randabstand zum viewport selbst regulieren*/
	--co-plr:20px;
	--co-pt:40px;
	--co-pb:60px;
	/*Satzspiegel*/
	--co-satz-maxw:1560px;

	background-color:hsl(0 0 96%);
}

/*grafisches band, fürher TWT USP bar, jetzt nur noch optischer trenner*/
.mtc-footer-bar{
	width:100%;
	background-color:var(--mtc-logo-green-dark);
	height:40px;
}

/*Menüs, Copyright, ...*/
.mtc-footer-content{
	padding:var(--co-pt) var(--co-plr) var(--co-pb) var(--co-plr);
	display:flex;
	justify-content:center;

}
	/*zentrierter satzspeigel container*/
	.mtc-footer-content-inner{
		width:100%;
		max-width:var(--co-satz-maxw);
		display:flex;
		flex-direction:column;
		gap:20px;
	}

	/*Absatzformate*/
	.mtc-footer-headline{
		font-size:1.25em;
		font-weight:bold;
		margin-bottom:0.5em;
	}
	
		/*erste reihe mit menüs und standort*/
		.mtc-footer-row-1{
			display:flex;
			flex-wrap:wrap;
			gap:40px;
			justify-content:space-between;
		}

		.mtc-footer-row-2{
			display:flex;
			flex-direction:column;
			gap:2em;
			text-align:center;
		}

			/*--- Kategorienavigation ---
			ul li
			*/
			.mtc-footer-nav{
				list-style:none;
				margin:0;
				padding:0;
				/*das Fontawesome icon kann durch zurücksetzen des values ausgeblendet werden*/
				--icon:var(--fa-ic-circle-chevron-right);
				--icon-w:1.1em;
			}
				.mtc-footer-nav li{
					padding-bottom:0.5em;
				}

				.mtc-footer-nav a{
					text-decoration:none;
					display:inline-block;
				}
				.mtc-footer-nav-item{
					padding-left:var(--icon-w);
				}
					.mtc-footer-nav-item:before{
						/*Fontawesome Icon*/
						content:var(--icon);
						font-family:var(--fa-ff);
						font-weight:600;
						display:inline-block;
						color:var(--mtc-logo-green-light);
						width:var(--icon-w);
						margin-left:calc(var(--icon-w) * -1);
					}

			/*--- 1. Block Infos ---
			Wir starten mit zweispaltigem Text, um die Höhe der gesamter Zeile stark zu verringern.
			Sieht nicht wirklich doll aus, aber dann ist rechts unten im footer deutlich weniger leerraum*/
			.mtc-footer-nav-info{
				column-count:2;
			}


			/*--- 2. Block widerruf ---*/
			.mtc-footer-nav-widerruf{
			}
				/*Der Hyperlink zum Widerrufsformular erhält eine button optik. Die Zusatzklasse wird über
				ein custom field an der Kategorie eingepflegt.*/
				li.mtc-cat-footer-vertrag-widerrufen{
					list-style:none;
					margin:0;
					padding:0;
					--icon:none;
				}
					a.mtc-cat-footer-vertrag-widerrufen{
						padding:0.5em 1em;
						border-radius:5px;
						background-color:var(--mtc-green-lighter);
						color:black;
						margin-bottom:0.5em;
					}

			/*Ein Extra button in der mittleren Spalte. Auf diesem kann das CCM19 banner erneut
			geöffnet werden, so dass der user seinen cookie consent nachträglich ändern kann.*/
			.mtc-btn-footer-ccm{
				margin-top:2em;
			}

			/*Standort, Button Hyperlink zu Google Maps*/
			.mtc-btn-footer-route{
				--bs-btn-bg:hsl(0 0 86%);
				--bs-btn-hover-bg:hsl(0 0 90%);
				border-radius:5px;
			}


			/*Bezahlmethoden und Lieferarten*/
			.mtc-footer-logos{
				display:flex;
				flex-wrap:wrap;
				gap:2rem;
				justify-content:space-evenly;
			}
				/*Themware ist natürlich wieder schrott...*/
				.twt-widget-payment,
				.twt-widget-shipping{
					justify-content:center;
				}

			/*abschließend mit gesetzl. Texten und Themewarehinweis*/
			.mtc-footer-legal{
				display:flex;
				flex-direction:column;
				flex-wrap:wrap;
				align-items:center;
				font-size:14px;
			}
/*responsive schrumpfen
Bis runter zu tablet bricht alles automatisch ordentlich um.*/
@media(max-width:1440px){
	.mtc-footer{
		--co-pt:30px;
	}
		.mtc-footer-row-1{
			justify-content:center;
		}
}
@media(max-width:767px){
	.mtc-footer-nav-info{
		/*Liste nur noch einspaltig*/
		column-count:1;
	}
}