/* ------------------------------------------------------------------
   custom.css  |  Van der Haar Hoveniers, testsite
   ------------------------------------------------------------------
   YOOtheme laadt dit bestand automatisch, direct ná de gecompileerde
   theme.<id>.css. Geen compileerstap nodig, dus wijzigingen hier zijn
   meteen live. Officiele plek van YOOtheme zelf, overleeft updates.

   Gebruik dit voor opmaak die je vanaf de server wilt kunnen bijstellen.
   Alles wat in de Customizer thuishoort (kleuren, fonts, knoppen) blijft
   in de Custom LESS daar.
   ------------------------------------------------------------------ */

/* ---- Herotekst leesbaar op een achtergrondfoto ----------------------
   Witte tekst valt weg zodra er licht gras of lucht achter zit.
   Twee lagen: een zachte laag vlak om de letter vult de directe omgeving,
   een wijdere laag licht de tekst van de foto af. Bewust geen korte,
   sterke laag: die leest als een zwarte contour om de letters.

   Selectors raken alleen echte hero's: .uk-light staat op secties met
   lichte tekst, .uk-background-cover alleen op secties met een
   achtergrondfoto.
   ------------------------------------------------------------------ */
.uk-light .uk-background-cover h1,
.uk-light .uk-background-cover .uk-panel p {
  text-shadow: 0 1px 3px rgba(18, 14, 38, .35), 0 2px 12px rgba(18, 14, 38, .55);
}

.uk-light .uk-background-cover .uk-panel p {
  text-shadow: 0 1px 3px rgba(18, 14, 38, .32), 0 1px 9px rgba(18, 14, 38, .48);
}

/* de knoppen hebben hun eigen achtergrond en hoeven geen schaduw */
.uk-light .uk-background-cover .uk-button {
  text-shadow: none;
}

/* ---- Linkregel onderaan de kaart --------------------------------------
   Kaarten in een grid zijn even hoog (uk-grid-match), maar de teksten
   verschillen in lengte. Daardoor staat "Bekijk project" per kaart op een
   andere hoogte. De kaart tot flexkolom maken en de laatste wrapper naar
   beneden duwen lijnt ze uit.

   Het !important is nodig omdat UIkit's .uk-margin-top zijn eigen marge
   met !important zet. De padding vervangt die weggevallen 20px.

   :has() zorgt dat alleen kaarten mét een linkregel worden geraakt. Zonder
   die voorwaarde zou bij kaarten zonder link de lopende tekst omlaag worden
   geduwd.
   --------------------------------------------------------------------- */
.uk-grid-match .el-item > a:has(.el-link) {
  display: flex;
  flex-direction: column;
}

/* Tussen de kaartlink en de linkregel zit uk-card-body. Die staat standaard
   op flow-root en moet mee als flexkolom, anders heeft margin-top:auto
   verderop geen ruimte om tegenaan te duwen. */
.uk-grid-match .el-item > a:has(.el-link) > .uk-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.uk-grid-match .el-item > a:has(.el-link) > .uk-card-body > .uk-margin-top:last-child {
  margin-top: auto !important;
  padding-top: 12px;
}

/* ---- Vloeiend naar een anker ----------------------------------------
   Vervangt het vloeiende scrollen van UIkit's uk-scroll. Dat halen we van
   ankerlinks af, omdat de berekening ervan niet klopt zodra er een sticky
   sectie boven staat: hij stopt precies de hero-hoogte te vroeg.
   De native ankersprong rekent wel goed; deze regel maakt hem vloeiend.
   In de Custom LESS staat al scroll-behavior: auto !important onder
   prefers-reduced-motion, dus wie geen beweging wil springt gewoon.
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------------
   Mega-menu uitklap (Tuinaanleg, Tuinonderhoud)
   ---------------------------------------------------------------------------
   De vorm van de uitklap zelf kan niet vanuit de layout gezet worden: dat
   element is de OUDER van de builder-content, en element-CSS kan niet omhoog
   reiken. Daarom staat het hier.

   De selector raakt alleen uitklappen met een builder-layout: YOOtheme geeft
   die uk-padding-remove-vertical mee zodra padding_remove_vertical aanstaat
   (navbar.php regel 168-170). Een gewone uitklap houdt zijn eigen vorm.

   overflow:hidden is nodig omdat het lavendelvlak tot de randen loopt; zonder
   dat steken de rechte hoeken van dat vlak door de afronding heen. */
.uk-navbar-dropdown.uk-padding-remove-vertical {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(34, 48, 26, .18);
}

/* ---------------------------------------------------------------------------
   Zoeken in de hoofdnavigatie
   ---------------------------------------------------------------------------
   Een loepje in de menubalk dat een paneel opent met suggesties. De HTML komt
   uit de module "Zoeken (navbar)"; het script vdh-zoek maakt hem werkend en
   haalt het hidden-attribuut weg. Zo staat er nooit een loepje dat niets doet.

   De verborgen paginalijst in diezelfde module is de bron van de suggesties.
   Die wordt door YOOtheme gevuld met een dynamische bron, dus een nieuwe
   pagina komt er vanzelf bij. */
.vdh-zoek { position: relative; display: flex; align-items: center; }

/* Het loepje is een witte schijf met een paarse loep, zo hoog als de knop
   ernaast. Een kaal icoontje viel niet op: het had exact dezelfde kleur als de
   menulinks. Een lichte of groene variant werkte ook niet, want de navbar is
   transparant over de hero en die loopt van donkerpaars naar lichtblauw; alleen
   een gevulde schijf is op beide helften goed zichtbaar. */
