/* ==========================================================
   theme.css — Tema padrão e alto contraste
   Humboldt / Atlas Interativo de Geografia
   ========================================================== */

/* --- Textura de fundo (papel envelhecido via SVG inline) - */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

/* --- Decoração do header ---------------------------------  */
#site-header {
  background:    var(--color-primary);
  border-bottom: 3px solid var(--color-accent-lt);
  position:      sticky;
  top:           0;
  z-index:       100;
  /* position:relative necessário para o ::after do modo professor */
  overflow:      visible;
}

/* Wrapper interno precisa ser o referencial do ::after */
body.teacher-mode #site-header {
  border-bottom-color: var(--color-accent);
}

/* --- Alto contraste ------------------------------------- */
body.high-contrast {
  --color-bg:          #000000;
  --color-bg-panel:    #111111;
  --color-surface:     #000000;
  --color-border:      #ffffff;
  --color-border-dark: #ffffff;
  --color-primary:     #ffffff;
  --color-primary-mid: #ffffff;
  --color-primary-lt:  #cccccc;
  --color-accent:      #ffff00;
  --color-accent-lt:   #ffff00;
  --color-text:        #ffffff;
  --color-text-mid:    #ffffff;
  --color-text-muted:  #cccccc;
  --color-text-inv:    #000000;
  --color-water:       #00aaff;
  --color-water-lt:    #0088cc;
  --color-land:        #444444;
  --color-land-dark:   #333333;
  --map-bg:            #111111;
  --shadow-sm:  none;
  --shadow:     none;
  --shadow-lg:  none;
  --shadow-map: none;
}

body.high-contrast a {
  color: #ffff00;
}

body.high-contrast a:hover,
body.high-contrast a:focus {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

body.high-contrast #site-header {
  background: #000000;
  border-bottom: 3px solid #ffff00;
}

body.high-contrast .btn-primary {
  background: #ffff00;
  color: #000000;
  border-color: #ffff00;
}

body.high-contrast .map-container {
  border-color: #ffffff;
}

body.high-contrast .lesson-step {
  border-color: #555555;
}

/* --- Modo professor ------------------------------------- */
/* Estilos de .teacher-only e .teacher-box em components.css */

/* --- Indicador do modo professor no topo --------------- */
/* Indicador de modo professor: usamos o botão em si via aria-pressed */
/* ::after removido — sticky + overflow impede posicionamento correto */

/* --- Estados de foco para mapa interativo --------------- */
.map-layer:focus-visible {
  outline: 2px solid var(--color-accent-lt);
  outline-offset: 2px;
}

/* --- Animações de entrada -------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--color-accent); }
  50%       { border-color: var(--color-accent-lt); }
}

.animate-fade-up  { animation: fade-up  var(--transition-slow) both; }
.animate-fade-in  { animation: fade-in  var(--transition-slow) both; }

/* Delays em cadeia para listas */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }