/**
 * Esquadrão S-Class — overrides multipágina + rodapé fixo.
 * Carregar SEMPRE depois de site.css (no HTML e no deploy).
 */

/* —— Navegação multipágina —— */
.nav-links li a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
}
.nav-logo {
  text-decoration: none;
}
.page-main {
  animation: fadeIn 0.6s ease;
}
.section {
  display: block;
}

.menu-toggle {
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
button.menu-toggle {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Fundo padrão do miolo (admin: tipo "padrao" ou sem registro fundo_pagina) */
body {
  background-color: #ffffff;
  background-image: none;
}

/* Shell: fundo no body (visível na nav transparente); scroll só no miolo */
html.site-shell-root,
html.site-shell-root body.site-shell {
  height: 100%;
}

body.site-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
}

body.site-shell .top-bar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex-shrink: 0;
  overflow: visible;
  z-index: 1100;
}

body.site-shell nav {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex-shrink: 0;
  background: transparent;
  height: auto;
  min-height: var(--nav-h-desktop);
  padding: 14px 5%;
  overflow: visible;
  z-index: 1000;
}

body.site-shell .nav-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 1024px) {
  body.site-shell nav {
    min-height: var(--nav-h-mobile);
    padding: 12px 5%;
  }
}

body.site-shell .site-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

body.site-shell main.container,
body.site-shell main.container.page-main,
body.site-shell .container.page-main {
  margin-top: 12px;
  padding-top: 10px;
}

main.container.page-main,
main.container {
  background: transparent;
}

/* —— Rodapé: foto fixa no viewport (conteúdo rola por trás) —— */
:root {
  --footer-text-h: 44px;
  --skz-photo-h: 200px;
  --skz-scroll-pad: calc(var(--skz-photo-h) + var(--footer-text-h) + 12px);
}

/* Anula site.css (relative / min-height / flex no rodapé) */
body .skz-visual-footer {
  position: static !important;
  z-index: 10;
  width: 100%;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
  background: transparent !important;
}

body .skz-visual-footer .footer-bar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  display: block !important;
  transform: none !important;
}

body .skz-visual-footer .skz-photo {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  bottom: var(--footer-text-h) !important;
  z-index: 15 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: min(92vw, 520px) !important;
  height: auto !important;
  max-height: var(--skz-photo-h) !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  pointer-events: none;
}

body .skz-visual-footer .footer-text {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  z-index: 20 !important;
  transform: none !important;
  pointer-events: auto;
  padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

main.container,
main.container.page-main,
.container.page-main {
  position: relative;
  z-index: 9;
  margin-bottom: 0 !important;
  padding-bottom: var(--skz-scroll-pad) !important;
}

/* Calendário: só o <main> leva padding do rodapé (evita espaço duplo) */
main.page-main .calendario-container {
  margin-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  :root {
    --footer-text-h: 48px;
    --skz-photo-h: min(32vh, 210px);
    --skz-scroll-pad: calc(var(--skz-photo-h) + var(--footer-text-h) + 10px);
  }

  body .skz-visual-footer .footer-bar {
    position: static !important;
    bottom: auto !important;
  }

  body .skz-visual-footer .skz-photo {
    position: fixed !important;
    bottom: var(--footer-text-h) !important;
  }
}

@media (max-width: 420px) {
  :root {
    --footer-text-h: 46px;
    --skz-photo-h: min(30vh, 190px);
    --skz-scroll-pad: calc(var(--skz-photo-h) + var(--footer-text-h) + 8px);
  }
}

@media (min-width: 1025px) {
  :root {
    --footer-text-h: 40px;
    --skz-photo-h: min(28vh, 240px);
    --skz-scroll-pad: calc(var(--skz-photo-h) + var(--footer-text-h) + 20px);
  }

  body .skz-visual-footer .skz-photo {
    max-width: min(50vw, 480px) !important;
  }
}

/* Foto do rodapé desligada no admin (chave rodape · titulo inativo) */
html.skz-footer-no-photo {
  --skz-photo-h: 0px !important;
  --skz-scroll-pad: calc(var(--footer-text-h) + 12px) !important;
}

html.skz-footer-no-photo body .skz-visual-footer .skz-photo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
}

