/* =========================================================================
 * Topo mobile compacto (v2.0.11)
 * Só vale até 767px. No desktop (768px+) tudo continua como antes.
 * ====================================================================== */

/* Peças do mobile ficam escondidas no desktop */
.jii-mbar,
.jii-st-toggle,
.jii-canvas-mob-top,
.jii-canvas-cta {
  display: none;
}

@media (max-width: 767px) {
  /* ---------- Esconde o topo antigo no celular ---------- */
  .jii-hdr-desk {
    display: none !important;
  }

  /* ---------- Outdoor (Super Topo) acima da barra ---------- */
  .jii-super-topo-wrap {
    flex-direction: column;
    padding: 8px 10px 2px !important;
  }
  .jii-super-topo-wrap .jii-ad-zone--super-topo {
    position: relative;
  }
  /* Recolhido pelo leitor: some de vez (fica salvo no navegador) */
  .jii-super-topo-wrap.is-collapsed {
    display: none !important;
  }
  /* Linha do plugin: "Anúncio" à esquerda, "Anuncie aqui" à direita */
  .jii-super-topo-wrap .jii-st-labels {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    gap: 4px;
  }
  .jii-super-topo-wrap .jii-st-labels > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Setinha cinza discreta, centralizada, presa embaixo do banner */
  .jii-st-toggle {
    position: absolute;
    left: 50%;
    bottom: -2px;
    z-index: 2;
    width: 44px;
    height: 20px;
    margin-left: -22px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Fica na linha do "Anúncio · Anuncie aqui", entre os dois */
  .jii-ad-zone--super-topo .jii-st-toggle {
    bottom: 0;
    align-items: flex-end;
  }
  .jii-st-tab {
    width: 20px;
    height: 10px;
    border: 1px solid #cfcfcf;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: #fff;
    color: #9a9a9a;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jii-st-toggle:focus-visible .jii-st-tab {
    outline: 2px solid var(--color-primary, #bc000e);
    outline-offset: 1px;
  }

  .jii-ad-zone--super-topo .jii-st-toggle {
    display: flex;
  }

  /* ---------- Barra vermelha compacta ---------- */
  .jii-mbar {
    position: relative;
    z-index: 110;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 6px;
    background: var(--color-primary, #bc000e);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  }
  .jii-mbar-side {
    display: flex;
    align-items: center;
  }
  .jii-mbar-side--right {
    justify-content: flex-end;
  }
  .jii-mbar-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
  }
  /* O tema dá 98px de altura ao .jii-header-logo; na barra mobile são 44px */
  .jii-mbar .jii-mbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px !important;
    min-height: 0 !important;
    max-height: 44px !important;
    max-width: 160px;
    overflow: visible;
  }
  .jii-mbar-logo img,
  .jii-mbar-logo svg {
    height: 42px !important;
    max-height: 42px;
    width: auto !important;
    display: block;
  }
  .jii-mbar-disc {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Busca que desce da barra */
  .jii-mbar-search:not([hidden]) {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
    background: var(--color-primary, #bc000e);
  }
  .jii-mbar-search input,
  .jii-canvas-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 22px;
    font-size: 16px;
    background: #fff;
    color: #1a1a1a;
  }
  .jii-mbar-search button,
  .jii-canvas-search button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary, #bc000e);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  /* ---------- Menu lateral (Editorias) no celular ---------- */
  .jii-editorias-canvas {
    max-width: none !important;
    background-color: var(--color-primary, #bc000e) !important;
  }
  .jii-canvas-mob-top {
    display: block;
    margin-bottom: 8px;
  }
  .jii-canvas-date {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
  }
  .jii-canvas-search {
    display: flex;
    gap: 8px;
  }
  .jii-canvas-search input {
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
  }
  .jii-canvas-search input::placeholder {
    color: rgba(255, 255, 255, 0.85);
  }
  .jii-canvas-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .jii-canvas-pill {
    height: 46px;
    border-radius: 23px;
    background: #fff;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .jii-canvas-pill--red {
    color: var(--color-primary, #bc000e);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}