.vdh-zoek-knop {
  background: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  color: #5f5391;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(34, 48, 26, .18);
  display: flex;
  align-items: center;
  transition: background .18s, color .18s;
}
.vdh-zoek-knop svg { width: 19px; height: 19px; stroke-width: 2.4; }
@media (hover: hover) {
  .vdh-zoek-knop:hover { background: #c1d66b; color: #22301a; }
}
.vdh-zoek-knop[aria-expanded="true"] { background: #c1d66b; color: #22301a; }

/* Het paneel hangt onder de balk, uitgelijnd op de rechterkant van het loepje.
   z-index boven de hero-gradient, anders valt het er deels achter. */
.vdh-zoek-paneel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(34, 48, 26, .18);
  overflow: hidden;
  z-index: 1000;
}

.vdh-zoek-veld { position: relative; border-bottom: 1px solid #eceaf3; }
.vdh-zoek-veld input {
  width: 100%;
  border: none;
  outline: none;
  padding: 15px 44px 15px 46px;
  font-family: inherit;
  font-size: 15px;
  color: #22301a;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.vdh-zoek-veld input::-webkit-search-cancel-button { display: none; }
.vdh-zoek-loep {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; stroke: #5c6657; fill: none; pointer-events: none;
}
.vdh-zoek-sluit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; background: #f3f0fa; border-radius: 50%;
  color: #5c6657; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.vdh-zoek-sluit svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
@media (hover: hover) { .vdh-zoek-sluit:hover { background: #8275b1; color: #fff; } }

/* De suggesties. max-height zodat een lange lijst scrollt in plaats van
   buiten het scherm te vallen. */
.vdh-zoek-lijst {
  list-style: none; margin: 0; padding: 6px 0;
  max-height: 46vh; overflow-y: auto;
}
.vdh-zoek-lijst li { margin: 0; }
.vdh-zoek-lijst a {
  display: block; padding: 10px 20px; text-decoration: none;
  transition: background .14s;
}
.vdh-zoek-lijst .vdh-zoek-titel {
  display: block; font-size: 15px; font-weight: 600; color: #22301a; line-height: 1.3;
}
.vdh-zoek-lijst .vdh-zoek-bij {
  display: block; font-size: 12.5px; color: #5c6657; line-height: 1.45; margin-top: 2px;
}
.vdh-zoek-lijst mark { background: #e4efd0; color: inherit; padding: 0 1px; border-radius: 2px; }
.vdh-zoek-lijst a:hover,
.vdh-zoek-lijst li.vdh-actief a { background: #f3f0fa; }
.vdh-zoek-lijst li.vdh-actief .vdh-zoek-titel { color: #5f5391; }

.vdh-zoek-melding { margin: 0; padding: 16px 20px; font-size: 14px; color: #5c6657; }
.vdh-zoek-melding:empty { display: none; }

/* De paginalijst die het script uitleest, staat nooit in beeld. */
.vdh-zoek-bron { display: none !important; }

/* Op een telefoon staat het loepje in de mobiele balk; het paneel vult dan
   bijna de hele breedte en wordt vanaf de rechterrand uitgelijnd. */
@media (max-width: 639px) {
  .vdh-zoek-paneel { width: calc(100vw - 24px); right: -8px; }
}

/* De navbar zat al vol: logo, zeven menu-items en de knop vulden hem tot op
   41px na. Het loepje erbij kost 35px plus een gap van 30px, en dan werd de
   knop "Vraag advies aan" naar een tweede regel geduwd.
   Met een kleinere tussenruimte past alles weer op één regel, maar de marge is
   krap: er komt geen achtste menu-item meer bij zonder dit opnieuw te bekijken.
   Zie het klantdossier voor de alternatieven. */
.uk-navbar-left { column-gap: 10px; }

/* Het zoekveld in het mobiele uitklapmenu. Het script kloont de UI daarheen,
   boven de menulijst, en haalt de knop weg: het veld staat er meteen open.
   Niet in de mobiele balk gezet, want het logo pakt daar 287 van de 345
   beschikbare pixels en dan valt de hamburger naar een tweede regel. */
.vdh-zoek-mobiel { display: block; margin: 0 0 22px; }
.vdh-zoek-mobiel .vdh-zoek-paneel {
  position: static;
  width: auto;
  max-width: none;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
}
.vdh-zoek-mobiel .vdh-zoek-veld { border-bottom-color: rgba(255, 255, 255, .14); }
.vdh-zoek-mobiel .vdh-zoek-veld input { color: #fff; padding: 13px 16px 13px 42px; }
.vdh-zoek-mobiel .vdh-zoek-veld input::placeholder { color: rgba(255, 255, 255, .6); }
.vdh-zoek-mobiel .vdh-zoek-loep { left: 15px; stroke: rgba(255, 255, 255, .7); }
.vdh-zoek-mobiel .vdh-zoek-lijst { max-height: 34vh; padding: 4px 0; }
.vdh-zoek-mobiel .vdh-zoek-lijst a { padding: 9px 16px; }
.vdh-zoek-mobiel .vdh-zoek-lijst .vdh-zoek-titel { color: #fff; font-size: 14.5px; }
.vdh-zoek-mobiel .vdh-zoek-lijst mark { background: #c1d66b; color: #22301a; }
.vdh-zoek-mobiel .vdh-zoek-lijst a:hover { background: rgba(255, 255, 255, .08); }
.vdh-zoek-mobiel .vdh-zoek-melding {
  padding: 12px 16px; font-size: 13px; color: rgba(255, 255, 255, .6);
}