/* ====================================================================
   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 kop: logokader linksboven, naar het voorbeeld van Vida Daurada
   --------------------------------------------------------------------
   De balk eronder, met het menu-icoon, Reistips en de winkel, is weg;
   dat gebeurt in tools/schoon.pl.

   Het hoekverloop is een op een overgenomen uit _overrides.css van Vida
   Daurada, met zwart waar daar teal staat. Zelfde richting, zelfde
   stopplaatsen:
     #2da4bc  ->  #000000   de merkkleur zelf
     #85cad8  ->  #6b6b6b   42% richting wit
     #dff1f4  ->  #d8d8d8   85% richting wit

   Het is een hoekwassing, geen vlak: het zwart blijft in de
   linkeronderhoek en het logo staat op wit. Het logobestand van
   dionvacation is zwart en blijft dus zoals het is.
   -------------------------------------------------------------------- */

/* De strook waar de kop in zit was wit en paginabreed. Zolang de zwarte
   balk eronder stond viel dat niet op; nu die weg is, staat er een witte
   balk van ruim 150 pixels over de volle breedte, waarvan alleen de twee
   uiteinden gevuld zijn. Hij wordt doorzichtig, zodat alleen het
   logokader en de knoppen overblijven en de paginakleur doorloopt — net
   als bij Vida Daurada, waar het logokader ook los in de hoek staat. */
.header-wrapper {
  background-color: transparent !important;
  padding-top: 0 !important;
}

/* Het logokader en de twee knoppen hangen aan de bovenrand, zoals bij
   Vida Daurada: platte bovenhoeken, ronde onderhoeken en een zachte
   schaduw eronder. Daar is het logokader 0 0 18px 18px en zijn de
   knoppen 0 0 16px 16px; die maten zijn hier overgenomen. */
header.dv-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background-color: transparent;
}

/* Het kader heeft op elke schermbreedte dezelfde maat: de maat die het
   op een telefoon had. Dat scheelt ook gedoe met het verloop, want de
   stopplaatsen hieronder zijn op deze verhouding afgestemd. */
