/* =============================================================================
   MD-act, de voet van de site

   Opzet in drie lagen, van boven naar beneden:

     1. een brede kolom links met het logo, een korte zin en de gegevens
     2. drie kolommen met links ernaast
     3. een onderbalk met de keurmerken, het jaartal en de kleine links

   Kleuren en letters komen uit de Elementor-kit van de site, niet uit een eigen
   keuze. Wat daar staat (Site-instellingen, Typografie en Kleuren):

     letter       Inter, Sans-serif    de hele site, koppen en tekst
     tekst        15px, gewicht 300, regelafstand 1,5
     koppen       gewicht 500
     linkkleur    #3C9A7A              groen, overal op de site
     donkergroen  #2C4A3E              de achtergrond van de hele voet
     dieper groen #1E342A              de onderbalk, een tint donkerder
     creme        #F5EFE6              logo, koppen en de tekst op het donker

   Let op: de kit laadt ook Roboto en Roboto Slab, maar gebruikt ze nergens; de
   body staat op Inter. Neem in de voet dus niets anders dan Inter, anders staat
   er een letter die verder nergens op de site voorkomt.

   De links in de kolommen en onderaan hebben dezelfde kleur als de tekst
   eromheen (Tim, 14 september). Alleen het telefoonnummer, het e-mailadres en de
   routelink houden de groene linkkleur van de site: dat zijn de drie dingen
   waarop je echt moet kunnen klikken.

   LET OP bij elke linkkleur hieronder: de kit zet zijn linkkleur met
   `.elementor-kit-7 a`, en dat is even sterk als `.mdact-voet__kolom a`. Bij
   gelijke sterkte wint het laatst geladen bestand, en de kit laadt ná het thema.
   Alle a-regels hier staan daarom met twee klassen (`.mdact-voet .mdact-voet__...
   a`), zodat ze een tandje sterker zijn. Zonder dat waren alle links in de voet
   groen, ook die het niet moesten zijn. Geen !important: dat maakt de volgende
   wijziging onmogelijk.

   Let op: de hele site zit in .site-container van 1200px, dus de voet is niet
   beeldvullend maar precies zo breed als de rest van de pagina.
   ============================================================================= */

