/* ==========================================================================
   Componentes do shell — header, dropdown, roteiro, rodapé, FAB.
   ========================================================================== */

/* --- Topbar --- */
.topbar{background:var(--teal-900);color:var(--white)}
.topbar-inner{
  display:flex;justify-content:space-between;align-items:center;
  height:40px;font-size:.8125rem;
}
.topbar-links a{color:rgba(255,255,255,.88);margin-right:var(--space-4)}
.topbar-links a:hover{color:var(--white)}
.topbar-sep{color:rgba(255,255,255,.4);margin-right:var(--space-4)}
.topbar-contact a{color:var(--white);display:inline-flex;align-items:center;gap:6px}
@media (max-width:767px){ .topbar{display:none} }

/* --- Navbar --- */
.navbar{background:var(--teal-500);position:sticky;top:0;z-index:var(--z-navbar);
  transition:box-shadow var(--dur-base) var(--ease-out);}
.navbar.is-scrolled{box-shadow:var(--shadow-md)}
.navbar-inner{display:flex;align-items:center;gap:var(--space-6);height:76px}
.navbar-logo{display:flex;align-items:center;flex-shrink:0}
.navbar-logo img{
  height:46px;width:auto;
  filter:brightness(0) invert(1);
  /* Mesma técnica do rodapé: a logo colorida (fundo transparente) vira
     silhueta branca via CSS — sem caixa, sem depender de um arquivo
     "logo-branco.png" que ainda não existe. Perde o degradê interno do
     símbolo (fica branco chapado, não gradiente) — se o manual da marca
     tiver uma versão negativa oficial com outros detalhes, troca esta
     regra pela <img> apontando pro arquivo real. Até lá, isto resolve. */
}
.navbar-nav{display:flex;align-items:center;gap:var(--space-5);margin-left:var(--space-6);flex:1}
.navbar-link{
  color:var(--white);font-family:var(--font-display);font-weight:600;font-size:.9375rem;
  background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;
  padding-bottom:4px;border-bottom:3px solid transparent;
}
.navbar-link:hover,.navbar-link[aria-expanded="true"]{color:var(--white);text-decoration:none;opacity:.9}
.navbar-link.is-active{border-bottom-color:var(--focus-color)}
.navbar-cta{margin-left:auto;flex-shrink:0}
.drawer-toggle{display:none;background:none;border:none;color:var(--white);cursor:pointer;padding:8px}
.navbar-phone-mobile{display:none;color:var(--white);padding:8px;margin-left:auto}

/* Dropdown */
.navbar-dropdown{position:relative}
.dropdown-panel{
  display:none;position:absolute;top:100%;left:0;margin-top:8px;
  background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);
  padding:var(--space-4);min-width:260px;flex-direction:column;gap:2px;z-index:var(--z-dropdown);
}
.dropdown-panel a{
  color:var(--ink-900);font-size:.9375rem;padding:8px 10px;border-radius:8px;text-decoration:none;
}
.dropdown-panel a:hover{background:var(--gray-50);color:var(--teal-700)}
.navbar-dropdown:hover .dropdown-panel,
.navbar-dropdown:focus-within .dropdown-panel{display:flex}

/* --- Roteiro de Acolhimento --- */
.roteiro{background:var(--white);padding-block:var(--space-6);border-bottom:1px solid var(--gray-100)}
.roteiro-eyebrow{margin-bottom:var(--space-3)}
.roteiro-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-3)}
.roteiro-card{
  display:flex;flex-direction:column;gap:4px;padding:var(--space-4);
  border-radius:var(--radius-card);color:var(--white);text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out);
}
.roteiro-card:hover{transform:translateY(-2px);text-decoration:none;color:var(--white)}
.roteiro-icone{opacity:.9;margin-bottom:2px}
.roteiro-titulo{font-family:var(--font-display);font-weight:800;font-size:1.0625rem}
.roteiro-texto{font-size:.8125rem;opacity:.92}
.roteiro-emergencia{background:var(--danger)}
.roteiro-marcar{background:var(--blue-700)}
.roteiro-visitar{background:var(--whatsapp);color:var(--ink-900)}
.roteiro-doar{background:var(--orange-500);color:var(--ink-900)}
.roteiro-doar:hover{background:var(--orange-700);color:var(--white)}
.roteiro-visitar:hover{color:var(--ink-900)}
/* necessário: .roteiro-card:hover força texto branco por padrão;
   qualquer card do Roteiro com fundo claro + texto escuro precisa
   desse override, senão o hover quebra contraste (branco sobre
   fundo claro) — mesmo problema já corrigido no .roteiro-doar */

