/* ============================================================
   common.css – Deutsch Prüfungsvorbereitung
   Shared layout & structural styles for all pages.
   To update the look of header/footer/hero across the
   entire site, edit only this file.
   ============================================================ */

/* ── Semantic feedback colors — identical for B1 and B2 ─────
   Change these once here to update all pages at once.      */
:root {
  --color-correct:        #15803d;   /* correct answer text */
  --color-correct-bg:     #f0fdf4;   /* correct answer background */
  --color-correct-light:  #dcfce7;   /* pass-badge background */
  --color-wrong:          #dc2626;   /* wrong answer text */
  --color-wrong-bg:       #fef2f2;   /* wrong answer background */
  --color-wrong-light:    #fee2e2;   /* fail-badge background */
  --color-done:           #16a34a;   /* status "done" / checkmark */
  --color-info:           #1d4ed8;   /* "correct answer" label in results */
  --color-submit:         #e65c00;   /* Abgabe button */
  --color-submit-dark:    #cc5200;   /* Abgabe button hover */
}

/* --- Reset --- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f4f8; color:#333; }

/* --- Header --- */
header {
  background: var(--color-header-bg, var(--color-primary, #003399));
  color: white;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { font-size:20px; font-weight:700; }
.logo span { color: var(--color-primary-light, #7ab3ff); }
.header-meta { font-size:12px; opacity:0.75; }

/* --- Hero --- */
.hero {
  background: linear-gradient(135deg, var(--color-gradient-start, #003399) 0%, var(--color-gradient-end, #0055cc) 100%);
  color: white;
  text-align: center;
  padding: 56px 20px 48px;
}
.hero .badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 5px 18px;
  border-radius: 20px;
  font-size: 13px;
  margin-bottom: 20px;
}
.hero h1 { font-size:2.2rem; font-weight:700; margin-bottom:12px; }
.hero p  { font-size:1rem; opacity:0.9; max-width:560px; margin:0 auto; line-height:1.6; }

/* --- Main container (default width; override per page with style attr) --- */
.main { max-width:960px; margin:0 auto; padding:44px 20px 60px; }

/* --- Footer --- */
footer {
  background: #1a1a2e;
  color: #888;
  text-align: center;
  padding: 22px;
  font-size: 13px;
}

/* --- Small badges (Kein Timer, Mit Timer …) --- */
.badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-purple { background:#ede9fe; color:#6d28d9; }
.badge-orange { background:#ffedd5; color:#c2410c; }
.badge-pink   { background:#fce7f3; color:#be185d; }

/* --- Package badge --- */
#pkg-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
#pkg-badge[data-pkg="douala"] { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
#pkg-badge[data-pkg="kekem"]  { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }

/* In dark topbar: use light/transparent styling */
#topbar #pkg-badge {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
}
#topbar #pkg-badge[data-pkg="douala"] { background: rgba(255,255,255,0.15); }
#topbar #pkg-badge[data-pkg="kekem"]  { background: rgba(80,200,120,0.30); }

/* --- Responsive base --- */
@media(max-width:600px) {
  .hero h1 { font-size:1.6rem; }
  header   { padding:14px 20px; }
}


/* ============================================================
   Dynamic Navigation Header
   ============================================================ */
#main-header,
#nav-strip {
  background: linear-gradient(135deg, #1a73e8, #0d47a1);
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
}

.nav-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  min-height: 36px;
  flex-wrap: wrap;
}

.nav-logo {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.nav-dropdown-btn:hover {
  background: rgba(255,255,255,0.25);
}

.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 140px;
  z-index: 9999;
  margin-top: 4px;
}

.nav-dropdown-panel.open {
  display: block;
}

.nav-dropdown-panel a {
  display: block;
  padding: 8px 14px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid #eee;
}

.nav-dropdown-panel a:last-child {
  border-bottom: none;
}

.nav-dropdown-panel a:hover {
  background: #f0f4ff;
}

.nav-dropdown-panel a.active {
  background: #e3f2fd;
  font-weight: bold;
}

.nav-back-link {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  white-space: nowrap;
}

.nav-back-link:hover {
  background: rgba(255,255,255,0.15);
}

/* Responsive */
@media (max-width: 600px) {
  .nav-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
  }
  .nav-controls {
    width: 100%;
    justify-content: flex-start;
  }
}