/*
    Naam: Miguel Schäffler
    Date: 28-10-2025
  */







/* styles.css
   Opmerkingen: deze CSS gebruikt semantische klassen en bevat commentaar dat de opbouw uitlegt.
   De volgorde: root variabelen -> base -> layout -> componenten -> page-specific
*/
:root{
  /* Variabelen: kleuren en maten die je overal hergebruikt */
  --bg:#f6f7fb;
  --accent:#2b6fdb;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:12px;
}

/* Basis: reset en lettertype */
*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background:var(--bg);
  color:#111827;
  line-height:1.5;
}

/* Header: bovenste balk met titel en navigatie */
header.site-header{
  background: linear-gradient(90deg,var(--accent), #4aa3ff);
  color:white;
  padding:1rem 1.5rem;
}

/* Navigatie: horizontale menubalk */
.main-nav{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.main-nav a{color:inherit;text-decoration:none;font-weight:600}

/* Layout: grid met hoofdinhoud + zijbalk */
.container{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;padding:1.5rem}

/* Kaarten: witte blokken voor items (bv. lunch, bedrijven) */
.card, .company-card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(17,24,39,0.06)}
.card-list{list-style:none;padding:0;display:grid;gap:0.75rem}

/* Knoppen en formulieren: eenvoudige styling */
.btn{display:inline-block;padding:.5rem .9rem;border-radius:10px;border:0;background:var(--accent);color:white;font-weight:700;cursor:pointer}
.mini-form input{width:100%;padding:.45rem;margin:.4rem 0;border-radius:8px;border:1px solid #d1d5db}

/* Index: hero sectie (afbeelding + tekst naast elkaar) */
.index-layout .hero{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.hero img{width:100%;height:220px;object-fit:cover;border-radius:10px}
.quick-actions{position:sticky;top:1rem}

/* Two-column: kaart (iframe) in lunch pagina */
.two-column .map-wrap{height:260px;overflow:hidden;border-radius:10px}
.two-column iframe{width:100%;height:100%;border:0}

/* Engelse pagina: lichte achtergrond en vaste zijbalk */
.english-page{background:linear-gradient(180deg, #fff, #eef6ff)}
.english-layout{grid-template-columns:1fr 320px}

/* Sport: toont sliderwaarde */
#distanceValue{margin-top:.6rem;font-weight:700}

/* Bedrijven: kolom met lijst van bedrijven */
.companies-grid{grid-template-columns:1fr 320px}
.company-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem}

/* Responsief: op mobiel één kolom */
@media (max-width:800px){
  .container{grid-template-columns:1fr}
  .index-layout .hero{grid-template-columns:1fr}
}