/* ============================================================
   Bconnect Contactpagina — widget-styling
   Bron: upgrade-pages.css (ct-blok) + au-hero-schil. Tokens uit tokens.css.
   ============================================================ */

.ct-hero > .container,
.ct-channels-sec > .container,
.ct-main > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

/* hero-entrance */
/* ------------------------------------------------------------------
   LET OP — hier stond `opacity: 0` en dat mag NIET terug (14-08-2026).

   `hh-in` is de entrance van de HERO, en de hero staat above the fold. Chrome
   negeert een element met opacity 0 voor Largest Contentful Paint, dus zolang
   de reveal niet gelopen had, bestond het grootste element voor de meting niet.
   Op /leadgeneratie/ is dat `p.lg-hero-sub` (oppervlak 81.468 op 375px, tegen
   63.640 voor de cookiebanner en 63.158 voor het herobeeld): gemeten LCP 17,9 /
   18,0 / 18,0 s, oftewel 0 van 25 punten, terwijl FCP 3,8 s was.

   De reveal wordt door JS aangezet (`is-in`), en die JS staat in de footer
   achter 101 render-blokkerende stylesheets. Onder Slow 4G met 4x CPU landt dat
   laat, en de `transition-delay: var(--i) * 80ms` komt er nog bovenop — de
   hero-visual heeft `--i:5`, dus 400 ms extra.

   De opacity is eruit, de translateY blijft: de tekst is meteen leesbaar (LCP
   valt samen met FCP) en de beweging blijft staan. Bewust NIET opgelost met een
   begin-opacity van 0,01: dan meet Chrome een LCP op een moment dat de tekst
   voor een bezoeker nog onleesbaar is, en dan verbeter je het cijfer zonder de
   pagina te verbeteren.

   Reveals BUITEN de hero (au-rise, is-inview, is-settled) zijn een
   ontwerpkeuze en blijven zoals ze zijn.
   ------------------------------------------------------------------ */
.hh-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .hh-in.is-in { opacity: 1; transform: none; }
  .au-hero.is-settled .hh-in { transition: none; opacity: 1; transform: none; }
}

.au-hero { display: flex; flex-direction: column; justify-content: center; position: relative; }
.au-hero > .container { position: relative; z-index: 1; }
.au-hero .hero-bg { position: absolute; inset: 0; background: #FFFFFF; pointer-events: none; }
.au-hero .lead { font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--c-text-muted); }
.au-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.au-textlink:hover { color: var(--c-grad-magenta); gap: 11px; }

.ct-hero { min-height: auto; padding: 78px 0 60px; }
.ct-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ct-hero-inner .lg-eyebrow { justify-content: center; margin-bottom: 16px; }
.ct-hero-inner h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; color: var(--c-navy); margin: 0 auto 18px; max-width: 16em; }
.ct-hero-inner .lead { margin: 0 auto; max-width: 40em; }
.ct-hero-actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }

/* ---- snelle kanalen ---- */
/* position+z-index nodig: de kaarten worden met margin-top:-36px in de hero
   getrokken; de hero (.au-hero, position:relative) met witte .hero-bg schildert
   anders ná deze niet-positioned sectie en dekt de bovenkant van de kaarten af. */
.ct-channels-sec { position: relative; z-index: 2; padding: 0 0 var(--space-9); background: #fff; }
.ct-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: -36px; }
.ct-channel {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-feature);
  padding: 26px 24px; box-shadow: var(--shadow-card); text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.ct-channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.ct-channel-ic {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26); margin-bottom: 4px;
}
.ct-channel-ic svg { width: 24px; height: 24px; }
.ct-channel-h { font-family: var(--font-head); font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-navy); margin: 0; }
.ct-channel-p { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--c-text-muted); margin: 0; }
.ct-channel-action {
  margin-top: auto; padding-top: 10px;
  font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); color: var(--c-navy);
  display: inline-flex; align-items: center; gap: 7px; word-break: break-word;
}
.ct-channel-arrow { transition: transform .18s var(--ease); }
.ct-channel:hover .ct-channel-action { color: var(--c-grad-magenta); }
.ct-channel:hover .ct-channel-arrow { transform: translateX(3px); }
@media (max-width: 860px) { .ct-channels { grid-template-columns: 1fr; margin-top: -24px; max-width: 460px; margin-left: auto; margin-right: auto; } }

