/*
 * norway-quiz.css — Shared design system for Norwegian government exam prep pages
 * Used by: social.kamkan.vip (citizenship test), driving.kamkan.vip (driving theory)
 * Dark glass aesthetic: deep navy background, layered surfaces, accent-per-page
 */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Base layers */
  --nq-bg:              #0d0f17;
  --nq-surface:         #151822;
  --nq-surface-raised:  #1c2030;
  --nq-border:          #252a3d;
  --nq-border-strong:   #353a52;

  /* Page accent — overridden per page in inline <style> */
  --nq-page-accent:       #EF2B2D;   /* default: Norwegian red (driving) */
  --nq-page-accent-dark:  #c01f21;
  --nq-page-accent-glow:  rgba(239, 43, 45, 0.15);

  /* Semantic feedback */
  --nq-correct:         #22c55e;
  --nq-correct-bg:      rgba(34, 197, 94, 0.10);
  --nq-correct-border:  rgba(34, 197, 94, 0.30);
  --nq-incorrect:       #f87171;
  --nq-incorrect-bg:    rgba(248, 113, 113, 0.10);
  --nq-incorrect-border:rgba(248, 113, 113, 0.30);
  --nq-warning:         #fbbf24;
  --nq-warning-bg:      rgba(251, 191, 36, 0.10);
  --nq-warning-border:  rgba(251, 191, 36, 0.35);

  /* Text hierarchy */
  --nq-text-primary:    #e8eaf2;
  --nq-text-secondary:  #8b90a8;
  --nq-text-disabled:   #4a4f66;
  --nq-text-inverse:    #ffffff;

  /* Typography */
  --nq-font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --nq-font-display:    'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* Spacing */
  --nq-space-1:  4px;
  --nq-space-2:  8px;
  --nq-space-3: 12px;
  --nq-space-4: 16px;
  --nq-space-5: 20px;
  --nq-space-6: 24px;
  --nq-space-8: 32px;
  --nq-space-10: 40px;

  /* Radii */
  --nq-radius-sm:  6px;
  --nq-radius-md: 10px;
  --nq-radius-lg: 14px;
  --nq-radius-xl: 18px;

  /* Shadows */
  --nq-shadow-card:     0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
  --nq-shadow-elevated: 0 4px 12px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.4);
  --nq-glow-accent:     0 0 0 3px var(--nq-page-accent-glow);

  /* Transition */
  --nq-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--nq-font-body);
  background: var(--nq-bg);
  color: var(--nq-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */
.nq-nav {
  background: var(--nq-surface);
  border-bottom: 1px solid var(--nq-border);
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.nq-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

/* When nav-inner is used, the nav itself should just be a strip */
.nq-nav:has(.nq-nav-inner) {
  padding: 0;
}

.nq-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nq-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--nq-text-inverse);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.nq-nav-logo:hover { opacity: 0.85; }

/* CSS-drawn Norwegian flag */
.nq-nav-logo-flag {
  width: 28px;
  height: 20px;
  background: var(--nq-page-accent);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.nq-nav-logo-flag::before {
  content: '';
  position: absolute;
  background: var(--nq-text-inverse);
  width: 6px;
  height: 100%;
  left: 8px;
}
.nq-nav-logo-flag::after {
  content: '';
  position: absolute;
  background: var(--nq-text-inverse);
  height: 6px;
  width: 100%;
  top: 7px;
}

/* ─── Tab Buttons ────────────────────────────────────────────────────────── */
.nq-tab-btn {
  padding: 7px 18px;
  border-radius: var(--nq-radius-sm);
  border: none;
  background: transparent;
  color: var(--nq-text-secondary);
  font-family: var(--nq-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--nq-transition);
  white-space: nowrap;
}
.nq-tab-btn:hover:not(.active) {
  background: var(--nq-surface-raised);
  color: var(--nq-text-primary);
}
.nq-tab-btn.active {
  background: var(--nq-page-accent);
  color: var(--nq-text-inverse);
}

/* ─── Ghost Button (nav back link) ──────────────────────────────────────── */
.nq-btn-ghost {
  background: transparent;
  color: var(--nq-text-secondary);
  border: none;
  padding: 8px 12px;
  font-family: var(--nq-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--nq-radius-sm);
  transition: all var(--nq-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nq-btn-ghost:hover {
  color: var(--nq-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* ─── Containers ─────────────────────────────────────────────────────────── */
.nq-container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.nq-container-wide { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ─── Confetti ───────────────────────────────────────────────────────────── */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* ─── Sound Toggle (fixed bottom-right) ─────────────────────────────────── */
.sound-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nq-surface);
  border: 1px solid var(--nq-border);
  color: var(--nq-text-secondary);
  font-size: 18px;
  cursor: pointer;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--nq-transition);
  box-shadow: var(--nq-shadow-card);
}
.sound-toggle:hover {
  border-color: var(--nq-border-strong);
  color: var(--nq-text-primary);
  background: var(--nq-surface-raised);
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes cardAppear {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes feedbackAppear {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes correctPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ─── Progress Bar (shared) ──────────────────────────────────────────────── */
.nq-progress-bar {
  height: 5px;
  background: var(--nq-surface-raised);
  border-radius: 3px;
  overflow: hidden;
}
.nq-progress-fill {
  height: 100%;
  background: var(--nq-page-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}