/*
 * 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;
  --rvc-amarelo: #f8ed00;

  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, #ffe700);
  border-color: var(--accent-color, #ffe700);
  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, #ffe700);
  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; }
}