/**
 * Elementor bridge.
 *
 * Maps the output of Elementor **core** widgets onto the design system, so pages stay
 * editable in Elementor while all visual decisions live in version-controlled CSS
 * instead of in per-widget settings stored in the database.
 *
 * Why this file exists: before Phase 3 the homepage carried its design inline — hard
 * coded hex colours, "Poppins" and "Fira Sans" font families and pixel sizes on every
 * individual widget. That cannot be themed, cannot be audited for contrast, and drifts
 * the moment anyone edits a section. Here, a widget carries only a class name.
 *
 * Rule for editors: set content in Elementor, set appearance here.
 */

/* ---------------------------------------------------------------------------
   Containers — Elementor's own padding is neutralised so section rhythm comes
   from the design system's tokens.
   --------------------------------------------------------------------------- */

body.mh .mh-section > .e-con-inner,
body.mh .mh-section.e-con > .e-con-inner { padding: 0; }

body.mh .mh-container.e-con,
body.mh .mh-container > .e-con-inner {
  width: 100%;
  max-width: var(--mh-container);
  margin-inline: auto;
  padding-inline: var(--mh-gutter);
}

body.mh .mh-container--wide.e-con,
body.mh .mh-container--wide > .e-con-inner { max-width: var(--mh-container-wide); }

/* ---------------------------------------------------------------------------
   Headings and text
   --------------------------------------------------------------------------- */

/* Elementor emits its own typography rule for every heading and text widget:
     .elementor-widget-heading .elementor-heading-title { font-family: var(--e-global-…) }
   That is two classes, so it outranks `body.mh h2`. Two things are done about it:
   the global typography variables are pointed at the design system's faces, and the
   rules below restate the type ramp at matching specificity. Either alone would work;
   both together mean a stale Elementor kit cannot reintroduce Poppins. */

body.mh {
  --e-global-typography-primary-font-family: "Source Serif 4 Variable";
  --e-global-typography-secondary-font-family: "Source Serif 4 Variable";
  --e-global-typography-text-font-family: "Inter Variable";
  --e-global-typography-accent-font-family: "Inter Variable";
  --e-global-typography-primary-font-weight: 600;
  --e-global-typography-secondary-font-weight: 600;
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-weight: 600;
}

body.mh .elementor-widget-heading .elementor-heading-title {
  margin: 0;
  font-family: var(--mh-font-display);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-display);
  color: inherit;
  text-wrap: balance;
}

body.mh .elementor-widget-heading h1.elementor-heading-title { font-size: var(--mh-text-4xl); }
body.mh .elementor-widget-heading h2.elementor-heading-title { font-size: var(--mh-text-3xl); }
body.mh .elementor-widget-heading h3.elementor-heading-title { font-size: var(--mh-text-2xl); }
body.mh .elementor-widget-heading h4.elementor-heading-title { font-size: var(--mh-text-xl); }

body.mh .elementor-widget-text-editor {
  font-family: var(--mh-font-body);
  font-weight: var(--mh-weight-regular);
  line-height: var(--mh-leading-normal);
}

body.mh .mh-eyebrow .elementor-heading-title {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
  line-height: 1.4;
}
body.mh .mh-section--invert .mh-eyebrow .elementor-heading-title,
body.mh .mh-hero .mh-eyebrow .elementor-heading-title { color: var(--mh-cedar-300); }

body.mh .mh-title .elementor-heading-title { max-width: 20ch; }
body.mh .mh-title--wide .elementor-heading-title { max-width: 30ch; }
body.mh .mh-hero__title .elementor-heading-title { max-width: none; }

/* Elementor ships `.e-con.e-con>.e-con-inner>.elementor-widget{max-width:100%}` — three
   classes, and it loads after this file. A measure cap has to outrank it, hence the
   extra `.elementor .e-con` qualifiers rather than !important. */
body.mh .elementor .e-con .mh-lead-text,
body.mh .elementor .e-con .mh-body-text { max-width: 42rem; }

body.mh .mh-lead-text {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-text-secondary);
}
body.mh .mh-section--invert .mh-lead-text,
body.mh .mh-hero .mh-lead-text { color: var(--mh-cedar-300); }

body.mh .mh-body-text { color: var(--mh-text-secondary); }
body.mh .mh-body-text p + p { margin-top: var(--mh-space-4); }
body.mh .mh-section--invert .mh-body-text { color: var(--mh-cedar-300); }

/* ---------------------------------------------------------------------------
   Buttons — Elementor renders the <a> inside the widget, so the component is
   applied to that element rather than to the widget wrapper.
   --------------------------------------------------------------------------- */

body.mh .mh-btn-wrap .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-2);
  min-height: 44px;
  padding: var(--mh-space-3) var(--mh-space-6);
  border: 1px solid transparent;
  border-radius: var(--mh-radius-md);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  fill: currentColor;
  transition: background-color var(--mh-dur) var(--mh-ease),
              border-color var(--mh-dur) var(--mh-ease),
              color var(--mh-dur) var(--mh-ease);
}

