/* APCNP — tema azul (capa, faixas, cabeçalho e rodapé).
   Carregado depois de ds/styles.css em todas as páginas. */

:root {
  --deep: #021633;
  --navy-glow: #0b4a9a;
  --on-dark: #ffffff;
  --on-dark-2: #c9d7ee;
  --on-dark-3: #93a9c9;
  --rule-dark: rgba(255, 255, 255, .16);
}

body { background: var(--color-bg); }

/* ── Cabeçalho escuro ─────────────────────────────── */
.site-header {
  background: rgba(2, 22, 51, .94);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ── Capa da página inicial ───────────────────────── */
.hero-home {
  position: relative;
  color: #fff;
  background-color: var(--deep);
  background-image: url(../assets/capa/capa-apcnp-desktop-1920x1080.webp);
  background-image: image-set(url(../assets/capa/capa-apcnp-desktop-1920x1080.webp) 1x, url(../assets/capa/capa-apcnp-desktop-2560x1440.webp) 2x);
  background-size: cover;
  background-position: 70% 40%;
  background-repeat: no-repeat;
}
@media (max-width: 760px) {
  .hero-home {
    background-image: url(../assets/capa/capa-apcnp-mobile-1080x1920.webp);
    background-position: center bottom;
  }
  .hero-home .hero-inner { padding-bottom: clamp(260px, 62vw, 360px) !important; }
}

/* ── Faixa azul das páginas internas ──────────────── */
.page-hero {
  color: #fff;
  background-color: var(--deep);
  background-image:
    linear-gradient(90deg, rgba(2, 22, 51, .96) 0%, rgba(2, 22, 51, .86) 38%, rgba(2, 22, 51, .35) 66%, rgba(2, 22, 51, .1) 100%),
    url(../assets/capa/faixa-interna.webp);
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
}
@media (max-width: 760px) {
  .page-hero {
    background-image:
      linear-gradient(180deg, rgba(2, 22, 51, .94) 0%, rgba(2, 22, 51, .82) 70%, rgba(2, 22, 51, .7) 100%),
      url(../assets/capa/faixa-interna.webp);
    background-position: center, 72% center;
  }
}

/* ── Faixas azuis de chamada ──────────────────────── */
.band-navy {
  background-color: #00306e;
  background-image: radial-gradient(120% 140% at 88% 0%, #0b4a9a 0%, #00306e 46%, #001f4a 100%);
}

/* ── Cartões ──────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 1px 2px rgba(0, 32, 80, .06), 0 10px 30px rgba(0, 32, 80, .07);
  border-top: 3px solid var(--ember);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 32, 80, .08), 0 18px 40px rgba(0, 32, 80, .12); }

/* ── Capas e imagens das listas ───────────────────── */
.thumb { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.thumb-vazia {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; height: 100%; box-sizing: border-box; padding: 10px 9px;
  background: linear-gradient(160deg, #0b4a9a 0%, #00306e 55%, #001f4a 100%);
  color: #fff;
}
.thumb-vazia b { font-size: 12px; font-weight: 800; letter-spacing: .04em; line-height: 1.15; }
.thumb-vazia i { display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--ember); }

/* ── Formulário ───────────────────────────────────── */
form input:focus-visible, form textarea:focus-visible {
  outline: none; border-color: var(--ember) !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 78, 0, .12);
}

/* ── Botões ───────────────────────────────────────── */
.btn-ember { transition: background-color .15s ease, transform .15s ease; }
.btn-ember:hover { transform: translateY(-1px); }

/* ── Celular: menu do cabeçalho rola na horizontal ── */
@media (max-width: 760px) {
  .site-header nav {
    width: 100%; margin-left: 0 !important;
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav > * { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .btn-ember { transition: none; }
  .card:hover, .btn-ember:hover { transform: none; }
}

/* ── Cartão do órgão (notícias sem imagem) ────────── */
.thumb-fonte {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  width: 100%; height: 100%; box-sizing: border-box; padding: 18px 20px;
  color: #fff;
  background-color: #021633;
  background-image: linear-gradient(90deg, rgba(2, 22, 51, .94) 0%, rgba(2, 22, 51, .7) 55%, rgba(2, 22, 51, .25) 100%), url(../assets/capa/faixa-interna.webp);
  background-size: cover, 220% auto;
  background-position: center, 78% 30%;
}
.thumb-fonte b { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.thumb-fonte small { font-size: 12.5px; line-height: 1.35; color: #c9d7ee; max-width: 26ch; }
.thumb-fonte i { display: block; width: 30px; height: 3px; border-radius: 3px; background: var(--ember); margin-top: 4px; }