/* 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; } /* display:block is hier de hele fix. Een inline <a> rekt de regelhoogte niet
         op met verticale padding: het klikvlak werd 45px hoog terwijl de rij
         19px bleef, dus de vlakken overlapten en je raakte steeds het item
         eronder. Blok maakt ze bovendien volle breedte, waardoor de
         scheidingslijn onder de tekst loopt in plaats van erdoorheen. */
      .nav-links a { display: block; padding: 14px 24px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .nav-links li:last-child a { border-bottom: none; } .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; } }

/* De footer hoort onderaan te blijven staan, ook op een korte pagina zoals de
   404 van een verlopen opdracht. Zonder dit bleef er onder de footer een strook
   wit staan: het oude sjabloon regelde dit met body{display:flex} plus een
   <main>, en die main bestaat in de PHP-versie niet meer. */
body { min-height: 100vh; display: flex; flex-direction: column; }
footer { margin-top: auto; }