/* ==========================================================================
   Celeiro do MS - layout
   Container, cabecalho, menu, rodape e grades.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e4);
}

.pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.conteudo {
  flex: 1;
}

/* ------------------------------------------------------------ cabecalho -- */

.cabecalho {
  background: var(--branco);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 84px;
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo horizontal, 300x98 no arquivo. Fixamos a altura e deixamos a largura
   seguir a proporcao; no celular a largura manda, para nao empurrar o botao
   do menu para fora da tela. */
.cabecalho__logo {
  height: 60px;
  width: auto;
  max-width: min(184px, 54vw);
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 600px) {
  .cabecalho__logo { height: 48px; }
  .cabecalho__interno { min-height: 68px; }
}

/* ----------------------------------------------------------------- menu -- */

.menu {
  display: flex;
  align-items: center;
  gap: var(--e1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__link {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap;
}

.menu__icone {
  flex: 0 0 auto;
  opacity: 0.75;
}

.menu__link[aria-current="page"] .menu__icone { opacity: 1; }

/* Divisoria entre os itens no desktop, discreta. */
.menu > li + li { border-left: 1px solid var(--borda); padding-left: var(--e1); }
.menu > li.menu__item--login { border-left: 0; }

@media (max-width: 900px) {
  .menu > li + li { border-left: 0; padding-left: 0; }
}

.menu__link:hover {
  background: var(--fundo-medio);
  color: var(--verde);
}

/* aria-current marca a pagina atual: o estilo segue o atributo, e nao uma
   classe paralela, para nunca haver visual e semantica em desacordo. */
.menu__link[aria-current="page"] {
  background: var(--fundo-forte);
  color: var(--verde-escuro);
}

/* Botao hamburger. Some no desktop. */
.menu-botao {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  cursor: pointer;
  color: var(--verde-escuro);
}

/* Os tres tracos: o do meio e o elemento, os outros dois sao pseudo. */
.menu-botao__traco,
.menu-botao__traco::before,
.menu-botao__traco::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-botao__traco { top: 50%; margin-top: -1px; }
.menu-botao__traco::before { content: ""; margin-left: -10px; top: -6px; }
.menu-botao__traco::after  { content: ""; margin-left: -10px; top:  6px; }

/* Aberto vira X: mostra que o mesmo botao fecha. */
.menu-botao[aria-expanded="true"] .menu-botao__traco { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__traco::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__traco::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-botao { display: block; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    padding: var(--e2);
    box-shadow: var(--sombra-md);
  }

  /* Estado explicito nos dois sentidos, e nao "escondido quando falta o
     atributo": depender da ausencia deixa o menu aberto se qualquer regra
     posterior redefinir display, que foi o que aconteceu. */
  .menu[data-aberto="nao"] { display: none; }
  .menu[data-aberto="sim"] { display: flex; }

  .menu__link {
    padding: var(--e3);
    border-bottom: 1px solid var(--borda);
  }

  /* O ultimo item nao precisa de divisoria: a borda do menu ja fecha. */
  .menu > li:last-child > .menu__link { border-bottom: 0; }
}

/* --------------------------------------------------------------- secao -- */

.secao {
  padding-block: var(--e7);
}

@media (max-width: 640px) {
  /* A hero comeca logo abaixo da faixa da marca: 3rem de respiro ali
     empurravam o titulo para fora da primeira tela do celular. */
  .heroi-secao { padding-top: var(--e5); }
}

.secao--medio  { background: var(--fundo-medio); }
.secao--branco { background: var(--branco); }

/* O botao que fecha uma secao ("Ver todas as materias"). No desktop ele
   acompanha o alinhamento do texto; no celular fica centralizado, porque
   sozinho e encostado na margem esquerda ele parece solto. */
.secao__acao {
  margin: var(--e6) 0 0;
}

@media (max-width: 640px) {
  .secao__acao { text-align: center; margin-top: var(--e5); }

  /* Menos ar embaixo do botao: no celular o rodape vem logo em seguida, e o
     respiro de 3rem da secao virava um vazio no meio da rolagem. */
  .secao--noticias { padding-bottom: var(--e5); }
}

.secao__cabecalho {
  margin-bottom: var(--e5);
  max-width: 62ch;
}

.secao__titulo {
  margin-bottom: var(--e2);
}

.secao__apoio {
  color: var(--texto-suave);
  margin: 0;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------- grade -- */

.grade {
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.grade--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* -------------------------------------------------------------- rodape -- */

.rodape {
  background: var(--verde-rodape);
  color: #e8f5ee;
  /* Rodape compacto: o conteudo do site termina acima dele, e o rodape e
     navegacao de apoio, nao uma secao. */
  padding-block: var(--e5) var(--e3);
  margin-top: var(--e6);
  font-size: 0.92rem;
  line-height: 1.45;
}

.rodape a {
  color: #ffffff;
  text-decoration: none;
}

.rodape a:hover { text-decoration: underline; }

.rodape__grade {
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-bottom: var(--e4);
  align-items: start;
  /* Colunas centralizadas no bloco: em tela larga elas param de encostar nas
     bordas e o rodape ganha eixo com o resto do site. */
  justify-items: center;
  text-align: center;
}

.rodape__grade > div { max-width: 260px; }

.rodape__marca { margin-inline: auto; }
.rodape__redes { justify-content: center; }
.rodape__lista { padding: 0; }

/* O logo-footer ja vem com o fundo verde escuro do rodape, e o texto dele e
   branco. A placa clara que existia aqui antes servia para esconder o fundo
   branco do logo antigo: agora ela so criaria um retangulo no meio do
   rodape. */
.rodape__marca {
  display: inline-block;
  margin-bottom: var(--e3);
  line-height: 0;
}

.rodape__logo {
  width: 190px;
  height: auto;
  display: block;
}

.rodape__titulo {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amarelo);
  margin-bottom: var(--e2);
}

.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape__lista li { margin-bottom: 0.2rem; }

.rodape__fim {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--e3);
  font-size: 0.82rem;
  color: #c9e4d6;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  justify-content: center;
  text-align: center;
}

/* --------------------------------------------------------- migalhas ----- */

.migalhas {
  padding-block: var(--e3);
  font-size: 0.88rem;
  color: var(--texto-suave);
}

.migalhas ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: 0;
}

.migalhas li::after {
  content: "/";
  margin-left: var(--e2);
  color: var(--texto-claro);
}

.migalhas li:last-child::after { content: ""; }

/* ==========================================================================
   Submenu do topo
   Um nivel apenas, como a especificacao pede.
   ========================================================================== */

.menu__item { position: relative; }

.submenu {
  list-style: none;
  margin: 0;
  padding: var(--e2);
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  z-index: 60;

  /* Escondido por opacidade e visibilidade, nao por display:none: assim a
     transicao funciona e o item some da ordem de tabulacao ao mesmo tempo. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Abre no hover e tambem quando o foco entra no item: quem navega por
   teclado precisa alcancar o submenu sem mouse. */
@media (min-width: 901px) {
  .menu__item--tem-filhos:hover > .submenu,
  .menu__item--tem-filhos:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
  }
}

/* Seta indicando que ha submenu. */
.menu__item--tem-filhos > .menu__link::after {
  content: "";
  display: inline-block;
  margin-left: 0.4em;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.submenu__link {
  display: block;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.submenu-botao {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
}

.submenu-botao svg { transition: transform 0.2s ease; }
.submenu-botao[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu-botao[aria-expanded="true"] { color: var(--verde); }

.submenu__link:hover { background: var(--fundo-medio); color: var(--verde); }
.submenu__link[aria-current="page"] { background: var(--fundo-forte); color: var(--verde-escuro); }

@media (max-width: 900px) {
  /* No celular o submenu vira lista recuada, e abre so quando a pessoa toca
     na seta. Com 12 cidades, deixa-lo sempre aberto empurrava o resto do
     menu para fora da tela. */
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--e2) var(--e4);
    min-width: 0;
  }

  /* Estado explicito nos dois sentidos, como no menu principal. */
  .submenu[data-aberto="nao"] { display: none; }
  .submenu[data-aberto="sim"] { display: grid; }

  /* A seta do CSS sai: quem indica o submenu agora e o botao. */
  .menu__item--tem-filhos > .menu__link::after { display: none; }

  /* Rotulo e botao lado a lado, o botao encostado na direita. */
  .menu__item--tem-filhos {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .menu__item--tem-filhos > .submenu { grid-column: 1 / -1; }

  .submenu-botao { display: flex; }

  .submenu__link { padding: var(--e3); }
}

/* -------------------------------------------------------------- rodape --- */

.rodape__subitem { padding-left: var(--e3); font-size: 0.92rem; opacity: 0.85; }

.rodape__contato li { line-height: 1.5; }

.rodape__redes {
  list-style: none;
  margin: var(--e4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.rodape__redes li { margin: 0; }

/* Alvo de 40px: e o minimo confortavel para o dedo no celular. */
.rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}

.rede:hover {
  background: var(--amarelo);
  color: var(--verde-rodape);
  transform: translateY(-2px);
}

.icone-rede { display: block; }

/* ---------------------------------------------------------- rodape mobile */

@media (max-width: 720px) {
  /* Marca centralizada ocupando a largura toda, os dois blocos de links lado
     a lado, e o contato de novo em largura total. Quatro colunas empilhadas
     numa so deixavam o rodape longo demais para rolar. */
  .rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e5) var(--e4);
  }

  .rodape__col--marca {
    grid-column: 1 / -1;
    text-align: center;
  }

  .rodape__col--marca p { margin-inline: auto; }

  .rodape__col--contato {
    grid-column: 1 / -1;
  }

  .rodape__col--contato .rodape__redes { justify-content: flex-start; }

  .rodape__fim {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--e1);
  }
}

/* Grade de noticias da home: 3 colunas no desktop, 1 no celular, como a
   especificacao pede. Colunas fixas, e nao auto-fill: com 12 itens o
   auto-fill criaria 4 colunas em telas largas e quebraria o ritmo de
   3 x 4 linhas. */
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) { .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade--3 { grid-template-columns: 1fr; } }

/* Submenu com muitos itens (as 12 cidades) vira duas colunas: uma lista de
   12 linhas passaria da altura da tela em notebook. Ancorado a direita para
   nao vazar da janela quando o item esta no fim do menu. */
.submenu--largo {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0 var(--e2);
  min-width: 340px;
}

@media (max-width: 900px) {
  .submenu--largo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
}

/* ------------------------------------------------------------ login no menu */

.menu__item--login { margin-left: var(--e2); }

.menu__link--login {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: 1px solid var(--borda-forte);
  color: var(--verde-escuro);
}

.menu__link--login:hover {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}

/* No desktop o icone basta; o rotulo volta no celular, onde o menu e uma
   lista vertical e um icone solto ficaria sem contexto. */
@media (min-width: 901px) {
  .menu__rotulo-login {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .menu__item--login { margin: var(--e2) 0 0; }
  .menu__link--login { justify-content: center; }
}


/* ==========================================================================
   Voltar ao topo
   ========================================================================== */

.ao-topo {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  box-shadow: var(--sombra-md);
  text-decoration: none;

  /* Escondido ate o script marcar a pagina como rolada. Sem JavaScript ele
     nao aparece, e nada se perde: o botao e conveniencia, nao navegacao. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

body[data-rolou="sim"] .ao-topo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ao-topo:hover { background: var(--verde-escuro); color: #fff; }