/*!
 * Hennie Modern Theme Overlay
 * Versie: 1.0.0
 * Doel: Subtiele modernisering bovenop het bestaande TenWeb thema
 *       in dezelfde stijl als het Master Dashboard en de e-mails.
 *
 * Kleurenpalet (gelijk aan dashboard / mails):
 *   --hm-gold:       #b8941f
 *   --hm-gold-600:   #9a7c19
 *   --hm-gold-700:   #7d6315
 *   --hm-gold-light: #faf8f0
 *   --hm-bg:         #f9fafb
 *   --hm-surface:    #ffffff
 *   --hm-border:     #e5e7eb
 *   --hm-text:       #111827
 *   --hm-text-muted: #6b7280
 *   --hm-radius-sm:  10px
 *   --hm-radius:     14px
 *   --hm-radius-lg:  18px
 */

:root {
  --hm-gold: #b8941f;
  --hm-gold-600: #9a7c19;
  --hm-gold-700: #7d6315;
  --hm-gold-light: #faf8f0;
  --hm-bg: #f9fafb;
  --hm-surface: #ffffff;
  --hm-border: #e5e7eb;
  --hm-text: #111827;
  --hm-text-muted: #6b7280;
  --hm-radius-sm: 10px;
  --hm-radius: 14px;
  --hm-radius-lg: 18px;
  --hm-shadow-sm: 0 1px 3px rgba(17, 24, 39, .06);
  --hm-shadow: 0 4px 12px rgba(17, 24, 39, .08);
  --hm-shadow-lg: 0 12px 32px rgba(17, 24, 39, .12);
  --hm-easing: cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   1. GLOBAL TYPO & SMOOTHING
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Onmiskenbare gouden accentstrip helemaal bovenaan elke pagina.
   Maakt direct duidelijk dat de nieuwe stijl live is en geeft de site
   een vleugje subtiele branding consistent met dashboard / e-mails. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--hm-gold) 0%,
    var(--hm-gold-600) 50%,
    var(--hm-gold) 100%
  );
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(184, 148, 31, .35);
}

/* Selection in goud */
::selection {
  background: var(--hm-gold);
  color: #fff;
}

/* Verbeterde focus-staten voor accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--hm-gold) !important;
  outline-offset: 2px !important;
  border-radius: var(--hm-radius-sm);
}

/* ============================================================
   2. MODERNE BUTTONS (Elementor + WP defaults)
   ============================================================ */
.hm-btn,
.elementor-button.elementor-button-link.elementor-size-md,
.elementor-button.elementor-button-link.elementor-size-lg,
input[type="submit"].wp-block-button__link,
.wp-block-button__link {
  border-radius: var(--hm-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .25s var(--hm-easing),
              box-shadow .25s var(--hm-easing),
              background .25s var(--hm-easing) !important;
  will-change: transform;
}

.hm-btn:hover,
.elementor-button.elementor-button-link:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(184, 148, 31, .25) !important;
}

.hm-btn:active,
.elementor-button.elementor-button-link:active,
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(184, 148, 31, .2) !important;
}

/* Custom hennie modern button variant */
.hm-btn--gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--hm-gold) 0%, var(--hm-gold-600) 100%);
  color: #fff;
  border: none;
  border-radius: var(--hm-radius-sm);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(184, 148, 31, .25);
  transition: all .25s var(--hm-easing);
}
.hm-btn--gold:hover {
  background: linear-gradient(135deg, var(--hm-gold-600) 0%, var(--hm-gold-700) 100%);
  box-shadow: 0 8px 24px rgba(184, 148, 31, .35);
  color: #fff;
  transform: translateY(-2px);
}

.hm-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: transparent;
  color: var(--hm-gold-700);
  border: 2px solid var(--hm-gold);
  border-radius: var(--hm-radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: all .25s var(--hm-easing);
}
.hm-btn--ghost:hover {
  background: var(--hm-gold);
  color: #fff;
}

/* ============================================================
   3. AFBEELDINGEN — modern rounded + subtiele schaduw
   ============================================================ */
.hm-modernize img,
.elementor-widget-image img,
article img {
  transition: transform .4s var(--hm-easing), box-shadow .4s var(--hm-easing);
}

/* ============================================================
   4. KAARTEN / SECTIES — meer ruimte, zachte schaduw
   ============================================================ */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper {
  border-radius: var(--hm-radius);
  transition: transform .3s var(--hm-easing), box-shadow .3s var(--hm-easing);
}
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper,
.elementor-widget-image-box:hover .elementor-image-box-wrapper {
  transform: translateY(-3px);
}

/* ============================================================
   5. LINKS — onderlijn-animatie in goud
   ============================================================ */
.entry-content a:not(.elementor-button):not(.wp-block-button__link),
.hm-link {
  position: relative;
  color: var(--hm-gold-700);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s var(--hm-easing), color .2s ease;
}
.entry-content a:not(.elementor-button):not(.wp-block-button__link):hover,
.hm-link:hover {
  background-size: 100% 1.5px;
  color: var(--hm-gold);
}

/* ============================================================
   6. FORMULIEREN — moderne inputs
   ============================================================ */
