/* ---------------------------------------------
   Dutch Defender — Global Dutch Flag Theme
   Applies to: index.php, quiz.php, vocabulaire.php,
               grammaire.php, deck.php
   Palette: 🇳🇱 Blue / White / Red
---------------------------------------------- */

:root {
  --nl-blue:#0047ab;
  --nl-red:#e41e26;
  --nl-white:#ffffff;

  --ink:#0b1220;
  --muted:#6b7280;
  --bg-page:#eef2ff;
  --bg-card:#ffffff;
  --radius:18px;
}

/* Reset & basics */
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html, body {
  height:100%;
}

body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  background:linear-gradient(180deg,#eef2ff,#ffffff);
  color:var(--ink);
}

/* Links & media */
a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  text-decoration:none;
}

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

/* Layout */
.container {
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.main {
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px 32px;
}

.main--narrow {
  max-width:800px;
}

/* ---------------------------------------------
   Header / Navigation
---------------------------------------------- */

.header {
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(90deg,var(--nl-blue),var(--nl-white),var(--nl-red));
  box-shadow:0 4px 12px rgba(15,23,42,0.18);
}

.header-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
}

.logo a {
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#0b1220;
}

.tagline {
  font-size:0.85rem;
  color:rgba(15,23,42,0.8);
  display:block;
}

.nav {
  display:flex;
  align-items:center;
}

.nav-list {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.nav-list li {
  margin:0;
}

.nav-list a {
  font-size:0.9rem;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.9);
  color:#111827;
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:0 1px 5px rgba(15,23,42,0.15);
  transition:background 0.15s ease, color 0.15s ease,
             border-color 0.15s ease, transform 0.15s ease,
             box-shadow 0.15s ease;
}

.nav-list a:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,0.22);
}

.nav-list a.active {
  background:var(--nl-red);
  color:var(--nl-white);
  border-color:var(--nl-red);
}

/* ---------------------------------------------
   Intro / Titles
---------------------------------------------- */

.intro {
  margin-bottom:24px;
}

.intro--center {
  text-align:center;
}

.intro h1 {
  font-size:1.8rem;
  margin-bottom:8px;
}

.intro p {
  max-width:580px;
  margin:0 auto;
  color:var(--muted);
  font-size:0.95rem;
}

.section-title {
  font-size:1.4rem;
  margin-bottom:6px;
}

.section-subtitle {
  font-size:0.95rem;
  color:var(--muted);
}

/* Small pills / chips */
.pill {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:#0b1120;
  color:#fef9c3;
}

.badge {
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:0.78rem;
  background:rgba(0,71,171,0.06);
  border:1px solid rgba(0,71,171,0.35);
  color:#1e293b;
}

.chip {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.8rem;
  background:rgba(228,30,38,0.07);
  color:#7f1d1d;
}

/* ---------------------------------------------
   Deck grid (index.php / vocabulaire.php / quiz.php)
---------------------------------------------- */

.deck-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:12px;
}

.deck-card {
  background:var(--bg-card);
  border-radius:var(--radius);
  padding:16px 18px;
  border:2px solid rgba(148,163,184,0.35);
  box-shadow:0 10px 25px rgba(15,23,42,0.09);
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  transition:transform 0.18s ease,
             box-shadow 0.18s ease,
             border-color 0.18s ease;
}

.deck-emoji {
  font-size:2rem;
}

.deck-card h2 {
  font-size:1.1rem;
}

.deck-card p {
  font-size:0.9rem;
  color:var(--muted);
}

.deck-card:hover {
  transform:translateY(-3px);
  border-color:var(--nl-blue);
  box-shadow:0 16px 35px rgba(15,23,42,0.18);
}

/* Lists for vocab / grammar / quiz indexes */
.lesson-list,
.vocab-list,
.quiz-list {
  list-style:none;
  display:grid;
  gap:10px;
  margin-top:16px;
}

.lesson-list a,
.vocab-list a,
.quiz-list a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#ffffff;
  border-radius:12px;
  border-left:4px solid var(--nl-blue);
  border-right:1px solid rgba(148,163,184,0.5);
  border-top:1px solid rgba(148,163,184,0.35);
  border-bottom:1px solid rgba(148,163,184,0.35);
  box-shadow:0 6px 16px rgba(15,23,42,0.08);
  font-size:0.9rem;
  transition:transform 0.15s ease,
             box-shadow 0.15s ease,
             border-color 0.15s ease;
}

.lesson-list a span,
.vocab-list a span,
.quiz-list a span {
  color:var(--muted);
  font-size:0.8rem;
}

.lesson-list a:hover,
.vocab-list a:hover,
.quiz-list a:hover {
  transform:translateY(-2px);
  border-color:var(--nl-red);
  box-shadow:0 14px 30px rgba(15,23,42,0.16);
}

/* ---------------------------------------------
   Deck page (deck.php) — tabs & panes
---------------------------------------------- */

.tabs {
  display:inline-flex;
  padding:4px;
  margin:18px 0 10px;
  border-radius:999px;
  background:rgba(15,23,42,0.04);
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:0 6px 16px rgba(15,23,42,0.12);
}

.tab {
  flex:1 1 0;
  border:none;
  background:transparent;
  padding:8px 16px;
  border-radius:999px;
  font:inherit;
  font-size:0.9rem;
  cursor:pointer;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background 0.15s ease,
             color 0.15s ease,
             box-shadow 0.15s ease;
}

.tab.active {
  background:linear-gradient(90deg,var(--nl-blue),var(--nl-red));
  color:#ffffff;
  box-shadow:0 12px 25px rgba(15,23,42,0.25);
}

