/* ============================================================================
   CoachDossier — Nav/Footer-systeem  ·  "Bloei"
   ----------------------------------------------------------------------------
   ÉÉN balk-romp (.cdbar) en ÉÉN footer-romp (.cdfoot) die drie contexten
   bedienen via één attribuut:  data-context="app | public | auth".

   Alles bouwt op tokens.css (single source of truth). Dit bestand voegt
   alleen twee afgeleide tokens toe (--bar-bg, --foot-bg) en de componentregels.
   Laad ná tokens.css.

   GEDEELDE BASIS (altijd gelijk, ongeacht context):
     · hoogte (60px desktop), merk-lockup, kleur (--brand-deep), randgrammar
     · hover/active/focus-grammar voor nav-links
     · account-zone (.cdbar-acct) — identiek in app én publiek
     · hamburger + drawer-gedrag op smal scherm
     · footer-DNA: juridische regel, kolomkop-eyebrow, linkkleur

   CONTEXT-LAAG (verschilt per data-context):
     · welke links, met of zonder icoon
     · zichtbaarheid + inhoud van de account-zone
     · dichtheid van de footer (data-tier)
   ========================================================================== */

:root {
  --bar-bg:  var(--brand-deep);   /* petrol-950 — diepste teal, bookend boven */
  --foot-bg: var(--brand-deep);   /* idem onder — balk en footer omlijsten de pagina identiek */
  --bar-h:   60px;
}

/* ====================================================================== */
/* DE BALK — gedeelde romp                                                 */
/* ====================================================================== */
.cdbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bar-bg); color: var(--on-brand);
  font-family: var(--font-sans);
}
.cdbar-in {
  max-width: 1180px; margin: 0 auto; height: var(--bar-h);
  display: flex; align-items: center; gap: .5rem; padding: 0 var(--space-5);
}

