/* ==========================================================================
   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)
   ========================================================================== */


/* 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; }

/* Hero seal icon rotation */
.hero__seal-icon {
  transform: rotate(-25deg) !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;
}

/* SOBRE — credenciais da profissional (E-E-A-T) */
.about__credentials {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.about__credentials-head { display: flex; align-items: center; gap: 1.25rem; }
.about__credentials-photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  flex-shrink: 0;
}
.about__credentials-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-text);
}
.about__credentials-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.about__cred {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.about__cred-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  min-width: 9rem;
}
.about__cred-value {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}

/* CONTATO — mapa embed (guard business.mapsEmbed) */
.contact__map-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.contact__map-fallback {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  text-underline-offset: 0.2em;
}
.contact__map-fallback:hover { color: var(--color-text); }

/* ══ 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; }
  /* Mapa embed mais compacto no mobile */
  .contact__map-wrap iframe { height: 320px !important; }
  /* Credenciais: foto acima do título em telas estreitas */
  .about__credentials-head { flex-direction: column; align-items: flex-start; gap: 0.9rem !important; }
  .about__credentials-photo { width: 5.25rem; height: 5.25rem; }
  .about__cred { flex-direction: column; gap: 0.15rem; }
}

/* ALINHAMENTO DESKTOP — equilibrar foto + infos do contato com a coluna esquerda (form + mapa) */
@media (min-width: 1025px) {
  .contact__info-title { margin-top: 110px; }
}