/* PetGeo — Base e componentes compartilhados
 * ------------------------------------------------------------------
 * Depende de tokens.css (carregar antes deste arquivo).
 * Cobre: reset, tipografia, acessibilidade, layout, e os componentes
 * usados nas páginas públicas e no portal (btn, card, form, alert,
 * badge, tabela, nav, footer).
 *
 * Nomes de classe seguem os já usados nos templates (.btn, .card,
 * .alert, .container...) para tornar a migração mecânica. Blocos de
 * layout do shell público usam o prefixo .pg-.
 * ------------------------------------------------------------------ */

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--pg-font-body);
  font-size: var(--pg-text-base);
  line-height: var(--pg-leading-normal);
  color: var(--pg-text);
  background: var(--pg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--pg-primary-tint); color: var(--pg-ink); }

/* ========================= TIPOGRAFIA ========================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pg-font-heading);
  color: var(--pg-ink);
  line-height: var(--pg-leading-tight);
  letter-spacing: var(--pg-tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--pg-h1); font-weight: 700; }
h2 { font-size: var(--pg-h2); font-weight: 600; }
h3 { font-size: var(--pg-h3); font-weight: 600; }
h4 { font-size: var(--pg-text-lg); font-weight: 600; }
p { text-wrap: pretty; }
small, .pg-small { font-size: var(--pg-text-sm); }
.pg-caption { font-size: var(--pg-text-xs); font-weight: 500; letter-spacing: .02em; }
strong, b { font-weight: 600; }

/* ======================= ACESSIBILIDADE ====================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--pg-focus-outline);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Nunca remover foco sem substituir — anula o :focus sem :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pg-skip-link {
  position: fixed; top: 0; left: 0; z-index: 999;
  transform: translateY(-120%);
  background: var(--pg-primary); color: var(--pg-on-dark);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--pg-radius-md) 0;
  font-family: var(--pg-font-heading); font-weight: 600;
  transition: transform var(--pg-duration-fast) var(--pg-ease);
}
.pg-skip-link:focus-visible { transform: translateY(0); }

/* ========================== LAYOUT ========================== */
.pg-container, .container {
  width: 100%;
  max-width: var(--pg-container);
  margin-inline: auto;
  padding-inline: var(--pg-container-pad);
}
.pg-container--narrow { max-width: var(--pg-container-narrow); }
.pg-main { display: block; }
.pg-section { padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem); }
.pg-section--tint { background: var(--pg-primary-tint); }
.pg-section--surface { background: var(--pg-surface); }

.pg-stack > * + * { margin-top: var(--pg-space-md); }
.center, .pg-center { text-align: center; }

.pg-eyebrow {
  display: inline-block;
  font-family: var(--pg-font-heading);
  font-weight: 600;
  font-size: var(--pg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wide);
  color: var(--pg-primary);
  margin-bottom: var(--pg-space-sm);
}
.pg-section-title { font-size: var(--pg-h2); font-weight: 700; margin-bottom: var(--pg-space-xs); }
.pg-section-sub { color: var(--pg-muted); font-size: var(--pg-text-lg); max-width: 40rem; }
.center .pg-section-sub, .pg-center .pg-section-sub { margin-inline: auto; }

/* ========================== BOTÕES ========================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 14px 30px;
  border-radius: var(--pg-radius-md);
  font-family: var(--pg-font-heading);
  font-weight: 600;
  font-size: var(--pg-text-base);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--pg-duration) var(--pg-ease),
              border-color var(--pg-duration) var(--pg-ease),
              box-shadow var(--pg-duration) var(--pg-ease),
              transform var(--pg-duration-fast) var(--pg-ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn svg { flex-shrink: 0; }

.btn-primary { background: var(--pg-primary); color: var(--pg-on-dark); box-shadow: 0 6px 18px rgba(27, 75, 86, .22); }
.btn-primary:hover { background: var(--pg-primary-700); box-shadow: 0 10px 26px rgba(27, 75, 86, .30); }

.btn-coral { background: var(--pg-coral); color: var(--pg-on-dark); box-shadow: 0 6px 18px rgba(180, 83, 46, .28); }
.btn-coral:hover { background: var(--pg-coral-700); box-shadow: 0 10px 26px rgba(180, 83, 46, .36); }

.btn-outline { border-color: var(--pg-primary); color: var(--pg-primary); background: transparent; }
.btn-outline:hover { background: var(--pg-primary); color: var(--pg-on-dark); }

.btn-ghost { background: var(--pg-primary-tint); color: var(--pg-primary); }
.btn-ghost:hover { background: #d9e4e6; }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: var(--pg-text-sm); }

/* ============================ CARD ========================== */
.card {
  background: var(--pg-surface);
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius-lg);
  padding: clamp(1.25rem, .9rem + 1.6vw, 1.8rem);
  box-shadow: var(--pg-shadow-sm);
}

