/*
 * Blocos de assinatura da Revista de Vinhos na homepage (o anúncio de casa) e o botão
 * Assinar do topo.
 *
 * Chamava-se publicidade-rv.css até 18/9/2026. Os bloqueadores de anúncios bloqueiam
 * ficheiros com "publicidade" no nome (EasyList Portuguese: /publicidade-), e quem os
 * usa via estes blocos só em texto. Nenhum ficheiro que não seja de anúncios pode ter
 * "publicidade" no nome.
 *
 *   ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ (risco amarelo)
 *   REVISTA DE VINHOS · DESDE 1989
 *   Há mais de trinta anos a provar,            ┌──────────────────┐
 *   a pontuar e a contar.                       │ Assinar a RV  →  │
 *   Título especializado em vinho e...          └──────────────────┘
 *
 * Duas peles: `--escuro` no verde da casa (#173D32) e `--claro` no creme
 * (#F3F1ED) com moldura verde. Alternam-se ao longo da página para as três
 * aparições não parecerem o mesmo banner três vezes.
 *
 * Título na serifa da revista (Plantin MT Pro, carregada em _styleguide.scss),
 * chapéu e botão em Montserrat. O risco amarelo é o mesmo #f8ed00 do selo da
 * pontuação e da barra de áudio — é o fio que liga as peças da marca.
 *
 * CSS à parte, sem compilar o tema (ver functions.php).
 */

.rv-casa {
  --rvc-verde: #173d32;
  --rvc-creme: #f3f1ed;
  /* Mesmo caso do rv-audio.css: era o amarelo da RV. (23/9/2026) */
  --rvc-amarelo: #00b1eb;

  position: relative;
  padding: 0;
  margin: 46px 0;
}

.rv-casa .rv-casa__caixa {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px 48px;
  padding: 40px 48px 38px;
  border-top: 3px solid var(--rvc-amarelo);
}

/* ── Pele escura ─────────────────────────────────────────────────── */
.rv-casa--escuro .rv-casa__caixa {
  background: var(--rvc-verde);
  color: var(--rvc-creme);
}
.rv-casa--escuro .rv-casa__chapeu { color: var(--rvc-amarelo); }
/* O título e a linha levam cor própria: o tema tem `p { color: var(--dark) }`,
   uma regra de elemento que vence a herança do contentor. Sem isto, o título
   saía verde-escuro sobre verde-escuro e ficava ilegível. */
.rv-casa--escuro .rv-casa__titulo { color: var(--rvc-creme); }
.rv-casa--escuro .rv-casa__linha  { color: rgba(243, 241, 237, 0.78); }
.rv-casa--escuro .rv-casa__botao {
  background: var(--rvc-creme);
  color: var(--rvc-verde);
  border: 2px solid var(--rvc-creme);
}
.rv-casa--escuro .rv-casa__botao:hover,
.rv-casa--escuro .rv-casa__botao:focus-visible {
  background: var(--rvc-amarelo);
  border-color: var(--rvc-amarelo);
  color: var(--rvc-verde);
}

/* ── Pele clara ──────────────────────────────────────────────────── */
.rv-casa--claro .rv-casa__caixa {
  background: var(--rvc-creme);
  color: var(--rvc-verde);
  border-right: 1px solid rgba(23, 61, 50, 0.16);
  border-bottom: 1px solid rgba(23, 61, 50, 0.16);
  border-left: 1px solid rgba(23, 61, 50, 0.16);
}
.rv-casa--claro .rv-casa__chapeu { color: rgba(23, 61, 50, 0.62); }
.rv-casa--claro .rv-casa__titulo { color: var(--rvc-verde); }
.rv-casa--claro .rv-casa__linha  { color: rgba(23, 61, 50, 0.78); }
.rv-casa--claro .rv-casa__botao {
  background: var(--rvc-verde);
  color: var(--rvc-creme);
  border: 2px solid var(--rvc-verde);
}
.rv-casa--claro .rv-casa__botao:hover,
.rv-casa--claro .rv-casa__botao:focus-visible {
  background: transparent;
  color: var(--rvc-verde);
}

/* ── Tipografia ──────────────────────────────────────────────────── */
.rv-casa .rv-casa__texto { min-width: 0; }

