/* ==========================================================================
   THEME.CSS — t01-dental-clinic
   Perfil: Clínica odontológica — editorial ousado, sóbrio e elegante
   Personalidade: confiança, cuidado, excelência, serenidade
   Paleta: chumbo + dourado · Tipografia: Italiana (display, 1 peso) + Inter
   DNA: docs/design/dna/t01-dental-clinic.md (MANDA — lê-lo antes de editar)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Inter:wght@300;400;500;600&display=swap');

/* Rede de segurança contra min-content (gotcha grid auto-min) —
   clip (nunca hidden) preserva fixed/sticky do nav, float e banner.
   Top-level (fora de :root) — regra aninhada seria descartada por
   browsers sem suporte a CSS nesting */
body { overflow-x: clip; }

:root {
  --font-display: 'Italiana', Georgia, serif;   /* 1 peso (400) — sem faux-bold */
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Chumbo (cinza profundo) — cor de marca ─────────────── */
  --color-primary:       #2B2B31;
  --color-primary-dark:  #1D1D22;
  --color-primary-light: #4A4A54;
  --color-primary-ghost: color-mix(in srgb, var(--color-primary) 6%, transparent);

  /* ── Dourado sóbrio — acento ────────────────────────────── */
  --color-accent:        #B08D57;
  --color-accent-dark:   #8A6B38;   /* texto sobre claro: 4.95:1 ✓ (AA) */
  --color-accent-light:  #C9A87B;
  --color-accent-ghost:  color-mix(in srgb, var(--color-accent) 14%, transparent);

  /* ── Faixas escuras (stats, portfolio, cta, contato) ────── */
  --color-dark:          #232326;
  --color-dark-alt:      #2C2C31;
  --color-dark-surface:  #38383F;

  /* ── WhatsApp ──────────────────────────────────────────────
     --color-whatsapp (#25D366) com texto branco reprova AA (1.98:1);
     a barra mobile usa o verde profundo (5.26:1 ✓) */
  --color-whatsapp-deep: #0E7A66;

  /* ── Superfícies claras ─────────────────────────────────── */
  --color-bg:            #FAF9F7;
  --color-bg-alt:        #FFFFFF;
  --color-border:        #E8E4DD;
  --color-border-dark:   rgba(255,255,255,0.12);

  --color-text:          #1F1F24;
  --color-text-muted:    #57575F;
  --color-text-light:    #64615B;

  --shadow-primary: 0 8px 32px color-mix(in srgb, var(--color-primary) 30%, transparent);
  --shadow-accent:  0 8px 28px color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* ── Radius (DNA: todos os botões retos, 12px — sem pílula) ── */
  --radius-btn:    12px;
  --radius-media:  24px;
  --radius-card:   16px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --radius-2xl:    28px;
}

/* ══ OVERRIDES ═════════════════════════════════════════════════════════
   components.css carrega DEPOIS de theme.css e vence em especificidade
   igual — estas regras exigem !important (padrão AGENTS) para que edições
   por cliente em theme.css realmente mudem o resultado. */

/* NAV — hero claro: textos escuros, scroll branco translúcido */
.nav__logo { color: var(--color-text) !important; }
.nav__logo span { color: var(--color-accent-dark) !important; }
.nav__links a { color: rgba(31, 31, 36, 0.72) !important; }
.nav__links a:hover { color: var(--color-accent-dark) !important; }
.nav__burger span { background: var(--color-text) !important; }
.nav--scrolled {
  background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent) !important;
  box-shadow: 0 1px 0 rgba(31, 31, 36, 0.06) !important;
}

/* HERO — fundo claro, serif gigante, destaque por underline dourado
   (nunca <em> itálico — regra hallmark; strong recebe o underline) */
.hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg) 100%) !important; }
.hero__title { color: var(--color-text) !important; }
.hero__title strong {
  text-decoration: underline !important;
  text-decoration-color: var(--color-accent) !important;
  text-decoration-thickness: 0.08em !important;
  text-underline-offset: 0.14em !important;
  text-decoration-skip-ink: none !important;
}
.hero__subtitle { color: var(--color-text-muted) !important; }
.hero__scroll { color: var(--color-text-muted) !important; }

/* CTA GIGANTE — brilho dourado em faixa escura */
.cta-giant::before {
  background: radial-gradient(ellipse 60% 80% at 50% 50%, color-mix(in srgb, var(--color-accent) 16%, transparent) 0%, transparent 70%) !important;
}

/* ══ MOBILE FIXES — telas estreitas ══
   .btn tem white-space: nowrap — em 320px o min-content do pill do hero
   ("Agendar avaliação") ultrapassa o container e estoura a página. */

@media (max-width: 640px) {
  .btn--lg {
    padding-inline: 1.5rem !important;
    font-size: var(--text-base) !important;
    white-space: normal !important;
  }
  /* CTA longo do nav estoura a linha em 320px — o menu mobile fullscreen
     já oferece o CTA */
  .nav__actions .btn { display: none !important; }
}