/* ============================================================================
   AIBeroepenzoeker.nl — Main CSS
   ============================================================================
   Bestand:  app/static/css/main.css
   Versie:   1.0
   Datum:    2026-03-28

   Doel:
     Platform-breed fundament. Eén bron van waarheid voor kleuren,
     typografie en herbruikbare waarden.

     Tailwind CDN verzorgt layout, spacing en utilities.
     Dit bestand vult aan waar Tailwind tekortschiet:
     — CSS custom properties voor kleurwaarden
     — Module-overschrijdende herbruikbare stijlen

   Laadvolgorde in base.html:
     1. Tailwind CDN
     2. Google Fonts
     3. <style> font-family body/heading (in base.html)
     4. Dit bestand (main.css)
     5. Module CSS via {% block extra_css %}

   Aanpassen:
     Kleur platformbreed wijzigen? Verander de waarde hier.
     Tailwind-klasse gebruiken in templates — nooit hex hardcoden.
   ============================================================================ */


/* ============================================================================
   1. CSS Custom Properties — alle platformkleuren op één plek
   ============================================================================ */

:root {

  /* ── Primaire actiekleuren ──────────────────────────────────────────── */
  --kleur-primair:              #F97316;   /* orange-500 — primaire CTA */
  --kleur-primair-hover:        #EA580C;   /* orange-600 */
  --kleur-primair-licht:        #FFF7ED;   /* orange-50 — subtiele achtergrond */

  --kleur-link:                 #2563EB;   /* blue-600 — links en accenten */
  --kleur-link-hover:           #1D4ED8;   /* blue-700 */
  --kleur-link-licht:           #EFF6FF;   /* blue-50 */

  --kleur-destructief:          #EF4444;   /* red-500 — uitloggen, verwijderen */
  --kleur-destructief-hover:    #DC2626;   /* red-600 */

  --kleur-admin:                #9333EA;   /* purple-600 — admin-only */

  /* ── Fase-kleuren ───────────────────────────────────────────────────── */
  --fase-1:                     #60A5FA;   /* blue-400 — Kennismaking */
  --fase-2:                     #FB923C;   /* orange-400 — Verkenning */
  --fase-3:                     #4ADE80;   /* green-400 — Verdieping */
  --fase-4:                     #A78BFA;   /* violet-400 — Actie */

  /* ── Achtergronden ──────────────────────────────────────────────────── */
  --achtergrond-pagina:         #F3F4F6;   /* gray-100 */
  --achtergrond-card:           #FFFFFF;   /* white */
  --achtergrond-subtiel:        #EFF6FF;   /* blue-50 */
  --achtergrond-promotie:       #FFFBEB;   /* amber-50 */

  /* ── Tekst ──────────────────────────────────────────────────────────── */
  --tekst-primair:              #111827;   /* gray-900 */
  --tekst-secundair:            #4B5563;   /* gray-600 */
  --tekst-meta:                 #6B7280;   /* gray-500 */
  --tekst-placeholder:          #9CA3AF;   /* gray-400 */

  /* ── Borders ────────────────────────────────────────────────────────── */
  --border-standaard:           #E5E7EB;   /* gray-200 */
  --border-focus-primair:       #FB923C;   /* orange-400 */
  --border-focus-link:          #60A5FA;   /* blue-400 */

  /* ── Statistieken / highlights ──────────────────────────────────────── */
  --stat-blauw:                 #2563EB;   /* blue-600 */
  --stat-oranje:                #F97316;   /* orange-500 */
  --stat-groen:                 #16A34A;   /* green-600 */
  --stat-paars:                 #9333EA;   /* purple-600 */

  /* ── Feedback / flash ───────────────────────────────────────────────── */
  --flash-succes-bg:            #F0FDF4;   /* green-50 */
  --flash-succes-border:        #BBF7D0;   /* green-200 */
  --flash-succes-tekst:         #166534;   /* green-800 */

  --flash-fout-bg:              #FEF2F2;   /* red-50 */
  --flash-fout-border:          #FECACA;   /* red-200 */
  --flash-fout-tekst:           #991B1B;   /* red-800 */

  --flash-waarschuwing-bg:      #FFFBEB;   /* amber-50 */
  --flash-waarschuwing-border:  #FDE68A;   /* amber-200 */
  --flash-waarschuwing-tekst:   #92400E;   /* amber-800 */

  --flash-info-bg:              #EFF6FF;   /* blue-50 */
  --flash-info-border:          #BFDBFE;   /* blue-200 */
  --flash-info-tekst:           #1E40AF;   /* blue-800 */

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --spacing-sectie:             4rem;      /* mb-16 equivalent */
  --spacing-card:               1.5rem;    /* p-6 equivalent */
  --spacing-gap:                1.5rem;    /* gap-6 equivalent */

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-card:                0.75rem;   /* rounded-xl */
  --radius-knop:                0.5rem;    /* rounded-lg */
  --radius-badge:               9999px;    /* rounded-full */

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-card:                0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-card-hover:          0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}


/* ============================================================================
   2. Basis — aanvullingen op Tailwind reset
   ============================================================================ */

/* Smooth scroll platform-breed */
html {
  scroll-behavior: smooth;
}

/* Focus ring — toegankelijkheid */
:focus-visible {
  outline: 2px solid var(--kleur-link);
  outline-offset: 2px;
}

/* Selectie-kleur */
::selection {
  background-color: #BFDBFE;  /* blue-200 */
  color: var(--tekst-primair);
}


/* ============================================================================
   3. Typografie — aanvullingen (fonts zelf geladen via base.html)
   ============================================================================ */

/* Consistente heading-stijl */
h1, h2, h3, h4, h5, h6 {
  color: var(--tekst-primair);
  line-height: 1.2;
}

/* Lopende tekst */
p {
  line-height: 1.6;
}


/* ============================================================================
   4. Componenten — herbruikbare platform-brede stijlen
   ============================================================================ */

/* Card — standaard wit blok */
.card {
  background-color: var(--achtergrond-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-card);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Card met fase-border */
.card--fase-1 { border-left: 4px solid var(--fase-1); }
.card--fase-2 { border-left: 4px solid var(--fase-2); }
.card--fase-3 { border-left: 4px solid var(--fase-3); }
.card--fase-4 { border-left: 4px solid var(--fase-4); }

/* Primaire knop */
.knop-primair {
  display: inline-block;
  background-color: var(--kleur-primair);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--radius-knop);
  transition: background-color 0.2s ease;
  text-align: center;
}

.knop-primair:hover {
  background-color: var(--kleur-primair-hover);
}

/* Secundaire knop */
.knop-secundair {
  display: inline-block;
  border: 1px solid var(--kleur-link);
  color: var(--kleur-link);
  font-weight: 600;
  border-radius: var(--radius-knop);
  transition: background-color 0.2s ease;
  text-align: center;
}

.knop-secundair:hover {
  background-color: var(--kleur-link-licht);
}


/* ============================================================================
   5. Animaties — sober en functioneel
   ============================================================================ */

/* Fade in voor dynamisch geladen content */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-in 0.3s ease forwards;
}


/* ============================================================================
   6. Hulpklassen — Tailwind aanvullingen
   ============================================================================ */

/* Tekst afkappen na N regels */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}