.rv-casa .rv-casa__chapeu {
  display: block;
  margin-bottom: 14px;
  font-family: var(--secondary-font, "Montserrat", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
}

.rv-casa .rv-casa__titulo {
  margin: 0 0 12px;
  font-family: var(--primary-font, "Plantin MT Pro", Georgia, serif);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.rv-casa .rv-casa__linha {
  margin: 0;
  font-family: var(--secondary-font, "Montserrat", sans-serif);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
}

/* ── Botão ───────────────────────────────────────────────────────── */
.rv-casa .rv-casa__accao { flex: 0 0 auto; }

.rv-casa .rv-casa__botao {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 3px;
  font-family: var(--secondary-font, "Montserrat", sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.rv-casa .rv-casa__botao:focus-visible {
  outline: 3px solid var(--rvc-amarelo);
  outline-offset: 3px;
}

/* ── Ecrãs estreitos ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .rv-casa { margin: 34px 0; }
  .rv-casa .rv-casa__caixa {
    grid-template-columns: 1fr;
    padding: 30px 26px 28px;
    gap: 22px;
  }
  .rv-casa .rv-casa__titulo { max-width: none; }
  .rv-casa .rv-casa__botao {
    display: block;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 576px) {
  .rv-casa .rv-casa__caixa { padding: 26px 18px 24px; }
  .rv-casa .rv-casa__linha { font-size: 14px; }
}

/* ── O botão ASSINAR da navbar ───────────────────────────────────────
 *
 * Vive ao lado do "Entrar", que é uma pílula de contorno verde. Para este
 * ser a acção principal, é sólido: bloco verde com letra creme, que se lê
 * tanto sobre as páginas claras (cabeçalho `dark`) como sobre as imagens
 * escuras do topo (cabeçalho `white`) — um bloco cheio não depende do fundo,
 * ao contrário de um contorno.
 *
 * Ao passar o rato vira amarelo da marca com letra verde: chama o olho no
 * momento em que a pessoa já lá está, sem andar a piscar na página toda.
 *
 * Só aparece a quem não assina nada (ver sections/header.blade.php).
 */
.header-assinar {
  display: flex;
  align-items: center;
}

.header-assinar .header-assinar__botao {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--primary-color, #173d32);
  border-radius: 999px;
  background: var(--primary-color, #173d32);
  color: #f3f1ed;
  font-family: var(--secondary-font, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(23, 61, 50, 0.22);
  transition: background-color .16s, color .16s, border-color .16s, box-shadow .16s;
}

.header-assinar .header-assinar__botao:hover,
.header-assinar .header-assinar__botao:focus-visible {
  background: var(--accent-color, #00b1eb);
  border-color: var(--accent-color, #00b1eb);
  color: var(--primary-color, #173d32);
  box-shadow: 0 4px 16px rgba(23, 61, 50, 0.28);
  outline: none;
}

.header-assinar .header-assinar__botao:focus-visible {
  outline: 2px solid var(--accent-color, #00b1eb);
  outline-offset: 3px;
}

/* Em ecrãs estreitos o cabeçalho fica apertado: botão mais curto, e abaixo
   dos 420px sai de cena para não empurrar a lupa e o menu. */
@media (max-width: 991px) {
  .header-assinar .header-assinar__botao {
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 420px) {
  .header-assinar { display: none; }
}

/* ==========================================================================
   Navbar da blue Travel (22/9/2026)
   --------------------------------------------------------------------------
   Os botões são os mesmos da Revista de Vinhos — "Assinar" e "Entrar" —, mas
   a navbar aqui NÃO é clara: é transparente por cima do hero e passa a
   rgba(37,35,35,.4) ao rolar. Com as cores da RV (verde escuro sobre creme)
   os botões desapareciam no fundo escuro, por isso o "Assinar" leva o azul da
   marca com texto branco e o "Entrar" fica em contorno branco.
   Este ficheiro é carregado pelo functions.php com filemtime — não há build.
   ========================================================================== */

.header-assinar .header-assinar__botao {
  background: var(--primary-color, #00b1eb);
  border-color: var(--primary-color, #00b1eb);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.header-assinar .header-assinar__botao:hover,
.header-assinar .header-assinar__botao:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--primary-color, #00b1eb);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.header-assinar .header-assinar__botao:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* O "Entrar" não existe no app.css da blue Travel (o da RV vem do build do
   tema dela). Fica aqui de raiz.

   ATENÇÃO à cor: a navbar da blue Travel é transparente por cima do hero
   ESCURO na homepage, mas é BRANCA nas páginas interiores (pesquisa, artigo,
   secção). Em branco, o botão desaparecia por completo — foi o que aconteceu
   a 22/9/2026 na página de resultados. Por isso leva o azul da marca, que se
   lê nos dois fundos, e não branco. */
.header-entrada {
  display: flex;
  align-items: center;
}

.header-entrada .header-entrada__ligacao {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: var(--primary-color, #00b1eb);
  font-family: var(--secondary-font, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

/* O tema já marca a navbar: `.white` quando está por cima do hero escuro
   (homepage) e `.dark` quando está sobre fundo claro (páginas interiores).
   Sem isto o botão ficava branco sobre branco nas interiores, ou azul-escuro
   por cima de uma fotografia escura na homepage. */
.header-area.white .header-entrada .header-entrada__ligacao {
  color: #fff;
}

.header-area.white .header-entrada .header-entrada__ligacao:hover,
.header-area.white .header-entrada .header-entrada__ligacao:focus-visible {
  background: #fff;
  color: var(--primary-color, #00b1eb);
}

.header-area.dark .header-entrada .header-entrada__ligacao:hover,
.header-entrada .header-entrada__ligacao:hover,
.header-entrada .header-entrada__ligacao:focus-visible {
  background: var(--primary-color, #00b1eb);
  border-color: var(--primary-color, #00b1eb);
  color: #fff;
  outline: none;
}

.header-entrada .header-entrada__ligacao:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* O tema mete padding em todos os li da navbar; com dois botões seguidos
   ficava largo de mais e empurrava a lupa. */
.header-icon li.header-assinar,
.header-icon li.header-entrada {
  padding: 0 6px;
}

@media (max-width: 991px) {
  .header-entrada .header-entrada__ligacao {
    padding: 5px 11px;
    font-size: 12px;
  }
}

/* Em ecrãs estreitos fica só o "Entrar" — o "Assinar" já sai de cena aos
   420px por causa da regra de cima. */
@media (max-width: 360px) {
  .header-entrada { display: none; }
}

/* ==========================================================================
   A barreira do conteúdo pago (23/9/2026)
   --------------------------------------------------------------------------
   PORQUÊ ISTO ESTÁ AQUI, E NÃO NO app.css:
   estas regras, na Revista de Vinhos, vivem no app.css COMPILADO (a partir do
   _section.scss). A blue Travel tem o seu próprio app.css, compilado do tema
   dela, que nunca as teve — e aqui não há build. Resultado: o "Iniciar sessão"
   da barreira saía como um <button> em bruto, com a caixa cinzenta do browser
   e texto amarelo.

   O AMARELO: na RV, --primary-text resolve para --accent-color, que é o
   amarelo #ffe700 da marca dela. A blue Travel não define nenhuma das duas,
   por isso tudo o que se copia de lá e usa essas variáveis sai amarelo ou sem
   cor. Definem-se aqui as duas, com o azul da marca: assim qualquer regra
   trazida da RV acerta sozinha, em vez de se andar a corrigir uma a uma.
   ========================================================================== */

:root {
  --accent-color: #00b1eb;
  --primary-text: #00b1eb;
}

.arquivo__barreira .wrapper {
  height: auto;
}

.arquivo__medida {
  margin: 0 auto;
  max-width: 980px;
  padding: 0 20px;
  text-align: left;
}

.arquivo__barreira-entrar {
  color: #b9c0c7 !important;
  font-size: 14px;
  margin: 10px 0 0 !important;
}

.arquivo__barreira-entrar a,
.arquivo__barreira-entrar button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary-color, #00b1eb);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

.arquivo__barreira-entrar a:hover,
.arquivo__barreira-entrar button:hover,
.arquivo__barreira-entrar button:focus-visible {
  color: #fff;
}