input[type="text"]:not(.elementor-button):not(.wp-block-button__link),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="password"],
textarea,
select {
  border-radius: var(--hm-radius-sm) !important;
  border: 1px solid var(--hm-border) !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  background: var(--hm-surface);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--hm-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 148, 31, .15) !important;
  outline: none !important;
}

/* ============================================================
   7. SCROLL-FADE ANIMATIES (toegepast via JS data-attribuut)
   ============================================================ */
[data-hm-fade] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--hm-easing), transform .7s var(--hm-easing);
  will-change: opacity, transform;
  /* CSS-fallback: als IntersectionObserver om welke reden dan ook NIET
     triggert (JS-conflict, zware blocking script, etc.), zorgt deze
     keyframe ervoor dat de content na 2s alsnog zichtbaar wordt. Dit
     voorkomt dat een hele sectie 'verdwijnt' bij JS-failure. */
  animation: hm-fade-failsafe 0s 2s forwards;
}
[data-hm-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes hm-fade-failsafe {
  to { opacity: 1; transform: translateY(0); }
}

/* Vertraagde varianten voor staggered effect */
[data-hm-fade="2"] { transition-delay: .08s; }
[data-hm-fade="3"] { transition-delay: .16s; }
[data-hm-fade="4"] { transition-delay: .24s; }

/* Reduceer animaties voor users die dat verkiezen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-hm-fade] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   8. STICKY "BOEK NU" CTA (mobile = full width pill, desktop = discrete bottom-right)
   ============================================================ */
.hm-mobile-cta {
  position: fixed;
  z-index: 9998;
  display: none;
  background: linear-gradient(135deg, var(--hm-gold) 0%, var(--hm-gold-600) 100%);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(184, 148, 31, .35),
              0 4px 10px rgba(0, 0, 0, .15);
  letter-spacing: .02em;
  animation: hm-cta-in .5s var(--hm-easing);
  white-space: nowrap;
  /* Desktop standaard: bottom-right pill */
  bottom: 24px;
  right: 24px;
}
.hm-mobile-cta:hover,
.hm-mobile-cta:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--hm-gold-600) 0%, var(--hm-gold-700) 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(184, 148, 31, .45),
              0 6px 14px rgba(0, 0, 0, .18);
}
.hm-mobile-cta::before {
  content: "✦";
  margin-right: 6px;
  opacity: .9;
}

@keyframes hm-cta-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toon de sticky CTA op alle schermen zodra de gebruiker is gaan scrollen */
body.hm-show-cta .hm-mobile-cta {
  display: inline-flex;
  align-items: center;
}

/* Op mobile: volledige pill onderaan voor maximale tap-target */
@media (max-width: 768px) {
  .hm-mobile-cta {
    left: 14px;
    right: 14px;
    bottom: 14px;
    font-size: 16px;
    padding: 14px 18px;
    border-radius: 999px;
  }
  body.hm-show-cta .hm-mobile-cta {
    display: block;
  }
  body.hm-show-cta { padding-bottom: 80px; }
}

/* ============================================================
   9. BACK-TO-TOP KNOP
   ============================================================ */
.hm-back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--hm-surface);
  border: 1px solid var(--hm-border);
  border-radius: 50%;
  box-shadow: var(--hm-shadow);
  cursor: pointer;
  z-index: 9997;
  color: var(--hm-gold-700);
  transition: all .25s var(--hm-easing);
  opacity: 0;
}
.hm-back-top.is-visible {
  display: flex;
  opacity: 1;
}
.hm-back-top:hover {
  background: var(--hm-gold);
  color: #fff;
  border-color: var(--hm-gold);
  transform: translateY(-2px);
  box-shadow: var(--hm-shadow-lg);
}
.hm-back-top svg {
  width: 18px;
  height: 18px;
}

/* Wanneer de sticky CTA pill zichtbaar is op desktop, verschuift back-to-top
   naar links zodat ze elkaar niet overlappen. Op mobile schuift hij omhoog. */
body.hm-show-cta .hm-back-top {
  right: 220px;
}
@media (max-width: 768px) {
  .hm-back-top { right: 16px; bottom: 16px; }
  body.hm-show-cta .hm-back-top {
    right: 16px;
    bottom: 80px;
  }
}

/* ============================================================
   10. HEADER POLISH (subtiel)
   ============================================================ */
.site-header,
header#masthead {
  transition: box-shadow .25s ease, background .25s ease;
}
body.hm-scrolled .site-header,
body.hm-scrolled header#masthead {
  box-shadow: 0 4px 16px rgba(17, 24, 39, .08);
}

/* ============================================================
   11. WOOCOMMERCE / KNOPPEN consistent met dashboard
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: var(--hm-radius-sm) !important;
  font-weight: 600 !important;
  background: var(--hm-gold) !important;
  color: #fff !important;
  transition: all .25s var(--hm-easing) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--hm-gold-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(184, 148, 31, .3);
}

/* ============================================================
   12. PRINT - schone output
   ============================================================ */
@media print {
  .hm-mobile-cta,
  .hm-back-top {
    display: none !important;
  }
}