/* ====================================================================
   Eigen laag boven het thema van dionvacation.
   Zelfde rol als _overrides.css bij Vida Daurada: hier staat wat wij
   veranderen, zodat het thema zelf onaangeroerd blijft. Deze laag wordt
   door tools/schoon.pl onderaan de kop van elke pagina ingehaakt en
   wint dus van style.css.
   ==================================================================== */

/* --------------------------------------------------------------------
   De voet: drie vakken, naar het voorbeeld van Vida Daurada
   --------------------------------------------------------------------
   De opbouw komt uit tools/schoon.pl; dat vervangt het witte middenblok
   van WordPress. De blauwe en roze loopbalken erboven en eronder zijn
   ongemoeid gelaten.

   Het verloop loopt van wit naar zwart, zodat de witte kaart van het
   artikel er zacht in overloopt. De hoeken, de kleuren en de
   stopplaatsen zijn die van Vida Daurada, alleen doorgerekend naar
   zwart:
     #e3f2f6  ->  #dfdfdf    (wit, 12% richting de eindkleur)
     #a9dae4  ->  #9e9e9e    (wit, 38% richting de eindkleur)
     #1e9eb7  ->  #000000    (de eindkleur zelf)

   De drie kolommen hebben vaste breedtes in procenten van dezelfde doos
   waarop het verloop ligt. Daardoor valt de gang tussen kolom 1 en 2
   (27% tot 38%) precies samen met de overgang van de band, net als bij
   Vida Daurada. Verander je de breedtes, verander dan ook de stopplaatsen.

   LET OP: alle drie de varianten zijn nodig. Bij een smal scherm komen
   de kolommen onder elkaar en moet de band kantelen. Zet je hier maar
   een regel neer, dan wint die op elke schermmaat.
   -------------------------------------------------------------------- */

footer.footer > .dv-voet {
  background-color: #000000 !important;
}