.dv-kop-logo {
  display: block;
  padding: 10px 26px 18px 14px;
  /* De stopplaatsen staan strakker dan de 10/22/42 van Vida Daurada, en
     dat hoort zo: in hun eigen CSS staat dat de stops per element
     teruggerekend worden naar de kleinste maat van dat element, zodat
     de kleur een hoekwassing blijft en niet het hele vlak overneemt.
     Hun logokader is bijna vierkant; het onze is breed en laag, dus
     langs dezelfde diagonaal reikt eenzelfde percentage veel verder.
     Met de oorspronkelijke waarden liep het zwart over de onderkant van
     het woord "vacation". */
  background-image: linear-gradient(
      to top right,
      #000000 0%,
      #6b6b6b 5%,
      #d8d8d8 11%,
      #ffffff 22%);
  /* Zonder deze twee regels tekent de browser het verloop alleen binnen
     de rand en vult hij de randstrook met een herhaling; daar liep dan
     een haarlijntje wit onderlangs de zwarte hoek. */
  background-origin: border-box;
  background-repeat: no-repeat;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.dv-kop-logo img {
  display: block;
  width: 118px;
  max-width: 100%;
  height: auto;
}

/* Het logokader begint op dezelfde hoogte als de linkerkant van een
   blog. Dat is geen vast getal: de blogkolom is vier zesde van een rij
   die zelf meegroeit met het venster, en staat daarbinnen gecentreerd.
   Teruggerekend komt de linkerkant van die kolom uit op een zesde van
   de breedte van de kop, min een kleine correctie voor de marges die
   het thema op de rij en op de kolom zet. Vandaar de calc: zo blijft
   het kloppen op elke breedte en niet alleen op 1280.

   Alleen vanaf lg: daaronder staat de blogkolom over de volle breedte
   en liggen de twee linkerkanten vanzelf al gelijk. */
/* De knoppen lijnen op dezelfde manier uit met de rechterkant van een
   blog. Dat is precies de spiegeling van het logokader: de blogkolom
   staat gecentreerd in de rij, dus links en rechts valt er evenveel
   buiten. Nagemeten op 1280: 189 pixels aan beide kanten. Vandaar
   dezelfde berekening, nu als rechtermarge. */
@media (min-width: 1024px) {
  .dv-kop-logo    { margin-left:  calc(16.6667% - 10.6667px); }
  .dv-kop-knoppen { margin-right: calc(16.6667% - 10.6667px); }
}

.dv-kop-knoppen {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
}

/* De knoppen zijn de Reservar- en Regal-knop van Vida Daurada, in de
   kleuren van dionvacation: 43 pixels hoog, letter op 16, platte
   bovenhoeken en 16 pixels ronding onder.

   In rust een gekleurd vlak met witte letters en een wit icoon; bij het
   zweven omgewisseld, dus een wit vlak met de letters en het icoon in
   de kleur van de knop. Dezelfde beweging als bij Vida Daurada, waar
   wit-op-teal teal-op-wit wordt. */
.dv-kop-knop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 43px;
  padding: 0 18px;
  border: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: #ffffff !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dv-kop-knop--koud { background-color: #0084fc; }
.dv-kop-knop--warm { background-color: #e9174b; }

.dv-kop-knop:hover,
.dv-kop-knop:focus { background-color: #ffffff; }

.dv-kop-knop--koud:hover,
.dv-kop-knop--koud:focus { color: #0084fc !important; }

.dv-kop-knop--warm:hover,
.dv-kop-knop--warm:focus { color: #e9174b !important; }

/* Het beeldmerk staat als masker in een vakje; de kleur komt uit
   background-color, zodat het bij het zweven meekleurt. De twee
   bestanden zijn wit op doorzichtig en lenen zich daar precies voor. */
.dv-kop-icoon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color 0.15s ease;
}

.dv-kop-knop--koud .dv-kop-icoon {
  -webkit-mask-image: url(/wp-content/themes/dionvacation/img/logo-cold.png);
          mask-image: url(/wp-content/themes/dionvacation/img/logo-cold.png);
}

.dv-kop-knop--warm .dv-kop-icoon {
  -webkit-mask-image: url(/wp-content/themes/dionvacation/img/logo-hot.png);
          mask-image: url(/wp-content/themes/dionvacation/img/logo-hot.png);
}

.dv-kop-knop--koud:hover .dv-kop-icoon,
.dv-kop-knop--koud:focus .dv-kop-icoon { background-color: #0084fc; }

.dv-kop-knop--warm:hover .dv-kop-icoon,
.dv-kop-knop--warm:focus .dv-kop-icoon { background-color: #e9174b; }

/* Op een telefoon moeten het logokader en de twee knoppen samen binnen
   375 pixels passen. De knoppen gaan daarom omlaag in maat; anders
   drukken ze het logokader plat en wordt het logo onleesbaar klein. */
@media (max-width: 767px) {
  /* Twee knoppen naast elkaar passen hier niet meer. Ze gaan onder
     elkaar en zitten vast aan de rechterrand van het scherm, met een
     beetje lucht ertussen. Daarom is de ronding ook verplaatst: op een
     breed scherm hangen ze aan de bovenrand en is de onderkant rond,
     hier zitten ze tegen de zijkant en is de linkerkant rond. De
     rechterkant blijft vlak, want daar raken ze de schermrand.

     De rechtermarge van de strook moet daarvoor weg; anders blijft er
     een streepje ruimte tussen de knop en de rand staan. */
  .header-wrapper { padding-right: 0 !important; }

  .dv-kop-knoppen {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    /* Niet tegen de bovenrand aan: ze hangen hier aan de zijkant, niet
       aan de bovenkant. De marge staat op het blokje en niet op de
       strook eromheen, zodat het logokader wel aan de bovenrand vast
       blijft zitten. */
    margin-top: 12px;
  }

  .dv-kop-knop {
    height: 34px;
    padding: 0 12px;
    gap: 7px;
    font-size: 13px;
    border-radius: 12px 0 0 12px;
  }

  .dv-kop-icoon { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------
   Tussenkoppen in de beschrijving onder een categorieoverzicht
   --------------------------------------------------------------------
   In die tekst stonden de koppen als kale regels tussen de lopende
   tekst, waardoor het een lap werd. tools/schoon.pl maakt er echte
   koppen van; hier krijgen ze hun opmaak. Zelfde gewicht en maat als de
   koppen in het tekstvlak op de homepage, met wat lucht erboven zodat
   de alinea ervoor er niet tegenaan plakt.

   De maat komt uit het thema zelf: daar staat al
   `.dv-terms-description-holder h2 { font-size: 1.5rem }`. Het thema
   was dus wel op koppen gebouwd, alleen stonden ze niet in de tekst.
   Die maat laten we met rust; hier staat alleen wat het thema niet
   regelt.
   -------------------------------------------------------------------- */

.dv-tussenkop {
  margin: 1.4em 0 0.3em;
  line-height: 1.3;
  font-weight: 700;
}

/* --------------------------------------------------------------------
   De blogkaart: afgeronde hoeken en een schaduw, zodat hij zweeft
   --------------------------------------------------------------------
   Overgenomen uit de voorbeeldblog die voor Vida Daurada gemaakt was
   (_oud-uit-vida-daurada/_dionvacation.css): ronding 18 pixels en een
   zachte schaduw.

   De schaduw staat op het omhulsel en niet op de witte kaart alleen.
   Dat is met opzet, en de reden staat ook in die oude opzet: de foto en
   de kaart zijn samen één blok. Zet je de schaduw op de kaart, dan valt
   hij omhoog over het witte randje onder de foto en zie je daar een
   streep liggen.

   overflow verbergt wat buiten de ronding valt, zodat de bovenhoeken
   van de foto echt rond worden en niet vierkant door het plaatje heen
   steken.
   -------------------------------------------------------------------- */

.post-holder {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}

/* De titel stond op gewicht 400 en dus even zwaar als de lopende tekst.
   In de oude opzet staat hij op 800; dat is hier overgenomen. Op een
   blogpagina is de titel een h1, in de overzichten een h2 — het is
   dezelfde kaart, dus ze krijgen hetzelfde gewicht. */
.post-holder h1,
.post-holder h2 {
  font-weight: 800;
}

/* --------------------------------------------------------------------
   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 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  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;
}

/* De twee staan naast elkaar zonder het woordje "en" ertussen; de
   ruimte komt nu van de regel zelf. Wordt de kolom te smal, dan zakt de
   tweede naar de volgende regel. */
.dv-voet-paden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* Het boekje van het gastenboek bij Vida Daurada, een op een
   overgenomen. Het is met lijnen getekend en gebruikt currentColor,
   dus het kleurt mee met de tekst: wit op de stift, en in de kleur van
   de stift zodra die bij het zweven wit wordt. */
.dv-boek {
  width: 17px;
  height: 17px;
  flex: none;
}

.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.
   -------------------------------------------------------------------- */

/* De balk is de laatste regel van de pagina en hoort dus tot de
   onderrand door te lopen. Hij was 62 pixels hoog en eindigde op een
   fractie van een pixel (900,2); daar bleef een lichte streep van de
   paginakleur onderlangs staan. Nu 52 pixels, opgebouwd uit hele
   getallen: 12 boven, 28 regelhoogte, 12 onder. Meteen een slagje
   smaller, zoals gevraagd. */
.dv-tipbalk {
  background-color: #1e9eb7;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  /* De paginahoogte komt op een fractie van een pixel uit. Afhankelijk
     van hoe de browser afrondt, kan daar onderlangs een haarlijn van de
     paginakleur blijven staan. Deze schaduw legt twee pixels teal onder
     de balk en dekt dat af; hij neemt geen ruimte in, dus aan de
     opbouw verandert er niets. */
  box-shadow: 0 2px 0 0 #1e9eb7;
}

.dv-tipbalk .ticker-items li,
.dv-tipbalk .ticker-items li a {
  line-height: 28px;
}

/* 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; }
}


/* ============================================================
   Contactformulier
   ============================================================
   Nagebouwd naar het formulier van Vida Daurada, want WordPress
   nam Contact Form 7 mee en dat hoort bij de oude site. De vorm is
   dezelfde: een kader met het formulier erin, pilvormige velden met
   een icoontje links, en een vinkje rechts zodra het veld klopt.

   De kleuren zijn die van dionvacation. Paars (#7a49a5) is de kleur
   die het thema al voor losse pagina's gebruikt — de bolletjes in de
   paginatekst zijn ook paars — dus daar staat het kader in. Blauw
   (#0084fc) is de kleur van de actie: de verzendknop, en het veld dat
   af is. Precies de verdeling die Vida Daurada tussen zijn huisblauw
   en zijn knopgroen maakt. */

.dv-contact-kader {
  background: #f8f5fb;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(122, 73, 165, 0.15);
  padding: 28px 24px 32px;
  margin: 1.5rem 0 2.5rem;
  text-align: left;
}

.dv-contact-kop {
  font-weight: 700;
  font-size: 1.15rem;
  color: #7a49a5;
  text-align: center;
  margin: 0 0 20px;
}

.dv-contact-veld {
  position: relative;
  margin-bottom: 18px;
}

.dv-contact-icoon,
.dv-contact-vink {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}

.dv-contact-icoon { left: 16px; color: #7a49a5; }
.dv-contact-vink  { right: 16px; color: #0084fc; opacity: 0; transition: opacity 0.15s ease; }

.dv-contact-icoon svg { width: 18px; height: 18px; }
.dv-contact-vink  svg { width: 16px; height: 16px; }

/* Het berichtveld is geen pilletje maar een vlak; het icoon staat
   daarom bovenin en niet in het midden. */
.dv-contact-veld--bericht .dv-contact-icoon,
.dv-contact-veld--bericht .dv-contact-vink {
  top: 20px;
  transform: none;
}

/* Het thema geeft .wpcf7-form-control een rand en een eigen maat mee.
   Onze velden heten anders, dus daar komen we niet aan. */
.dv-contact-invoer {
  width: 100%;
  padding: 12px 44px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: #4a4a4a;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(122, 73, 165, 0.15);
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.dv-contact-invoer::placeholder { color: #4a4a4a; opacity: 0.6; }
.dv-contact-invoer:hover { box-shadow: 0 4px 14px rgba(122, 73, 165, 0.25); }
.dv-contact-invoer:focus { box-shadow: 0 0 0 2px #7a49a5, 0 4px 14px rgba(122, 73, 165, 0.25); }

textarea.dv-contact-invoer {
  border-radius: 18px;
  min-height: 130px;
  padding: 14px 44px;
  resize: vertical;
  display: block;
}

/* Veld af: blauw, met een vinkje rechts. */
.dv-contact-veld--af .dv-contact-invoer {
  background: #eff7ff;
  color: #0066c4;
  font-weight: 600;
  box-shadow: 0 0 0 2px #0084fc, 0 2px 8px rgba(0, 132, 252, 0.20);
}
.dv-contact-veld--af .dv-contact-icoon { color: #0084fc; }
.dv-contact-veld--af .dv-contact-vink  { opacity: 1; }

/* Het honingpotje: alleen bots vullen dit in. Niet display:none, want
   sommige bots slaan verborgen velden over. */
.dv-contact-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dv-contact-knoprij {
  text-align: center;
  margin-top: 6px;
}

.dv-contact-knop {
  display: inline-block;
  background: #0084fc;
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 132, 252, 0.30);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .dv-contact-knop:hover {
    background: #0076e2;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 132, 252, 0.40);
  }
}

.dv-contact-knop[disabled] { opacity: 0.6; cursor: default; transform: none; }

/* De Turnstile-controle staat op 'interaction-only': normaal is dit
   blokje leeg en neemt het geen ruimte in. Alleen als Cloudflare aan de
   bezoeker twijfelt verschijnt er een vinkje. */
.dv-contact-poort { display: flex; justify-content: center; }
.dv-contact-poort:not(:empty) { margin: 14px 0; }

.dv-contact-melding {
  display: none;
  text-align: center;
  margin-top: 14px;
  font-size: 1rem;
}
.dv-contact-melding--goed { color: #0066c4; }
.dv-contact-melding--fout { color: #e9174b; }

@media (max-width: 575px) {
  .dv-contact-kader { padding: 22px 16px 26px; }
}