/* ════════════════════════════════════════════════════════════════
   nova-polish.css — Site-wide UI polish layer
   Loaded last on all pages. Fixes inconsistencies found in audit:
   button gradients, card radius scatter, contrast failures,
   typography weight errors, footer contrast, FAQ icon direction.
   ════════════════════════════════════════════════════════════════ */

/* ── 0. FOUNDATION ───────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 1. TYPOGRAPHY ───────────────────────────────────────────── */
/* Hero headline — tighter tracking for display weight */
h1 {
  letter-spacing: -0.035em;
}

/* Section headings */
h2 {
  letter-spacing: -0.025em;
}

/* Fix non-standard nav font-weight (450 fallback → 500) */
.nav-link,
.site-nav .nav-links a,
.nova-nav .nav-link {
  font-weight: 500 !important;
}

/* Active nav link — orange, not purple */
.nav-link.active,
.site-nav .nav-links a.active,
.nova-nav .nav-link.active {
  color: #FF6A00 !important;
  background: rgba(255, 106, 0, 0.07) !important;
}

/* Eyebrow / section labels — consistent weight and tracking */
.section-badge,
.eyebrow-lp,
.category-label,
.bento-tag,
.tool-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── 2. PRIMARY BUTTON ───────────────────────────────────────── */
/* Consolidate: remove gradient, solid orange, 10px radius.
   Covers all btn-primary aliases across every CSS file. */
.btn-primary,
a.btn-primary,
button.btn-primary,
[class*="btn-primary"],
.btn-generate,
.tool-submit,
.cta-btn-primary {
  background: #FF6A00 !important;
  background-image: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
              0 4px 14px rgba(255, 106, 0, 0.22) !important;
  transition: background 160ms ease,
              transform 140ms ease,
              box-shadow 160ms ease !important;
  border: none !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn-generate:hover,
.tool-submit:hover {
  background: #E05500 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10),
              0 8px 22px rgba(255, 106, 0, 0.30) !important;
}

.btn-primary:active,
button.btn-primary:active,
.btn-generate:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(255, 106, 0, 0.18) !important;
}

/* Disabled state */
.btn-primary:disabled,
button.btn-primary:disabled,
.btn-generate:disabled {
  opacity: 0.50 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none !important;
}

/* ── 3. GHOST / OUTLINE BUTTON ───────────────────────────────── */
/* Increase border visibility — 0.20 opacity is insufficient */
.btn-ghost,
a.btn-ghost,
button.btn-ghost,
.btn-outline,
a.btn-outline,
.site-nav .nav-ctas .btn-outline {
  border-radius: 10px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.16) !important;
  font-weight: 500 !important;
  transition: border-color 160ms ease,
              color 160ms ease,
              background 160ms ease !important;
}

.btn-ghost:hover,
.btn-outline:hover {
  border-color: rgba(255, 106, 0, 0.55) !important;
  color: #FF6A00 !important;
  background: rgba(255, 106, 0, 0.04) !important;
}

/* ── 4. CARD SYSTEM ──────────────────────────────────────────── */
/* Unify all marketing card border-radius: 14px.
   Normalises: .tool-card (16px), .bento-card (24px), .automation-card (14px) */
.tool-card,
.bento-card,
.feature-card,
.service-card,
.automation-card,
.pricing-card,
.testimonial-card,
.testi-card,
.out-card,
.industry-card,
.step-card,
.connect-side {
  border-radius: 14px !important;
}

/* Consistent hover: single translate + two-layer shadow */
.tool-card:hover,
.bento-card:hover,
.feature-card:hover,
.service-card:hover,
.automation-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04),
              0 10px 28px rgba(0, 0, 0, 0.09) !important;
}

/* Pricing card hover is more subtle (no lift — feels more stable) */
.pricing-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09) !important;
}

/* Featured pricing card */
.pricing-card.featured,
.pricing-card[data-featured] {
  border-color: rgba(255, 106, 0, 0.35) !important;
}

/* Transition timing for all cards */
.tool-card,
.bento-card,
.feature-card,
.service-card,
.automation-card,
.pricing-card,
.testimonial-card {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
              border-color 200ms ease !important;
}

