/* ZincArt — Modular CSS for View Transitions + animation polish
 * Loaded after palette.css. Doesn't touch any block markup.
 */

/* View Transitions API — instant swap (no animation).
 *
 * Page wrapper (navbar, footer, backgrounds) MUST appear in its final
 * position immediately. Only the per-element entry animations (text,
 * cards) animate via GSAP. Disable any movement on the root snapshot. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  /* No transform, no opacity change — the new snapshot just replaces
     the old one. Browser handles it as an instant atomic swap. */
}

/* Hover micro-animations (CSS only, complement GSAP scroll work) */
main a.bg-primary,
main a.bg-whatsapp,
main button.bg-primary {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  will-change: transform;
}
main a.bg-primary:hover,
main a.bg-whatsapp:hover,
main button.bg-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgb(13 153 255 / 0.4);
}
main a.bg-primary:active,
main a.bg-whatsapp:active {
  transform: translateY(0);
  transition-duration: 0.05s;
}

/* Card lift refinement */
main a.group {
  will-change: transform;
}

/* Smooth scroll for in-page anchors */
html {
  scroll-behavior: smooth;
}

/* List markers — Tailwind v4 marker: variant isn't pre-compiled, so fall
 * back to a plain CSS rule. Only affects the small sidebar lists that
 * opt into list-disc + list-inside (e.g. "Outros serviços" boxes). */
ul.list-disc.list-inside li::marker {
  color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
}

/* Home hero CTA buttons — translucent fills via color-mix
 * (Tailwind /20 /30 alpha utilities for these custom colors aren't pre-compiled). */
.hero-cta-primary {
  background-color: color-mix(in oklab, var(--primary) 20%, transparent);
}
.hero-cta-primary:hover {
  background-color: color-mix(in oklab, var(--primary) 30%, transparent);
}
.hero-cta-whatsapp {
  background-color: color-mix(in oklab, #25D366 20%, transparent);
}
.hero-cta-whatsapp:hover {
  background-color: color-mix(in oklab, #25D366 30%, transparent);
}

/* Blog article body — manual typography (the @tailwindcss/typography
 * plugin's `prose` classes aren't in the precompiled build, so the
 * markdown-rendered article was painting as one flat block of text). */
.blog-article {
  color: var(--foreground);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.blog-article > * + * { margin-top: 1.25em; }
.blog-article h2 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  scroll-margin-top: 6rem;
}
.blog-article h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.blog-article h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.blog-article p { color: var(--muted-foreground); }
.blog-article strong { color: var(--foreground); font-weight: 600; }
.blog-article a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  transition: border-color 0.15s ease;
}
.blog-article a:hover { border-bottom-color: var(--primary); }
.blog-article ul,
.blog-article ol {
  padding-left: 1.5em;
  color: var(--muted-foreground);
}
.blog-article ul { list-style: disc; }
.blog-article ol { list-style: decimal; }
.blog-article li { margin-top: 0.35em; padding-left: 0.25em; }
.blog-article li::marker { color: color-mix(in oklab, var(--primary) 65%, transparent); }
.blog-article blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1.25em;
  font-style: italic;
  color: var(--foreground);
  margin: 1.75em 0;
}
.blog-article code {
  background: var(--muted);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}
.blog-article img {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
  margin: 1.75em 0;
}
.blog-article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5em 0;
}

/* Cidade hero form card — input/textarea placeholder color
 * (Tailwind's `placeholder:text-zinc-500` variant isn't pre-compiled). */
.cidade-hero-form-card input::placeholder,
.cidade-hero-form-card textarea::placeholder {
  color: #71717a; /* zinc-500 */
  opacity: 1;
}

/* Cidade hero form card — paint at full opacity from FCP, skip the hero
 * pre-hide CSS that the rest of the hero relies on. The form is on the
 * RIGHT col and shouldn't animate in (would feel sluggish; users want
 * to interact immediately). animations.js also skips it. */
.cidade-hero-form-card,
.cidade-hero-form-card *,
html.zinc-anim-pending main > section:first-of-type .cidade-hero-form-card,
html.zinc-anim-pending main > section:first-of-type .cidade-hero-form-card *,
main > section:first-of-type.zinc-skel-pending .cidade-hero-form-card,
main > section:first-of-type.zinc-skel-pending .cidade-hero-form-card * {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
/* Inputs/textareas inside the card need their real bg/color back
 * (the skeleton rule forces them transparent + skeleton bg). */
html.zinc-anim-pending main > section .cidade-hero-form-card input:not([type="hidden"]):not([type="submit"]),
html.zinc-anim-pending main > section .cidade-hero-form-card textarea,
html.zinc-anim-pending main > section .cidade-hero-form-card label,
main > section.zinc-skel-pending .cidade-hero-form-card input:not([type="hidden"]):not([type="submit"]),
main > section.zinc-skel-pending .cidade-hero-form-card textarea,
main > section.zinc-skel-pending .cidade-hero-form-card label {
  color: #18181b !important;
  background-color: #fff !important;
  border-color: #d4d4d8 !important;
}

/* Cidade hero — right column (lead form) gets a fixed width on large screens
 * so it doesn't stretch to full width when arbitrary Tailwind values aren't compiled. */
@media (min-width: 1024px) {
  .cidade-hero-form-col {
    width: 400px;
  }
}
@media (min-width: 1280px) {
  .cidade-hero-form-col {
    width: 440px;
  }
}

/* FAQ grid — left column (categories) auto-sizes to content,
 * right column (questions) fills the remaining space. */
@media (min-width: 1024px) {
  .faq-grid {
    grid-template-columns: auto 1fr;
  }
}

/* Home hero grid — logo column auto-sizes to its content (the 410px card),
 * copy column fills remaining space. lg:grid-cols-[auto_1fr] arbitrary
 * Tailwind value isn't pre-compiled, so we set it explicitly here. */
@media (min-width: 1024px) {
  .home-hero-grid {
    grid-template-columns: auto 1fr;
  }
}

/* Respect prefers-reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  main a.bg-primary,
  main a.bg-whatsapp,
  main button.bg-primary,
  main a.group {
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}