/* ===========================
   HEADER + Modais fullscreen
   =========================== */

:root { --hdr-h: 64px; }

/* Header fixo estilo iOS glass */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 100;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s, border-color .3s;
}
body.dark .site-header {
  background: rgba(22,27,34,0.72);
  border-color: rgba(255,255,255,.10);
}
body.light .site-header {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,.06);
}

.logo-area img {
  height: 40px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Nav: botões (sem navegação de página) */
.nav-links { display: flex; gap: 10px; font-size: 14px; }
.nav-btn{
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font: 500 15px/1 inherit;
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .25s, transform .2s, color .25s;
  font-size: 14px;
}
body.dark .nav-btn{ color: #e8eef5; }
body.light .nav-btn{ color: #1d2633; font-style: bold;}

.nav-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}
body.dark .nav-btn:hover{ color: var(--accent-dark, #6ec1ff); }
body.light .nav-btn:hover{ color: var(--accent-light, #1677ff); }

/* ========= Modais fullscreen (informativos) ========= */
.modal{
  position:fixed; inset:0; display:none; place-items:center;
  padding: 16px; z-index: 99; /* abaixo do header (100), mas cobrindo a página */
}
.modal.open{ display:grid; }

/* Tela cheia (ou quase) */
.dialog-full{
  position: relative;
  width: min(1280px, 98vw);   /* “quase 100%” */
  max-height: 86vh;           /* deixa respiro pro header */
  border-radius: 24px;
  padding: 20px 20px 18px;
  overflow: auto;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid;
  box-shadow: 0 16px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .28s ease, opacity .28s ease,
              background .25s, border-color .25s, box-shadow .25s;
  opacity: 0; transform: translateY(8px) scale(.985);
}
.modal.open .dialog-full{ opacity:1; transform: translateY(0) scale(1); }

body.dark .dialog-full{
  background: rgba(20,26,35,.62);
  color: #e8eef5;
  border-color: rgba(255,255,255,.10);
}
body.light .dialog-full{
  background: rgba(255,255,255,.70);
  color: #1d2633;
  border-color: rgba(0,0,0,.06);
}

/* Backdrop */
.backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .28s ease;
}
.modal.open .backdrop{ opacity: 1; }

/* Cabeçalho do modal */
.dialog-header{
  position: sticky;
  top: 0;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:-4px -4px 10px; padding: 8px 4px 10px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  z-index: 2;
}
.dialog-title{
  margin:0; font-size:18px; font-weight:700;
}

/* Botão fechar */
.btn-icon{
  border:none; background: rgba(255,255,255,.1);
  width:36px; height:36px; border-radius: 12px; cursor:pointer;
  display:grid; place-items:center; font-size:18px; color: inherit;
  transition: background .25s, transform .15s ease;
}
.btn-icon:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* Corpo do modal */
.dialog-body{
  font-size: 15px;
  line-height: 1.6;
}
.dialog-body ul{ margin: 8px 0 0 18px; }

/* Responsivo: em telas muito pequenas ocupa (praticamente) 100% */
@media (max-width: 560px){
  .dialog-full{
    width: 98vw;
    height: 86vh;
    max-height: none;
    border-radius: 20px;
  }
}

/* ======= EXTRAS iOS Glass: conteúdo rico dos modais ======= */

/* Texto destacado/atenuado */
.lead{ font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.muted{ opacity: .8; margin-top: 14px; }

/* Cards (grid) */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 12px 0 8px;
}
.card{
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform .18s ease, background .25s, border-color .25s;
}
body.dark .card{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
body.light .card{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
}
.card:hover{ transform: translateY(-2px); }
.card h3{ margin: 0 0 8px; font-size: 16px; }
.card p{ margin: 0; }
.bullets{ margin: 0; padding-left: 18px; }

/* Badges */
.info-banner{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
body.dark .badge{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color:#cfe9ff; }
body.light .badge{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color:#1d2633; }

/* Timeline */
.timeline{ position: relative; margin: 6px 0 6px 6px; }
.t-item{ position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 6px 0; }
.t-item::before{
  content:""; position:absolute; left:9px; top:0; bottom:-2px; width:2px; 
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}
.t-dot{
  width: 14px; height: 14px; border-radius: 50%; margin-top: 4px;
  background: currentColor; opacity:.9; box-shadow: 0 0 12px rgba(110,193,255,.45);
}
body.dark .t-dot{ color:#6ec1ff; }
body.light .t-dot{ color:#1677ff; }
.t-content{ padding-bottom: 6px; }
.t-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 4px; }
.t-title{ font-weight: 700; }
.t-date{ opacity:.8; font-size: 12.5px; }

/* Contatos */
.contact-list{ display: grid; gap: 10px; margin-top: 6px; }
.contact-card{
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center;
  padding: 12px; border-radius: 16px; border: 1px solid;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: transform .18s ease, background .25s, border-color .25s;
}
body.dark .contact-card{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
body.light .contact-card{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.contact-card:hover{ transform: translateY(-2px); }
.c-ico{ font-size: 20px; display: grid; place-items: center; }
.c-text{ display: grid; gap: 2px; }
.c-text strong{ font-weight: 700; }

/* Responsividade */
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
}

.nav-btn {
  text-decoration: none; /* remove underline */
}

a {
  text-decoration: none; /* remove underline */
}

/* ===========================
   Dropdown (Óbitos)
   =========================== */

.nav-links .dropdown { position: relative; }

.nav-links .dropdown-toggle {
  text-decoration: none;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  margin: 0;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  z-index: 120;

  display: none; /* fechado por padrão */
}

body.dark .dropdown-menu {
  background: rgba(20,26,35,.62);
  color: #e8eef5;
  border-color: rgba(255,255,255,.10);
}
body.light .dropdown-menu {
  background: rgba(255,255,255,.85);
  color: #1d2633;
  border-color: rgba(0,0,0,.06);
}

.dropdown[data-open="true"] .dropdown-menu {
  display: block;
}

/* itens */
.dropdown-menu a[role="menuitem"] {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none; /* sem sublinhado */
  border: 1px solid transparent;
}
.dropdown-menu a[role="menuitem"]:hover,
.dropdown-menu a[role="menuitem"]:focus {
  outline: none;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
body.light .dropdown-menu a[role="menuitem"]:hover,
body.light .dropdown-menu a[role="menuitem"]:focus {
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
}

/* evita overflow pra fora da viewport direita em telas estreitas */
@media (max-width: 560px) {
  .dropdown-menu { left: auto; right: 0; }
}