/* ==========================================================================
   BASE — o que vale em TODA pagina
   --------------------------------------------------------------------------
   Carregado pelo header.php logo depois do style.min.css, antes dos CSS de
   secao. Guarda os tokens de cor/raio e as correcoes de alinhamento das
   partes comuns (header, newsletter, rodape), que antes so eram acertadas
   dentro do CSS de uma pagina — e por isso mudavam de pagina para pagina.
   Breakpoints do tema: 1220 / 970 / 680.
   ========================================================================== */

:root {
  /* mesmos valores de polimento.css, que so carrega na pagina de hotel */
  --border: #E2E6EA;
  --surface: #F6F8FA;
  --surface-blue: #EEF4F9;
  --radius-card: 8px;
}

/* ==========================================================================
   HEADER (tarefa #26)
   Logo a esquerda; a direita, nesta ordem, os botoes de conta (somente
   >=1221px, como sempre), o botao Reservar e o hamburguer. O hamburguer
   continua abrindo o MESMO #sidebar de sempre (footer.php) — so mudou de
   lado (era a esquerda) e agora tambem carrega o seletor de idioma junto
   com os links do menu. Vale em QUALQUER largura de tela: nao existe mais
   um menu horizontal separado so para desktop.

   Altura do header: 70px -> 56px (pedido do cliente, 27/07). O body usa
   padding-top pra compensar o header fixo — os dois precisam mudar juntos.
   ========================================================================== */

#header { height: 56px; }
body { padding-top: 56px; }

/* height:100% sozinho centraliza em relacao aos 56px inteiros do #header —
   mas o topo tem 5px da faixa amarela (#header::before, absolute, nao entra
   no fluxo) sobrepondo o azul, entao a faixa "azul" visivel e so os 51px de
   baixo. Sem descontar isso, logo/botoes ficavam centralizados alto demais
   (no meio dos 56px, nao no meio dos 51px azuis). */
#header .qs-header-inner {
  display: flex; align-items: center; gap: 16px;
  height: calc(100% - 5px); margin-top: 5px;
}

#header span.logo { position: static; top: auto; left: auto; transform: none; }
#header span.logo img { width: 150px; }

#header .qs-header-right {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
}

/* botoes de conta ("Entrar"/"Cadastre-se" ou "Ola, Fulano"): saem do canto
   absoluto (conta.css) e entram na fila com o resto do header. O "div." na
   frente da classe da mais especificidade que o ".qs-conta-header" simples
   de conta.css, que carrega depois. Continuam escondidos abaixo de 1220px
   (regra ja existente em conta.css, intocada). */
#header div.qs-conta-header {
  position: static; top: auto; right: auto; transform: none;
}
#header div.qs-conta-header .qs-conta-chip,
#header div.qs-conta-header .qs-conta-sair { line-height: 1.2; }

#header .qs-header-reservar-bt {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 20px; border-radius: 18px;
  background: var(--yellow); color: var(--darkblue);
  font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: background .2s ease;
}
#header .qs-header-reservar-bt:hover { background: #ffc46a; }

/* hamburguer: mesma animacao de sempre (3 barras -> X), so que menor e
   sem o position:absolute do layout antigo (agora e so mais um item da
   fila flex). Os "top" das barras internas foram recalculados pro novo
   tamanho de 22x15 (era 30x20) — nao dá pra so encolher width/height sem
   reajustar, senao as 3 barras saem da caixa ou ficam desalinhadas. */
#header b {
  position: relative; top: auto; left: auto; transform: none;
  flex: 0 0 auto; width: 22px; height: 15px; margin: 0; border-top-width: 2px;
}
#header b::before { top: 4px; height: 2px; }
#header b::after  { top: 10px; height: 2px; }
#header b.on::before,
#header b.on::after { top: 6px; }

/* ==========================================================================
   MENU PRINCIPAL DENTRO DO HAMBURGUER (#sidebar, footer.php)
   O idioma agora e so mais um item desse mesmo menu deslizante — uma
   pequena separacao visual marca onde os links de navegacao terminam e o
   idioma comeca.
   ========================================================================== */

#sidebar li.qs-sidebar-lang-item:first-of-type { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.18); }
#sidebar li.qs-sidebar-lang-item a { color: rgba(255,255,255,.8); font-size: 15px; }

