/* MODST sitewide typography
   Outfit for headings, Manrope for body text.
   Icon fonts (eicons, Font Awesome, WooCommerce, star) are deliberately NOT
   touched: they set font-family on their own ::before rules, which stay intact
   because nothing here uses a universal selector. */

:root,
body {
  --modst-font-heading: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --modst-font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Solace variables - previously resolved to bare "Manrope" with no fallback */
  --bodyfontfamily: var(--modst-font-body);
  --logotitlefontfamily: var(--modst-font-heading);
  --buttonfontfamily: var(--modst-font-body);
  --smallerfontfamily: var(--modst-font-body);
  --font-family: var(--modst-font-body);
  --nv-fallback-ff: var(--modst-font-body);
  --headingsfontfamily: var(--modst-font-heading);
  --fontfamily: var(--modst-font-body);
  --inheritedff: var(--modst-font-body);
  --e-global-typography-primary-font-family: 'Outfit';

  /* Elementor global typography */
  --e-global-typography-primary-font-family: 'Outfit';
  --e-global-typography-secondary-font-family: 'Outfit';
  --e-global-typography-text-font-family: 'Manrope';
  --e-global-typography-accent-font-family: 'Manrope';

  /* WordPress / Gutenberg presets - retires the stray third family (DM Sans) */
  --wp--preset--font-family: var(--modst-font-body);
  --wp--preset--font-family--dm-sans: var(--modst-font-body);
  --wp--preset--font-family--manrope: var(--modst-font-body);
  --wp--preset--font-family--outfit: var(--modst-font-heading);
}

/* body text */
body,
p, li, dd, dt, address, blockquote, figcaption, caption, td, th, label, legend,
input, select, textarea, button, .button, a.button,
.widget, .menu, .nav-menu, .site-footer, .hfg_header, .header-menu-sidebar,
.woocommerce-Tabs-panel, .woocommerce-tabs, .price, .amount,
.elementor-widget-text-editor, .elementor-widget-container p,
.elementor-button, .elementor-nav-menu, .elementor-icon-list-text {
  font-family: var(--modst-font-body);
}

/* headings and product titles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title, .page-title, .site-title, .product_title,
.woocommerce-loop-product__title, .woocommerce-loop-category__title,
.widget-title, .wp-block-heading,
.elementor-heading-title,
.hfg-slot .builder-item--logo .site-title {
  font-family: var(--modst-font-heading);
}

/* nav and footer headings were the most visible fallback offenders */
.hfg_header .nav-menu-primary .menu > li > a,
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
  font-family: var(--modst-font-heading);
}

.site-footer, .site-footer p, .site-footer a, .site-footer li {
  font-family: var(--modst-font-body);
}

/* MODST layout width */
/* Solace hardcodes .container at 1280px instead of reading its own --container
   variable, which left the header and footer narrower than the Elementor
   content (1600px). Follow the variable so all three line up. */
@media (min-width: 961px) {
  .container { max-width: var(--container, 1600px); }
  .site-header .container,
  .site-footer .container,
  .header--row-inner .container,
  .footer--row-inner .container { max-width: var(--container, 1600px); }
}