/* ---- formulier + contactgegevens ---- */
.ct-main { padding: var(--space-9) 0; background: var(--c-bg-soft); }
.ct-main-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 28px; align-items: start; }
.ct-form-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-feature);
  padding: 34px 32px; box-shadow: var(--shadow-card);
}
.ct-form-h { font-family: var(--font-head); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); color: var(--c-navy); margin: 0 0 6px; }
.ct-form-sub { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); margin: 0 0 24px; }
.ct-form-sub span { color: var(--c-grad-magenta); }
.ct-form { display: grid; gap: 16px; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 7px; }
.ct-label { font-family: var(--font-head); font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--c-navy); }
.ct-req { color: var(--c-grad-magenta); }
.ct-input {
  width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 15px; color: var(--c-navy);
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); box-sizing: border-box;
}
.ct-input::placeholder { color: var(--c-text-soft); }
.ct-input:focus { border-color: var(--c-grad-blue); box-shadow: 0 0 0 3px rgba(35,1,251,.12); }
/* Zichtbare focusring (05-08-2026): de gloed alleen is ~1,3:1 op wit. */
.ct-input:focus-visible { outline: 2px solid var(--c-grad-blue); outline-offset: 2px; }
.ct-textarea { resize: vertical; min-height: 112px; line-height: 1.55; }
.ct-select-wrap { position: relative; display: block; }
.ct-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px; }
.ct-select:invalid { color: var(--c-text-soft); }
.ct-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--c-text-soft); pointer-events: none; }
.ct-select-arrow svg { width: 17px; height: 17px; display: block; }
.ct-submit { margin-top: 4px; justify-self: start; }
.ct-form-note { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--c-text-soft); margin: 2px 0 0; }

/* verzonden-bevestiging */
.ct-sent { text-align: center; padding: 20px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ct-sent[hidden] { display: none; }
.ct-sent-ic {
  width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 12px 26px rgba(168,2,142,.3); margin-bottom: 4px;
}
.ct-sent-ic svg { width: 30px; height: 30px; }
.ct-sent-h { font-family: var(--font-head); font-size: var(--fs-h3); color: var(--c-navy); margin: 0; }
.ct-sent-p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0; max-width: 40ch; }
.ct-sent .btn { margin-top: 8px; }

/* ---- contactgegevens (aside) ---- */
.ct-details {
  display: flex; flex-direction: column; gap: 22px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-feature);
  padding: 30px 28px; box-shadow: var(--shadow-soft);
}
.ct-detail { display: flex; gap: 15px; }
.ct-detail-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--c-navy); background: var(--c-bg-soft); border: 1px solid var(--c-border-soft);
}
.ct-detail-ic svg { width: 22px; height: 22px; }
.ct-detail-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-detail-h { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); color: var(--c-navy); }
.ct-detail-p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--c-text-muted); margin: 0; }
.ct-detail-p a { color: var(--c-text-muted); text-decoration: none; }
.ct-detail-p a:hover { color: var(--c-grad-magenta); }
.ct-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ct-hours li { display: flex; justify-content: space-between; gap: 14px; font-family: var(--font-body); font-size: 14px; color: var(--c-text-muted); }
.ct-hours li span:last-child { font-weight: var(--fw-semibold); color: var(--c-navy); white-space: nowrap; }
.ct-details-mark { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--c-border-soft); display: flex; align-items: center; gap: 12px; color: var(--c-navy); }
.ct-details-mark p { font-family: var(--font-head); font-size: 13.5px; font-weight: var(--fw-medium); color: var(--c-text-muted); margin: 0; }
@media (max-width: 900px) {
  .ct-main-grid { grid-template-columns: 1fr; }
  .ct-form-card, .ct-details { padding: 28px 22px; }
}
@media (max-width: 480px) { .ct-form-row { grid-template-columns: 1fr; } }

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
.elementor-widget-bconnect_contact { margin: 0 !important; }
.elementor-widget-bconnect_contact .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.elementor-widget-bconnect_contact .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_contact .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_contact .ct-channel-ic,
.elementor-widget-bconnect_contact .ct-sent-ic {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}

