/* Aanvullingen op theme.css, zodat alles zonder JavaScript werkt. */

.tm-page { min-height: 100vh; display: flex; flex-direction: column; }
.tm-page > main { flex: 1 0 auto; }

/* Header (desktop): logo links, menu rechts, blijft bovenaan staan */
.tm-header, .tm-header-mobile { position: sticky; top: 0; z-index: 980; }
.tm-header .uk-logo img { width: 193px; height: 75px; }
.tm-header .uk-navbar-nav { gap: 26px; }
.tm-header .uk-navbar-left { flex-shrink: 0; margin-right: 30px; }
.tm-header .uk-navbar-nav > li > a { white-space: nowrap; }

/* Header (mobiel): menuknop links, logo in het midden, menu als venster van boven */
.tm-header-mobile .uk-navbar { position: relative; }
.tm-header-mobile .uk-logo img { width: 154px; height: 60px; }
.tm-header-mobile .uk-navbar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tm-mobile-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 80px; color: #2d2e33; }
.tm-mobile-menu > summary::-webkit-details-marker { display: none; }
.tm-mobile-menu .tm-dialog {
  position: fixed; inset: 0; z-index: 1010; background: #fff; overflow-y: auto;
  padding: 90px 20px 40px; text-align: center;
}
.tm-mobile-menu .tm-close { position: fixed; top: 25px; left: 20px; z-index: 1011; }
.tm-mobile-menu .tm-dialog ul { list-style: none; margin: 0; padding: 0; }
.tm-mobile-menu .tm-dialog a {
  display: block; padding: 12px 0; font-family: Montserrat; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: #212122;
}
.tm-mobile-menu .tm-dialog .uk-active a { color: #2d2e33; text-decoration: underline; }

.tm-header { display: none; }
@media (min-width: 1400px) {
  .tm-header { display: block; }
  .tm-header-mobile { display: none; }
}

/* Fotobanden bovenaan de dienstpagina's */
.tm-hero { background-repeat: no-repeat; background-position: center center; }
.tm-hero-natural { background-size: 1560px auto; }
.tm-hero-cover { background-size: cover; }

/* Footer: links naast elkaar, gecentreerd */
.tm-footer p { margin: 0; padding: 20px 0; }
.tm-footer a { color: #fff; }
.tm-footer a:hover { color: rgba(255,255,255,.7); }