/* ==========================================================================
   Expertise — de rij met de gebieden onderaan een expertisepagina

   Zeven kaarten onder elkaar: een nummer, de naam van het gebied, een regel
   tekst en een pijltje. In Elementor staan ze als losse containers zónder
   link; die link legt het thema eroverheen — zie aerocs_expertise_cards_link()
   in functions.php. Dit bestand doet de rest: hoe een kaart eruitziet als je
   hem aanwijst.

   De haakjes zijn de twee klassen die diezelfde functie erbij zet:

     .aerocs-exp-card        de kaart (de buitenste container van één gebied)
     .aerocs-exp-card__link  het klikbare vlak dat eroverheen ligt

   Geen Elementor-id's dus: elke pagina heeft zijn eigen kopie van het blok met
   eigen id's, en met zeven pagina's zouden dat er negenenveertig zijn.
   ========================================================================== */

.aerocs-exp-card {
	/* Het pijltje is de huisstijlkleur; hij staat hier zodat er één plek is om
	   hem te wisselen. Via de globale kleur van Elementor, met de waarde zelf
	   als vangnet voor als het blok ooit buiten een Elementor-pagina staat. */
	--aer-card-gold: var( --e-global-color-primary, #C2A14D );

	/* Dezelfde als in de header, zodat de bewegingen op de site één handschrift
	   houden. */
	--aer-card-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );

	/* Het vlak hieronder hangt hieraan. Elementor zet dit zelf al op elke
	   container, maar niet zó stellig dat het hier mag ontbreken: zonder deze
	   regel valt de link terug op het eerstvolgende element erboven en ligt hij
	   ineens over de hele sectie. */
	position: relative;
}

/* Het klikbare vlak. Geen eigen opmaak: wat je ziet is de kaart eronder, dit
   is alleen het gebied dat de klik opvangt. Daarmee is de hele regel klikbaar
   — de naam, de zin erachter en het pijltje — en niet alleen een woord. */
.aerocs-exp-card .aerocs-exp-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;

	/* Geen onderstreping of kleur van het thema erop; er staat geen tekst in. */
	text-decoration: none;
}

/* --- Aanwijzen ----------------------------------------------------------- */

/* De regel zelf blijft wit; alles wat er gebeurt gebeurt in de kleur. De kop,
   het nummer ervoor en het pijltje worden goud — dat is genoeg aanwijzing, en
   een vlak eronder zou in deze rustige rij te zwaar zijn.

   De klasse staat dubbel in deze selectors. Elementor zet de kleur van de kop
   met vier klassen en die van het nummer met drie, en laadt zijn CSS ná het
   thema; bij gelijk gewicht wint hij dan. Zie [[elementor-kit-overruled-component-css]]. */
.aerocs-exp-card.aerocs-exp-card:hover .elementor-widget-heading .elementor-heading-title,
.aerocs-exp-card.aerocs-exp-card:focus-within .elementor-widget-heading .elementor-heading-title,
.aerocs-exp-card.aerocs-exp-card:hover .aerocs-exp-card__num,
.aerocs-exp-card.aerocs-exp-card:focus-within .aerocs-exp-card__num,
.aerocs-exp-card.aerocs-exp-card:hover .aerocs-exp-card__num p,
.aerocs-exp-card.aerocs-exp-card:focus-within .aerocs-exp-card__num p {
	color: var( --aer-card-gold );
}

.aerocs-exp-card .elementor-widget-heading .elementor-heading-title,
.aerocs-exp-card .aerocs-exp-card__num,
.aerocs-exp-card .aerocs-exp-card__num p {
	transition: color 240ms var( --aer-card-ease );
}

/* Het pijltje staat er altijd, in hetzelfde donkerblauw als de kop.

   In de SVG staat 'fill="white" fill-opacity="0.4"' als attribuut op het pad
   zelf, en daardoor stond het pijltje er wit — dus onzichtbaar — bij. Een
   attribuut verliest het van élke CSS-regel, maar alleen als die op het pad
   staat: Elementor zet zijn eigen kleur op de <svg> eromheen, en die komt niet
   langs het attribuut van het pad heen. Vandaar deze regel op het pad. */
.aerocs-exp-card .elementor-widget-icon svg path {
	fill: var( --e-global-color-text, #0B1F3B );
	fill-opacity: 1;

	transition:
		fill 240ms var( --aer-card-ease ),
		fill-opacity 240ms var( --aer-card-ease );
}

.aerocs-exp-card:hover .elementor-widget-icon svg path,
.aerocs-exp-card:focus-within .elementor-widget-icon svg path {
	fill: var( --aer-card-gold );
}

/* En hij zet een stapje in de richting waarin hij wijst. Op het vakje om het
   icoon en niet op de SVG: dat vakje is het enige dat van Elementor geen eigen
   transform krijgt. */
.aerocs-exp-card .elementor-widget-icon .elementor-icon {
	transition: transform 240ms var( --aer-card-ease );
}

.aerocs-exp-card:hover .elementor-widget-icon .elementor-icon,
.aerocs-exp-card:focus-within .elementor-widget-icon .elementor-icon {
	transform: translateX( 4px );
}

/* --- Met het toetsenbord -------------------------------------------------- */

/* De ring valt binnen de kaart ('outline-offset' negatief), anders loopt hij
   over de regels erboven en eronder. Dezelfde kleur en dikte als in de
   header. */
.aerocs-exp-card .aerocs-exp-card__link:focus-visible {
	outline: 2px solid var( --aer-card-gold );
	outline-offset: -4px;
}

/* hello-elementor zet op elke link met toetsenbordfocus een witte schaduw van
   4px; die snijdt hier een rand uit de regel. */
.aerocs-exp-card .aerocs-exp-card__link:focus,
.aerocs-exp-card .aerocs-exp-card__link:focus-visible {
	box-shadow: none;
}

@media ( prefers-reduced-motion: reduce ) {

	.aerocs-exp-card,
	.aerocs-exp-card .elementor-widget-icon svg path,
	.aerocs-exp-card .elementor-widget-icon .elementor-icon {
		transition: none;
	}

	.aerocs-exp-card:hover .elementor-widget-icon .elementor-icon,
	.aerocs-exp-card:focus-within .elementor-widget-icon .elementor-icon {
		transform: none;
	}
}