/* ============================================================
   style.css — Johan Beysen | johanbeysen.online
   ============================================================
   Structuur:
     1. Reset & box-model
     2. CSS Custom Properties (kleurenpalet, tokens)
     3. Basis elementen (body, html, utilities)
     4. Navigatie
     5. Dividers
     6. Secties (gedeelde stijlen)
     7. Hero
     8. Over mij
     9. Diensten
    10. Projecten
    11. Blog preview
    12. Contact
    13. Footer
    14. Responsive (≤ 768px)
   ============================================================ */


/* ── 1. RESET & BOX-MODEL ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── 2. CSS CUSTOM PROPERTIES ── */
/* Pas hier de kleuren en tokens aan — ze worden overal gebruikt. */
:root {
  /* Achtergrondlagen (van donker naar minder donker) */
  --bg:        #0d1117;   /* hoofdachtergrond */
  --bg-2:      #161b22;   /* kaarten, nav, contact-sectie */
  --bg-3:      #21262d;   /* hover-state op lijstitems */

  /* Tekstkleuren */
  --text:      #c9d1d9;   /* standaard lopende tekst */
  --text-muted:#8b949e;   /* gedempte tekst, subtitels */
  --text-dim:  #30363d;   /* nauwelijks zichtbaar (footer, meta) */
  --text-light:#f0f6fc;   /* koppen, prominente labels */

  /* Accentkleuren */
  --teal:      #00d2c8;   /* primair accent (teal/cyaan) */
  --cyan:      #00b4d8;   /* secundair accent (dieper blauw-cyaan) */

  /* Randen */
  --border:       rgba(255,255,255,0.06);      /* subtiele witte rand */
  --border-teal:  rgba(0,210,200,0.15);        /* teal-tinted rand */
}


/* ── 3. BASIS ELEMENTEN & UTILITIES ── */

html {
  scroll-behavior: smooth; /* zachte scrollanimatie bij ankerkoppelingen */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;                /* voorkomt horizontale schuifbalk */
  -webkit-font-smoothing: antialiased;
}

/* ── CURSOR ── */
/* Knipperende blokje-cursor — enkel gebruikt in het nav-logo "jb@sec:~$"  */
/* Wil je de cursor verbergen? Verwijder de <span class="cursor"> in HTML. */
.cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--teal);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}


/* Hulpklasse voor monospace font (JetBrains Mono) */
.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Centreert inhoud en begrenst de breedte op 960px */
.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px;
}


/* ── 4. NAVIGATIE ── */

/* Taalwisselaar — groepje NL/EN/FR knoppen rechts in de nav        */
/* Zit tussen de nav-links en de hamburger-knop (op mobiel: rechts) */
.lang-switcher {
  display: flex;
  gap: 2px;
  align-items: center;
}

.lang-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 8px;
  background: transparent;
  color: var(--text-muted);
  border: 0.5px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: color 0.2s, border-color 0.2s;
  line-height: 1;
}

.lang-btn:hover {
  color: var(--teal);
}

/* Actieve taal krijgt teal kleur en subtiele rand */
.lang-btn.active {
  color: var(--teal);
  border-color: rgba(0,210,200,0.3);
}

nav {
  position: sticky;          /* blijft bovenaan plakken bij scrollen */
  top: 0;
  background: rgba(13,17,23,0.92);   /* licht transparant voor "glaseffect" */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--border-teal);
  z-index: 100;              /* altijd bovenop andere elementen */
}

.nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logotekst links in de nav — geeft "terminal prompt" look */
.nav-logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--teal);
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* De gedempte @, : en ~ tekens in het logo */
.nav-logo .dim {
  color: var(--text);
  opacity: 0.4;
}

/* Horizontale navigatielinks */
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

/* Hover én actieve sectie worden teal gekleurd */
.nav-links a:hover,
.nav-links a.active {
  color: var(--teal);
}

/* Hamburger-knop (enkel zichtbaar op mobiel, zie responsive sectie) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text-muted);
  transition: background 0.2s;
}

.nav-hamburger:hover span {
  background: var(--teal);
}


/* ── 5. DIVIDERS ── */
/* Horizontale scheidingslijn tussen secties */
.divider {
  border: none;
  border-top: 0.5px solid rgba(0,210,200,0.1);
}


/* ── 6. SECTIES — GEDEELDE STIJLEN ── */

.section {
  padding: 72px 0;
}

/* Kleine label boven elke sectie, bv. "// over mij" */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.14em;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* De "//" prefix voor sectielabels */
.section-label::before {
  content: '//';
  opacity: 0.35;
}


/* ── 7. HERO ── */

#home {
  padding: 88px 0 72px;
}

/* Kleine bovenste regel boven de naam, bv. "ethical hacker · Belgium" */
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.12em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Korte horizontale lijnen voor én na de eyebrow-tekst */
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--teal);
  flex-shrink: 0;
}

/* Grote naam/koptitel */
#home h1 {
  font-size: clamp(40px, 6vw, 64px); /* schaal mee met schermgrootte */
  font-weight: 700;
  line-height: 1.06;
  color: var(--text-light);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}

/* "Beysen_" — transparante tekst met teal outline */
#home h1 .accent {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--teal);
}

/* Introtekst onder de naam */
.hero-sub {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 36px;
}

/* Rij met kleine technieklabels (pentesting, OSINT, …) */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}

/* Standaard pill-tag (teal) */
.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 0.5px solid rgba(0,210,200,0.3);
  background: rgba(0,210,200,0.05);
  color: var(--teal);
  letter-spacing: 0.04em;
}

