/*
 * custom.css
 * Versie: 2025-11-02 17:10 CET
 * Dependencies: Bootstrap 5
 * Linked files: header.php, footer.php, index.php
 */

/* ========== 0) Globale font en layout ========== */
html { height:100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Inconsolata', monospace;
  font-size:16px;
  color:#222;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  /* padding-top wordt door JS gezet op headerhoogte */
}
main{ flex-grow:1; }
footer{ flex-shrink:0; }
h1,h2,h3,h4,h5,h6,p,a,li,button,small,span,label,input,textarea{
  font-family:'Inconsolata', monospace;
}

/* ========== 1) Header: vast bovenaan ========== */
#header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1030;              /* boven content */
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
#header .navbar{ padding:0; }

/* Taal-switcher */
.language-switcher{ display:flex; gap:8px; }
.language-switcher a{
  font-size:.9rem; color:#555; text-decoration:none; padding:2px 5px;
}
.language-switcher a.active,.language-switcher a:hover{ font-weight:600; color:#000; }

/* Navbar links als knoppen */
.navbar-nav .nav-link{
  display:inline-block;
  padding:8px 15px;
  font-size:.9rem;
  color:#333;
  border:1px solid #ddd;
  border-radius:4px;
  margin:4px 6px;
  text-decoration:none;
  transition:all .2s ease-in-out;
  white-space:nowrap;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  background:#f8f8f8; color:#000; border-color:#ccc;
}

/* Hamburger: zichtbaar op <lg, verborgen op ≥lg via Bootstrap */
.navbar-toggler{ border:0; }
.navbar-toggler:focus{ box-shadow:none; }

/* Desktop ≥992px */
@media (min-width:992px){
  .navbar-nav{ gap:12px; }
}

/* ========== 2) Hero en knoppen ========== */
#hero.hero{ min-height:auto; padding:60px 0; }
#hero .info{ padding:0; }
#hero h1,#hero h3,#hero p{ text-align:left; }

.btn-get-started,.btn-get-started-outline{
  background:#fff; color:#333; border:1px solid #ddd;
  padding:10px 25px; border-radius:4px; font-weight:600;
  transition:all .3s ease; margin:5px;
}
.btn-get-started:hover,.btn-get-started-outline:hover{
  background:#f8f8f8; color:#000; border-color:#ccc;
}

/* ========== 3) E-mail obfuscation helpers ========== */
.obf{
  unicode-bidi:bidi-override;
  direction:rtl;
}
a.obf-email{
  display:inline-block;
  border:1px dashed #bbb;
  border-radius:4px;
  padding:6px 10px;
  text-decoration:none;
  color:#333;
}
a.obf-email:hover{ background:#fafafa; border-color:#aaa; }