/* ============================================================
   Hero rechtgezet en compacter (11-08-2026).

   1) CENTRERING. Hierboven staat al `margin: 0 auto` op de kop en de
      lead, maar contact.css laadt als 10e stylesheet en au-hero.css als
      42e. `.au-hero h1 { margin: 14px 0 16px }` (0,1,1) en
      `.au-hero .lead { margin: 0 0 26px }` (0,2,0) hebben dezelfde
      specificiteit als de regels hierboven en winnen dus puur op
      volgorde: de zijmarges werden 0. Met een max-width van 630px in een
      houder van 760px stond de kop daardoor 65px links van het midden en
      de lead zelfs 100px, terwijl de eyebrow (inline-block) en de
      knoppenrij (flex, justify-content:center) wél centreerden. Vandaar
      dat het scheef oogde zonder dat het duidelijk links stond.

      Opgelost met specificiteit in plaats van volgorde, zodat het klopt
      ongeacht wanneer de stylesheets binnenkomen. Reviews heeft exact
      dezelfde regels en stond wél goed — puur omdat reviews.css als 61e
      ná au-hero.css laadt. Dat is geen verdienste, dat is toeval.

   2) HOOGTE. `.au-hero:not(.lg-hero):not(.sol-hero):not(.hl2-hero)` in
      lg-hero.css zet min-height: 704px (0,4,0) en `.au-hero` zet
      padding: 64px 0. De inhoud is maar 336px hoog, dus er stond ruim
      180px leegte boven én onder.

      De selector hieronder telt vier classes plus body (0,4,1) en wint
      daarmee van die 0,4,0 zonder !important. De `.hero` moet er dus
      echt bij staan: met alleen body + .ct-hero + .au-hero is het 0,3,1
      en verliest hij, want vier classes verslaan er drie ongeacht het
      aantal elementen. Ook de staging-slug erbij, net als bij de
      kanaalkaarten in de mobiele laag.
   ============================================================ */
body.bc-page-contact .hero.ct-hero.au-hero,
body.bc-page-contact-aanvragen .hero.ct-hero.au-hero { min-height: 0; padding: 60px 0 64px; }
.ct-hero .ct-hero-inner h1 { margin-inline: auto; }
.ct-hero .ct-hero-inner .lead { margin-inline: auto; }

/* ============================================================
   Kanaalkaarten: titel naast het icoon (11-08-2026).

   Hetzelfde recept dat sinds 04-08-2026 in de mobiele laag staat voor
   deze kaarten, maar dat gold daar alleen onder 767px. Nu op elke
   breedte. De kaart wordt een raster: tegel links op rij 1, titel
   ernaast op rij 1, al het andere over de volle breedte.

   align-content:start is niet optioneel. De drie kaarten staan in een
   raster en worden op gelijke hoogte gerekt; zonder die regel verdeelt
   de kaart de extra hoogte over zijn rijen en zakken icoon en titel uit
   elkaar, zodat de drie titels niet meer op één lijn staan.
   ============================================================ */
.ct-channel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; align-content: start; column-gap: 14px; row-gap: 10px; }
.ct-channel .ct-channel-ic { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 0; }
.ct-channel .ct-channel-h { grid-column: 2; grid-row: 1; align-self: center; }
.ct-channel > *:not(.ct-channel-ic):not(.ct-channel-h) { grid-column: 1 / -1; }