/* ==========================================================================
   ALFABETIZAÇÃO KIDS — Astra Theme Override v1.0.0
   Esconde header, footer, sidebar e título do tema Astra nas páginas do plugin
   e ajusta o layout para responsivo total (mobile / tablet / desktop)
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. ESCONDER ELEMENTOS DO ASTRA
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho (header) ─────────────────────────────────────────────────── */
.ak-page .site-header,
.ak-page #masthead,
.ak-page .ast-above-header-wrap,
.ak-page .ast-below-header-wrap,
.ak-page .ast-mobile-header-wrap,
.ak-page .main-header-bar,
.ak-page .main-header-bar-wrap,
.ak-page .ast-site-header-area,
.ak-page header.site-header,
.ak-page .astra-full-pc-header,
.ak-page .ast-primary-accessibility-ready {
  display: none !important;
}

/* ── Rodapé (footer) ────────────────────────────────────────────────────── */
.ak-page .site-footer,
.ak-page #colophon,
.ak-page .ast-small-footer,
.ak-page .ast-footer-widget-area,
.ak-page footer.site-footer,
.ak-page .footer-widget-area {
  display: none !important;
}

/* ── Título da página e breadcrumb ──────────────────────────────────────── */
.ak-page .entry-title,
.ak-page .ast-breadcrumbs-wrap,
.ak-page .ast-breadcrumbs-wrapper,
.ak-page nav.ast-breadcrumbs,
.ak-page .ast-above-post-title,
.ak-page .entry-header,
.ak-page .ast-single-post-title,
.ak-page .woocommerce-breadcrumb {
  display: none !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.ak-page .secondary,
.ak-page #secondary,
.ak-page .widget-area,
.ak-page aside.secondary {
  display: none !important;
}

/* ── Barra de busca flutuante / admin toolbar (quando desnecessária) ────── */
.ak-page #wpadminbar ~ .ak-app {
  padding-top: 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. RESETAR LAYOUT DO ASTRA
   ══════════════════════════════════════════════════════════════════════════ */

/* Remove padding/margin injetados pelo tema */
.ak-page,
.ak-page body,
.ak-page .ast-container,
.ak-page .ast-columns-gap,
.ak-page .site,
.ak-page #page,
.ak-page .ast-single,
.ak-page .ast-article-single,
.ak-page .entry-content-wrap {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove container do conteúdo principal */
.ak-page .content-area,
.ak-page #primary,
.ak-page .site-content,
.ak-page #content,
.ak-page .ast-container > .ast-row,
.ak-page .hfeed.site {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove margens do article/entry */
.ak-page article,
.ak-page .hentry,
.ak-page .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Garante que a .ak-app ocupa a tela toda */
.ak-page .ak-app {
  width: 100vw;
  min-height: 100dvh;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow-x: hidden;
}

/* Remove fundo branco padrão do body que conflita */
.ak-page.ast-page-builder-template body,
.ak-page body {
  background: #FFFBF0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. RESPONSIVO — MOBILE (até 480px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Header interno do plugin */
  .ak-header {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .ak-logo {
    font-size: 18px;
    flex-shrink: 0;
  }
  .ak-nav {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ak-nav::-webkit-scrollbar { display: none; }
  .ak-nav-btn {
    font-size: 11px;
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hero */
  .ak-hero {
    padding: 40px 14px 48px;
  }
  .ak-hero-emoji { font-size: 58px; }
  .ak-hero h1   { font-size: 30px; }
  .ak-hero p    { font-size: 14px; }

  /* Seções */
  .ak-section {
    padding: 40px 14px;
  }
  .ak-section-title { font-size: 24px; }

  /* Seletor de idade */
  .ak-age-grid {
    gap: 10px;
  }
  .ak-age-btn {
    width: 62px;
    height: 62px;
  }
  .ak-age-btn .num { font-size: 26px; }
  .ak-age-btn .lbl { font-size: 8px;  }

  /* Cards dos níveis */
  .ak-game-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Jogo — imagem */
  .ak-image-emoji { font-size: 72px; }
  .ak-image-box   { padding: 24px 14px 18px; }

  /* Slots e sílabas */
  .ak-slot,
  .ak-syl-btn {
    min-width: 56px;
    height: 56px;
    font-size: 16px;
    border-radius: 10px;
  }
  .ak-slots        { gap: 8px;  }
  .ak-syllable-bank { gap: 8px; padding: 16px 10px; }

  /* Botões de ação */
  .ak-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ak-actions .ak-btn {
    width: 100%;
    font-size: 15px;
    padding: 14px 20px;
  }

  /* Overlay / card de sucesso */
  .ak-success-card {
    padding: 28px 18px;
    border-radius: 24px;
  }
  .ak-success-card .s-emoji  { font-size: 60px; }
  .ak-success-card .s-title  { font-size: 28px; }
  .ak-success-card .s-word   { font-size: 28px; letter-spacing: 3px; }
  .ak-stars-row { font-size: 32px; gap: 6px; }

  /* Resultado final */
  .ak-results-view   { padding: 36px 14px; }
  .ak-trophy-big     { font-size: 64px; }
  .ak-big-number     { font-size: 48px; }
  .ak-score-label    { font-size: 15px; }
  .ak-result-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ak-result-actions .ak-btn { width: 100%; }

  /* Rodapé */
  .ak-footer         { padding: 36px 14px 20px; }
  .ak-footer-logo    { font-size: 24px; }
  .ak-footer-links   { gap: 12px; }
  .ak-footer-links a { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. RESPONSIVO — TABLET (481px a 768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {

  .ak-header { padding: 12px 20px; }
  .ak-logo   { font-size: 22px; }
  .ak-nav-btn { font-size: 13px; padding: 7px 15px; }

  .ak-hero { padding: 56px 22px 64px; }
  .ak-hero-emoji { font-size: 72px; }

  .ak-section { padding: 48px 22px; }

  /* Cards: 2 colunas */
  .ak-game-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ak-slot,
  .ak-syl-btn {
    min-width: 64px;
    height: 64px;
    font-size: 20px;
  }

  .ak-image-emoji { font-size: 88px; }

  .ak-age-btn { width: 72px; height: 72px; }
  .ak-age-btn .num { font-size: 30px; }

  .ak-results-view { padding: 48px 22px; }
  .ak-trophy-big   { font-size: 80px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVO — TABLET GRANDE / LAPTOP (769px a 1024px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  .ak-header { padding: 14px 32px; }

  .ak-hero { padding: 64px 32px 72px; }

  .ak-section { padding: 56px 32px; }

  /* Cards: 3 colunas se houver espaço */
  .ak-game-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ak-slot,
  .ak-syl-btn {
    min-width: 70px;
    height: 70px;
    font-size: 21px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVO — DESKTOP GRANDE (1025px+)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  .ak-header { padding: 14px 48px; }

  .ak-hero { padding: 80px 48px 90px; }

  .ak-section { padding: 72px 48px; }

  /* Cards: até 3 colunas centralizadas */
  .ak-game-cards {
    grid-template-columns: repeat(3, minmax(260px, 340px)) !important;
    justify-content: center;
  }

  .ak-slot,
  .ak-syl-btn {
    min-width: 78px;
    height: 78px;
    font-size: 23px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. AJUSTES DE ACESSIBILIDADE E TOUCH
   ══════════════════════════════════════════════════════════════════════════ */

/* Área de toque mínima para crianças (44×44 px) */
.ak-syl-btn,
.ak-slot,
.ak-btn,
.ak-age-btn,
.ak-nav-btn {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Foco visível para teclado/leitor de tela */
.ak-syl-btn:focus-visible,
.ak-slot:focus-visible,
.ak-btn:focus-visible,
.ak-age-btn:focus-visible {
  outline: 3px solid var(--ak-orange);
  outline-offset: 3px;
}

/* Impede seleção de texto acidental durante o jogo */
.ak-app {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Smooth scroll interno */
.ak-app {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. MODO ALTO CONTRASTE (preferência do sistema)
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
  .ak-slot  { border: 4px dashed #000; }
  .ak-slot.ak-filled { border: 4px solid #000; background: #E0F7F6; }
  .ak-syl-btn { border: 3px solid #000; }
  .ak-btn-primary { background: #C0440A; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. PRINT
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  .ak-header, .ak-footer, .ak-overlay,
  .ak-actions, .ak-syllable-bank { display: none !important; }
  .ak-app { background: #fff; color: #000; }
}