/* =========================== FORMS ========================= */
.pg-field { margin-bottom: var(--pg-space-md); }
label, .pg-label {
  display: block;
  font-size: var(--pg-text-sm);
  font-weight: 600;
  color: var(--pg-ink);
  margin-bottom: var(--pg-space-2xs);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--pg-line);
  border-radius: var(--pg-radius-md);
  background: var(--pg-surface);
  color: var(--pg-ink);
  font-size: var(--pg-text-base);
  transition: border-color var(--pg-duration-fast) var(--pg-ease),
              box-shadow var(--pg-duration-fast) var(--pg-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pg-primary);
  box-shadow: var(--pg-focus-ring);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; /* o box-shadow acima já é o indicador visível */
}
textarea { resize: vertical; min-height: 110px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--pg-alert);
}
.pg-help { font-size: var(--pg-text-sm); color: var(--pg-muted); margin-top: var(--pg-space-2xs); }
.pg-error { font-size: var(--pg-text-sm); color: var(--pg-alert-fg); margin-top: var(--pg-space-2xs); font-weight: 500; }

.pg-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.pg-check input { width: auto; }

/* =========================== ALERTS ======================== */
.alert, .pg-alert {
  padding: .85rem 1.1rem;
  border-radius: var(--pg-radius-md);
  border: 1px solid transparent;
  font-size: var(--pg-text-sm);
  margin-bottom: var(--pg-space-md);
}
.alert-success, .pg-alert--success { background: var(--pg-success-bg); color: var(--pg-success-fg); border-color: #b7dfc2; }
.alert-error, .pg-alert--error { background: var(--pg-alert-bg); color: var(--pg-alert-fg); border-color: #f0c9bd; }
.pg-alert--warning { background: var(--pg-warning-bg); color: var(--pg-warning-fg); border-color: #ecd8a8; }

/* =========================== BADGE ======================== */
.pg-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 4px 12px;
  border-radius: var(--pg-radius-full);
  font-size: var(--pg-text-sm);
  font-weight: 600;
  background: var(--pg-primary);
  color: var(--pg-on-dark);
}
.pg-badge--tint { background: var(--pg-primary-tint); color: var(--pg-primary); }
.pg-badge--gold { background: rgba(201, 149, 44, .16); color: #7A5A16; }
.pg-badge--coral { background: rgba(180, 83, 46, .12); color: var(--pg-alert-fg); }

/* =========================== TABELA ======================= */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--pg-radius-md); }
table { width: 100%; border-collapse: collapse; font-size: var(--pg-text-sm); }
th {
  background: var(--pg-primary); color: var(--pg-on-dark);
  padding: 8px 10px; text-align: left;
  font-size: var(--pg-text-xs); text-transform: uppercase; letter-spacing: .02em;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--pg-line); }
tbody tr:nth-child(even), tbody tr:nth-child(even) { background: var(--pg-surface-2); }

