/* Reipi - basis, navigatie en footer. Gedeeld door vacancies.php en vacancy.php.
   Regels zijn ONGEWIJZIGD overgenomen uit en/vacancies.html; alleen verdeeld over
   losse bestanden zodat ze niet meer per pagina gedupliceerd staan. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --navy: #1D3557; --navy-dark:#152844; --navy-mid: #264573; --accent: #E8B84B; --light: #F4F6F9; --mid: #E0E6EE; --text: #1a1a2e; --muted: #6b7a99; --white: #ffffff; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--white); }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--navy); display: flex; align-items: center; justify-content: space-between; padding: 0 60px; height: 68px; }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { height: 34px; filter: brightness(0) invert(1); }
.nav-logo span { color: var(--white); font-size: 20px; font-weight: 600; letter-spacing: 0.04em; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.25s; }
.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); }
@media (max-width: 900px) { .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--navy-dark); flex-direction: column; gap: 0; padding: 8px 0; } .nav-links.open { display: flex; } .nav-links a { padding: 14px 24px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.06); } .hamburger { display: flex; } nav { padding: 0 24px; } }
.lang-switcher { display: flex; gap: 4px; align-items: center; margin-left: 8px; }
.lang-btn { padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); text-decoration: none; transition: all 0.15s; border: 1px solid transparent; }
.lang-btn:hover, .lang-btn.active { color: var(--white); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); }
@media (max-width: 900px) { .lang-switcher { margin-left: 4px; } }
footer { background: var(--navy-dark); color: rgba(255,255,255,0.6); padding: 48px 60px 32px; font-size: 13px; }
.footer-inner { max-width: 1160px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; margin-bottom: 40px; }
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo img { height: 28px; filter: brightness(0) invert(1); }
.footer-logo span { color: var(--white); font-size: 18px; font-weight: 600; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 8px; }
.footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { footer { padding: 40px 24px 24px; } .footer-links { gap: 16px; } }