/* ==========================================================================
   TKM Core — homehero.css
   Eigen naamruimte (tkm-hh) zodat geen enkele regel uit de gedeelde
   .tkm-hero-stack meepraat; die stijl draait op ruim veertig andere templates.
   ========================================================================== */

.tkm-hh {
  --tkm-fp-t1: rgba(14, 20, 16, .88);
  --tkm-fp-t2: rgba(14, 20, 16, .66);
  --tkm-fp-t3: rgba(14, 20, 16, .42);
  --tkm-fp-b1: #080C09;
  --tkm-fp-b2: #141D17;
  --tkm-fp-b3: #22302A;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 4.5vw, 60px) 0 clamp(40px, 4vw, 52px);
  color: #F6F3EE;
}

.tkm-hh__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, var(--tkm-fp-b1) 0%, var(--tkm-fp-b2) 52%, var(--tkm-fp-b3) 100%);
}
/* De donkere laag blijft op volle sterkte over de hele tekstkolom staan en
   zakt pas weg onder de telefoon. Zonder die vlakke aanloop wordt witte tekst
   onleesbaar zodra iemand een lichte foto kiest. */
.tkm-hh.has-eigenfoto .tkm-hh__bg {
  background-image:
    linear-gradient(104deg,
      var(--tkm-fp-t1) 0%,
      var(--tkm-fp-t1) 34%,
      var(--tkm-fp-t2) 62%,
      var(--tkm-fp-t3) 100%),
    var(--tkm-fp-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.tkm-hh__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46rem 30rem at 88% -10%, rgba(232, 93, 26, .22), transparent 62%),
    radial-gradient(38rem 26rem at -6% 108%, rgba(47, 125, 59, .20), transparent 66%);
}
.tkm-hh__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .06));
  pointer-events: none;
}

.tkm-hh__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ── Linkerkolom ─────────────────────────────────────────────────────────── */

.tkm-hh__col { min-width: 0; }

/* De koptekst- en tekstregels dragen `.tkm-hh` als voorvoegsel. Zonder dat
   wint `body.tkm-body h1` uit brand.css op specificiteit en komt de titel op
   64 pixels uit, ook op een telefoon. */
