/* ------------------------------------------------------------------
   Totaal Parket Delft - maatwerk-CSS naast het YOOtheme-thema.
   Dit bestand laadt YOOtheme automatisch na theme.css.
   Kopie van templates/yootheme/css/custom.css op web50.
   ------------------------------------------------------------------ */

/* Vorm van de uitklappen in de hoofdnavigatie. Kan niet in element-CSS:
   het uitklap-element is de OUDER van de builder-layout en element-CSS
   kan niet omhoog reiken. De selector raakt alleen uitklappen met een
   builder-layout (die krijgen uk-padding-remove-*), dus niet de gewone. */
.uk-navbar-dropdown.uk-padding-remove-vertical {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(73, 51, 44, .22);
}

/* Tikdoelen in de mobiele header. Gemeten op een iPhone-viewport waren de twee
   icoontjes 28 bij 26 pixels en was het hamburgermenu maar 20 pixels breed. Apple
   houdt 44 bij 44 aan als ondergrens voor een vinger, en daar zat alles ruim onder:
   je tikt ernaast en er lijkt niets te gebeuren. Het logo ernaast is 119 bij 100 en
   werkt daarom wel.

   Alleen het klikvlak groeit; de icoontjes zelf blijven even groot. */
.tm-header-mobile .uk-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.tm-header-mobile .uk-navbar-toggle {
  min-width: 44px;
}

/* Hier stond een tijdelijke `pointer-events: none` op module 117, de foto van
   Jeroen in de navbar. Die foto is 179 bij 200 pixels en lag als doorzichtige PNG
   precies over de Facebook-knop heen (overlap 36 bij 36, de hele knop), waardoor
   die knop geen klik meer kreeg.

   Sinds 28-08-2026 staat de Facebook-knop in de toolbar rechtsboven, naast het
   telefoonnummer. Er ligt dus niets meer onder de foto en de regel is weg. De foto
   is daarmee ook weer klikbaar, voor als hij ooit een echte link krijgt.
   Instelling: Customizer > Header > Social Icons op "Toolbar Right End",
   opgeslagen als config.header.social. Zie notities/12. */

/* Terug-naar-boven-knop (plugin r3d_scroll2top). Jeroen meldde op 15-09-2026 dat hij op
   de iPhone pas bij de tweede tik reageert. De plugin zet een hover- en focusstijl met
   een schudanimatie, en iOS besteedt de eerste tik aan het tonen van die hover.
   Daarom op aanraakschermen geen hover-effect, en een tikvlak van 44 bij 44 pixels
   (de plugin maakt hem op mobiel 38). `html` ervoor, omdat de stijl van de plugin
   later in de pagina staat en anders zou winnen. */
html #r3d-scroll2top {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
  html #r3d-scroll2top:hover,
  html #r3d-scroll2top:focus {
    background: rgba(167, 196, 219, 0.7);
  }

  html #r3d-scroll2top:hover .r3d-scroll2top-icon,
  html #r3d-scroll2top:focus .r3d-scroll2top-icon {
    animation: none;
  }
}

@media (max-width: 600px) {
  html #r3d-scroll2top {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
}