/*
 * 10, de voet. Hoort bij inc/10-footer.php.
 *
 * Donkergroen vlak met crèmekleurige letters. Die twee kleuren zijn de globale
 * kleuren van de site zelf (Elementor noemt ze primary en text), dus de voet
 * loopt mee als de huisstijl wijzigt. Ze staan hieronder als variabele, met de
 * kleur er hard achter voor het geval Elementor er ooit uit gaat.
 *
 * Het logo is groen en wordt met een filter wit gemaakt. Dat scheelt een tweede
 * logobestand dat iemand later moet bijhouden. Wil je hem toch goud, zet dan
 * --voet-logo-filter om, zie bij het logo.
 */

.swipe-voet {
	--voet-vlak: var(--swipe-voet-vlak, #2b3319);
	--voet-tekst: var(--swipe-voet-tekst, #f0e7c6);
	--voet-zacht: var(--swipe-voet-zacht, rgba(240, 231, 198, .68));
	--voet-lijn: var(--swipe-voet-lijn, rgba(240, 231, 198, .18));
	--voet-breed: var(--swipe-voet-breed, 1140px);

	background: var(--voet-vlak);
	color: var(--voet-tekst);
	padding: 64px 20px 28px;
	font-size: 14px;
	line-height: 1.5;

	/*
	 * Lichte letters op een donker vlak zien er in de browser dikker uit dan
	 * dezelfde letters op wit. Dit zet die verdikking uit, waardoor de hele
	 * voet dunner en strakker oogt (Tim, 9 september). Het is geen ander
	 * lettertype en geen ander gewicht, alleen de manier waarop de randen
	 * getekend worden.
	 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.swipe-voet,
.swipe-voet *,
.swipe-voet *::before,
.swipe-voet *::after {
	box-sizing: border-box;
}

/*
 * Een shortcode-widget in een Elementor-container is standaard zo breed als
 * zijn inhoud. Voor een voet is dat verkeerd, die hoort de hele balk te vullen.
 * Zo hoeft er in Elementor niets ingesteld te worden. Zelfde truc als in de
 * header, 09.
 */
.elementor-widget-shortcode:has(.swipe-voet),
.elementor-shortcode:has(.swipe-voet) {
	width: 100%;
	flex: 1 1 auto;
}

.swipe-voet__binnen {
	max-width: var(--voet-breed);
	margin: 0 auto;
}

/* --- De vier kolommen ----------------------------------------------------- */

/*
 * De eerste kolom is breder dan de andere drie: daar staat een lopende zin in
 * en die moet niet in vieren breken, terwijl in de andere kolommen alleen
 * korte links staan.
 */
.swipe-voet__kolommen {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}

/*
 * De kopjes staan wit, niet crème (Tim, 9 september). Terug naar crème is één
 * regel: zet color op var(--voet-tekst).
 *
 * De selector noemt de voet er met opzet bij. Elementor zet in zijn eigen
 * stylesheet een kleur op alle h2's, en zonder die extra klasse verliest deze
 * regel het daarvan: dan staan de kopjes zwart op donkergroen, en dat lees je
 * niet.
 */
.swipe-voet .swipe-voet__kop {
	margin: 0 0 14px;
	color: var(--voet-kop, #fff);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.swipe-voet__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De regels stonden te ver uit elkaar (Tim, 9 september). */
.swipe-voet__regel + .swipe-voet__regel {
	margin-top: 5px;
}

.swipe-voet a {
	color: var(--voet-zacht);
	text-decoration: none;
	transition: color .2s ease;
}

.swipe-voet a:hover,
.swipe-voet a:focus-visible {
	color: var(--voet-tekst);
}

/* --- Kolom 1, het merk ---------------------------------------------------- */

.swipe-voet__logo {
	display: inline-block;
	margin-bottom: 18px;
}

/*
 * Het logo wit maken. brightness(0) maakt alle kleur zwart, invert(1) draait
 * dat om naar wit. Werkt op elk eenkleurig logo met een doorzichtige
 * achtergrond, dus ook op het logo van De Hamstraat straks.
 *
 * Waarom dit erin moet en niet mag ontbreken: het logo van Hamé is een svg met
 * fill #2b3319, precies de kleur van deze voet. Zonder filter staat er groen op
 * groen en lijkt het logo weg te zijn (Tim, 9 september).
 *
 * De breedte staat vast op 150. Dit svg heeft wel een viewBox maar geen eigen
 * width en height, en dan kan width: auto op nul uitkomen. Het was dus niet
 * alleen onzichtbaar, het was ook nul pixels breed. 150 bij 42 is dezelfde maat
 * als in de header.
 *
 * Goud in plaats van wit: zet --voet-logo-filter om, bijvoorbeeld
 *   brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(-15deg);
 */
.swipe-voet .swipe-voet__logo-beeld {
	display: block;
	width: 150px;
	height: auto;
	max-height: 42px;
	object-fit: contain;
	object-position: left center;
	filter: var(--voet-logo-filter, brightness(0) invert(1));
}

/* Geen logo ingesteld: dan de naam, dat is beter dan een gat. */
.swipe-voet__logo-naam {
	font-size: 22px;
	letter-spacing: .04em;
}

.swipe-voet__over {
	margin: 0 0 18px;
	max-width: 38ch;
	color: var(--voet-zacht);
}

.swipe-voet__insta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.swipe-voet__icoon {
	display: block;
	flex: none;
}

/* --- De onderbalk --------------------------------------------------------- */

.swipe-voet__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;

	margin-top: 56px;
	padding-top: 22px;
	border-top: 1px solid var(--voet-lijn);

	font-size: 13px;
	color: var(--voet-zacht);
}

.swipe-voet__rechten {
	margin: 0;
}

.swipe-voet__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De onderbalk staat op één regel, dus daar geen ruimte boven de regels. */
.swipe-voet__juridisch .swipe-voet__regel + .swipe-voet__regel {
	margin-top: 0;
}

/* --- Smallere schermen ---------------------------------------------------- */

@media (max-width: 1024px) {
	.swipe-voet__kolommen {
		/* Twee bij twee. Het merk krijgt de hele bovenste rij, want daar staat
		   het logo en de lopende tekst in. */
		grid-template-columns: 1fr 1fr;
		gap: 36px 40px;
	}

	.swipe-voet__kolom--merk {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.swipe-voet {
		padding: 48px 20px 24px;
	}

	.swipe-voet__kolommen {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.swipe-voet__onder {
		margin-top: 40px;
		justify-content: flex-start;
	}
}