/* --- CAUGIA BASE SYSTEM V1.1 --- */

/* 1. VARIABELEN & RESET */
:root {
  --primary: #0056b3;
  --primary-dark: #004494;
  --text-dark: #0f172a;
  --text-body: #475569;
  --bg: #f8fafc;
  --white: #ffffff;
  --line: #e2e8f0;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 40px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.01);
  --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.06);
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-y: scroll; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 2. TYPOGRAFIE */
h1, h2, h3, h4 {
  font-family: 'Merriweather', serif;
  color: var(--text-dark);
  font-weight: 900;
  letter-spacing: -0.02em;
}

p { color: var(--text-body); margin-bottom: 1.5rem; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Eyebrow (Label boven titels) */
.eyebrow {
  display: inline-block; 
  text-transform: uppercase; 
  letter-spacing: 0.1em;
  font-size: 0.75rem; 
  color: var(--primary); 
  font-weight: 800; 
  margin-bottom: 16px; 
  background: #eff6ff; 
  padding: 6px 12px; 
  border-radius: 4px;
}

/* 3. LAYOUT & SECTIES */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 80px 0; }

.section-white { background: var(--white); }
.section-gray { 
  background: #f8fafc; 
  border-top: 1px solid var(--line); 
  border-bottom: 1px solid var(--line); 
}
.section-dark { 
  background: #0f172a; 
  color: var(--white); 
}
.section-dark h2 { color: var(--white); }
.section-dark p { color: #94a3b8; }

/* 4. BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; 
  border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  border: 1px solid transparent; cursor: pointer; 
  transition: all 0.2s ease; 
  white-space: nowrap;
}
.btn-primary { background: var(--primary-dark); color: var(--white); box-shadow: 0 4px 12px rgba(0,86,179,0.15); }
.btn-primary:hover { background: #003370; transform: translateY(-1px); }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--line); padding: 14px 32px;}
.btn-outline:hover { background: var(--white); border-color: var(--primary); transform: translateY(-1px); }

.btn-secondary {
  background: transparent; color: var(--text-body); border: 1px solid var(--line); 
  padding: 14px 32px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: 0.2s;
}
.btn-secondary:hover { background: var(--white); color: var(--text-dark); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* CTA button (header marketplace) */
.btn-cta {
  background: var(--primary); color: var(--white); 
  padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
  border: none; cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,86,179,0.15);
}
.btn-cta:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* 5. HEADER & NAVIGATIE */
header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(248,250,252,0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.nav { 
  height: 80px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 18px; 
  min-height: 80px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: 0.02em; }
.brand img { width: 32px; height: 32px; display: block; object-fit: contain; }

.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: var(--text-body); font-weight: 600; font-size: 0.95rem; transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }

.nav-actions { display: flex; gap: 12px; align-items: center; }
.menu-toggle { display: none; border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }

/* Mobile Menu (Overlay) */
.mobile-nav { 
  display: none; 
  border-top: 1px solid rgba(15,23,42,0.06); 
  padding: 14px 0 18px; 
}
.mobile-nav a { display: block; padding: 12px 10px; border-radius: 8px; font-weight: 700; color: var(--text-body); }
.mobile-nav a:hover, .mobile-nav a.active { background: var(--white); color: var(--primary); }
.mobile-cta { display: flex; gap: 12px; flex-wrap: wrap; padding: 10px 10px 0; }

/* 6. GLOBAL UI ELEMENTS */

/* Check-lists (Vinkjes) */
.check-list li { margin-bottom: 12px; font-size: 1rem; color: var(--text-body); padding-left: 28px; position: relative; list-style: none; }
.check-list li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; top: 1px; }
.check-list li::before { color: #4ade80; } 

/* FAQ Details/Summary (Global) */
details { border-bottom: 1px solid var(--line); padding: 24px 0; }
summary {
  font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; color: var(--text-dark);
  display: flex; justify-content: space-between; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; color: var(--primary); }
details[open] summary::after { content: "−"; }
details p { margin-top: 16px; font-size: 1rem; color: var(--text-body); max-width: 90%; line-height: 1.6; }

/* 7. FOOTER */
footer { background: var(--white); border-top: 1px solid var(--line); padding: 44px 0; text-align: center; color: #94a3b8; font-size: 0.9rem; }

/* 8. MOBILE RESPONSIVENESS (Global Rules) */
@media (max-width: 980px) {
  header { 
      backdrop-filter: blur(16px); 
      background: rgba(255,255,255,0.95);
  }
  .nav { padding: 0 20px; }
  .nav-links, .nav-actions .btn-secondary { display: none !important; }
  .nav-actions .btn-cta { padding: 8px 16px; font-size: 0.8rem; }
  
  .menu-toggle { 
      display: inline-flex; 
      font-size: 0.85rem;
      padding: 8px 16px;
  }

  /* Fixed Menu Logic */
  .mobile-nav { 
      position: fixed;
      top: 80px; left: 0; right: 0;
      background: var(--white);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
      padding: 10px 20px 30px !important;
      z-index: 999;
      display: none; 
      max-height: calc(100vh - 80px);
      overflow-y: auto;
  }
  .mobile-nav.active { display: block; }
  .mobile-cta { display: none !important; }
  
  .brand { font-size: 0.9rem; gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  
  /* Global Container Fix for Mobile */
  .container { padding-left: 24px !important; padding-right: 24px !important; }
  section { padding: 60px 0 !important; }
}