/* ==========================================================================
   Valderez Astrologia — a "casca" comum a todas as páginas da versão ocidental:
   pular para o conteúdo, cabeçalho, menu, rodapé e o aviso de cookies.
   Do pacote docs/design/valderez-1.0/assets/css/components.css. Os tokens vêm do
   static/ocidental/tema.css (gerado de paleta.py); aqui não há cor escrita.

   Carregado também pelas páginas que ainda usam o base.css (até as fases B e C
   da rodada visual): por isso as regras abaixo desfazem o que o base.css põe nos
   elementos header, nav e footer.
   ========================================================================== */

.skip { position: absolute; top: 8px; left: 8px; transform: translateY(-180%); z-index: 60;
  background: var(--surface); color: var(--text); padding: 12px; border-radius: var(--radius-control); }
.skip:focus { transform: none; }
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }

.header[data-theme], .footer[data-theme] { background: var(--background); color: var(--text); }
.header { padding: 0; border-bottom: 1px solid var(--border); font: 400 var(--body-size)/var(--body-line) var(--font-sans); }
.header-inner { min-height: 100px; display: flex; gap: 24px; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; color: var(--text); text-decoration: none; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; color: var(--rose); flex-shrink: 0; display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font: 500 32px/32px var(--font-editorial); letter-spacing: .02em; }
.brand-name small { display: block; font: 400 10px/18px var(--font-sans); letter-spacing: .23em; text-transform: uppercase; }

.header .button, .cookie .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font: 600 var(--button-size)/var(--button-line) var(--font-sans);
  text-decoration: none; cursor: pointer; text-align: center; max-width: 100%; }
.header .button:hover, .cookie .button:hover { background: var(--accent-hover); }

.nav-desktop { display: none; gap: 24px; align-items: center; flex-wrap: nowrap; }
.nav-desktop > a:not(.button) { color: var(--text); padding: 12px 0; text-decoration: none; white-space: nowrap; }
.nav-desktop > a:not(.button):hover { text-decoration: underline; }
.nav-desktop [aria-current=page] { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px; }
.nav-mobile { position: relative; }
.nav-mobile summary { min-height: 48px; min-width: 64px; padding: 0 14px; display: grid; place-items: center; list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; color: var(--text); }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile nav { display: block; position: absolute; right: 0; top: 60px; width: min(300px, calc(100vw - 48px));
  padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; z-index: 40;
  box-shadow: var(--shadow-card); }
.nav-mobile a { display: block; padding: 12px; color: var(--text); text-decoration: none; }
.nav-mobile a[aria-current=page] { text-decoration: underline; text-decoration-thickness: 2px; }
.header :focus-visible, .footer :focus-visible, .cookie :focus-visible, .skip:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; }

.footer { margin: 0; padding: 40px 0; border-top: 1px solid var(--border); text-align: left;
  font: 400 var(--body-size)/var(--body-line) var(--font-sans); }
.footer .footer-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; max-width: none; }
.footer nav { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.footer a { color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.footer .caption { margin: 0; max-width: 46ch; font-size: var(--caption-size); line-height: var(--caption-line); color: var(--text-muted); }
.footer .nota-rodape { flex-basis: 100%; max-width: 72ch; }
.footer .nota-rodape a { min-height: 0; display: inline; }
.footer .brand { align-self: start; }

/* Aviso de cookies (static/ocidental/consentimento.js): "Aceitar" e "Recusar"
   do mesmo tamanho e com o mesmo destaque. */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 700px; margin: 0 auto;
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  color: var(--text); box-shadow: var(--shadow-card); font: 400 14px/22px var(--font-sans); }
.cookie h2 { font: 600 var(--h4-size)/var(--h4-line) var(--font-editorial); margin: 0 0 8px; color: var(--text); }
.cookie p { margin: 0 0 16px; max-width: none; }
.cookie a { color: var(--accent); }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cookie-actions .button { width: 100%; padding-inline: 12px; }

@media (min-width: 1100px) { .nav-desktop { display: flex; } .nav-mobile { display: none; } }
@media (max-width: 767px) {
  .header-inner { gap: 12px; min-height: 88px; }
  .brand-name { font-size: 28px; }
  .brand-mark { width: 36px; height: 36px; }
  .footer .footer-inner { display: grid; }
  .cookie { padding: 20px; }
}
@media (prefers-reduced-motion: no-preference) { .header .button, .cookie .button { transition: background-color .18s, border-color .18s; } }
@media print { .header, .footer, .cookie { display: none; } }