.tkm-hh .tkm-hh__title {
  margin: 0 0 16px;
  font-family: var(--tkm-font-display, inherit);
  font-size: clamp(2.05rem, 2.6vw + 1.05rem, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  text-wrap: balance;
}
.tkm-hh .tkm-hh__title-accent {
  color: var(--tkm-color-primary, #E85D1A);
  display: block;
}

.tkm-hh .tkm-hh__sub {
  max-width: 40rem;
  margin: 0 0 26px;
  font-size: clamp(1rem, .35vw + .93rem, 1.16rem);
  line-height: 1.6;
  color: rgba(246, 243, 238, .84);
}

/* ── Zoekbalk ────────────────────────────────────────────────────────────── */

.tkm-hh__search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 40rem;
  padding: 7px 7px 7px 16px;
  border-radius: var(--tkm-radius-full, 999px);
  background: #FFFFFF;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .65);
  transition: box-shadow .2s ease;
}
.tkm-hh__search:focus-within {
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .7), 0 0 0 3px rgba(232, 93, 26, .35);
}
.tkm-hh__search-icon { flex: 0 0 auto; color: var(--tkm-color-muted, #565A54); }
.tkm-hh__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tkm-color-ink, #0E1410);
  font-size: 1rem;
}
.tkm-hh__search input[type="search"]::placeholder { color: var(--tkm-color-muted, #565A54); }
.tkm-hh__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.tkm-hh__search-btn {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--tkm-radius-full, 999px);
  background: var(--tkm-color-primary, #E85D1A);
  color: #FFFFFF;
  font-family: var(--tkm-font-display, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.tkm-hh__search-btn:hover,
.tkm-hh__search-btn:focus-visible {
  background: var(--tkm-color-primary-hover, #C94A10);
  transform: translateY(-1px);
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.tkm-hh__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.tkm-hh__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--tkm-radius-full, 999px);
  font-family: var(--tkm-font-display, inherit);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tkm-hh__btn svg { flex: 0 0 auto; }
.tkm-hh__btn--primary {
  background: var(--tkm-color-primary, #E85D1A);
  color: #FFFFFF;
  box-shadow: 0 14px 32px -14px rgba(232, 93, 26, .9);
}
.tkm-hh__btn--primary:hover,
.tkm-hh__btn--primary:focus-visible {
  background: var(--tkm-color-primary-hover, #C94A10);
  transform: translateY(-2px);
}
.tkm-hh__btn--ghost {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #FFFFFF;
}
.tkm-hh__btn--ghost:hover,
.tkm-hh__btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-2px);
}

/* ── Bewijsrij ───────────────────────────────────────────────────────────── */

.tkm-hh__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.tkm-hh__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tkm-hh__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.tkm-hh__stat strong {
  font-family: var(--tkm-font-display, inherit);
  font-size: 1.32rem;
  font-weight: 600;
  color: #FFFFFF;
}
.tkm-hh__stat span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, .76);
}

/* ── Rechterkolom: de telefoon in het beeld ──────────────────────────────── */

.tkm-hh__phone-col {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.tkm-hh__phone-col::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -4% 10% -4%;
  border-radius: 40% 40% 46% 46%;
  background: radial-gradient(closest-side, rgba(232, 93, 26, .34), transparent 72%);
  filter: blur(6px);
}

.tkm-hh .tkm-hero__phone-slider { max-width: 340px; }
.tkm-hh .tkm-hero__phone-dots button { background: rgba(255, 255, 255, .26); }
.tkm-hh .tkm-hero__phone-dots button.is-active { background: rgba(255, 255, 255, .22); }
.tkm-hh .tkm-hero__phone-arrow {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
  color: #FFFFFF;
  box-shadow: none;
}
.tkm-hh .tkm-hero__phone-arrow:hover,
.tkm-hh .tkm-hero__phone-arrow:focus-visible {
  background: var(--tkm-color-primary, #E85D1A);
  border-color: var(--tkm-color-primary, #E85D1A);
  color: #FFFFFF;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .tkm-hh__layout { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: 32px; }
}

@media (max-width: 880px) {
  .tkm-hh { padding: 40px 0 44px; }
  .tkm-hh__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tkm-hh__col { text-align: center; }
  .tkm-hh .tkm-hh__sub,
  .tkm-hh .tkm-hh__search { margin-left: auto; margin-right: auto; }
  .tkm-hh__cta,
  .tkm-hh__proof { justify-content: center; }
  .tkm-hh__stats { justify-content: center; }
  .tkm-hh__phone-col { order: 2; }
}

@media (max-width: 560px) {
  .tkm-hh__search {
    flex-wrap: wrap;
    padding: 10px;
    border-radius: var(--tkm-radius-lg, 16px);
  }
  .tkm-hh__search-icon { margin-left: 6px; }
  .tkm-hh__search input[type="search"] { flex: 1 1 60%; height: 42px; }
  .tkm-hh__search-btn { flex: 1 1 100%; height: 44px; }
  .tkm-hh__btn { flex: 1 1 100%; justify-content: center; }
  .tkm-hh__proof { gap: 16px; }
  .tkm-hh__stat strong { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tkm-hh__btn,
  .tkm-hh__search-btn { transition: none; }
  .tkm-hh__btn:hover,
  .tkm-hh__search-btn:hover { transform: none; }
}

/* Salient zet `border-radius: 2px !important` op elke `button[type=submit]`
   (0,1,1). Onze regel hierboven staat op de class alleen (0,1,0) en verloor
   daarvan, waardoor de zoekknop op de homepage vierkante hoeken kreeg terwijl
   de balk eromheen rond is. `button[type="submit"].class` is (0,2,1) en wint,
   ook als het thema na ons laadt. */
button[type="submit"].tkm-hh__search-btn {
  border-radius: var(--tkm-radius-full, 999px) !important;
}
@media (max-width: 560px) {
  button[type="submit"].tkm-hh__search-btn {
    border-radius: var(--tkm-radius-full, 999px) !important;
  }
}