@media (max-width:1023px){
  .roteiro-grid{grid-template-columns:1fr 1fr}
  .roteiro-emergencia{grid-column:1 / -1}
}
@media (max-width:640px){
  .roteiro-grid{grid-template-columns:1fr}
}

/* --- Drawer mobile --- */
@media (max-width:1023px){
  .navbar-nav{display:none}
  .navbar-cta{display:none}
  .drawer-toggle{display:block}
  .navbar-phone-mobile{display:flex;align-items:center}
}
.drawer{
  position:fixed;top:0;right:-100%;width:min(360px,90vw);height:100vh;
  background:var(--white);z-index:var(--z-drawer);padding:var(--space-5);
  display:flex;flex-direction:column;transition:right var(--dur-base) var(--ease-out);
  overflow-y:auto;
}
.drawer.is-open{right:0}
.drawer-head{display:flex;justify-content:flex-end}
.drawer-close{background:none;border:none;cursor:pointer;padding:8px}
.drawer-nav{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-4)}
.drawer-nav > a{padding:14px 4px;border-bottom:1px solid var(--gray-100);color:var(--ink-900);font-weight:600}
.drawer-accordion{border-bottom:1px solid var(--gray-100)}
.drawer-accordion summary{padding:14px 4px;font-weight:600;cursor:pointer;color:var(--ink-900)}
.drawer-accordion-body{display:flex;flex-direction:column;padding:0 4px 12px 12px}
.drawer-accordion-body a{padding:8px 0;color:var(--ink-500)}
.drawer-foot{margin-top:auto;padding-top:var(--space-4);display:flex;flex-direction:column;gap:10px}
.drawer-whatsapp{color:var(--teal-700);font-weight:700}
.drawer-overlay{
  position:fixed;inset:0;background:rgba(35,32,32,.5);z-index:calc(var(--z-drawer) - 1);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out);
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}

/* --- Rodapé --- */
.site-footer{background:var(--teal-900);color:rgba(255,255,255,.85);padding-top:var(--space-8)}
.footer-brand{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.footer-logo-fallback{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.footer-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  padding-bottom:var(--space-6);border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-col-title{font-size:.9375rem;font-weight:700;color:var(--white);margin-bottom:var(--space-3)}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:rgba(255,255,255,.8);font-size:.875rem}
.footer-links a:hover{color:var(--white)}
.footer-address{font-style:normal;font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.8)}
.footer-address a{color:rgba(255,255,255,.8)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding-block:var(--space-4);font-size:.8125rem;
}
.footer-bottom-links{display:flex;gap:var(--space-4)}
.footer-bottom-links a{color:rgba(255,255,255,.7)}

@media (max-width:1023px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr} }

/* --- FAB WhatsApp ---
   24px de margem padrão. Nunca sobrepõe elemento clicável — em telas com
   pouco espaço livre no rodapé do fluxo visível, use .fab-whatsapp--alto
   (mais 88px) na página específica onde isso importa. */
.fab-whatsapp{
  position:fixed;right:24px;bottom:24px;z-index:var(--z-fab);
  width:56px;height:56px;border-radius:var(--radius-pill);
  background:var(--whatsapp);color:var(--ink-900);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);transition:filter var(--dur-fast) var(--ease-out);
}
.fab-whatsapp:hover{filter:brightness(.94);color:var(--ink-900)}