/* =========================================================
   Portfolio minor Futureproof met AI.
   Deze stylesheet is voor index.html en beheer.html samen.
   Kleuren aanpassen? Dat kan hieronder bij :root.
   ========================================================= */

:root {
  /* Warme beige basis met gedempte pastelkleuren.
     Alle combinaties hieronder zijn gecontroleerd op contrast (minimaal AA). */
  --donker: #33302a;        /* warm donkerbruin: koppen */
  --papier: #f6f0e6;        /* beige: paginakleur */
  --wit: #fffcf6;           /* creme: kaarten en header */
  --accent: #46695a;        /* gedempt salie: links, knoppen */
  --accent-licht: #e4ece5;  /* pastelgroen: labels en vlakken */
  --klei: #f0e4d8;          /* pastel klei: zachte accenten */
  --tekst: #3a362f;
  --tekst-zacht: #5f594e;
  --rand: #e5ddcf;          /* warme rand */
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--papier);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--donker); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); margin-bottom: .6em; }
h3 { font-size: 1.12rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1em; max-width: 70ch; }
a { color: var(--accent); }
a:hover { color: var(--donker); }
code { background: var(--accent-licht); padding: .1rem .35rem; border-radius: 4px; font-size: .92em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1.2rem; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* Voorkomt dat een sectie onder de vaste header verdwijnt bij het springen */
[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.container { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
.sectie { padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; }
.sectie--grijs { background: var(--wit); border-block: 1px solid var(--rand); }

/* ---------- Header en navigatie ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--wit); border-bottom: 1px solid var(--rand);
}
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px;
}
.logo { font-weight: 700; color: var(--donker); text-decoration: none; }

.menu-knop {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 8px;
  padding: .5rem .8rem; font: inherit; color: var(--donker); cursor: pointer;
}
.menu-knop .balkjes { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-knop .balkjes::before,
.menu-knop .balkjes::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.menu-knop .balkjes::before { top: -6px; }
.menu-knop .balkjes::after { top: 6px; }

.hoofdnav { display: none; width: 100%; padding-bottom: .75rem; }
.hoofdnav.is-open { display: block; }
.hoofdnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.hoofdnav a {
  display: block; padding: .55rem .7rem; border-radius: 8px;
  color: var(--tekst); text-decoration: none; font-weight: 500;
}
.hoofdnav a:hover { background: var(--papier); color: var(--donker); }
.hoofdnav a.actief { background: var(--accent-licht); color: var(--accent); font-weight: 600; }

/* ---------- Over mij ---------- */
.intro { display: grid; gap: 2rem; align-items: start; }
.intro-foto img { border-radius: var(--radius); border: 1px solid var(--rand); aspect-ratio: 1/1; object-fit: cover; }

.label {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-licht);
  padding: .25rem .75rem; border-radius: 999px; margin-bottom: .75rem;
}
.lead { font-size: 1.08rem; color: var(--tekst-zacht); }
.klein-kopje { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-zacht); margin-bottom: .4rem; }
.lijst { margin: 0 0 1rem; padding-left: 1.15rem; }
.lijst li { margin-bottom: .25rem; }
.twee-koloms { display: grid; gap: 1rem 2rem; margin: 1.5rem 0; }

.knop-rij { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.knop {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font: inherit; font-weight: 600; padding: .7rem 1.35rem; border: 2px solid var(--accent);
  border-radius: 999px; cursor: pointer;
}
.knop:hover { background: var(--donker); border-color: var(--donker); color: #fff; }
.knop--leeg { background: transparent; color: var(--donker); border-color: var(--rand); }
.knop--leeg:hover { background: var(--donker); border-color: var(--donker); color: #fff; }
.knop--klein { padding: .35rem .9rem; font-size: .88rem; }

/* ---------- Ervaring (tijdlijn) ---------- */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li {
  position: relative;
  border-left: 2px solid var(--rand);
  padding: 0 0 1.75rem 1.5rem;
}
.tijdlijn li:last-child { padding-bottom: 0; border-left-color: transparent; }
/* Het bolletje op de tijdlijn */
.tijdlijn li::before {
  content: "";
  position: absolute; left: -7px; top: .45rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--wit);
}
.tijdlijn-kop { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tijdlijn-kop h3 { margin-bottom: 0; }
.tijdlijn-meta { font-size: .9rem; color: var(--tekst-zacht); margin: .15rem 0 .4rem; }
.tijdlijn p:last-child { margin-bottom: 0; font-size: .96rem; color: var(--tekst-zacht); }

/* Label Werk of Opleiding */
.soort {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-licht);
  border-radius: 999px; padding: .12rem .6rem;
}
.soort--opleiding { background: var(--klei); color: #7a5230; }

/* ---------- Contact ---------- */
.contact-lijst { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 34rem; }
.contact-lijst li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rand);
}
.contact-label {
  flex: 0 0 6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tekst-zacht);
}
.contact-lijst a { word-break: break-word; }

/* ---------- Sprints ---------- */
.sprint-blok {
  border-left: 4px solid var(--accent);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
}
.sprint-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.sprint-kop h3 { margin-bottom: .3rem; }
.periode { font-size: .85rem; color: var(--tekst-zacht); }
.terugblik { font-size: .95rem; color: var(--tekst-zacht); }
.terugblik strong { color: var(--donker); }

.kaarten { display: grid; gap: 1rem; margin-top: 1rem; }
.kaart {
  background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.25rem;
}
.sectie--grijs .kaart { background: var(--wit); }
.kaart p { font-size: .96rem; color: var(--tekst-zacht); }
.kaart strong { color: var(--donker); }
.meta { font-size: .88rem; margin-bottom: .3rem; }

/* Klikbare LU-labels in een bewijskaart */
.lu-tag {
  display: inline-block; font-size: .8rem; font-weight: 700; text-decoration: none;
  color: var(--accent); background: var(--accent-licht); border-radius: 999px; padding: .1rem .55rem;
}
.lu-tag:hover { background: var(--accent); color: #fff; }

.links { margin: .9rem 0 0; }
.links a {
  display: inline-block; font-size: .88rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--accent); border-radius: 999px; padding: .35rem .9rem;
}
.links a:hover { background: var(--accent); color: #fff; }

/* Tekst voor lege plekken, bijvoorbeeld een sprint zonder bewijs */
.leeg { color: var(--tekst-zacht); font-size: .93rem; font-style: italic; }

/* ---------- Leeruitkomsten ---------- */
.lu {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin-bottom: 1rem;
}
.lu h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.lu-nummer {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  color: var(--accent); background: var(--accent-licht); border-radius: 999px; padding: .15rem .6rem;
}
.teller {
  margin-left: auto; font-size: .78rem; font-weight: 600;
  color: var(--tekst-zacht); background: var(--papier);
  border: 1px solid var(--rand); border-radius: 999px; padding: .1rem .6rem;
}
.lu > p { color: var(--tekst-zacht); font-size: .96rem; }
.bij-sprint { font-size: .82rem; color: var(--tekst-zacht); }

.notitie {
  background: var(--accent-licht); border-left: 4px solid var(--accent);
  padding: .8rem 1rem; border-radius: 0 8px 8px 0; font-size: .93rem; color: var(--tekst-zacht);
}

/* =========================================================
   Beheerpagina (beheer.html)
   ========================================================= */
.stappen { max-width: 70ch; color: var(--tekst-zacht); padding-left: 1.2rem; }
.stappen li { margin-bottom: .3rem; }
.stappen strong, .stappen code { color: var(--donker); }

.formulier {
  display: grid; gap: 1.1rem; max-width: 40rem;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.5rem; margin: 1.5rem 0;
}
.veld { display: grid; gap: .3rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.veld label, .veld legend { font-weight: 600; font-size: .95rem; padding: 0; }
.veld input, .veld textarea, .veld select {
  font: inherit; padding: .65rem .8rem; width: 100%;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--wit); color: var(--tekst);
}
.veld textarea { min-height: 7rem; resize: vertical; }
.veld input:hover, .veld textarea:hover, .veld select:hover { border-color: var(--accent); }
.veld-rij { display: grid; gap: 1.1rem; }
.hulptekst { font-size: .87rem; color: var(--tekst-zacht); margin: 0; }

.vinkjes { display: grid; gap: .4rem; margin-top: .4rem; }
.vinkje { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; font-size: .95rem; }
.vinkje input { width: auto; margin-top: .35rem; }

.melding {
  background: var(--accent-licht); border-left: 4px solid var(--accent);
  padding: .8rem 1rem; border-radius: 0 8px 8px 0; max-width: 40rem; font-size: .95rem;
}
/* Melding bij een fout of een niet ingevuld veld */
.melding--fout { background: #f8e5df; border-left-color: #a4503c; color: #6f2e1f; }

/* Vlaggetje rechtsboven: staat je lijst nog gelijk aan het bestand? */
.status {
  font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .2rem .7rem;
  white-space: nowrap;
}
.status--klaar { background: var(--accent-licht); color: #2f5a48; }
.status--open  { background: var(--klei); color: #7a5230; }

.beheer-sprint { margin-bottom: 1.5rem; }
.beheer-sprint h3 { font-size: .95rem; color: var(--tekst-zacht); }
.beheer-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 8px;
  padding: .9rem 1.1rem; margin-bottom: .5rem;
}
.beheer-item p { margin: .1rem 0; }
.beheer-link { font-size: .85rem; word-break: break-all; }

.opslaan {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.5rem; margin-top: 2rem;
}
.opslaan h2 { margin-top: 0; }

/* ---------- Tablet en desktop ---------- */
@media (min-width: 700px) {
  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .twee-koloms { grid-template-columns: repeat(2, 1fr); }
  .veld-rij { grid-template-columns: 1fr 1fr; }
  .vinkjes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .menu-knop { display: none; }
  .hoofdnav { display: block; width: auto; padding-bottom: 0; }
  .hoofdnav ul { flex-direction: row; gap: .15rem; }
  .intro { grid-template-columns: 280px 1fr; gap: 3rem; }
}

/* ---------- Printen (portfolio opslaan als pdf) ---------- */
@media print {
  .site-header, .knop { display: none; }
  body { background: #fff; }
  .kaart, .lu, .sprint-blok { break-inside: avoid; }
}