/* ===================== NAV (shell público) ================ */
.pg-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 246, 243, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--pg-duration) var(--pg-ease), background var(--pg-duration) var(--pg-ease);
}
.pg-nav[data-scrolled="true"] { border-bottom-color: var(--pg-line); background: rgba(246, 246, 243, .95); }
.pg-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--pg-header-h); }
.pg-logo { display: inline-flex; align-items: center; gap: .55rem; }
.pg-logo img { height: 38px; width: auto; }
.pg-logo span { font-family: var(--pg-font-heading); font-weight: 700; font-size: 1.25rem; color: var(--pg-primary); letter-spacing: -.03em; }
.pg-nav__links { display: flex; align-items: center; gap: 1.6rem; font-size: var(--pg-text-sm); }
.pg-nav__links a[data-navlink] { color: var(--pg-secondary); font-weight: 500; transition: color var(--pg-duration-fast) var(--pg-ease); }
.pg-nav__links a[data-navlink]:hover, .pg-nav__links a[aria-current="page"] { color: var(--pg-primary); }
.pg-nav__toggle { display: none; color: var(--pg-primary); padding: 6px; }

.pg-langsw { display: flex; gap: .25rem; }
.pg-langsw a {
  padding: 4px 9px; border-radius: var(--pg-radius-full);
  font-size: var(--pg-text-xs); font-weight: 600; color: var(--pg-secondary);
  transition: background var(--pg-duration-fast) var(--pg-ease), color var(--pg-duration-fast) var(--pg-ease);
}
.pg-langsw a[aria-current="true"], .pg-langsw a:hover { background: var(--pg-primary); color: var(--pg-on-dark); }

@media (max-width: 860px) {
  .pg-nav__toggle { display: inline-flex; }
  .pg-nav__links {
    display: none;
    position: absolute; top: var(--pg-header-h); left: 0; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 1rem;
    padding: 1.25rem var(--pg-container-pad);
    background: var(--pg-bg); border-bottom: 1px solid var(--pg-line);
  }
  .pg-nav__links[data-open="true"] { display: flex; }
}

/* ===================== FOOTER (shell público) ============= */
.pg-footer { padding: 3.5rem 0 2.5rem; background: var(--pg-ink); color: var(--pg-on-dark-muted); font-size: var(--pg-text-sm); }
.pg-footer a { color: var(--pg-on-dark-muted); transition: color var(--pg-duration-fast) var(--pg-ease); }
.pg-footer a:hover { color: var(--pg-on-dark); }
.pg-footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.pg-footer .pg-logo span { color: var(--pg-on-dark); }
.pg-footer__tagline { color: var(--pg-on-dark-muted); margin-top: .6rem; max-width: 16rem; }
.pg-footer__links { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.pg-footer__col h2 { color: var(--pg-on-dark); font-size: var(--pg-text-xs); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; font-weight: 600; }
.pg-footer__col a { display: block; padding: .25rem 0; }
.pg-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.5rem; text-align: center; color: var(--pg-on-dark-muted); font-size: var(--pg-text-xs); }

/* ===================== PÁGINA DE TEXTO (legal/prosa) ====== */
.pg-page {
  max-width: var(--pg-container-narrow);
  margin: clamp(2rem, 1rem + 4vw, 3.5rem) auto clamp(3rem, 2rem + 4vw, 5rem);
  padding-inline: var(--pg-container-pad);
}
.pg-prose {
  background: var(--pg-surface);
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  box-shadow: var(--pg-shadow-sm);
  line-height: 1.75;
}
.pg-prose > h1 { color: var(--pg-primary); margin-bottom: var(--pg-space-2xs); }
.pg-prose > h2 {
  color: var(--pg-primary);
  font-size: var(--pg-text-lg);
  margin-top: var(--pg-space-2xl);
  margin-bottom: var(--pg-space-xs);
}
.pg-prose > h2:first-of-type { margin-top: var(--pg-space-xl); }
.pg-prose p, .pg-prose li { color: var(--pg-ink); }
.pg-prose p { margin-bottom: var(--pg-space-sm); }
.pg-prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: var(--pg-space-sm); }
.pg-prose li { margin-bottom: var(--pg-space-2xs); }
.pg-prose a { color: var(--pg-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pg-prose__updated { color: var(--pg-muted); font-size: var(--pg-text-sm); margin-bottom: var(--pg-space-xl); }
.pg-prose table { margin: var(--pg-space-md) 0; }
.pg-prose th { background: var(--pg-primary); color: var(--pg-on-dark); }

/* ===================== MOVIMENTO / REVEAL ================= */
.pg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--pg-ease), transform .6s var(--pg-ease); }
.pg-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .pg-reveal { opacity: 1; transform: none; }
}