/* Ajustes de responsividade para telas pequenas.
   As páginas .dc.html usam estilos inline (sem classes), então aqui a gente
   mira nas tags semânticas reais (nav, section, h1/h2/h3) e em seletores de
   atributo bem específicos pra sobrescrever esses estilos inline com
   !important — não tem como usar especificidade normal contra style="". */

@media (max-width: 760px) {
  /* --- navegação do cabeçalho: para de vazar pra fora da tela e passa a quebrar linha ---
     O runtime das páginas (support.js) re-serializa style="..." como objeto
     React e o navegador devolve isso como "position: sticky;" (COM espaço
     depois dos dois-pontos) — por isso os seletores abaixo casam só pelo
     nome/valor da propriedade, nunca por "propriedade:valor" colado, senão
     nunca dão match. [style*="sticky"] é único pro wrapper do cabeçalho em
     cada página; o filho direto é a linha flex que contém logo + nav. */
  [style*="sticky"] > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 4px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* nav vira block com links inline-block: quebra como texto normal,
     sem a ambiguidade de flex-basis percentual em containers aninhados. */
  [style*="sticky"] nav {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    font-size: 11px !important;
  }
  [style*="sticky"] nav a {
    display: inline-block !important;
    margin: 4px 6px !important;
  }

  /* --- qualquer grid de várias colunas empilha em 1 coluna --- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- cards de unidade (unidades.dc.html) — a coluna larga do auto-fill não cabe --- */
  [style*="minmax(360px"] {
    grid-template-columns: 1fr !important;
  }

  /* --- logo grande centralizada nas páginas de unidade: um pouco menor no mobile
     (o seletor usa o alt, não o style, porque texto de atributo normal não sofre
     a reformatação de espaçamento que os valores de style="" sofrem) --- */
  img[alt="Noquinha Pizza Delivery"] {
    max-height: 64px !important;
  }

  /* --- títulos grandes: o piso do clamp() (pensado pra desktop) ainda é
     largo demais pra uma tela de ~340px úteis e estoura a linha mesmo
     quebrando por espaço — reduz o piso e garante quebra de palavra também. */
  h1 {
    font-size: 18px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  h2, h3 {
    font-size: 24px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}