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

/* ---- Hoofdmenu: vol wit, hover en actieve pagina in huisstijlgroen (28-09-2026, Ton) ----
   Het thema zette de menulinks op 78% wit en alleen de actieve pagina vol wit. Over een lichte
   hero (homepage: lucht) was het verschil met hover nauwelijks te zien. Nu vol wit, en groen
   (#c1d66b) bij hover en op de pagina waar je bent; anders verdwijnt dat "hier ben je"-teken.
   Alleen de bovenste laag van de desktopbalk: de mega-menu-uitklap en het mobiele menu blijven
   zoals ze zijn. Hover in @media (hover: hover), zodat je op touch niet twee keer hoeft te tikken. */
.tm-header .uk-navbar-nav > li > a {
  color: #fff;
  /* subtiele schaduw: houdt wit en groen leesbaar boven een lichte hero (lucht op de homepage) */
  text-shadow: 0 1px 3px rgba(20, 27, 18, .45);
  transition: color .2s ease;
}
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-nav > li > a[aria-expanded="true"],
.tm-header .uk-navbar-nav > li > a:focus-visible {
  color: #c1d66b;
}
@media (hover: hover) {
  .tm-header .uk-navbar-nav > li:hover > a {
    color: #c1d66b;
  }
}

/* ---- Hoofdmenu groter en vetter, logo kleiner (28-09-2026, Ton) ----
   Menu van 14.5px/500 naar 16px/600 voor leesbaarheid over de hero. Het logo gaat van 305 naar
   250px breed zodat alles op één regel blijft: gemeten 35px ruimte over op 1280, 1366 en 1440px.
   Tussen 1100 en 1279px compacter (15px, gap 16px, logo 190px).
   Onder 1100px paste de balk al niet meer (vóór deze wijziging viel hij op 1200px en smaller in
   twee regels uiteen), dus tussen 960 en 1099px nu de mobiele balk met hamburgermenu. YOOtheme
   rendert beide headers al; dit wisselt alleen welke zichtbaar is. */