/* ==========================================================================
   NEWSLETTER
   header e section eram dois floats de 40%/60% com padding-left proprio, o
   que jogava o texto para dentro da faixa amarela sem acompanhar o
   container de 1220px do resto do site. Agora e uma linha flex dentro do
   proprio container, alinhada com as secoes de cima.
   ========================================================================== */

#newsletter { padding: 34px 0px; }

#newsletter .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* a variante .alt (faixa azul sobreposta ao hero do blog) tinha o container
   como inline-block de 1220px sem padding lateral: com os floats desfeitos,
   o texto encostava na borda da faixa */
#newsletter.alt .container {
  display: flex;
  width: 1220px;
  max-width: 100%;
  margin: 0px auto;
  padding: 28px 40px;
}

#newsletter header,
body.single-hotel #newsletter header {
  float: none;
  width: auto;
  max-width: 420px;
  padding-left: 0px;
}

#newsletter section,
body.single-hotel #newsletter section {
  float: none;
  flex: 0 1 620px;
  width: auto;
  padding: 0px !important;
}

#newsletter section form fieldset { display: flex; }

#newsletter section form label:first-child { flex: 1 1 auto; min-width: 0px; }
#newsletter section form label:last-child  { flex: 0 0 160px; }

#newsletter section form input[type=email],
body.single-hotel #newsletter section form input[type=email] {
  float: none;
  width: 100%;
}

#newsletter section form input[type=submit] {
  float: none;
  width: 100%;
  cursor: pointer;
}

#newsletter section form input[type=submit]:hover { background-color: var(--darkblue); }

@media (max-width: 970px) {
  #newsletter .container { flex-direction: column; align-items: stretch; gap: 18px; }
  #newsletter header, body.single-hotel #newsletter header { max-width: none; }
  #newsletter section, body.single-hotel #newsletter section { flex: 1 1 auto; }
}

/* mensagem de sucesso/erro do formulario (tarefa #16 — assets/js/newsletter.js) */
.qs-newsletter-msg {
  margin-top: 10px; font: 700 12px 'Montserrat', sans-serif; color: var(--darkblue);
}
.qs-newsletter-msg.qs-newsletter-erro { color: #c0392b; }

@media (max-width: 680px) {
  #newsletter.alt .container { padding: 22px 20px; }
  #newsletter section form fieldset { flex-direction: column; gap: 10px; }
  #newsletter section form label:last-child { flex: 1 1 auto; }
  #newsletter section form input[type=email] { border-radius: 5px; }
  #newsletter section form input[type=submit] { border-radius: 5px; }
}

/* ==========================================================================
   RODAPE
   As colunas eram floats de 21%/18% que somavam 99% e mudavam de largura
   conforme a pagina (o hotel escondia a primeira e sobrava um vao). Um grid
   com auto-fit distribui o que existir, em qualquer pagina, sempre alinhado
   ao container.
   ========================================================================== */

#footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 30px;
  align-items: start;
}

#footer .column,
#footer .column:nth-of-type(2),
#footer .column:nth-of-type(3),
body.single-hotel #footer .column { float: none; width: auto; }

/* o span era um float de 170px; sem o float ele volta a ser inline e
   ignora a largura, e o logo passava a ocupar a coluna inteira */
#footer .column span.logo { display: block; float: none; width: 170px; }

/* a lista de links e os enderecos tinham entrelinhas diferentes */
#footer .column nav ul li a,
#footer .column ul li a,
#footer .column span a { line-height: 1.5; }

#footer .column address { margin-top: 0px; }

@media (max-width: 970px) {
  #footer .container { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-gap: 24px; }
}

@media (max-width: 680px) {
  #footer .container { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   RODAPE INFERIOR (#bottom)
   O aviso de copyright e posicionado em absolute pelo centro; sem
   position no container ele se ancorava no <body>.
   ========================================================================== */

#bottom .container { position: relative; min-height: 24px; }

@media (max-width: 680px) {
  #bottom .container { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  #bottom .lang, #bottom .social { float: none; }
  #bottom .social li { margin: 0px 12px; }
  #bottom strong { position: static; transform: none; text-align: center; }
}