/* ==============================
   Webdesign Ellen – style.css
   ============================== */

/* ---------- 1) Design tokens & basis ---------- */
:root {
  --bg:#37363B;      /* Achtergrondkleur */
  --fg:#f7f7f7;      /* Tekst hoofdkleur */
  --muted:#bfbfbf;   /* Secundaire tekst */
  --gold:#FFE1C8;    /* Accentkleur */
  --card:#2a292d;    /* Kaarten achtergrond */
  --border:#80513a;  /* Randkleur */
  --maxw:1100px;     /* Maximale leesbreedte */
}

/* ---------- 2) Reset & basis ---------- */
* { box-sizing:border-box }
html,body { margin:0; padding:0 }
body {
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 Arial, Helvetica, sans-serif;
  padding: 0 20px;
  border: 5px ridge var(--gold); /* sierlijke rand om de hele site */
}
img { max-width:100%; height:auto; display:block }

/* ---------- 3) Skiplink (toegankelijkheid) ---------- */
.skiplink { position:absolute; left:-9999px; top:auto; }
.skiplink:focus {
  left:1rem; top:1rem; z-index:9999;
  background:#fff; color:#000;
  padding:.5rem .75rem; border-radius:.25rem; outline:2px solid #000;
}

/* ---------- 4) Layout & typografie ---------- */
.container { max-width:var(--maxw); margin:0 auto; padding:1rem }
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px; /* lucht aan de zijkanten */
}
h1,h2,h3 { margin:.5rem 0 1rem }
p { margin:.4rem 0 1rem; color:var(--muted) }

/* ---------- 5) Navigatie ---------- */
.topnav {
  position:sticky; top:0; z-index:10;
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
  padding:.6rem .8rem;
  background:rgba(0,0,0,.55); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--gold);
}
.topnav a {
  color:var(--fg); text-decoration:none;
  padding:.4rem .7rem; border:1px solid var(--gold); border-radius:.5rem;
  transition: all .15s ease;
}
.topnav a[aria-current="page"] { color:var(--gold) }
.topnav a:hover, .topnav a:focus-visible {
  color:var(--gold);
  background:rgba(255,225,200,.15);
  transform:translateY(-1px);
  box-shadow:0 0 6px rgba(255,225,200,.5);
}

/* ---------- 6) Hero's ---------- */
.hero {
  position:relative; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:clamp(260px, 38vw, 460px); text-align:center;
  background:url('../afbeeldingen/achtergrond.jpg') center/cover no-repeat;
  border-bottom:5px ridge var(--gold);
}
.hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.hero h1 {
  position:relative; margin:0 1rem; color:var(--gold);
  text-shadow: 2px 2px 4px rgba(0,0,0,.7), -1px -1px 0 rgba(255,255,255,.15);
}
.hero p {
  position:relative; margin:.6rem 0 0; color:#d8d2cb;
  text-shadow:1px 1px 3px rgba(0,0,0,.6);
}

/* Kleine hero (subpagina's) */
.small-hero {
  margin:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1rem; background:var(--bg);
  border-bottom:1px solid var(--gold);
}
.small-hero h1 {
  margin:0; color:var(--gold);
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  text-shadow: 2px 2px 4px rgba(0,0,0,.45), -1px -1px 0 rgba(255,255,255,.08);
}

/* ---------- 7) Buttons ---------- */
.btn {
  display:inline-block; position:relative; z-index:1;
  background:transparent; color:var(--fg);
  border:1px solid var(--gold); border-radius:.5rem;
  padding:.6rem 1rem; font-weight:bold; text-decoration:none;
  transition: all .2s ease;
}
.btn:hover, .btn:focus-visible {
  background:rgba(255,225,200,.15); color:#000;
  transform:scale(1.05);
  box-shadow:0 0 12px rgba(255,225,200,.6);
}

/* ---------- 8) Contactformulier ---------- */
.contact-form {
  max-width:600px; margin:2rem auto; padding:1.5rem;
  background:#1e1e1e; border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.contact-form .form-group { margin-bottom:1.5rem }
.contact-form label {
  display:block; font-weight:bold; margin-bottom:.5rem; color:var(--fg)
}
.contact-form input, .contact-form textarea {
  width:100%; padding:.8rem; font-size:1rem; color:#fff;
  background:#2b2b2b; border:1px solid var(--gold); border-radius:8px;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline:none; border-color:#ffd28c;
  box-shadow:0 0 6px rgba(255,210,140,.5);
}
.contact-form button {
  display:inline-block; padding:.8rem 1.5rem; cursor:pointer;
  background:var(--gold); color:#000; font-weight:bold;
  border:none; border-radius:8px; transition:.3s;
}
.contact-form button:hover {
  background:#c49c68; transform:scale(1.05)
}
/* Honeypot veld verbergen */
.hp { position:absolute; left:-9999px; }

/* ---------- 9) Footer ---------- */
.site-footer {
  text-align:center; padding:2rem 1rem;
  border-top:1px solid var(--gold);
  background:#2a292d; color:#aaa;
}
.site-footer a { color:var(--gold); text-decoration:none; transition:color .2s }
.site-footer a:hover { color:#f8f5e7 }
.sig-name { font-size:1.05rem; color:var(--fg) }

/* ---------- 10) Links globaal ---------- */
a { color:var(--gold); text-decoration:none; transition: color .2s }
a:hover, a:focus-visible { color:#fff; text-decoration:underline }

/* ---------- 11) Responsive tweak ---------- */
@media (max-width:700px) {
  .container { padding:.75rem }
}