/* ============================================================
   Frontline Liaison · gedeelde stylesheet
   Bevat: variabelen, reset, basis, header/nav/mobile menu,
   section-label, reveal-animatie, footer, accessibility.
   Paginaspecifieke styles staan per pagina in een <style>-blok.
   ============================================================ */

:root{
  --bg:#F5F3EF;
  --surface:#FFFFFF;
  --surface-warm:#FAF8F5;
  --dark:#161B25;
  --dark-mid:#2C3444;
  --text:#1A1F2E;
  --text-mid:#4A5568;
  --text-light:#6B7385; /* was #8A93A6; donkerder voor WCAG AA contrast op wit */
  --copper:#B5722A;
  --copper-dark:#8C5820;
  --copper-light:#DBA878;
  --copper-bg:rgba(181,114,42,0.07);
  --border:#E8E3DA;
  --border-dark:#D0C8BC;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Lato',sans-serif;font-weight:400;line-height:1.8;overflow-x:hidden}
h1,h2,h3,h4,.label{font-family:'Oswald',sans-serif;letter-spacing:0.05em}

/* Anchor targets niet achter de fixed header laten verdwijnen */
[id]{scroll-margin-top:80px}

/* Skip-link voor toetsenbord- en screenreadergebruikers */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--copper);color:#fff;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;padding:12px 20px;text-decoration:none}
.skip-link:focus{left:0}

/* Zichtbare focus voor toetsenbordnavigatie */
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.form-input:focus-visible,.form-textarea:focus-visible,.form-select:focus-visible{outline:2px solid var(--copper);outline-offset:1px}

/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--dark);border-bottom:1px solid rgba(255,255,255,0.06);height:64px;padding:0 5%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:32px;height:32px;border:1.5px solid var(--copper);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark::before{content:'';width:10px;height:10px;background:var(--copper)}
.logo-text{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:white}
.logo-text span{color:var(--copper)}
nav{display:flex;gap:32px;align-items:center}
nav a{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.65);text-decoration:none;transition:color 0.2s}
nav a:hover,nav a.active{color:var(--copper)}
.nav-cta{border:1.5px solid var(--copper)!important;padding:8px 20px!important;color:var(--copper)!important;transition:all 0.2s!important}
.nav-cta:hover{background:var(--copper)!important;color:white!important}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:white;transition:all 0.3s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);z-index:99;padding:16px 5% 24px;flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-mid);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border);transition:color 0.2s}
.mobile-menu a:last-child{border-bottom:none;margin-top:8px;padding:13px 20px;border:1.5px solid var(--copper);text-align:center;color:var(--copper)}
.mobile-menu a:hover{color:var(--copper)}
@media(max-width:768px){nav{display:none}.hamburger{display:flex}}

/* SECTION LABEL */
.section-label{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.section-label::before{content:'';width:24px;height:1px;background:var(--copper);flex-shrink:0}

/* REVEAL — alleen actief met JavaScript (.js op <html>); zonder JS blijft alles zichtbaar */
.js .reveal{opacity:0;transform:translateY(15px);transition:opacity 0.7s cubic-bezier(.215,.61,.355,1),transform 0.7s cubic-bezier(.215,.61,.355,1)}
.js .reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.3s}

/* FOOTER */
footer{background:var(--dark);padding:36px 5%;display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-size:13px;color:rgba(255,255,255,0.45);letter-spacing:0.04em}
.footer-links{display:flex;gap:24px}
.footer-links a{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--copper)}
@media(max-width:600px){footer{flex-direction:column;gap:14px;text-align:center}}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .eyebrow-dot{animation:none!important}
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}