.mdact-voet {
	--mdact-voet-groen: #2C4A3E;
	--mdact-voet-onder: #1E342A;
	--mdact-voet-creme: #F5EFE6;
	--mdact-voet-link: #3C9A7A;
	--mdact-voet-zacht: rgba(245, 239, 230, 0.78);
	--mdact-voet-stil: rgba(245, 239, 230, 0.58);
	--mdact-voet-lijn: rgba(245, 239, 230, 0.14);

	background-color: var(--mdact-voet-groen);
	color: var(--mdact-voet-creme);
	font-family: "Inter", Sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

/*
 * De kolom met de gegevens houdt een vaste maat, de drie linkkolommen verdelen
 * samen de rest. Met space-between zou de ruimte helemaal tussen de twee blokken
 * gaan zitten en stond er een gat van tweehonderd pixels in het midden van de
 * voet, terwijl de kolommen zelf tegen elkaar aan bleven plakken.
 */
.mdact-voet__binnen {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
	padding: 72px 40px 52px;
}

/* -------------------------------------------------------------- de kolom links */

.mdact-voet__over {
	flex: 0 1 340px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * align-self houdt het logo op zijn eigen breedte. Zonder dat rekt de kolom het
 * als flex-item uit tot de volle 340px en gaat een svg zijn tekening in dat
 * bredere vlak centreren, waardoor het logo ingesprongen staat terwijl de tekst
 * eronder gewoon links begint.
 */
.mdact-voet__logo {
	align-self: flex-start;
	width: 158px;
	height: auto;
}

/* De maat en de regelafstand komen van .mdact-voet, dus van de site zelf. */
.mdact-voet__over p {
	margin: 0;
	color: var(--mdact-voet-zacht);
}

/*
 * De tweede handelsnaam, als stil regeltje onder de zin bij het logo (Tim,
 * 21 september). Het is een vermelding en geen navigatie, dus hij staat een
 * maatje kleiner en stiller dan de tekst erboven, en hij sluit er dicht op aan
 * in plaats van op de kolomafstand van 20 px.
 */
.mdact-voet__over .mdact-voet__handelsnaam {
	margin-top: -8px;
	color: var(--mdact-voet-stil);
	font-size: 14px;
}

/*
 * Het adres, het telefoonnummer, het e-mailadres en de routelink staan dicht op
 * elkaar (Tim, 14 september): het is één blok gegevens, geen rijtje losse
 * regels.
 */
.mdact-voet__gegevens {
	display: flex;
	flex-direction: column;
	font-style: normal;
	color: var(--mdact-voet-zacht);
}

/*
 * De drie klikbare regels houden de groene linkkleur van de site (#3C9A7A). De
 * straat en de plaats erboven zijn geen link en blijven dus gewoon tekst.
 */
.mdact-voet .mdact-voet__gegevens a {
	color: var(--mdact-voet-link);
	text-decoration: none;
}

.mdact-voet .mdact-voet__gegevens a:hover,
.mdact-voet .mdact-voet__gegevens a:focus {
	color: var(--mdact-voet-creme);
}

/*
 * Tien pixels tussen het adres en de drie klikbare regels (Tim, 14 september).
 * Het gaat om de eerste link in het blok, niet om een vaste regel: ontbreekt het
 * telefoonnummer, dan schuift de ruimte mee naar het e-mailadres.
 */
.mdact-voet__gegevens a:first-of-type {
	margin-top: 10px;
}

/*
 * De routelink staat binnen hetzelfde blok als de rest, zodat hij dezelfde
 * regelafstand volgt. align-self houdt hem op zijn eigen breedte, zodat alleen
 * het woord klikbaar is en niet de hele regelbreedte van de kolom.
 */
.mdact-voet__route {
	display: inline-flex;
	align-self: flex-start;
}

.mdact-voet__sociaal {
	display: flex;
	gap: 12px;
	margin-top: 2px;
}

.mdact-voet__sociaal a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: rgba(245, 239, 230, 0.10);
	color: var(--mdact-voet-creme);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mdact-voet .mdact-voet__sociaal a {
	color: var(--mdact-voet-creme);
}

.mdact-voet .mdact-voet__sociaal a:hover,
.mdact-voet .mdact-voet__sociaal a:focus {
	background-color: var(--mdact-voet-creme);
	color: var(--mdact-voet-groen);
}

.mdact-voet__sociaal svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ------------------------------------------------------------ de linkkolommen */

.mdact-voet__kolommen {
	flex: 1 1 460px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

/*
 * De links staan onder elkaar met precies de regelafstand van de alinea links in
 * de voet, dus zonder eigen tussenruimte (Tim, 14 september). Met een gap erbij
 * stonden ze anderhalve regel uit elkaar en las de kolom als een lijst met
 * gaten in plaats van als een blok tekst.
 */
.mdact-voet__kolom {
	display: flex;
	flex-direction: column;
}

/*
 * Dezelfde letter als de rest van de site, alleen zwaarder. De kit zet koppen op
 * gewicht 500 en een H4 op 16px; die twee zijn hier aangehouden. Een eigen
 * kopletter (er stond eerst Roboto Slab) komt op de site nergens voor.
 */
.mdact-voet__titel {
	font-size: 16px;
	font-weight: 500;
	color: var(--mdact-voet-creme);
	margin-bottom: 10px;
}

/*
 * Dezelfde kleur als de tekst eromheen (Tim, 14 september), dus geen eigen
 * linkkleur. Bij het aanwijzen wordt de regel vol creme; dat is genoeg
 * terugkoppeling en het blijft binnen dezelfde kleur.
 */
.mdact-voet .mdact-voet__kolom a {
	color: var(--mdact-voet-zacht);
	text-decoration: none;
	transition: color 0.18s ease;
}

.mdact-voet .mdact-voet__kolom a:hover,
.mdact-voet .mdact-voet__kolom a:focus {
	color: var(--mdact-voet-creme);
}

/*
 * Komt er een WordPress-menu op een van de voetplekken te staan, dan levert
 * wp_nav_menu een <ul> met opsommingstekens en inspringing aan. Die twee zetten
 * we uit, verder volgt het menu dezelfde opmaak als de vaste lijst hierboven.
 */
.mdact-voet__kolom ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----------------------------------------------------------------- de onderbalk */

.mdact-voet__onder {
	background-color: var(--mdact-voet-onder);
	padding: 22px 40px;
}

.mdact-voet__keurmerken {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.mdact-voet__keurmerken li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mdact-voet-zacht);
}

/* Het vinkje in de accentkleur van de kit, dezelfde als de knoppen op de site. */
.mdact-voet__keurmerken svg {
	width: 15px;
	height: 15px;
	flex: none;
	fill: #E8C89A;
}

.mdact-voet__regel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	flex-wrap: wrap;
	padding-top: 18px;
	border-top: 1px solid var(--mdact-voet-lijn);
}

.mdact-voet__regel p {
	margin: 0;
	color: var(--mdact-voet-stil);
}

/*
 * "Swipe Media" en "Privacyverklaring" zijn links, maar ze horen bij de regel
 * waarin ze staan en krijgen dus dezelfde kleur als "Webdesign" en "Groesbeek"
 * ernaast (Tim, 14 september).
 */
.mdact-voet .mdact-voet__regel a {
	color: var(--mdact-voet-stil);
	text-decoration: none;
}

.mdact-voet .mdact-voet__regel a:hover,
.mdact-voet .mdact-voet__regel a:focus {
	color: var(--mdact-voet-creme);
}

/*
 * Links het jaar met de plaats en wie de site gemaakt heeft, rechts de kleine
 * links. Op een breed scherm staan ze achter elkaar met een puntje ertussen, op
 * een smal scherm onder elkaar. Het scheidingsteken zit in de opmaak en niet in
 * de tekst, zodat er bij het afbreken geen los puntje aan het eind van een regel
 * blijft hangen.
 */
.mdact-voet__credits,
.mdact-voet__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

/*
 * Het puntje tussen twee onderdelen. Onderaan rechts kan dat een link zijn of
 * de lijst uit het menu "Voet, kleine links onderaan"; vandaar * en niet a.
 */
.mdact-voet__credits > span + span::before,
.mdact-voet__meta > * + *::before,
.mdact-voet__metalijst li + li::before {
	content: "\00b7";
	margin-right: 10px;
	color: var(--mdact-voet-stil);
}

.mdact-voet__meta {
	color: var(--mdact-voet-stil);
}

.mdact-voet__meta ul,
.mdact-voet__metalijst {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------- kleinere schermen */

@media (max-width: 1024px) {
	.mdact-voet__binnen { gap: 44px; padding: 56px 28px 40px; }
	.mdact-voet__kolommen { gap: 32px; }
	.mdact-voet__onder { padding: 22px 28px; }
}

@media (max-width: 767px) {
	.mdact-voet__binnen { flex-direction: column; gap: 44px; padding: 48px 20px 36px; }
	.mdact-voet__over { flex: 0 0 auto; }
	/*
	 * Twee kolommen naast elkaar, de derde valt eronder. align-items houdt de
	 * kolommen aan hun eigen hoogte in plaats van ze uit te rekken tot de
	 * langste; anders begint de kolom eronder met een onnodig gat.
	 */
	.mdact-voet__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
	.mdact-voet__onder { padding: 20px 20px 28px; }
	.mdact-voet__regel { flex-direction: column; align-items: flex-start; }
	.mdact-voet__credits { flex-direction: column; }
	.mdact-voet__credits > span + span::before { content: none; }
}