@media (min-width: 992px) {
  footer.footer > .dv-voet {
    background-image: linear-gradient(100deg,
      #ffffff 0%,
      #ffffff 27.5%,
      #dfdfdf 30.5%,
      #9e9e9e 33.5%,
      #000000 37.5%,
      #000000 100%) !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  footer.footer > .dv-voet {
    background-image: linear-gradient(96deg,
      #ffffff 0%,
      #ffffff 27%,
      #dfdfdf 30.5%,
      #9e9e9e 33.5%,
      #000000 35.5%,
      #000000 100%) !important;
  }
}

/* Op een smal scherm staan de kolommen onder elkaar en loopt de band van
   boven naar beneden. Hier ligt de band niet over het hele blok maar per
   kolom: kolom 1 is wit, de overgang zit bovenin kolom 2 en de rest is
   zwart.

   Dat is met opzet. Legden we er een verloop over het hele blok, dan zou
   de plek van de overgang afhangen van de totale hoogte, en die
   verandert bij elke regel die erbij komt. Toen de knoppen en de sociale
   iconen in kolom 1 kwamen, liep de band ineens dwars door de tekst.
   Nu zit hij vast aan de bovenkant van kolom 2 en blijft hij staan waar
   hij hoort, hoe hoog kolom 1 ook wordt. */
@media (max-width: 767px) {
  footer.footer > .dv-voet {
    background-image: none !important;
  }

  .dv-voet-kolom-1 { background-color: #ffffff; }

  .dv-voet-kolom-2 {
    background-image: linear-gradient(170deg,
      #ffffff 0%,
      #ffffff 6%,
      #dfdfdf 8%,
      #9e9e9e 10.5%,
      #000000 14%,
      #000000 100%);
  }

  .dv-voet-kolom-3 { background-color: #000000; }
}

/* --- de drie vakken ------------------------------------------------- */

.dv-voet-rij {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.dv-voet-kolom {
  box-sizing: border-box;
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

/* Kolom 1 staat op het witte deel en moet dus vóór 27,5% eindigen. */
.dv-voet-kolom-1 {
  width: 27%;
  padding-left: 6%;
  padding-right: 2.5%;
}

/* Kolom 2 begint ná 37,5%, dus achter de overgang. */
.dv-voet-kolom-2 {
  width: 30%;
  margin-left: 11%;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}

.dv-voet-kolom-3 {
  width: 26%;
  margin-left: auto;
  padding-right: 6%;
}

/* --- de teksten ----------------------------------------------------- */
/* Zelfde ingetogen opmaak als bij Vida Daurada: klein, rustig, ruime
   regelafstand, kopregel vet. Het lettertype blijft dat van het thema
   van dionvacation; alleen het krabbeltje heeft een schrijfletter. */

/* De maten van de voet en van de loopbalk eronder horen bij elkaar in
   de pas te lopen. De balk stond op 20 pixels (text-xl van het thema)
   en de voet op 15,2; dat gaapte te ver uit elkaar. De voet is een
   slagje omhoog en de balk een slagje omlaag, zodat beide rond de 17
   pixels uitkomen. */
.dv-voet-kop {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.45;
  margin: 0 0 0.35rem;
}

.dv-voet-regel {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 0.2rem;
}

/* Kolom 1 op wit: donkere tekst. Kolommen 2 en 3 op zwart: wit. */
.dv-voet-kolom-1,
.dv-voet-kolom-1 .dv-voet-kop,
.dv-voet-kolom-1 .dv-voet-regel {
  color: #111111 !important;
}

.dv-voet-kolom-2,
.dv-voet-kolom-3,
.dv-voet-kolom-2 *,
.dv-voet-kolom-3 * {
  color: #ffffff !important;
}

/* De twee knoppen onder kolom 1. Blauw van dionvacation met witte
   tekst; bij het zweven draait dat om, met de rand in dezelfde kleur.
   Ze staan op het witte deel van de band, dus de rand is ook zichtbaar
   als de knop wit wordt. */
.dv-voet-knop {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
  padding: 0.5rem 1.1rem;
  border: 2px solid #0084fc;
  border-radius: 999px;
  background: #0084fc;
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.dv-voet-knop:first-of-type { margin-top: 1.25rem; }

.dv-voet-knop:hover,
.dv-voet-knop:focus {
  background: #ffffff;
  color: #0084fc !important;
}

/* De sociale knoppen onder de twee tagknoppen. De zwarte iconen van het
   thema, want deze kolom staat op het witte deel van de band. Het thema
   zet ze op w-16 (64 pixels); dat is voor een voetkolom te groot. */
.dv-voet-ervaringen {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.dv-voet-sociaal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.dv-voet-sociaal a { display: block; line-height: 0; }

.dv-voet-sociaal img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Het X-merk zit niet bij de iconen van het thema, dus het is hier
   getekend. Iets kleiner dan de andere: dat merk is een kale letter
   zonder vlak eromheen en oogt bij gelijke maat groter dan de rest. */
.dv-ikoon-x {
  display: block;
  width: 21px;
  height: 21px;
  margin: 2px;
  fill: #111111;
}

/* TikTok zit er evenmin bij, dus ook getekend. Dit merk is smaller dan
   hoog, dus het krijgt de volle hoogte en zoekt zelf zijn breedte. */
.dv-ikoon-tiktok {
  display: block;
  width: auto;
  height: 25px;
  fill: #111111;
}

.dv-voet-sociaal a:hover img,
.dv-voet-sociaal a:focus img,
.dv-voet-sociaal a:hover svg,
.dv-voet-sociaal a:focus svg { opacity: 0.65; }

/* De streep onder de link volgt de tekst, ook als die over twee regels
   loopt. Met een border-bottom op een inline-block zou hij de hele
   kolombreedte pakken en onder de witruimte doorlopen. */
.dv-voet-volglink {
  display: inline;
  font-size: 1.05rem;
  line-height: 1.55;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.35);
  text-underline-offset: 0.25em;
}

/* De ruimte boven de link komt van het blokje erboven, niet van een
   marge op de link zelf: die is inline en zou er niets mee doen. */
.dv-voet-sociaal { margin-bottom: 0.9rem; }

.dv-voet-volglink:hover,
.dv-voet-volglink:focus { text-decoration-color: #111111; }

/* --- kolom 2: logo, vlag en krabbel --------------------------------- */

/* Het logo staat op zwart. Er bestaat geen wit bestand van dionvacation,
   dus we draaien het zwarte om. Levert zij een echt wit bestand aan, dan
   kan de filter-regel weg. */
.dv-voet-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 1.25rem;
  filter: invert(1);
}

.dv-voet-vlaggen {
  display: flex;
  justify-content: center;
}

.dv-lang-ball {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px #ffffff;
}

.dv-lang-ball svg { display: block; width: 28px; height: 28px; }

/* Het krabbeltje: een pijl naar het vlaggetje, met de zin eronder. Het
   hoort eruit te zien alsof het er met potlood bij geschreven is, dus
   een schrijfletter uit het systeem (geen lettertype van buiten), een
   beetje scheef, en niet helder wit maar wat zachter. Bij Vida Daurada
   schuift _zoom.js de pijl onder de juiste vlag, omdat daar drie talen
   zijn; hier is er één, dus hij staat gewoon in het midden. */
.dv-krabbel {
  position: relative;
  display: block;
  margin: 2px 0 0;
  padding: 44px 0 0;
  color: rgba(255, 255, 255, 0.82) !important;
  text-align: center;
  pointer-events: none;
}

.dv-krabbel__pijl {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 44px;
  opacity: 0.85;
}

.dv-krabbel__tekst {
  display: inline-block;
  max-width: 260px;
  font-family: 'Segoe Script', 'Bradley Hand', 'Snell Roundhand',
               'Brush Script MT', cursive;
  font-size: 1.05rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82) !important;
  transform: rotate(-2.2deg);
}

/* --- kolom 3: de merkregels ----------------------------------------- */

.dv-voet-cursief { font-style: italic; }
.dv-voet-vet     { font-weight: 700; }

/* Markeerstift. Geen rechthoekje maar een getekende streek: de boven-
   en onderrand golven een beetje, de uiteinden staan schuin zoals bij
   een stift met een schuine punt, en onderlangs loopt een tweede, iets
   doorzichtige baan — daar waar je bij het terughalen nog een keer
   overheen gaat. De streek is een SVG in de CSS zelf, met
   preserveAspectRatio='none' zodat hij meerekt met de lengte van het
   woord; daardoor hoeft er geen plaatje bij.

   De streek staat lager dan het midden, zoals iemand die met de hand
   markeert: hij loopt een stukje onder de letters door. De tekst blijft
   wit; dat leest op beide kleuren. */
.dv-markeer {
  padding: 0.05em 0.32em 0.12em;
  color: #ffffff !important;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 100% 92%;
  background-position: 0 82%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dv-markeer--blauw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M9 7 C 38 0.5, 72 9.5, 106 3 C 140 -2.5, 170 8.5, 197 1.5 L 190 34.5 C 156 40.5, 120 28.5, 82 35.5 C 50 41, 22 30.5, 1.5 33 Z' fill='%230084fc'/%3E%3Cpath d='M3 26 C 46 32.5, 94 24, 140 30 C 166 33.5, 182 28.5, 196 24.5 L 190 34.5 C 156 40.5, 120 28.5, 82 35.5 C 50 41, 22 30.5, 1.5 33 Z' fill='%230084fc' opacity='.45'/%3E%3C/svg%3E");
}

.dv-markeer--rood {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 3 C 34 10.5, 70 0.5, 104 7.5 C 138 14, 168 2.5, 198 6 L 193 33 C 160 26.5, 124 38, 84 31 C 50 25, 22 36.5, 2 31.5 Z' fill='%23e9174b'/%3E%3Cpath d='M2 24.5 C 40 18, 88 28.5, 134 22 C 160 18.5, 180 25, 197 29 L 193 33 C 160 26.5, 124 38, 84 31 C 50 25, 22 36.5, 2 31.5 Z' fill='%23e9174b' opacity='.4'/%3E%3C/svg%3E");
}

/* Bij het zweven haal je er als het ware nog een keer overheen: de
   streek wordt voller en iets feller. */
.dv-markeer:hover,
.dv-markeer:focus {
  background-size: 100% 104%;
  background-position: 0 74%;
  filter: saturate(1.15) brightness(1.08);
}

/* --- kolom 3: de links ---------------------------------------------- */

.dv-voet-links {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.dv-voet-links li { margin: 0 0 0.3rem; }

.dv-voet-links a {
  font-size: 1.05rem;
  line-height: 1.55;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.dv-voet-links a:hover,
.dv-voet-links a:focus {
  border-bottom-color: #ffffff;
}

/* --------------------------------------------------------------------
   De loopbalk onder de voet: de tip naar Vida Daurada
   --------------------------------------------------------------------
   De balk bovenaan de voet is weg; deze blijft. Hij heeft de teal van
   Vida Daurada gekregen met witte tekst. Het VI-embleem is hun gouden
   bestand, hier wit gemaakt: brightness(0) maakt het eerst zwart en
   invert(1) daarna wit, ongeacht de oorspronkelijke kleur.

   webTicker staat op duplicate, dus een enkel item in de lijst is
   genoeg: het script herhaalt het zelf tot de balk vol is.
   -------------------------------------------------------------------- */

.dv-tipbalk {
  background-color: #1e9eb7;
}

/* Het thema zet de regels in de loopbalk op text-xl, oftewel 20 pixels.
   Dat schreeuwde naast de voet. Nu gelijk aan de tekst in de voet. */
.dv-tipbalk .ticker-items li {
  font-size: 1.05rem;
}

.dv-tipbalk a {
  color: #ffffff !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.dv-tipbalk a:hover,
.dv-tipbalk a:focus { text-decoration: underline; }

.dv-tipbalk .dv-vi {
  display: inline-block;
  height: 1.1em;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Het scheidingsbolletje tussen twee herhalingen, in dezelfde maat als
   bij de loopbalken van het thema. */
.dv-tipbalk .fa-circle { color: #ffffff; }

/* --- smal scherm ----------------------------------------------------- */
/* Onder elkaar, en de band loopt van boven naar beneden. De bovenste
   kolom staat dan op het witte deel en houdt donkere tekst; die regel
   hierboven geldt al. */

@media (max-width: 767px) {
  .dv-voet-rij { display: block; }

  .dv-voet-kolom,
  .dv-voet-kolom-1,
  .dv-voet-kolom-2,
  .dv-voet-kolom-3 {
    width: auto;
    margin-left: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* De ruime tussenruimte onder kolom 1 en boven het logo is waar de
     band doorheen loopt. Verklein je die, dan valt de overgang over de
     tekst of over het logo. */
  .dv-voet-kolom-1 { padding-top: 2.5rem; padding-bottom: 4rem; }
  .dv-voet-kolom-2 { padding-top: 4rem;   padding-bottom: 1.5rem; }
  .dv-voet-kolom-3 { padding-top: 1rem;   padding-bottom: 2.5rem; }
}