/*
 * mobile.css — SpiceWorld2019 Theme
 * Versão mobile responsiva para spicegirlsforeverbrasil.com.br
 *
 * Como usar: adicione este arquivo no functions.php do tema:
 *   wp_enqueue_style('spiceworld-mobile', get_template_directory_uri() . '/mobile.css', array(), '1.0', 'all');
 *
 * Ou importe no style.css:
 *   @import url('mobile.css');
 *
 * Breakpoints usados:
 *   max-width: 768px  → tablets e celulares
 *   max-width: 480px  → celulares pequenos
 *   max-width: 360px  → celulares muito pequenos
 */

/* ============================================================
   VIEWPORT & BASE
   ============================================================ */
@media screen and (max-width: 768px) {

  /* Garante que o body não crie scroll horizontal */
  html, body {
    overflow-x: hidden;
    width: 100%;
    padding: 0 !important;
  }

  body {
    border-top: 3px solid #333;
    background-attachment: scroll !important;
  }

  /* Wrapper principal */
  #page, .inner-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ============================================================
     HEADER
     ============================================================ */

  /* Imagem do header — escala para a tela */
  .masonry-brick-header-image img,
  .site-header img,
  header img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Barra de loja no header — esconde em mobile (imagem com mapa é inutilizável em touch) */
  header center {
    overflow: hidden;
  }

  header center img[usemap] {
    display: none !important;
  }

  /* ============================================================
     MENU PRINCIPAL (#menu3)
     ============================================================ */

  #menu3 {
    width: 100% !important;
    overflow: hidden;
    position: relative;
  }

  /* Menu horizontal vira hamburguer / scroll horizontal */
  #menu3 ul {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
     background-image: none !important;
  }

  #menu3 ul::-webkit-scrollbar {
    display: none;
  }

  #menu3 ul li {
    flex: 0 0 auto;
    float: none !important;
  }

  /* Links do menu */
  #menu3 ul li a {
    width: auto !important;
    min-width: 70px;
    padding: 10px 12px 6px !important;
    font-size: 13pt !important;
    text-align: center;
  }

  /* Subtítulo colorido — sempre visível em mobile */
  #menu3 ul li a span.text {
    visibility: visible !important;
    font-size: 9px !important;
    line-height: 1.4em !important;
    text-align: center;
    padding: 2px !important;
    margin-top: -8px !important;
  }

  /* ============================================================
     LAYOUT PRINCIPAL — GRID
     ============================================================ */

  /* Coluna de conteúdo e sidebar: empilha verticalmente */
  #primary, #secondary,
  .side {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Site content */
  #content .inner-wrap {
    display: flex;
    flex-direction: column;
  }

  /* ============================================================
     POSTS / CARDS (.masonry-content)
     ============================================================ */

  .masonry-content {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box;
  }

  /* Post de destaque */
  .category-destaque {
    width: 100% !important;
    box-sizing: border-box;
  }

  .category-destaque .thumb {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover;
    margin-top: 0 !important;
  }

  .category-destaque .titulo {
    font-size: 11pt !important;
    padding: 8px !important;
    margin-top: -16px !important;
  }

  .category-destaque .data {
    margin-top: 0 !important;
  }

  /* Post de notícias */
  .category-noticias {
    width: 100% !important;
    box-sizing: border-box;
  }

  .category-noticias .thumb {
    width: 100px !important;
    height: 90px !important;
  }

  .category-noticias .titulo {
    margin-left: 110px !important;
    font-size: 11pt !important;
  }

  /* Galeria */
  .category-galeria {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .category-galeria .thumb {
    height: auto !important;
    margin-top: 0 !important;
  }

  .category-galeria .titulo {
    font-size: 11pt !important;
    margin-top: -20px;
  }

  /* ============================================================
     POST ÚNICO (.contsingle)
     ============================================================ */

  .contsingle {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  .contsingle .titulo {
    width: 100% !important;
    font-size: 14pt !important;
    position: relative !important;
    margin: 10px 0 !important;
  }

  .contsingle .data {
    position: relative !important;
    margin: 0 0 10px 0 !important;
    width: auto !important;
    padding: 5px !important;
  }

  .contsingle .linha {
    width: 100% !important;
  }

  /* Redes sociais no post */
  .social {
    position: relative !important;
    margin: 10px 0 !important;
    float: none !important;
  }

  /* ============================================================
     RELATED POSTS (.relacionados)
     ============================================================ */

  .relacionados {
    width: 100% !important;
    box-sizing: border-box;
  }

  .relacionados ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  .relacionados ul li {
    display: block !important;
    float: none !important;
    margin-bottom: 8px;
  }

  .relacionados img {
    width: 100% !important;
    height: auto !important;
    max-height: 180px;
    object-fit: cover;
  }

  .relacionados .noticia {
    margin-left: 0 !important;
    margin-top: 5px !important;
  }

  /* ============================================================
     PÁGINA DE CONTEÚDO (.contpage / .continfo)
     ============================================================ */

  .contpage, .continfo {
    width: 100% !important;
    margin-top: 10px !important;
    box-sizing: border-box;
  }

  .contpage .titulo, .continfo .titulo {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    font-size: 13pt !important;
  }

  .continfo .infoesquerda,
  .continfo .infodireita {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }

  .continfo ul {
    padding: 5px !important;
    margin: 5px !important;
  }

  .continfo li {
    float: none !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  .continfo .box {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* ============================================================
     DISCOGRAFIA (.dist / .div-esquerda / .div-direita)
     ============================================================ */

  .dist {
    width: 100% !important;
    position: relative !important;
  }

  .div-esquerda, .div-direita {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* ============================================================
     TRADUÇÕES / ARTIGOS (colunas duplas)
     ============================================================ */

  .traducaoesquerda, .traducaodireita,
  .artigoesquerda, .artigodireita {
    width: 100% !important;
    float: none !important;
    display: block;
  }

  /* ============================================================
     SIDEBAR (.side)
     ============================================================ */

  .side {
    width: 100% !important;
    float: none !important;
    padding: 0 5px !important;
    box-sizing: border-box;
  }

  .side .bar,
  .side .bar-sem,
  .side .loja,
  .side .facebook,
  .side .twitter,
  .side .bar-agenda {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    float: none !important;
    box-sizing: border-box;
  }

  .side .linha {
    width: 100% !important;
  }

  .side h1 {
    font-size: 18pt !important;
  }

  /* Imagens do sidebar com usemap — esconde (inutilizável em touch) */
  .side img[usemap] {
    display: none !important;
  }

  /* Box de atualizações */
  .side .atualizacoes ul li {
    width: 100% !important;
    display: block !important;
  }

  /* Agenda */
  .agenda {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Loja sidebar — botão */
  .side .loja .btn-loja {
    width: 100% !important;
    margin: 10px 0 !important;
  }

  /* ============================================================
     MENU INFO
     ============================================================ */

  .titulo-menu, .conteudo-menu {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ============================================================
     CLIPES / TABS
     ============================================================ */

  .clipes ul {
    display: flex;
    flex-wrap: wrap;
  }

  .clipes ul li {
    display: inline-block;
    margin: 2px;
  }

  /* ============================================================
     BREADCRUMB
     ============================================================ */

  .breadcrumb, .breadcrumbs-area {
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box;
    font-size: 9pt !important;
  }

  /* ============================================================
     FOOTER
     ============================================================ */

  .instagram {
    width: 100% !important;
    padding: 10px !important;
    margin-top: 0 !important;
  }

  .instagram .titulo {
    font-size: 16px !important;
    float: none !important;
    margin-top: 0 !important;
    display: block;
    text-align: center;
  }

  .fotr {
    font-size: 10px !important;
    padding: 10px !important;
  }

  /* Scroll to top */
  a#scroll-up {
    bottom: 15px;
    right: 15px;
  }

  a#scroll-up i {
    font-size: 26px !important;
    padding: 6px !important;
  }

  /* ============================================================
     IMAGENS GENÉRICAS — RESPONSIVAS
     ============================================================ */

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Thumbnail do header e imagens alinhadas */
  .img-header {
    margin: 0 !important;
    width: 100% !important;
  }

  .alignleft, .alignright {
    float: none !important;
    display: block;
    margin: 0 auto 16px !important;
  }

  /* ============================================================
     TABELAS RESPONSIVAS
     ============================================================ */

  .table-multimidia,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }

  /* ============================================================
     VÍDEOS / iframes responsivos
     ============================================================ */

  iframe, embed, object {
    max-width: 100% !important;
  }

  /* ============================================================
     PAGINAÇÃO
     ============================================================ */

  #pagination {
    width: 100% !important;
    text-align: center;
    padding: 10px 0;
  }

  .page-numbers {
    padding: 8px !important;
    font-size: 11pt !important;
    margin: 2px !important;
  }

} /* fim @media 768px */


/* ============================================================
   CELULARES PEQUENOS (max-width: 480px)
   ============================================================ */
@media screen and (max-width: 480px) {

  #menu3 ul li a {
    font-size: 11pt !important;
    min-width: 60px;
    padding: 8px 8px 4px !important;
  }

  #menu3 ul li a span.text {
    font-size: 8px !important;
  }

  .category-destaque .thumb {
    height: 180px !important;
  }

  .category-noticias .thumb {
    width: 80px !important;
    height: 75px !important;
  }

  .category-noticias .titulo {
    margin-left: 90px !important;
    font-size: 10pt !important;
  }

  .contsingle .titulo {
    font-size: 12pt !important;
  }

  .side h1 {
    font-size: 16pt !important;
  }

  .agenda .dia {
    width: 45px !important;
    font-size: 13pt !important;
  }

  .page-numbers {
    padding: 6px !important;
    font-size: 10pt !important;
  }

  .breadcrumb, .breadcrumbs-area {
    font-size: 8pt !important;
  }

  /* Menu Info compacto */
  .menu-info ul li a {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

} /* fim @media 480px */


/* ============================================================
   CELULARES MUITO PEQUENOS (max-width: 360px)
   ============================================================ */
@media screen and (max-width: 360px) {

  #menu3 ul li a {
    font-size: 10pt !important;
    min-width: 55px;
    padding: 7px 6px 3px !important;
  }

  .category-destaque .thumb {
    height: 150px !important;
  }

  .category-noticias .thumb {
    width: 70px !important;
    height: 65px !important;
  }

  .category-noticias .titulo {
    margin-left: 80px !important;
    font-size: 9pt !important;
    line-height: 13pt !important;
  }

  .side h1 {
    font-size: 14pt !important;
  }

  .page-numbers {
    padding: 5px 7px !important;
    font-size: 9pt !important;
  }

} /* fim @media 360px */