/*
 * MR BUD: the few styles Avada has no option or element for.
 * Everything else comes from Avada Global Options (apps/wordpress/avada/avada-options.json)
 * and native elements: buttons, title highlight "marker", checklist, content boxes (cards,
 * timeline for process steps), FAQ, breadcrumbs, before/after, forms, column hover "liftup".
 * Values only from design tokens (design/tokens/tokens.css, loaded through Avada custom_css).
 * Classes are set in the element's "CSS Class" field in Avada Builder.
 */

/* Graphite section: CSS class "mb-dark" on an Avada container. Swaps the text and line
   colors of every element inside, so they do not have to be set one by one. */
.mb-dark {
  --color-text-default: var(--color-text-inverse);
  --color-text-muted: var(--color-inverse-text-muted);
  --color-border-default: var(--color-inverse-border);
  --color-focus-ring: var(--color-inverse-focus-ring);
  --awb-color8: var(--color-text-inverse);
  --awb-color6: var(--color-inverse-text-muted);
  --awb-color3: var(--color-inverse-border);
  color: var(--color-text-default);
}

/* Eyebrow above a section heading: CSS class "mb-eyebrow" on an Avada Title (size div or p). */
.mb-eyebrow .fusion-title-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-data);
  font-weight: var(--font-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.mb-eyebrow .fusion-title-heading::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--color-brand-primary);
}

/* Yellow block behind the hero photo: CSS class "mb-hero-media" on the Avada Image element. */
.mb-hero-media { position: relative; }
.mb-hero-media::before {
  content: "";
  position: absolute;
  right: calc(-1 * var(--space-6));
  bottom: calc(-1 * var(--space-6));
  width: 46%;
  height: 58%;
  border-radius: var(--radius-lg);
  background: var(--color-brand-primary);
}
.mb-hero-media > * { position: relative; }
@media (max-width: 1024px) {
  .mb-hero-media::before { right: calc(-1 * var(--space-3)); bottom: calc(-1 * var(--space-3)); }
}

/* Mobile call bar: CSS class "mb-callbar" on an Avada container in the footer Layout,
   visible on small screens only (Avada visibility setting). Avada has no bottom-fixed position. */
@media (max-width: 760px) {
  .mb-callbar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--shadow-md);
  }
  body { padding-bottom: 76px; }
}