/**
 * Elementor common overrides
 *
 * Makes native Elementor widgets inherit the WPCore design system so pages
 * built in Elementor match the theme without styling each widget by hand.
 *
 * Loaded AFTER `elementor-frontend` (see core/enqueue.php) so these defaults
 * win over Elementor's built-in styles and Kit globals, while any per-widget
 * styling set in the Elementor editor (higher specificity, loaded later in
 * post-<id>.css) still overrides them.
 *
 * Design tokens (--color-primary-*, --font-sans, ...) come from the compiled
 * Tailwind bundle (assets/dist/css/style.css) on :root; hex fallbacks mirror
 * assets/src/css/theme.css + main.css in case the bundle order changes.
 *
 * @package WPCore
 */

/* -------------------------------------------------------------------------
 * Typography — route Elementor's global font families to the theme font.
 * The Kit defaults these to Roboto / Roboto Slab (whose Google Fonts we drop
 * in core/enqueue.php); setting them on the content wrapper makes every widget
 * (heading, text, button, ...) inherit Montserrat instead. Nearer ancestor
 * than body.elementor-kit-*, so it wins for all descendants.
 * ---------------------------------------------------------------------- */
.elementor {
  --e-global-typography-primary-font-family: var(--font-sans, "Montserrat", sans-serif);
  --e-global-typography-secondary-font-family: var(--font-sans, "Montserrat", sans-serif);
  --e-global-typography-text-font-family: var(--font-sans, "Montserrat", sans-serif);
  --e-global-typography-accent-font-family: var(--font-sans, "Montserrat", sans-serif);
}

/* -------------------------------------------------------------------------
 * Button — common default = theme primary button (.btn.btn-primary)
 * Mirrors assets/src/css/components/buttons.css (.btn + .btn-primary + .btn-lg)
 *
 * Specificity note: Elementor bakes a default "buttons use accent color" rule
 * into every page's post-<id>.css as
 *   .elementor-widget-button .elementor-button        -> (0,3,0) here beats it
 * while a button styled individually in the editor generates
 *   .elementor-<id> .elementor-element.elementor-element-<eid> .elementor-button
 *   -> (0,4,0), so that per-widget customization still wins over this default.
 * ---------------------------------------------------------------------- */
.elementor .elementor-button,
.elementor .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  font-family: var(--font-sans, "Montserrat", sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  fill: #fff;
  background-color: var(--color-primary-500, #ecb95d);
  border: none;
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Keep default (primary-500) look on visited links — only the text color. */
.elementor .elementor-button:visited,
.elementor .elementor-widget-button .elementor-button:visited {
  color: #fff;
  fill: #fff;
}

.elementor .elementor-button:hover,
.elementor .elementor-button:focus,
.elementor .elementor-widget-button .elementor-button:hover,
.elementor .elementor-widget-button .elementor-button:focus {
  color: #fff;
  fill: #fff;
  background-color: var(--color-primary-600, #bd944a);
  box-shadow: 0 3px 10px 0 rgba(151, 84, 53, 1);
}