.tm-header .uk-navbar-nav > li > a {
  font-size: 16px;
  font-weight: 600;
}
.tm-header .uk-logo img {
  width: 250px;
  height: auto;
}
@media (max-width: 1279px) {
  .tm-header .uk-navbar-nav { column-gap: 16px; }
  .tm-header .uk-navbar-nav > li > a { font-size: 15px; }
  .tm-header .uk-logo img { width: 190px; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .tm-header { display: none !important; }
  .tm-header-mobile { display: block !important; }
}

/* ---- Hamburgermenu wit op de paarse mobiele balk (28-09-2026, Ton) ----
   Stond donker op paars en viel weg. Wit zoals de menulinks, groen bij hover of als het menu
   open staat. */
.tm-header-mobile .uk-navbar-toggle {
  color: #fff;
  transition: color .2s ease;
}
.tm-header-mobile .uk-navbar-toggle[aria-expanded="true"],
.tm-header-mobile .uk-navbar-toggle:focus-visible {
  color: #c1d66b;
}
@media (hover: hover) {
  .tm-header-mobile .uk-navbar-toggle:hover { color: #c1d66b; }
}
/* dikkere streepjes: de balkjes zijn 2px hoog; een omlijning van 1px in dezelfde kleur maakt ze 3px */
.tm-header-mobile .uk-navbar-toggle svg rect {
  stroke: currentColor;
  stroke-width: 1px;
}
/* builder-knop in het bewerkscherm aan de voorkant: de link "Back to Default Editor" wist bij opslaan de hele YOOtheme-layout (11-10-2026). Dit bestand laadt niet in het beheer, daar blijft de link staan */
.tm-link { display: none !important; }
/* Redactiebalk (module 117, positie top, alleen zichtbaar voor groep Redactie): knoppen voor tuintips (12-10-2026) */
.vdh-redactiebalk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: #f3f0f9; border: 1px solid rgba(130,117,177,.25); border-radius: 10px; }
.vdh-redactiebalk-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5f5391; margin-right: 4px; }

/* ---- Pagina's zonder hero: donkere menubalk (19-10-2026, Ton) ----
   De header staat sitebreed op transparant met een wit menu, gemaakt voor een hero-foto.
   Zonder hero werd het wit op wit: inloggen, wachtwoord of gebruikersnaam vergeten,
   zoekresultaten, het tuintipformulier, het bewerkscherm en de 404-pagina.
   Een hero is in de HTML altijd het tweede div-kind van <main> (het eerste is de
   systeemmeldingen-container) met daarin een .uk-background-cover. Ontbreekt dat, dan krijgt
   de balk een vaste kleur. Werkt dus ook voor een nieuwe builderpagina die zonder
   hero-foto begint. Let op: een hero met alleen een video wordt hier niet als hero gezien.
   Kleur en schaduw gelijk aan de vaste balk bij scrollen en aan de mobiele balk (gemeten:
   #5f5391), zodat het een vertrouwde balk is en geen nieuwe.
   Tweede selector: een hero als builder-module in positie top staat onder .tm-page in een
   div.builder (de inlogpagina /inloggen, module 118). Die telt ook als hero. */
.tm-page:not(:has(#tm-main > div:nth-of-type(2) > .uk-background-cover, > .builder > div > .uk-background-cover)) .tm-header .uk-navbar-container {
  background: #5f5391;
  box-shadow: 0 2px 16px rgba(70, 58, 120, .22);
}

/* ---- Redactiebalk zwevend onderaan (19-10-2026, Ton) ----
   Module 117 stond in positie top. Daar ving hij de ruimte voor de transparante header op
   (YOOtheme zet die bij de eerste sectie na de header), waardoor het menu wit op wit kwam
   en de hero omlaag schoof. Nu in positie bottom (na <main>) en met position: fixed als
   witte pil midden onderin beeld. Alleen zichtbaar voor de groep Redactie.
   De footer krijgt dan onderaan extra ruimte, zodat de pil de knop "naar boven" niet bedekt. */
.tm-bottom:has(.vdh-redactiebalk) {
  position: fixed; z-index: 1010; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 0; background: none;
}
.tm-bottom:has(.vdh-redactiebalk) > .uk-container { padding: 0; max-width: none; }
.tm-bottom .vdh-redactiebalk {
  background: #fff; border-radius: 999px; padding: 8px 10px 8px 20px;
  box-shadow: 0 8px 28px rgba(34, 48, 26, .22);
}
.tm-page:has(.tm-bottom .vdh-redactiebalk) > footer { padding-bottom: 76px; background: #141b12; }
@media (max-width: 639px) {
  .tm-bottom .vdh-redactiebalk { border-radius: 16px; justify-content: center; padding: 10px 12px; }
  .tm-bottom .vdh-redactiebalk-label { display: none; }
}

/* ---- Zoekterm gemarkeerd op de pagina (19-10-2026, Ton) ----
   Beide zoekfuncties (loepje in de menubalk en "Zoek in alle tips") geven de zoekterm mee
   als ?highlight=...; Joomla's plugin System - Highlight zet dan <mark> om elk voorkomen in
   de inhoud. Standaard is dat lichtgeel met de tekstkleur eromheen, en in een hero (witte
   tekst) is dat onleesbaar. Daarom huisstijlgroen met donkere tekst, zonder de tekstschaduw
   van de hero. */
.js-highlight mark {
  background: #c1d66b; color: #22301a; padding: 0 3px; border-radius: 3px; text-shadow: none;
}

/* ===== Formulieren (Convert Forms), ronde 02-11-2026 =====
   Contact (form 1), tuinwensenlijst (2), aanvraag tuinonderhoud plus (3). Het formulier staat in
   een .vdh-formkaart; Convert Forms zet .vdh-formulier op de wrapper (classsuffix in de params). */
.vdh-formkaart {
  background: #fff; border: 1px solid #e6e1f2; border-radius: 16px;
  padding: clamp(20px, 4vw, 40px); box-shadow: 0 18px 44px -28px rgba(34, 48, 26, .4);
}
/* Convert Forms houdt .cf-fields op flex-wrap (hogere specificiteit), dus halve breedte via flex */
.vdh-formulier .cf-control-group.vdh-half { width: 50%; flex: 0 0 50%; }
@media (max-width: 640px) { .vdh-formulier .cf-control-group.vdh-half { width: 100%; flex-basis: 100%; } }
.vdh-formulier .cf-label, .vdh-formulier legend.cf-label { font-weight: 600; color: #22301a; }
.vdh-formulier .cf-required-label { color: #5f5391; }
.vdh-formulier .cf-input:not([type=checkbox]):not([type=radio]) { width: 100%; box-sizing: border-box; }
.vdh-formulier .cf-input:focus { border-color: #8275b1 !important; box-shadow: 0 0 0 3px rgba(130, 117, 177, .22); outline: none; }
.vdh-formulier input[type=checkbox], .vdh-formulier input[type=radio] { accent-color: #5f5391; }
.vdh-formulier .cf-list .cf-label { font-weight: 400; }
.vdh-formulier textarea.cf-input { min-height: 120px; resize: vertical; }
.vdh-formulier .vdh-cf-kopveld { margin-top: 12px; padding-top: 24px; border-top: 1px solid #ece8f5; }
.vdh-formulier .vdh-cf-kopveld:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vdh-formulier .vdh-cf-kop { margin: 0; font-size: 1.35rem; color: #5f5391; }
.vdh-formulier .vdh-cf-uitleg { margin: 0; color: #4f5a48; background: #f6f4fb; border-radius: 12px; padding: 14px 18px; }
@media (min-width: 641px) { .vdh-formulier .cf-btn { width: auto; min-width: 260px; } }
.vdh-formulier [data-type=termsofservice] { font-size: 14px; }
.vdh-formulier [data-type=termsofservice] .cf-label { font-weight: 400; }
.vdh-formulier .cf-btn { font-weight: 600; box-shadow: 0 8px 20px -10px rgba(34, 48, 26, .5); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
@media (hover: hover) {
  .vdh-formulier .cf-btn:hover { background-color: #b2c85a !important; transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(34, 48, 26, .55); }
}
.vdh-formulier .cf-response:not(:empty) { background: #f3f7e4; border-radius: 12px; padding: 18px 22px; color: #22301a; }
.vdh-formulier .cf-response a { color: #5f5391; }