/* ── Merk-lockup (identiek in alle contexten) ───────────────────────── */
.cdbar-brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; margin-right: .9rem; flex-shrink: 0;
}
.cdbar-mark { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.cdbar-wm {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: var(--weight-bold);
  color: #fff; letter-spacing: -.02em; line-height: 1; white-space: nowrap;
}
.cdbar-wm span { color: var(--petrol-300); font-weight: var(--weight-normal); }

/* ── Collapse-zone: nav + account, klapt op mobiel in een drawer ─────── */
.cdbar-collapse { display: flex; align-items: center; gap: .25rem; flex: 1; height: 100%; }

/* ── Nav-links — ÉÉN hover/active/focus-grammar voor app én publiek ──── */
.cdbar-nav { display: flex; align-items: center; gap: 2px; height: 100%; }
.cdbar-nav a {
  display: flex; align-items: center; gap: .45rem; height: 100%;
  padding: 0 .8rem; color: var(--on-brand-muted); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  border-bottom: 2.5px solid transparent;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.cdbar-nav a svg { flex-shrink: 0; opacity: .8; width: 15px; height: 15px; }
.cdbar-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.cdbar-nav a.active { color: #fff; border-bottom-color: var(--petrol-300); }
.cdbar-nav a.active svg { opacity: 1; }
.cdbar-nav a:focus-visible {
  outline: none; color: #fff;
  box-shadow: inset 0 0 0 2px var(--petrol-300); border-radius: var(--radius-xs);
}
.cdbar-sep { width: 1px; height: 22px; background: var(--border-onbrand); margin: 0 .5rem; flex-shrink: 0; }

/* ── Account-zone — GEDEELD tussen app en publiek ───────────────────── */
/* Dezelfde component toont guest- óf member-staat. Dit lost de bug op dat
   publieke pagina's altijd "Inloggen / Aanmelden" tonen, ook bij ingelogd. */
.cdbar-acct { margin-left: auto; display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.cdbar-acct .nav-pill {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  padding: 2px 8px; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .05em;
}
.nav-pill.demo     { background: var(--accent);     color: #fff; }
.nav-pill.actief   { background: var(--success);    color: #fff; }
.nav-pill.test     { background: var(--action);     color: #fff; }
.nav-pill.inactief { background: var(--stone-500);   color: #fff; }
.nav-pill.verlopen { background: var(--danger);     color: #fff; }
.nav-pill.admin    { background: transparent; color: var(--petrol-300); border: 1px solid var(--petrol-300); }

.cdbar-acct .acct-email {
  font-size: var(--text-xs); color: var(--on-brand-muted);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdbar-acct .acct-link { font-size: .76rem; color: var(--on-brand-muted); text-decoration: none; }
.cdbar-acct .acct-link:hover { color: #fff; }
.cdbar-acct .acct-btn {
  font-size: .76rem; color: var(--on-brand-muted); text-decoration: none;
  padding: 4px 11px; border: 1px solid var(--border-onbrand); border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast); white-space: nowrap;
}
.cdbar-acct .acct-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
/* Publieke CTA — primaire knop blijft binnen dezelfde zone */
.cdbar-acct .acct-cta {
  font-size: .8rem; font-weight: var(--weight-semibold); color: #fff; text-decoration: none;
  background: var(--action); padding: 7px 15px; border-radius: var(--radius-sm);
  transition: background var(--dur-fast); white-space: nowrap;
}
.cdbar-acct .acct-cta:hover { background: var(--action-hover); }

/* ── Hamburger ──────────────────────────────────────────────────────── */
.cdbar-toggle {
  display: none; margin-left: auto; background: transparent; border: none;
  padding: .4rem; cursor: pointer; line-height: 0; color: #fff;
}
.cdbar-toggle:focus-visible { outline: 2px solid var(--petrol-300); border-radius: var(--radius-xs); }

/* ====================================================================== */
/* CONTEXT: AUTH — gecentreerd merk + terug-link, geen nav                 */
/* ====================================================================== */
.cdbar[data-context="auth"] .cdbar-in { justify-content: center; position: relative; }
.cdbar[data-context="auth"] .cdbar-brand { margin-right: 0; }
.cdbar-back {
  position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--text-sm); color: var(--on-brand-muted); text-decoration: none;
  transition: color var(--dur-fast);
}
.cdbar-back:hover { color: #fff; }
.cdbar-back svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .cdbar-back span { display: none; }   /* alleen pijl op heel smal */
}

/* ====================================================================== */
/* BANNER-SLOT — schuift direct onder de balk (testmodus / verlopen)       */
/* ====================================================================== */
.cdbar-banner {
  font-size: var(--text-sm); text-align: center; padding: .55rem var(--space-5);
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
}
.cdbar-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.cdbar-banner a { font-weight: var(--weight-semibold); text-decoration: underline; }
.cdbar-banner.test {
  background: var(--clay-700); color: #fff;
}
.cdbar-banner.test a { color: var(--clay-100); }
.cdbar-banner.verlopen {
  background: var(--accent-soft); border-bottom: 1px solid var(--accent); color: var(--clay-700);
}
.cdbar-banner.verlopen a { color: var(--clay-700); }

/* ====================================================================== */
/* DE FOOTER — gedeelde romp, drie dichtheden via data-tier               */
/* ====================================================================== */
.cdfoot {
  background: var(--foot-bg); color: var(--on-brand-muted);
  font-family: var(--font-sans);
}
.cdfoot-in { max-width: 1140px; margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-5); }

.cdfoot-mark { width: 26px; height: 26px; display: block; }

/* Kolomkop — gedeelde eyebrow-grammar */
.cdfoot-head {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .12em; color: var(--petrol-300); margin-bottom: .6rem;
}
.cdfoot a { color: var(--on-brand-muted); text-decoration: none; transition: color var(--dur-fast); }
.cdfoot a:hover { color: var(--on-brand); }

/* Juridische regel — IDENTIEK in alle drie de tiers (het gedeelde DNA) */
.cdfoot-legal {
  border-top: 1px solid var(--border-onbrand); margin-top: var(--space-6);
  padding-top: var(--space-4); font-size: var(--text-xs); line-height: 1.6; color: var(--on-brand-muted);
}
.cdfoot-legal em { font-style: italic; color: var(--on-brand); }

/* ── Tier: full (app) — 4-koloms sitemap ─────────────────────────────── */
.cdfoot[data-tier="full"] .cdfoot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6);
}
.cdfoot-brandcol .cdfoot-mark { margin-bottom: .6rem; }
.cdfoot-brandcol .cdfoot-name {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold);
  color: var(--on-brand); margin-bottom: .35rem;
}
.cdfoot-brandcol p { font-size: var(--text-xs); line-height: 1.6; max-width: 30ch; }
.cdfoot-col a { display: block; font-size: var(--text-sm); margin-bottom: .4rem; }

/* ── Tier: compact (publiek) — gecentreerd merk + linkrij ────────────── */
.cdfoot[data-tier="compact"] .cdfoot-in { text-align: center; }
.cdfoot[data-tier="compact"] .cdfoot-mark { margin: 0 auto var(--space-3); }
.cdfoot-linkrow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem;
  margin-bottom: var(--space-2);
}
.cdfoot-linkrow a { font-size: var(--text-sm); }
.cdfoot[data-tier="compact"] .cdfoot-legal { text-align: center; }

/* ── Tier: legal (auth) — enkel de juridische regel ──────────────────── */
.cdfoot[data-tier="legal"] .cdfoot-in { padding-top: var(--space-5); padding-bottom: var(--space-5); text-align: center; }
.cdfoot[data-tier="legal"] .cdfoot-legal { border-top: none; margin-top: 0; padding-top: 0; }

/* ====================================================================== */
/* MOBIEL — onder 1024px klapt de collapse-zone in een drawer             */
/* ====================================================================== */
@media (max-width: 1024px) {
  .cdbar[data-context="app"] .cdbar-toggle,
  .cdbar[data-context="public"] .cdbar-toggle { display: block; }

  .cdbar[data-context="app"] .cdbar-collapse,
  .cdbar[data-context="public"] .cdbar-collapse {
    position: absolute; top: var(--bar-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bar-bg); border-top: 1px solid var(--border-onbrand);
    padding: .5rem 0 .75rem; height: auto;
    box-shadow: var(--shadow-lg); display: none; z-index: 99;
  }
  /* .open moet de context-scoped display:none overstemmen → gelijke/hogere specificiteit */
  .cdbar[data-context="app"] .cdbar-collapse.open,
  .cdbar[data-context="public"] .cdbar-collapse.open { display: flex; }

  .cdbar-nav { flex-direction: column; align-items: stretch; height: auto; }
  .cdbar-nav a {
    height: auto; padding: .7rem var(--space-5);
    border-bottom: none; border-left: 3px solid transparent;
  }
  .cdbar-nav a.active {
    border-bottom: none; border-left-color: var(--petrol-300); background: rgba(255,255,255,.08);
  }
  .cdbar-sep { width: auto; height: 1px; margin: .4rem var(--space-5); }

  .cdbar-acct {
    margin-left: 0; flex-wrap: wrap; gap: .6rem .8rem;
    padding: .8rem var(--space-5) 0; margin-top: .4rem;
    border-top: 1px solid var(--border-onbrand);
  }
  .cdbar-acct .acct-email { max-width: none; }

  .cdfoot[data-tier="full"] .cdfoot-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 560px) {
  .cdfoot[data-tier="full"] .cdfoot-grid { grid-template-columns: 1fr; }
}