/* ── Qnext — gedeelde stijlen voor de subpagina's ─────────────────────────
   Basis (kleuren, reset, typografie), topbar/navigatie, footer en de
   artikelopmaak van de insights-/blogpagina's. Pagina-specifieke stijlen
   blijven in de pagina zelf staan en mogen deze regels overschrijven
   (het <style>-blok van de pagina komt ná deze stylesheet). */

:root { --navy:#0f1f42; --blue:#2f4acd; --lightblue:#69a3f7; --orange:#ffab24; --gray:#f4f6fb; --border:#e8ecf4; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; color:var(--navy); background:#fff; line-height:1.65; }
a { color:var(--blue); }

/* ── Topbar / navigatie ── */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); z-index:10; flex-wrap:wrap; gap:.5rem; }
.topbar img { height:50px; width:auto; }
.topbar nav { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.topbar nav a { text-decoration:none; color:var(--navy); font-weight:600; font-size:.9rem; }
.topbar nav a.cta { background:var(--blue); color:#fff; padding:.5rem 1.1rem; border-radius:50px; }
.topbar nav a.portal { border:1.5px solid var(--blue); color:var(--blue); padding:.45rem 1.05rem; border-radius:50px; }
/* Uitklapmenu onder "Over Qnext" (Ons team, Over mij). Opent op hover én
   :focus-within (toetsenbord/eerste tik op touch). Het paneel sluit direct
   aan op de link (geen marge): een visuele kier laat de hover wegvallen
   halverwege de muisbeweging. Het pijltje staat als los element náást de
   link, want de taalwissel vervangt de innerHTML van [data-i18n]. */
.nav-drop { position:relative; display:flex; align-items:center; gap:.25rem; }
.nav-drop-caret { font-size:.55rem; color:var(--navy); user-select:none; }
.nav-drop-menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(15,31,66,.14); padding:.45rem; flex-direction:column; min-width:160px; z-index:120; }
.nav-drop-menu a { padding:.55rem .85rem; border-radius:8px; white-space:nowrap; }
.nav-drop-menu a:hover { background:var(--gray); }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display:flex; }
/* Pil-schakelaar i.p.v. platte "NL | EN"-tekst: duidelijker als
   interactief element, in lijn met de andere pil-knoppen op de site. */
.lang { display:flex; align-items:center; background:var(--gray); border-radius:50px; padding:.2rem; }
.lang button { background:none; border:none; cursor:pointer; color:#889; font-weight:700; font-family:'Inter',sans-serif; font-size:.82rem; padding:.35rem .85rem; border-radius:50px; transition:background .2s, color .2s; }
.lang button.active { background:var(--blue); color:#fff; }
.lang button:hover:not(.active) { color:var(--navy); }
/* Zelfde hamburgergedrag als de homepage: icoon animeert naar een kruis,
   het paneel overlapt de pagina (i.p.v. de inhoud omlaag te duwen), met
   schaduw en dividers tussen de links. top:83px = topbar-hoogte (2×1rem
   padding + 50px logo + 1px rand). */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.4rem; flex-direction:column; justify-content:center; gap:5px; z-index:200; }
.nav-toggle span { display:block; width:24px; height:2.5px; background:var(--navy); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
@media (max-width:768px){
  .nav-toggle { display:flex; }
  .topbar nav {
    display:none;
    position:fixed;
    top:83px; left:0; right:0;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem 2rem 1.5rem;
    box-shadow:0 8px 32px rgba(0,0,0,.12);
    z-index:99;
    max-height:calc(100vh - 83px);
    overflow-y:auto;
  }
  .topbar nav.open { display:flex; }
  .topbar nav a { width:100%; display:block; padding:.85rem .25rem; font-size:1.05rem; border-bottom:1px solid #f0f0f0; }
  .topbar nav a.cta { border-bottom:none; text-align:center; margin-top:.5rem; padding:.85rem 1.5rem; }
  /* Volle breedte + gelijke marge boven/onder, zoals de rest van de rijen
     (i.p.v. een losse, links-hangende pil); de twee knoppen verdelen die
     breedte gelijk. */
  .topbar nav .lang { border-bottom:1px solid #f0f0f0; margin:.5rem 0; }
  .topbar nav .lang button { flex:1; text-align:center; font-size:.95rem; padding:.65rem 1rem; }
  /* Zonder deze regel blijft "Klantportal" links uitgelijnd binnen zijn
     eigen pil-vorm, terwijl Contact (.cta, hierboven) wél gecentreerd is. */
  .topbar nav a.portal { text-align:center; }
  /* In het hamburgermenu staat het submenu permanent uitgeklapt: de
     subitems (Ons team, Over mij) zijn dan direct zichtbaar, ingesprongen
     onder "Over Qnext". Het pijltje is daar overbodig. */
  .nav-drop { width:100%; flex-direction:column; align-items:stretch; gap:0; }
  .nav-drop-caret { display:none; }
  .nav-drop-menu { display:flex; position:static; border:none; border-radius:0; box-shadow:none; padding:0; min-width:0; }
  .nav-drop-menu a { padding-left:1.4rem; border-radius:0; white-space:normal; }
  .nav-drop-menu a:hover { background:none; }
}

/* ── Footer ── */
footer { border-top:1px solid var(--border); padding:2rem; text-align:center; color:#889; font-size:.85rem; }
footer a { color:var(--blue); text-decoration:none; }

/* ── Artikelpagina's (insights + blog) ── */
.crumbs { max-width:720px; margin:0 auto; padding:1.5rem 1.5rem 0; font-size:.82rem; color:#889; }
.crumbs a { text-decoration:none; }
.article { max-width:720px; margin:0 auto; padding:1rem 1.5rem 3.5rem; }
.article h1 { font-family:'Nunito',sans-serif; font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; margin:1rem 0 .5rem; }
.article .meta { color:#889; font-size:.85rem; margin-bottom:2rem; }
.article .lead { font-size:1.15rem; color:var(--navy); margin-bottom:1.4rem; }
.article-body h2 { font-family:'Nunito',sans-serif; font-weight:800; font-size:1.35rem; margin:2rem 0 .6rem; color:var(--navy); }
.article-body h3 { font-family:'Nunito',sans-serif; font-weight:800; font-size:1.12rem; margin:1.5rem 0 .5rem; color:var(--navy); }
.article-body p { margin-bottom:1.1rem; color:#334; font-size:1.05rem; }
.article-body blockquote { margin:1.5rem 0; padding:1rem 1.25rem; background:var(--gray); border-left:4px solid var(--orange); border-radius:0 10px 10px 0; color:var(--navy); font-style:italic; }
.article-body blockquote p { margin:0; }
.article-body ul, .article-body ol { margin:0 0 1.1rem 1.3rem; color:#334; font-size:1.05rem; }
.article-body li { margin-bottom:.4rem; }
.article-cta { margin-top:2.5rem; padding:1.6rem; background:var(--navy); color:#fff; border-radius:16px; text-align:center; }
.article-cta p { margin-bottom:.4rem; }
.article-cta .btn { display:inline-block; background:var(--orange); color:var(--navy); padding:.8rem 1.8rem; border-radius:50px; text-decoration:none; font-weight:800; font-family:'Nunito',sans-serif; margin-top:.6rem; }
.related { max-width:720px; margin:0 auto 3rem; padding:0 1.5rem; font-size:.95rem; }
.related a { font-weight:600; text-decoration:none; }