.pane {
  display:none;
  margin-top:12px;
}

.pane.active {
  display:block;
}

/* ---------------------------------------------
   Quiz container + question & answers
   Used inside deck.php and quiz.php (individual quiz)
---------------------------------------------- */

.quiz-container {
  background:var(--bg-card);
  border-radius:var(--radius);
  border:2px solid var(--nl-blue);
  box-shadow:0 18px 40px rgba(15,23,42,0.18);
  padding:18px 16px;
  margin:18px 0;
}

.quiz-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(148,163,184,0.7);
}

.quiz-title {
  font-size:1.2rem;
  font-weight:700;
}

.quiz-meta {
  font-size:0.85rem;
  color:var(--muted);
}

/* Question bubble */
.question-frame {
  margin-top:12px;
  margin-bottom:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:linear-gradient(
    90deg,
    rgba(0,71,171,0.08),
    rgba(228,30,38,0.08)
  );
  border:1px solid rgba(148,163,184,0.7);
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.question-number {
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--nl-blue);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  font-weight:700;
  flex-shrink:0;
}

.question-text {
  font-size:1rem;
  text-align:left;
}

.question-emoji {
  font-size:1.4rem;
  margin-bottom:4px;
}

/* Answer options */
.quiz-options {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
  counter-reset:option;
}

/* numbered circle via ::before */
.quiz-option {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px 10px 3rem;
  border-radius:999px;
  border:2px solid transparent;
  background:#f9fafb;
  box-shadow:0 3px 9px rgba(15,23,42,0.08);
  cursor:pointer;
  font-size:0.95rem;
  transition:background 0.15s ease,
             transform 0.15s ease,
             box-shadow 0.15s ease,
             border-color 0.15s ease;
}

.quiz-option::before {
  counter-increment:option;
  content:counter(option);
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  font-weight:700;
  background:#e5e7eb;
  color:#111827;
}

/* Dutch flag colors for indices */
.quiz-option:nth-child(1)::before {
  background:var(--nl-red);
  color:#ffffff;
}

.quiz-option:nth-child(2)::before {
  background:var(--nl-white);
  border:1px solid #d1d5db;
  color:#111827;
}

.quiz-option:nth-child(3)::before {
  background:var(--nl-blue);
  color:#ffffff;
}

.quiz-option:nth-child(4)::before {
  background:var(--nl-red);
  color:#ffffff;
}

/* States */
.quiz-option:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,23,42,0.18);
}

.quiz-option.selected {
  border-color:var(--nl-blue);
  background:#eff6ff;
}

.quiz-option.correct {
  border-color:#16a34a;
  box-shadow:0 0 0 2px rgba(22,163,74,0.35);
  background:#ecfdf3;
}

.quiz-option.wrong {
  border-color:#dc2626;
  box-shadow:0 0 0 2px rgba(220,38,38,0.3);
  background:#fef2f2;
}

/* Controls + score line */
.quiz-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:10px;
  border-top:1px dashed rgba(148,163,184,0.7);
}

.quiz-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 16px;
  font-size:0.9rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.8);
  background:#ffffff;
  cursor:pointer;
  transition:background 0.15s ease,
             transform 0.15s ease,
             box-shadow 0.15s ease,
             border-color 0.15s ease;
}

.quiz-btn--primary {
  background:var(--nl-blue);
  border-color:var(--nl-blue);
  color:#ffffff;
}

.quiz-btn--ghost {
  background:transparent;
}

.quiz-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,0.2);
}

.score-display {
  font-size:0.9rem;
  color:var(--muted);
}

/* ---------------------------------------------
   Footer
---------------------------------------------- */

.footer {
  margin-top:24px;
  padding:14px 0 22px;
  border-top:3px solid var(--nl-red);
  background:#0f172a;
  color:#e5e7eb;
}

.footer .container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:0.85rem;
}

.footer a {
  color:#bfdbfe;
}

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

/* ---------------------------------------------
   Responsive tweaks
---------------------------------------------- */

@media (max-width:768px) {
  .header-content {
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-list {
    width:100%;
    justify-content:flex-start;
  }

  .nav-list a {
    font-size:0.85rem;
  }

  .main {
    padding:20px 12px 28px;
  }

  .quiz-container {
    padding:16px 12px;
  }

  .question-frame {
    padding:12px 12px;
  }
}
/* Container for options */
.quiz-options{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:18px 0;
  counter-reset:option;
}

/* Base answer row */
.quiz-option{
  position:relative;
  display:flex;
  align-items:center;
  padding:12px 20px 12px 3.6rem;
  border-radius:999px;
  border:2px solid #e5e7ff;
  font-size:1rem;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,0.12);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Number circle (same for 1,2,3) */
.quiz-option::before{
  counter-increment:option;
  content:counter(option);
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  background:#ffffff;
  border:2px solid #000000;
  color:#000000;
  font-size:.9rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 🇳🇱 Dutch flag colors for the rows */
.quiz-option:nth-child(1){
  background:#ff0000;       /* RED */
  color:#ffffff;
}

.quiz-option:nth-child(2){
  background:#ffffff;       /* WHITE */
  color:#111827;
}

.quiz-option:nth-child(3){
  background:#0047ff;       /* BLUE */
  color:#ffffff;
}

/* Hover + states */
.quiz-option:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,0.2);
}

/* Keep the same background, just highlight border when selected/correct/wrong */
.quiz-option.selected{
  border-color:#facc15;
}

.quiz-option.correct{
  border-color:#16a34a;
}

.quiz-option.wrong{
  border-color:#dc2626;
}