/* ==========================================================================
   Beacon Light System — shared components.
   The pieces that appear on more than one page: the measure, the eyebrow,
   buttons, the beacon mark, the header, the footer, the step card and the
   ghost link. Values come from the .dc.html designs, which are the visual
   source of truth; page-specific deviations live in the page's own file.
   ========================================================================== */

/* The design exposes an `accent` prop, defaulting to the action blue.
   It drives the active tab underline and the active step card's ring. */
:root{--accent:var(--blue)}

/* Measure — 1400px content column inside 32px gutters. */
.measure{max-width:var(--measure);margin:0 auto}

/* --------------------------------------------------------------------------
   Eyebrow — mono micro-label, a 26px hairline, then the label
   -------------------------------------------------------------------------- */

.eyebrow{display:flex;gap:14px;align-items:baseline;font-family:var(--font-mono);font-size:var(--mono-label);letter-spacing:var(--ls-mono);text-transform:uppercase;margin:0 0 26px}
.eyebrow__rule{display:block;width:26px;height:1px}
.eyebrow--light{color:var(--text-muted)}
.eyebrow--light .eyebrow__rule{background:rgba(6,10,20,.25)}
.eyebrow--dark{color:var(--text-on-dark-muted)}
.eyebrow--dark .eyebrow__rule{background:rgba(243,239,232,.32)}

/* --------------------------------------------------------------------------
   Buttons — primary inverts on hover, secondary raises its border .2 -> .6
   -------------------------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-core);font-size:var(--body);font-weight:var(--weight-medium);padding:18px 26px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur) var(--ease-beacon),color var(--dur),border-color var(--dur)}
.btn--primary{background:var(--action-bg);color:var(--action-fg)}
.btn--primary:hover{background:var(--action-bg-hover);color:var(--action-fg-hover)}
.btn--secondary{background:transparent;color:rgba(243,239,232,.82);border:1px solid rgba(243,239,232,.2);padding:18px 22px}
.btn--secondary:hover{color:rgba(243,239,232,.82);border-color:rgba(243,239,232,.6)}
.btn--lg{font-size:16.5px;padding:19px 30px}
.btn--lg.btn--secondary{padding:19px 24px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* Ghost link — mono, uppercase, sitting on a blue hairline. */
.link-ghost{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--mono-nav);letter-spacing:var(--ls-mono-tight);text-transform:uppercase;border-bottom:1px solid rgba(11,73,245,.4);padding-bottom:4px;transition:color var(--dur-fast)}

/* --------------------------------------------------------------------------
   Logo lockup — the lighthouse casting its beam through the "b" of the
   wordmark, closed by the violet period.

   The supplied file is a genuinely transparent PNG, trimmed to its artwork,
   so unlike the design system's logo-baken.png it carries no baked-in ink
   panel and is not restricted to dark surfaces. At 30px the wordmark reads
   19px tall (was 14px) and the lockup measures 110px wide — the same width
   the old typographic mark occupied, so the header row does not shift.
   -------------------------------------------------------------------------- */

.mark{display:flex;align-items:center;color:var(--text-on-dark)}
.mark:hover{color:var(--text-on-dark)}
.mark__logo{display:block;height:30px;width:auto}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header{position:relative;z-index:30;background:var(--surface-dark);border-bottom:1px solid rgba(243,239,232,.1)}
.site-header__inner{display:flex;align-items:center;gap:36px;padding:20px var(--gutter)}
.site-header .mark{margin-right:auto}
.site-nav{display:flex;gap:28px;font-family:var(--font-mono);font-size:var(--mono-nav);letter-spacing:var(--ls-mono-tight);text-transform:uppercase;color:rgba(243,239,232,.55)}
.site-nav a{color:inherit;transition:color var(--dur-fast)}
.site-nav a:hover{color:var(--text-on-dark)}
.nav-cta{font-family:var(--font-mono);font-size:var(--mono-nav);letter-spacing:var(--ls-mono-tight);text-transform:uppercase;color:var(--text-on-dark);border:1px solid var(--border-on-dark-strong);padding:11px 18px;border-radius:var(--radius-sm);transition:color var(--dur-fast),border-color var(--dur-fast)}
.nav-cta:hover{border-color:var(--blue-bright);color:var(--blue-bright)}

/* De oude stapkaarten (witte kaart die naar inkt omsloeg en 10px optilde)
   zijn vervangen door het werkwijzeraster in workflow.css. */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer{padding:34px var(--gutter) 48px;background:var(--surface-dark);color:var(--text-on-dark-muted)}
.site-footer__inner{padding-top:30px;border-top:1px solid var(--border-on-dark);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;font-size:var(--meta)}
.site-footer .mark__logo{height:26px}
.footer-nav{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--mono-nav);letter-spacing:var(--ls-mono-tight);text-transform:uppercase}
.footer-nav a{color:inherit;transition:color var(--dur-fast)}
.footer-nav a:hover{color:var(--text-on-dark)}
.footer-tagline{font-family:var(--font-mono);font-size:var(--mono-nav);letter-spacing:.08em}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* ---- Mobiel menu --------------------------------------------------------
   Onder 720px verdwijnen de inline links en de CTA en komt er één knop van
   twee hairlines voor terug. Het paneel schuift over de pagina in inkt, met
   dezelfde mono-typografie als de rest van de navigatie. */
.nav-toggle{display:none;position:relative;width:44px;height:44px;margin-right:-10px;flex:none;
  background:none;border:0;cursor:pointer;padding:0}
.nav-toggle span{position:absolute;left:11px;width:22px;height:1px;background:var(--text-on-dark);
  transition:transform var(--dur) var(--ease-beacon),opacity var(--dur) var(--ease-beacon)}
.nav-toggle span:first-child{top:19px}
.nav-toggle span:last-child{top:25px}
.nav-toggle.is-open span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle.is-open span:last-child{transform:translateY(-3px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--blue-bright);outline-offset:-4px}

.nav-panel{position:fixed;inset:0;z-index:60;background:var(--surface-dark);
  display:flex;align-items:center;padding:0 var(--gutter);
  opacity:0;transition:opacity var(--dur-slow) var(--ease-beacon)}
/* Het paneel is een kind van .site-header, die een eigen stacking context
   maakt. Zonder deze regel legt het paneel zich over de sluitknop heen en
   kun je het menu niet meer dichtdoen. */
.site-header__inner{position:relative;z-index:70}
.nav-panel.is-open{opacity:1}
.nav-panel__list{display:grid;gap:6px;width:100%}
.nav-panel__list a{display:block;padding:14px 0;border-bottom:1px solid var(--border-on-dark);
  font-family:var(--font-mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-on-dark);transition:color var(--dur-fast),padding-left var(--dur-fast) var(--ease-beacon)}
.nav-panel__list a:hover{color:var(--blue-bright);padding-left:6px}
/* Achtergrond niet mee laten scrollen zolang het menu open is. */
html.nav-locked,html.nav-locked body{overflow:hidden}

@media (max-width:720px){
  .site-nav,.nav-cta{display:none}
  .nav-toggle{display:block}
  .site-header__inner{gap:16px}
  .site-header .mark{margin-right:auto}
}
@media (min-width:721px){
  .nav-panel{display:none}
}

@media (max-width:600px){
  .site-footer__inner{gap:24px}
}