@media (max-width: 1024px) {
  html.skz-footer-no-photo {
    --skz-scroll-pad: calc(var(--footer-text-h) + 10px) !important;
  }
}

@media (max-width: 420px) {
  html.skz-footer-no-photo {
    --skz-scroll-pad: calc(var(--footer-text-h) + 8px) !important;
  }
}

@media (min-width: 1025px) {
  html.skz-footer-no-photo {
    --skz-scroll-pad: calc(var(--footer-text-h) + 20px) !important;
  }
}

.demo-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffc107;
  font-size: 0.9rem;
  text-align: center;
}

/* Missões — resumo lado a lado */
.missoes-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

.missoes-resumo .card {
  margin: 0;
}

.card.missoes-hoje {
  margin-top: 20px;
}

@media (max-width: 640px) {
  .missoes-resumo {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Missões — recompensa (estilos do missions-v9, ausentes no site.css) */
.reward-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 12px auto 0;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
}

.reward-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#rewardModal .reward-modal-content {
  width: 100%;
  max-width: 340px;
  padding: 24px 20px 20px;
  text-align: center;
  background: #111;
  color: #fff;
}

#rewardModal .close {
  position: absolute;
  top: 10px;
  right: 12px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #fff;
  z-index: 2;
}

#rewardModal #rewardTitle {
  margin: 0 0 12px;
  font-family: 'Poiret One', sans-serif;
  font-size: 1.4rem;
  color: var(--amarelo);
}

/* Photocard retrato (~55×85 mm) */
.reward-card {
  position: relative;
  width: min(260px, 78vw);
  margin: 15px auto;
  aspect-ratio: 55 / 85;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.reward-card .reward-logo {
  width: 58%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.reward-card .reward-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: none;
}

.reward-card.revealed {
  background: #fff;
  padding: 0;
}

.reward-card.revealed .reward-photo {
  display: block;
  animation: rewardFadeIn 0.5s ease forwards;
}

@keyframes rewardFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#rewardModal .reward-modal-back {
  margin-top: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* Calendário — bolinhas fixas (sobrescreve site.css em cache no deploy) */
.calendar-card .day {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.calendar-card .day-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  max-width: 100%;
}

.calendar-card .day-num {
  font-size: clamp(0.85rem, 2.8vw, 1.05rem);
  line-height: 1;
  font-weight: 600;
  flex-shrink: 0;
}

.calendar-card .dots {
  position: static;
  transform: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
  margin-top: 0;
  flex-shrink: 0;
  font-size: inherit;
}

.calendar-card .cal-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.calendar-card .cal-event-dot-more {
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 700;
  color: #666;
}

.calendar-card .day.today,
.calendar-card .day.today.has-event {
  background: var(--azul);
  color: #fff;
}

.calendar-card .day.today .day-num {
  color: #fff;
}

.calendar-card .day.today.has-event {
  box-shadow: inset 0 0 0 2px rgba(249, 212, 35, 0.9);
}

.calendar-card .day.today:hover,
.calendar-card .day.today.has-event:hover {
  background: var(--azul);
  color: #fff;
}

.calendar-card .day.today .cal-event-dot-more {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 720px) {
  .calendar-card .weekdays,
  .calendar-card .days {
    gap: 4px;
  }

  .calendar-card .day {
    padding: 3px;
  }

  .calendar-card .day-body {
    gap: 2px;
  }

  .calendar-card .cal-event-dot {
    width: 4px;
    height: 4px;
  }

  .calendar-card .dots {
    gap: 1px;
  }
}

@media (max-width: 420px) {
  .calendar-card .cal-event-dot {
    width: 3px;
    height: 3px;
  }

  .calendar-card .day-num {
    font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  }
}