body.mh .mh-btn-wrap--primary .elementor-button {
  background-color: var(--mh-cedar);
  border-color: var(--mh-cedar);
  color: var(--mh-white);
}
body.mh .mh-btn-wrap--primary .elementor-button:hover,
body.mh .mh-btn-wrap--primary .elementor-button:focus-visible {
  background-color: var(--mh-cedar-700);
  border-color: var(--mh-cedar-700);
  color: var(--mh-white);
}

body.mh .mh-btn-wrap--secondary .elementor-button {
  background-color: transparent;
  border-color: var(--mh-cedar);
  color: var(--mh-cedar);
}
body.mh .mh-btn-wrap--secondary .elementor-button:hover,
body.mh .mh-btn-wrap--secondary .elementor-button:focus-visible {
  background-color: var(--mh-cedar-050);
  border-color: var(--mh-cedar-700);
  color: var(--mh-cedar-700);
}

/* Inverted grounds: hero and the closing CTA. */
body.mh .mh-hero .mh-btn-wrap--primary .elementor-button,
body.mh .mh-section--invert .mh-btn-wrap--primary .elementor-button {
  background-color: var(--mh-white);
  border-color: var(--mh-white);
  color: var(--mh-cedar-900);
}
body.mh .mh-hero .mh-btn-wrap--primary .elementor-button:hover,
body.mh .mh-section--invert .mh-btn-wrap--primary .elementor-button:hover {
  background-color: var(--mh-cedar-050);
  border-color: var(--mh-cedar-050);
  color: var(--mh-cedar-900);
}
body.mh .mh-hero .mh-btn-wrap--secondary .elementor-button,
body.mh .mh-section--invert .mh-btn-wrap--secondary .elementor-button {
  background-color: transparent;
  border-color: var(--mh-cedar-300);
  color: var(--mh-white);
}
body.mh .mh-hero .mh-btn-wrap--secondary .elementor-button:hover,
body.mh .mh-section--invert .mh-btn-wrap--secondary .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--mh-white);
  color: var(--mh-white);
}

/* Action row: two buttons side by side, stacked and full-width on small screens. */
body.mh .mh-actions-row { flex-direction: row; flex-wrap: wrap; gap: var(--mh-space-3); }
@media (max-width: 480px) {
  body.mh .mh-actions-row { flex-direction: column; align-items: stretch; }
  body.mh .mh-actions-row .elementor-button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Shortcode widgets — the data-driven blocks supply their own layout, so the
   Elementor wrapper must not add any.
   --------------------------------------------------------------------------- */

body.mh .elementor-widget-shortcode .elementor-widget-container > * { margin-block: 0; }

/* ---------------------------------------------------------------------------
   Insights list, restyled onto the card system.
   --------------------------------------------------------------------------- */

body.mh .myherb-insights__list { gap: var(--mh-space-6); }

body.mh .myherb-insights__item {
  gap: var(--mh-space-2);
  padding-top: var(--mh-space-5);
  border-top: 2px solid var(--mh-border);
}
body.mh .myherb-insights__link { text-decoration: none; }
body.mh .myherb-insights__title {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-xl);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-snug);
  color: var(--mh-text);
}
body.mh .myherb-insights__link:hover .myherb-insights__title { color: var(--mh-cedar); }
body.mh .myherb-insights__date {
  order: -1;
  font-size: var(--mh-text-xs);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-text-muted);
  opacity: 1;
}
body.mh .myherb-insights__excerpt { color: var(--mh-text-secondary); font-size: var(--mh-text-sm); }
body.mh .myherb-insights__more { margin-top: var(--mh-space-8); }

/* ---------------------------------------------------------------------------
   Block-level spacing shared by the shortcode blocks.
   --------------------------------------------------------------------------- */

body.mh .myherb-block__more { margin-top: var(--mh-space-8); }
body.mh .myherb-ingredient__botanical { font-size: var(--mh-text-sm); }
body.mh .myherb-ingredient .mh-card__foot .mh-link-arrow { pointer-events: none; }

/* Elementor button rendered as the design system's arrow link, for the quiet
   "read more about this" links that end most homepage sections. */
body.mh .mh-linkarrow-wrap .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2);
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-cedar);
  text-decoration: none;
  transition: color var(--mh-dur) var(--mh-ease);
}
body.mh .mh-linkarrow-wrap .elementor-button::after {
  content: "\2192";
  transition: transform var(--mh-dur) var(--mh-ease);
}
body.mh .mh-linkarrow-wrap .elementor-button:hover { color: var(--mh-clay-700); text-decoration: underline; }
body.mh .mh-linkarrow-wrap .elementor-button:hover::after { transform: translateX(3px); }
body.mh .mh-section--invert .mh-linkarrow-wrap .elementor-button { color: var(--mh-white); }