/*
 * Patch for Tailwind utility classes used across the public site's
 * markup that are missing from the frozen/purged css/final.css build.
 * final.css only contains whatever was scanned into it at its last
 * build — any class added to markup afterward, without a rebuild,
 * silently does nothing (no error, just missing spacing/color/etc).
 * Confirmed via a full-site audit (2026-08-05): every rule below was
 * verified missing from final.css before being added here.
 *
 * Values use final.css's own CSS custom properties (--color-*, --text-*)
 * where possible, so nothing here can visually drift from the rest of
 * the site's design system — this just makes the already-intended value
 * actually apply. Loaded globally (header.php), same as final.css.
 */

.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-22 { margin-top: 5.5rem; }
.pl-6 { padding-left: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.max-w-xl { max-width: 36rem; }
.object-top { object-position: top; }
.opacity-90 { opacity: 0.9; }
.border-white { border-color: #fff; }
.leading-\[0\.95\] { line-height: 0.95; }

@media (min-width: 768px) {
    .md\:text-4xl { font-size: var(--text-4xl, 2.25rem); line-height: var(--text-4xl--line-height, calc(2.5/2.25)); }
    .md\:text-\[13px\] { font-size: 13px; }
    .md\:border-l { border-left-width: 1px; }
    .md\:pt-0 { padding-top: 0px; }
    .md\:pl-8 { padding-left: 2rem; }
}

/* Missing color-shade utilities, using final.css's own color variables. */
.bg-cyan-400 { background-color: var(--color-cyan-400); }
.bg-emerald-400 { background-color: var(--color-emerald-400); }
.bg-emerald-600 { background-color: var(--color-emerald-600); }
.bg-violet-400 { background-color: var(--color-violet-400); }
.bg-violet-600 { background-color: var(--color-violet-600); }
.border-amber-100 { border-color: var(--color-amber-100); }
.border-indigo-600 { border-color: var(--color-indigo-600); }
.text-cyan-700 { color: var(--color-cyan-700); }
.text-violet-300 { color: var(--color-violet-300); }
.hover\:bg-cyan-500:hover { background-color: var(--color-cyan-500); }
.hover\:bg-emerald-50:hover { background-color: var(--color-emerald-50); }
.hover\:bg-emerald-500:hover { background-color: var(--color-emerald-500); }
.hover\:bg-violet-500:hover { background-color: var(--color-violet-500); }
.hover\:border-emerald-500:hover { border-color: var(--color-emerald-500); }
.hover\:text-indigo-300:hover { color: var(--color-indigo-300); }

/* Named gradient classes for the 3 animated hero-headline spans that used
   bg-gradient-to-r plus "from" and "via" stop classes — those two stop
   classes never compiled, and Tailwind's gradient system needs all of
   from, via, and to working together (shared CSS custom properties), so a
   partial fix wasn't reliable. Simpler and guaranteed-correct: a direct
   background-image per page, still paired with the working
   bg-clip-text, text-transparent, and .tb-gradient-anim (all confirmed
   present) for the clipped animated-shimmer effect. */
.tb-grad-forwarding { background-image: linear-gradient(to right, var(--color-cyan-400), var(--color-sky-400), var(--color-indigo-400)); }
.tb-grad-voicemail { background-image: linear-gradient(to right, var(--color-emerald-400), var(--color-teal-400), var(--color-cyan-400)); }
.tb-grad-routing { background-image: linear-gradient(to right, var(--color-violet-400), var(--color-fuchsia-400), var(--color-indigo-400)); }

/* Decorative background glow on features/business-hours-call-routing.php
   — same broken gradient-stops issue as the headlines above (the from
   and via stop classes never compiled), same fix (direct
   background-image, bypassing the chain). */
.tb-glow-routing { background-image: radial-gradient(circle at top, rgba(139,92,246,0.1), var(--color-slate-950), var(--color-slate-950)); }

/* Tailwind Typography plugin (`prose`/`prose-lg`/`prose-slate`) was never
   compiled in at all — used on privacy.php/terms.php. Minimal
   hand-written equivalent: readable max-width + spacing rhythm, not a
   full plugin port, but enough to fix the actual visual problem
   (confirmed via computed style: max-width was rendering as "none"). */
.prose { max-width: 65ch; color: #334155; line-height: 1.75; }
.prose h2 { font-size: 1.5em; font-weight: 800; margin: 1.6em 0 0.6em; color: #0f172a; }
.prose h3 { font-size: 1.25em; font-weight: 800; margin: 1.4em 0 0.5em; color: #0f172a; }
.prose p { margin: 1em 0; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.5em; }
.prose li { margin: 0.4em 0; }
.prose a { color: #4f46e5; text-decoration: underline; }
.prose strong { font-weight: 700; color: #0f172a; }
.prose-lg { font-size: 1.125rem; line-height: 1.8; }
.prose-slate { color: #334155; }

/* Entrance animation for contact.php's status banners (success/error/
   captcha-mismatch) — not a real compiled Tailwind utility, written as
   plain CSS matching the evidently-intended effect. */
@keyframes tb-fade-in-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}
.animate-fade-in-down { animation: tb-fade-in-down 0.4s ease-out; }