/* ==========================================================================
   DHB FAQ met de compacte adviseurkaart

   GEGENEREERD door werkmap/ontwerpen/naar-plugin/bouw_faq.py uit
   werkmap/ontwerpen/faq-adviseurkaart/ontwerp.html (DHB_FAQ_Adviseurkaart_Compact.html).
   Letterlijk het stylesheet van het ontwerp, zonder de lettertypen (die laadt
   de plugin zelf) en zonder de regels voor de demopagina. Niet met de hand wijzigen.
   ========================================================================== */

/* DHB FAQ (nf) */
@property --nf-a{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit
   (.elementor-kit-7 h2) wint daarvan en kleurt ze blauw. De wrapper
   staat hier dubbel, dus deze regel weegt zwaarder dan de kit; de eigen
   kleuren hieronder hebben de wrapper gekregen en winnen weer hiervan. */
.nf.nf h1,
.nf.nf h2,
.nf.nf h3,
.nf.nf h4,
.nf.nf h5,
.nf.nf h6 {
	color: inherit;
}


.nf{
  padding:var(--nf-pad,clamp(64px,8vh,104px)) 24px;
  background:
    radial-gradient(40% 44% at 4% 6%,color-mix(in srgb,var(--nf-accent,#FF4C00) 12%,transparent),transparent 62%),
    linear-gradient(180deg,var(--nf-bg1,#F7F6F4) 0%,var(--nf-bg2,#F0EEEB) 100%);
  color:#141313;
  font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
}
.nf *{margin:0;padding:0;box-sizing:border-box;}
.nf a{text-decoration:none;color:inherit;}
.nf-inner{
  max-width:var(--nf-max,1350px);margin:0 auto;
  display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);
  gap:clamp(30px,4.5vw,72px);
  align-items:start;
}
@media (max-width:940px){.nf-inner{grid-template-columns:minmax(0,1fr);}}

/* -- Linkerkolom -- */
.nf-side{position:sticky;top:28px;}
@media (max-width:940px){.nf-side{position:static;}}
.nf.nf .nf-side h2{
  font-family:'DHB Elms','Satoshi',ui-sans-serif,system-ui,sans-serif;
  font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.01em;
  color:#141313;
}
.nf.nf .nf-side h2 em{font-style:normal;color:var(--nf-accent-dark,#C93C00);}
.nf-side > p{margin-top:14px;font-size:15px;line-height:1.7;color:rgba(20,19,19,.62);}

.nf-cta,.nf-cta:hover,.nf-cta:focus,.nf-cta:visited{
  margin-top:16px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:7px 7px 7px 22px;border-radius:999px;border:0;
  font-size:14.5px;font-weight:700;line-height:1;color:#fff!important;
  background:linear-gradient(135deg,#E8440A 0%,var(--nf-accent,#FF4C00) 55%,#FF6A2A 100%);
  box-shadow:0 10px 26px rgba(255,76,0,.28),inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.nf-cta > span:first-child{position:relative;z-index:2;}
.nf-cta::before{
  content:"";position:absolute;left:50%;top:50%;
  width:40px;height:40px;border-radius:50%;background:#141313;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);z-index:1;
}
.nf-cta:hover::before{transform:translate(-50%,-50%) scale(16);}
.nf-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.4);}
.nf-cta .circ{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:rgba(255,255,255,.95);color:#141313;
  position:relative;z-index:2;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .35s ease;
}
.nf-cta .circ svg{width:15px;height:15px;}
.nf-cta:hover .circ{transform:rotate(45deg);background:var(--nf-accent,#FF4C00);}

/* -- Accordeon -- */
.nf-list{display:flex;flex-direction:column;gap:10px;}
.nf-item{
  position:relative;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(20,19,19,.08);
  box-shadow:0 10px 30px rgba(20,19,19,.06);
  transition:background-color .45s ease,border-color .45s ease,box-shadow .4s ease,transform .3s ease;
}
.nf-item:not(.is-open):hover{
  transform:translateX(4px);
  box-shadow:0 18px 44px rgba(20,19,19,.1);
  border-color:color-mix(in srgb,var(--nf-accent,#FF4C00) 45%,transparent);
}
/* open: donkere merkkaart met lopende lime beam */
.nf-item.is-open{
  background:
    radial-gradient(50% 60% at 92% 6%,color-mix(in srgb,var(--nf-accent,#FF4C00) 18%,transparent),transparent 62%),
    linear-gradient(160deg,#242424 0%,#141313 58%,#0F0E0E 100%);
  border-color:transparent;
  box-shadow:0 30px 68px rgba(20,19,19,.28);
}
.nf-item.is-open::before{
  content:"";position:absolute;inset:-1px;border-radius:21px;padding:1.5px;
  background:conic-gradient(from var(--nf-a),transparent 0turn,transparent .7turn,rgba(255,76,0,.9) .82turn,#FFB08A .88turn,rgba(255,76,0,.9) .94turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:nf-beam 5.5s linear infinite;
}
@keyframes nf-beam{to{--nf-a:360deg;}}

/* vraagbalk, alle statussen vastgezet tegen thema-stijlen */
.nf-q,.nf-q:hover,.nf-q:focus,.nf-q:active{
  position:relative;z-index:1;
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 20px;border:none;background:none!important;cursor:pointer;
  font-family:inherit;text-align:left;color:#141313!important;
  box-shadow:none;
}
.nf-q span{font-size:15.5px;font-weight:800;line-height:1.35;transition:color .35s ease;}
.nf-item:not(.is-open) .nf-q:hover span{color:var(--nf-accent-dark,#C93C00);}
.nf-item.is-open .nf-q span{color:#fff;}
.nf-ic{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(20,19,19,.06);color:#141313;
  transition:background-color .35s ease,color .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
}
.nf-ic svg{width:15px;height:15px;}
.nf-item:not(.is-open) .nf-q:hover .nf-ic{background:color-mix(in srgb,var(--nf-accent,#FF4C00) 20%,transparent);}
.nf-item.is-open .nf-ic{
  background:var(--nf-accent,#FF4C00);color:#141313;transform:rotate(135deg);
  box-shadow:0 8px 22px rgba(255,76,0,.4);
}
.nf-a{
  position:relative;z-index:1;
  overflow:hidden;height:0;
  transition:height .45s cubic-bezier(.22,.61,.36,1);
}
.nf-a-in{padding:0 20px 20px;}
/* kernantwoord als lime highlight */
.nf-key{
  display:flex;align-items:center;gap:11px;
  padding:12px 15px;border-radius:14px;
  background:color-mix(in srgb,var(--nf-accent,#FF4C00) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--nf-accent,#FF4C00) 28%,transparent);
  margin-bottom:13px;
}
.nf-key svg{width:16px;height:16px;color:var(--nf-accent,#FF4C00);flex:none;}
.nf-key b{
  font-size:14.5px;font-weight:900;color:#FF8A55;line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.nf-a-in p{
  font-size:14px;line-height:1.75;color:rgba(255,255,255,.68);
  max-width:64ch;
}
.nf-a-in p + p{margin-top:10px;}
/* inhoud fadet gestaffeld in */
.nf-key,.nf-a-in p{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,.61,.36,1);}
.nf-item.is-open .nf-key{opacity:1;transform:none;transition-delay:.1s;}
.nf-item.is-open .nf-a-in p{opacity:1;transform:none;transition-delay:.18s;}
.nf-item.is-open .nf-a-in p + p{transition-delay:.26s;}

/* reveal */
.nf-item{opacity:0;transform:translateY(18px);}
.nf-item.is-in{opacity:1;transform:none;}
.nf-side{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);}
.nf-side.is-in{opacity:1;transform:none;}

@media (max-width:600px){
  .nf-q{padding:16px 15px;gap:12px;}
  .nf-q span{font-size:14.5px;}
  .nf-ic{width:32px;height:32px;}
  .nf-a-in{padding:0 15px 16px;}
  .nf-key{padding:10px 12px;}
  .nf-key b{font-size:13px;}
  .nf-a-in p{font-size:13.5px;}
}

@media (prefers-reduced-motion:reduce){
  .nf-item.is-open::before{animation:none;}
  .nf-item,.nf-side,.nf-key,.nf-a-in p{opacity:1;transform:none;transition:none;}
  .nf-a{transition:none;}
}


/* =====================================================================
   ADVISEURKAART, compact
   Casey met live status, een zin, de hoofdknop en WhatsApp. Verder niets.
   ===================================================================== */
.nf-adv{
  --o:var(--nf-accent,#FF4C00);
  position:relative;margin-top:24px;max-width:380px;padding:18px;border-radius:22px;color:#fff;overflow:hidden;
  background:radial-gradient(70% 80% at 100% 0%,color-mix(in srgb,var(--o) 18%,transparent),transparent 65%),linear-gradient(160deg,#222 0%,#141313 65%);
  box-shadow:0 24px 50px -30px rgba(20,19,19,.55);
}
.nf-adv-top{display:flex;align-items:center;gap:12px;}
.nf-adv-ava{position:relative;flex:none;width:46px;height:46px;}
.nf-adv-ava img{width:46px!important;height:46px!important;max-width:none!important;border-radius:50%;object-fit:cover;object-position:50% 20%;display:block;}
.nf-adv-ava i{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#31D07B;border:2.5px solid #161515;}
.nf-adv.dicht .nf-adv-ava i{background:#9a9a9a;}
.nf-adv-top b{display:block;font-family:'DHB Elms','Satoshi',sans-serif;font-weight:800;font-size:16px;line-height:1.2;}
.nf-adv-naam{min-width:0;}
.nf-adv-naam b,.nf-adv-naam small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nf-adv-top small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.6);}
.nf-adv p{margin-top:12px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);}
.nf-adv-acties{display:flex;gap:8px;margin-top:14px;}
.nf-adv .nf-cta{margin-top:0;flex:1;}
.nf-adv-wa,.nf-adv-wa:hover,.nf-adv-wa:visited{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#25D366;
  box-shadow:0 10px 22px -12px rgba(37,211,102,.9);transition:transform .3s cubic-bezier(.22,.61,.36,1),background-color .25s ease;}
.nf-adv-wa:hover{background:#1EBE5A;transform:translateY(-2px);}
.nf-adv-wa svg{width:22px;height:22px;fill:#fff;}
.nf-adv-score,.nf-adv-score:hover,.nf-adv-score:visited{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:#fff!important;}
.nf-adv-score .sterren{position:relative;display:block;line-height:0;}
.nf-adv-score .sterren>span{display:flex;gap:1px;}
.nf-adv-score .sterren svg{width:13px;height:13px;flex:none;}
.nf-adv-score .leeg svg{fill:rgba(255,255,255,.18);}
.nf-adv-score .vol{position:absolute;inset:0 auto 0 0;overflow:hidden;}
.nf-adv-score .vol svg{fill:#FFB400;}
.nf-adv-score .tx{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap;}
.nf-adv-score .tx b{font-family:'DHB Elms','Satoshi',sans-serif;font-weight:800;font-size:13px;color:#fff;}
.nf-adv-score .g{width:12px;height:12px;flex:none;}
.nf-adv-score:hover .tx{color:rgba(255,255,255,.85);}
@media (max-width:940px){.nf-adv{max-width:420px;}}
@media (max-width:440px){.nf-adv-rol{display:none;}}