/* ── 5. SECTION BADGE ────────────────────────────────────────── */
/* Standardise pill badge: 6px 14px padding, orange-tinted bg */
.section-badge {
  padding: 5px 14px !important;
  border-radius: 6px !important;
  background: rgba(255, 106, 0, 0.08) !important;
  color: #D14600 !important;
  border: 1px solid rgba(255, 106, 0, 0.18) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

/* Remove the animated dot — too distracting */
.section-badge::before {
  display: none !important;
}

/* Badge-free and badge-popular: fix orphan color + consistent radii */
.badge-free {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  background: rgba(255, 106, 0, 0.08) !important;
  color: #D14600 !important;
  border: 1px solid rgba(255, 106, 0, 0.18) !important;
}

.badge-popular {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  background: #FF6A00 !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

/* ── 6. NAVIGATION ───────────────────────────────────────────── */
/* Enforce centered pill on every page WITHOUT using transform.
   transform: translateX(-50%) breaks position:fixed on children
   (mobile-menu uses position:fixed;inset:0 to go full-screen).
   Use left:0/right:0 + margin:auto instead — same visual result,
   no stacking-context side-effect. */
.nova-nav {
  position: fixed !important;
  top: 16px !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: calc(100% - 48px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 12px !important;
  z-index: 9000 !important;
}

/* Smooth scroll-state shadow */
.nova-nav.scrolled,
.site-nav.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08),
              0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

/* ── 7. FOOTER ───────────────────────────────────────────────── */
/* Boost border visibility: 0.05 → 0.10 opacity */
.nova-footer,
.site-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.10) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Boost link contrast: 0.38 → 0.55 opacity */
.footer-nav a,
.footer-col a,
.site-footer .footer-col a {
  color: rgba(10, 10, 20, 0.55) !important;
  transition: color 160ms ease !important;
}

.footer-nav a:hover,
.footer-col a:hover,
.site-footer .footer-col a:hover {
  color: rgba(10, 10, 20, 0.88) !important;
}

/* Footer brand description text */
.footer-brand p,
.footer-brand > p {
  color: rgba(10, 10, 20, 0.52) !important;
}

/* Footer copyright */
.footer-bottom p {
  color: rgba(10, 10, 20, 0.42) !important;
}

/* Social icons: make bg visible (0.04 → 0.07) */
.footer-social-link {
  background: rgba(0, 0, 0, 0.07) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  color: rgba(10, 10, 20, 0.50) !important;
  border-radius: 8px !important;
}

.footer-social-link:hover {
  background: rgba(255, 106, 0, 0.08) !important;
  border-color: rgba(255, 106, 0, 0.30) !important;
  color: #FF6A00 !important;
}

/* ── 8. FAQ ACCORDION ────────────────────────────────────────── */
/* Consistent border-radius with cards */
.faq-item {
  border-radius: 12px !important;
}

/* Icon: use chevron-style 180° rotation (not 45°) */
.faq-icon,
.faq-item summary::after {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg) !important;
}

/* Increase gap between FAQ items for breathing room */
.faq-list {
  gap: 6px !important;
}

/* Remove fixed max-height: let it grow naturally */
.faq-item.open .faq-answer {
  max-height: 600px !important;
}

/* ── 9. INPUTS & FORMS ───────────────────────────────────────── */
/* Universal focus ring — orange, not browser default */
input:not([type="range"]):focus,
textarea:focus,
select:focus,
.tool-input:focus,
.form-control:focus,
.email-form input:focus {
  outline: none !important;
  border-color: rgba(255, 106, 0, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.10) !important;
}

/* Range sliders — orange thumb on all pages */
input[type="range"]::-webkit-slider-thumb {
  background: #FF6A00 !important;
}
input[type="range"]::-moz-range-thumb {
  background: #FF6A00 !important;
  border: none !important;
}

/* ── 10. LINKS ───────────────────────────────────────────────── */
/* Consistent inline link style — underline on focus for a11y */
a:focus-visible {
  outline: 2px solid rgba(255, 106, 0, 0.55) !important;
  outline-offset: 2px !important;
  border-radius: 3px !important;
}

/* Smooth all anchor transitions */
a {
  transition: color 160ms ease, opacity 160ms ease;
}

/* ── 11. TESTIMONIALS ────────────────────────────────────────── */
/* Quote mark — remove external Georgia font dependency */
.testimonial-quote::before {
  font-family: var(--font-display, 'DM Sans', system-ui, sans-serif) !important;
  opacity: 0.20 !important;
  font-size: 4rem !important;
}

/* Metric numbers */
.testimonial-metric {
  font-size: 1.625rem !important;
  letter-spacing: -0.025em !important;
}

/* ── 12. TOOL-CARD EXPLORE BUTTON ────────────────────────────── */
/* launchpad.html inline styles handle .tool-try-btn (orange bg, white text).
   No overrides here — they would conflict and create invisible text. */

/* ── 13. PRICING ─────────────────────────────────────────────── */
/* Feature checklist — square icon instead of Unicode ✓ */
.pricing-features li {
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  color: rgba(10, 10, 20, 0.68) !important;
}

/* ── 14. SECTION RHYTHM FIX (via CSS attribute selectors) ─────── */
/* These are the most common section padding values.
   Standardise to 96px (a comfortable step between 80 and 120). */
section.reveal,
section[class*="section-"] {
  /* Don't override inline styles — let each section control its own padding */
}

/* ── 15. GLOBAL MICRO-INTERACTION BASELINE ───────────────────── */
/* Any element that already has a transition: add timing function */
button,
.btn,
[class*="btn-"],
.card,
[class*="-card"] {
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Prevent layout-paint jank on hover transforms */
.tool-card,
.bento-card,
.service-card,
.pricing-card,
.feature-card {
  will-change: transform;
}