/*
 * Transiënt Groep – v7.9 – Fase 1 van het verbeterplan.
 * Alleen opmaak: tekstkleur en typografie, ruimte, knoppen, header en hero.
 * Geen tekst of structuur wordt gewijzigd.
 *
 * Wat waar geldt:
 *  - Hero (kleur van de waas en de intro-animatie): op alle pagina's met de gedeelde hero.
 *  - Al het overige: alleen op de startpagina (body.tg-phase1). De andere pagina's volgen
 *    zodra de startpagina is goedgekeurd; haal dan de beperking "body.tg-phase1" weg.
 */

@keyframes tgHeroIn   { from { opacity:0; translate:0 28px; } to { opacity:1; translate:0 0; } }
@keyframes tgHeroInSm { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }

/* ---------- Hero (alle pagina's) ---------- */
.hero--montfort .hero__waas--montfort { opacity:.78 !important; }

.hero--montfort .home-hero-center > * {
  animation:tgHeroIn .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero--montfort .home-hero-center > *:nth-child(1) { animation-delay:.10s; }
.hero--montfort .home-hero-center > *:nth-child(2) { animation-delay:.22s; }
.hero--montfort .home-hero-center > *:nth-child(3) { animation-delay:.34s; }
.hero--montfort .home-hero-center > *:nth-child(4) { animation-delay:.46s; }
.hero--montfort .home-hero-center > *:nth-child(5) { animation-delay:.58s; }
.hero--montfort .home-hero-center > *:nth-child(n+6) { animation-delay:.70s; }

/* ---------- Ruimte en breedte (startpagina) ---------- */
body.tg-phase1 .wrap {
  max-width:1200px !important;
  width:calc(100% - 48px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.tg-phase1 .licht,
body.tg-phase1 .licht-2,
body.tg-phase1 .donker,
body.tg-phase1 .oproep {
  padding-top:128px !important;
  padding-bottom:128px !important;
}

/* ---------- Typografie (startpagina) ---------- */
body.tg-phase1 .lead {
  font-weight:300 !important;
  line-height:1.18 !important;
  letter-spacing:-.005em;
  font-size:clamp(34px,3vw,52px) !important;
}
body.tg-phase1 :is(.donker,.oproep) .lead { font-size:clamp(38px,3.5vw,58px) !important; }

body.tg-phase1 :is(.licht,.licht-2) :is(p,li):not(.label) {
  color:#4a5568 !important;
  font-weight:400 !important;
  line-height:1.85 !important;
}
body.tg-phase1 .tekst p,
body.tg-phase1 .sub { max-width:64ch; }

/* ---------- Knoppen (startpagina): rustige outline met gouden rand ---------- */
body.tg-phase1 .knop {
  background:transparent !important;
  border:1px solid rgba(201,162,75,.85) !important;
  box-shadow:none !important;
  color:#16233F !important;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:16px 30px;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
body.tg-phase1 :is(.donker,.oproep,.hero) .knop { color:#fff !important; }
body.tg-phase1 .knop:hover,
body.tg-phase1 .knop:focus-visible {
  background:#16233F !important;
  border-color:#16233F !important;
  color:#fff !important;
  transform:translateY(-2px);
}
body.tg-phase1 :is(.donker,.oproep,.hero) .knop:hover,
body.tg-phase1 :is(.donker,.oproep,.hero) .knop:focus-visible {
  background:rgba(255,255,255,.10) !important;
  border-color:#C9A24B !important;
}
body.tg-phase1 .knop svg { transition:transform .3s ease; }
body.tg-phase1 .knop:hover svg { transform:translateX(4px); }

/* ---------- Menupil (startpagina): één vaste tint met blur ---------- */
body.tg-phase1 .tg-pill {
  background:rgba(22,35,63,.86) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 30px rgba(22,35,63,.18) !important;
  transition:background-color .3s ease;
}
body.tg-phase1 .tg-pill-link {
  font-size:12px !important;
  letter-spacing:.14em !important;
  font-weight:500 !important;
}
body.tg-phase1 .tg-pill-link:hover {
  text-decoration:underline;
  text-decoration-color:#C9A24B;
  text-decoration-thickness:1px;
  text-underline-offset:8px;
}

/* ---------- Smalle kaarten (v8.0.1): lange woorden blijven binnen de kaart ---------- */
body.tg-phase1 :is(.kolom,.sector,.stap,.rij,[class*="-card"],[class*="kaart"]) :is(h2,h3,h4,p,li) {
  overflow-wrap:break-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}
/* Kaarttekst in smalle kolommen krijgt een compactere regelhoogte dan lopende tekst. */
body.tg-phase1 :is(.licht,.licht-2) :is(.kolom,.sector,.stap,.tg-bl-five-card,.tg-bl-sector-card,.tg-bl-timeline-card,.tg-bl-readmore-card) p:not(.label) {
  line-height:1.65 !important;
}
/* Vijf of zes kaarten naast elkaar (Bliksembeveiliging): iets kleiner lettertype. */
body.tg-phase1 :is(.tg-bl-five-card,.tg-bl-timeline-card) h3 { font-size:clamp(17px,1.25vw,21px) !important; }
body.tg-phase1 :is(.tg-bl-five-card,.tg-bl-timeline-card) p  { font-size:clamp(15px,1.02vw,16.5px) !important; }

/* ---------- Tablet en mobiel ---------- */
@media (max-width:1024px) {
  body.tg-phase1 .licht, body.tg-phase1 .licht-2, body.tg-phase1 .donker, body.tg-phase1 .oproep { padding-top:88px !important; padding-bottom:88px !important; }
}
@media (max-width:767px) {
  .hero--montfort .home-hero-center > * { animation-name:tgHeroInSm; }
  body.tg-phase1 .licht, body.tg-phase1 .licht-2, body.tg-phase1 .donker, body.tg-phase1 .oproep { padding-top:60px !important; padding-bottom:60px !important; }
  body.tg-phase1 .wrap { width:calc(100% - 36px) !important; }
  body.tg-phase1 .knop { padding:15px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero--montfort .home-hero-center > * { animation:none !important; }
  body.tg-phase1 .knop, body.tg-phase1 .knop svg, body.tg-phase1 .tg-pill { transition:none; }
  body.tg-phase1 .knop:hover, body.tg-phase1 .knop:hover svg { transform:none; }
}

/* v8.0.4 – mobiel menu: geen blur op de menupil zelf, anders blijft het schermvullende menu in de pil
   steken (zie hoofdthema 1.6.21). De vaste tint van de pil blijft behouden. */
@media (max-width:900px){
  body.tg-phase1 .tg-pill{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,35,63,.96) !important;} /* v8.0.5: dekkender, zodat tekst niet door de balk schemert */
}

/* v8.0.5 – menupictogram op telefoon en tablet. Na scrollen kleurde het hoofdthema de drie streepjes
   donkerblauw, terwijl de menupil zelf donkerblauw blijft: het pictogram was dan vrijwel onzichtbaar. */
body.tg-phase1 .tg-pill .burger span{background:#fff !important;}

/* v8.0.6 – routeblok op Contact. De algemene tekstkleur voor lichte secties maakte het label, het adres en
   de knopteksten in dit donkere blok donker op donker en daardoor vrijwel onleesbaar. Hier weer licht. */
body.tg-phase1 section .google-map-shell .google-map-shell__content > p.google-map-shell__eyebrow{color:#C9A24B !important;}
body.tg-phase1 section .google-map-shell .google-map-shell__content > p:not(.google-map-shell__eyebrow){color:rgba(255,255,255,.84) !important;}
body.tg-phase1 section .google-map-shell .google-map-shell__actions .knop,
body.tg-phase1 section .google-map-shell .google-map-shell__actions .knop:hover,
body.tg-phase1 section .google-map-shell .google-map-shell__actions .knop:focus-visible{color:#fff !important;}