/**
 * SmileSlot typography (dev + production):
 * - Headings / titles → League Spartan + Montserrat (same as blog)
 * - Body / UI text → Inter (clean, modern, highly legible)
 * Blog (.smileslot-blog) uses blog-typography.css instead.
 *
 * NOTE: Comic Sans MS was removed (request: poor visibility/clarity on PWA + mobile).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=League+Spartan:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --ff-heading: 'League Spartan', 'Montserrat', sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bs-font-sans-serif: var(--ff-body);
  --bs-body-font-family: var(--ff-body);
}

/* Default page text */
html,
body {
  font-family: var(--ff-body) !important;
}

/* Inter for readable / UI text (not blog) */
html body:not(.smileslot-blog) :is(p,
  span:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.ni):not(.material-icons):not([class^='fa-']):not([class^='ni-']),
  li, td, th, label, legend, caption,
  input, textarea, select, button, optgroup,
  a, small, em, strong, b, blockquote, figcaption,
  dd, dt, address, time, nav, footer, .btn, .form-control,
  .navbar, .nav-link, .dropdown-item, .list-group-item,
  .alert, .badge, .table, .modal-body, .offcanvas-body) {
  font-family: var(--ff-body) !important;
}

/* Headings & titles — higher specificity than `body *` overrides */
html body :is(h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6,
  .hero-title,
  .section-subtitle,
  .section-title,
  .card-title,
  .service-header .h2,
  .cta-content .section-title,
  .blog-card .card-title,
  .section__title) {
  font-family: var(--ff-heading) !important;
}

/* Blog keeps full League Spartan stack from blog-typography.css */
html body.smileslot-blog {
  font-family: var(--ff-heading) !important;
}

/* Font Awesome (Regular/Solid/Free) — preserve specific FA font-family */
html body .fa,
html body .fas,
html body .far,
html body .fal,
html body .fad,
html body .fa-solid,
html body .fa-regular,
html body [class^='fa-']:not(.fab):not(.fa-brands),
html body [class*=' fa-']:not(.fab):not(.fa-brands) {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Font Awesome (Brands) — preserve brand-specific font-family */
html body .fab,
html body .fa-brands {
  font-family: 'Font Awesome 5 Brands', 'Font Awesome 6 Brands', sans-serif !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Nucleo (Argon) — @font-face family name is NucleoIcons */
html body .ni,
html body [class^='ni-'],
html body [class*=' ni-'] {
  font-family: 'NucleoIcons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Material icons */
html body .material-icons,
html body .material-icons-outlined,
html body .material-symbols-outlined {
  font-family: 'Material Icons' !important;
}

/* Lucide renders inline SVG; hide empty <i data-lucide> placeholders */
html body i[data-lucide]:empty {
  display: inline-block;
  width: 1em;
  height: 1em;
}