/* Cyaan variant */
.tag.cyan {
  border-color: rgba(0,180,216,0.3);
  background: rgba(0,180,216,0.05);
  color: var(--cyan);
}

/* Gedempte variant (bv. Fox & Fish, NIS2) */
.tag.dim {
  border-color: rgba(139,148,158,0.2);
  background: transparent;
  color: var(--text-muted);
}

/* CTA-rij (contact + projecten knoppen) */
.hero-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}


/* ── KNOPPEN ── */

/* Primaire knop — gevulde teal achtergrond */
.btn-primary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 11px 26px;
  background: var(--teal);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  opacity: 0.88;
}

/* Ghost-knop — transparant met rand */
.btn-ghost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 11px 26px;
  background: transparent;
  color: var(--text-muted);
  border: 0.5px solid rgba(139,148,158,0.3);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: rgba(0,210,200,0.4);
  color: var(--teal);
}


/* ── 8. OVER MIJ ── */

/* Twee kolommen: tekst links, stat-kaarten rechts */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.about-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
}

.about-text p + p {
  margin-top: 16px;
}

.about-text strong {
  color: var(--text);
  font-weight: 500;
}

/* 2×2 raster van statistieken */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  background: var(--bg-2);
  border: 0.5px solid rgba(0,210,200,0.12);
  border-radius: 8px;
  padding: 18px;
  transition: border-color 0.2s;
}

.stat-card:hover {
  border-color: rgba(0,210,200,0.3);
}

/* Groot cijfer of label bovenaan de stat-kaart */
.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 30px;
  color: var(--teal);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
}


/* ── 9. DIENSTEN ── */

/* Sectie heeft donkerdere achtergrond om af te wijken van hero/projecten */
#diensten {
  background: var(--bg-2);
  border-top: 0.5px solid rgba(0,210,200,0.08);
  border-bottom: 0.5px solid rgba(0,210,200,0.08);
}

/* 4 diensten in 2×2 raster */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.service-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}

.service-card:hover {
  border-color: rgba(0,210,200,0.3);
  transform: translateY(-2px);
}

/* ASCII-stijl icoon boven de kaarttitel, bv. [!], [~], [#] */
.service-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--teal);
  margin-bottom: 14px;
  display: block;
}

.service-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 10px;
}

.service-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Tweede regel in een service-kaart: stapel van technieken (bv. "Pentesting · API…") */
.svc-stack {
  display: block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--teal);
  opacity: 0.65;
  letter-spacing: 0.04em;
  line-height: 1.7;
}


/* ── 10. WAAROM IK ── */

/* Twee kolommen: krachtige heading links, uitleg rechts */
.whyme-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 56px;
  align-items: start;
}

/* Grote, vette kop — zet de differentiator in de kijker */
.whyme-heading {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Lopende tekst rechts */
.whyme-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
}

.whyme-text p + p {
  margin-top: 16px;
}

/* Laatste zin: iets lichter van kleur als afsluitende tagline */
.whyme-text p:last-child {
  color: var(--text);
}


/* ── 11. PROJECTEN ── */

/* 2 kaarten per rij */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Projectkaart is een klikbare link */
.project-card {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  transition: border-color 0.2s;
  text-decoration: none;
  display: block;
}

.project-card:hover {
  border-color: rgba(0,210,200,0.3);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.project-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
}

/* Pijl rechts bovenaan de kaart (→) */
.project-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  transition: color 0.2s;
}

.project-card:hover .project-arrow {
  color: var(--teal);
}

.project-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Kleine technologie-tags onderaan de kaart */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 0.5px solid rgba(0,210,200,0.2);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}


/* ── 12. BLOG PREVIEW ── */

/* Lijst van blogposts als gestapelde rijen met rand */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.blog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: var(--bg-2);
  text-decoration: none;
  transition: background 0.2s;
  gap: 16px;
}

.blog-item:hover {
  background: var(--bg-3);
}

/* Scheidingslijn tussen posts */
.blog-item + .blog-item {
  border-top: 0.5px solid var(--border);
}

.blog-title {
  font-size: 14px;
  color: var(--text-light);
  font-weight: 500;
}

/* Datum rechts naast de titel (bv. 2026-03) */
.blog-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Knop "alle posts →" gecentreerd onder de lijst */
.blog-more {
  margin-top: 20px;
  text-align: center;
}


/* ── 13. CONTACT ── */

#contact {
  background: var(--bg-2);
  border-top: 0.5px solid rgba(0,210,200,0.1);
}

/* Binnenste wrapper voor de contactsectie */
.contact-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}

.contact-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.contact-text p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.6;
}

.contact-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* ── 14. FOOTER ── */

footer {
  border-top: 0.5px solid rgba(255,255,255,0.04);
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

footer p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
}

footer a {
  color: var(--teal);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


/* ── 15. RESPONSIVE (≤ 768px) ── */
/*
  Op mobiel:
  - Zijmarges worden smaller
  - De nav-links worden verborgen; hamburger verschijnt
  - Grids schakelen over op één kolom
  - Contact en footer worden verticaal gestapeld
*/
@media (max-width: 768px) {
  .wrap          { padding: 0 24px; }
  .nav-inner     { padding: 18px 24px; }
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }

  #home          { padding: 60px 0 48px; }

  .about-grid    { grid-template-columns: 1fr; gap: 32px; }
  .services-grid { grid-template-columns: 1fr; }
  .whyme-grid    { grid-template-columns: 1fr; gap: 24px; }
  .projects-grid { grid-template-columns: 1fr; }

  .contact-inner { padding: 48px 24px; flex-direction: column; }
  .footer-inner  { padding: 20px 24px; flex-direction: column; gap: 8px; text-align: center; }
}