/* Legacy button compatibility bridge.
   Keep old `.btn*` and share-button classes stable while runtime markup is migrated to `.f12-btn*`.
   This file intentionally stays global, but it borrows DS tokens instead of defining a second button system. */

:root {
  --f12-legacy-btn-font-family: var(--f12-font-family-sans, "Quicksand", sans-serif);
  --f12-legacy-btn-font-size: var(--f12-font-size-sm, 0.9rem);
  --f12-legacy-btn-font-size-sm: var(--f12-font-size-xs, 0.825rem);
  --f12-legacy-btn-weight: var(--f12-font-weight-bold, 700);
  --f12-legacy-btn-radius: var(--f12-radius-pill, 999px);
  --f12-legacy-btn-gap: var(--f12-space-2, 0.5rem);
  --f12-legacy-btn-gap-tight: calc(var(--f12-space-2, 0.5rem) - var(--f12-space-1, 0.25rem));
  --f12-legacy-btn-padding-y: 0.7rem;
  --f12-legacy-btn-padding-x: 1.25rem;
  --f12-legacy-btn-padding-x-tight: 1rem;
  --f12-legacy-btn-min-height: 2.75rem;
  --f12-legacy-btn-shadow: var(--f12-shadow-1, 0 4px 20px rgba(0, 0, 0, 0.04));
  --f12-legacy-btn-shadow-hover: var(--f12-shadow-2, 0 12px 40px rgba(0, 0, 0, 0.08));
  --f12-legacy-btn-border: var(--f12-color-border-subtle, rgba(45, 45, 45, 0.12));
  --f12-legacy-btn-border-strong: var(--f12-color-border-strong, rgba(45, 45, 45, 0.2));
  --f12-legacy-btn-bg: var(--f12-color-surface-card, #ffffff);
  --f12-legacy-btn-bg-subtle: var(--f12-color-surface-subtle, #f7f7f7);
  --f12-legacy-btn-text: var(--f12-color-text-heading, #333333);
  --f12-legacy-btn-text-primary: var(--f12-color-text-primary, #2d2d2d);
  --f12-legacy-btn-text-muted: var(--f12-color-text-muted, #757575);
  --f12-legacy-btn-text-on-dark: var(--f12-color-text-on-dark, #ffffff);
  --f12-legacy-share-text: #545458;
  --f12-legacy-share-text-hover: var(--f12-color-text-primary, #2d2d2d);
  --f12-legacy-share-font-size: 14px;
  --f12-legacy-share-font-weight: 600;
  --f12-legacy-share-gap: var(--f12-space-2, 0.5rem);
  --f12-legacy-share-padding: 4px 0 4px 8px;
}

.page-share-btn,
.schedule-share-btn,
.card-share-btn {
  cursor: pointer;
}

.page-share-btn .elementor-button-text,
.schedule-share-btn .elementor-button-text,
.card-share-btn .elementor-button-text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.page-share-btn .elementor-button-content-wrapper,
.schedule-share-btn .elementor-button-content-wrapper,
.card-share-btn .elementor-button-content-wrapper,
.page-share-btn.elementor-widget .elementor-button .elementor-button-content-wrapper,
.schedule-share-btn.elementor-widget .elementor-button .elementor-button-content-wrapper,
.card-share-btn.elementor-widget .elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--f12-legacy-share-gap);
  line-height: 1;
}

.page-share-btn .elementor-button-icon svg,
.card-share-btn .elementor-button-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.schedule-share-btn .elementor-button-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Share buttons are a temporary compatibility surface.
   Default them to the lighter inline action treatment so hook-only legacy markup stays safe.
   Use a narrow !important override because Elementor widget-level styling is otherwise unpredictable. */
.page-share-btn.elementor-widget .elementor-button,
.schedule-share-btn.elementor-widget .elementor-button,
.card-share-btn.elementor-widget .elementor-button {
  background-color: transparent !important;
  color: var(--f12-legacy-share-text) !important;
  fill: currentColor !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: var(--f12-legacy-share-padding) !important;
  font-family: var(--f12-font-family-sans, "Quicksand", sans-serif) !important;
  font-size: var(--f12-legacy-share-font-size) !important;
  font-weight: var(--f12-legacy-share-font-weight) !important;
  letter-spacing: 0 !important;
  justify-content: flex-start !important;
  gap: var(--f12-legacy-share-gap) !important;
  text-decoration: none !important;
}

.page-share-btn.elementor-widget .elementor-button:hover,
.schedule-share-btn.elementor-widget .elementor-button:hover,
.card-share-btn.elementor-widget .elementor-button:hover {
  background-color: transparent !important;
  color: var(--f12-legacy-share-text-hover) !important;
  fill: currentColor !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em !important;
}

/* Explicit share variants can opt back into the stronger DS-style elevated button look.
   Support both future `.f12-share--primary` usage and old markup that already carries `.btn--primary`. */
.f12-share--primary.elementor-widget .elementor-button,
.btn--primary.page-share-btn.elementor-widget .elementor-button,
.btn--primary.schedule-share-btn.elementor-widget .elementor-button,
.btn--primary.card-share-btn.elementor-widget .elementor-button,
.page-share-btn.btn--primary.elementor-widget .elementor-button,
.schedule-share-btn.btn--primary.elementor-widget .elementor-button,
.card-share-btn.btn--primary.elementor-widget .elementor-button {
  background-color: var(--f12-legacy-btn-bg) !important;
  color: var(--f12-legacy-btn-text-primary) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--f12-legacy-btn-border) !important;
  border-radius: var(--f12-legacy-btn-radius) !important;
  box-shadow: var(--f12-legacy-btn-shadow) !important;
  min-height: var(--f12-legacy-btn-min-height) !important;
  padding: var(--f12-legacy-btn-padding-y) var(--f12-legacy-btn-padding-x) !important;
  font-size: var(--f12-legacy-btn-font-size) !important;
  font-weight: var(--f12-legacy-btn-weight) !important;
  letter-spacing: 0.02em !important;
  justify-content: center !important;
  gap: var(--f12-legacy-btn-gap) !important;
  text-decoration: none !important;
}

.f12-share--primary.elementor-widget .elementor-button:hover,
.btn--primary.page-share-btn.elementor-widget .elementor-button:hover,
.btn--primary.schedule-share-btn.elementor-widget .elementor-button:hover,
.btn--primary.card-share-btn.elementor-widget .elementor-button:hover,
.page-share-btn.btn--primary.elementor-widget .elementor-button:hover,
.schedule-share-btn.btn--primary.elementor-widget .elementor-button:hover,
.card-share-btn.btn--primary.elementor-widget .elementor-button:hover {
  color: var(--f12-legacy-btn-text-primary) !important;
  border-color: var(--f12-legacy-btn-border-strong) !important;
  box-shadow: var(--f12-legacy-btn-shadow-hover) !important;
  text-decoration: none !important;
}

/* Keep this post-specific override until the production content is migrated away from legacy button classes. */
.postid-303842 .btn--primary .elementor-button {
  background-color: var(--e-global-color-9b9443e) !important;
  color: var(--e-global-color-9c9117b) !important;
  border-color: var(--e-global-color-9b9443e) !important;
}

/* Base legacy button shape.
   Includes share-button triggers because live Elementor markup may use those classes without `.btn`. */
a.btn,
button.btn,
.btn.elementor-widget .elementor-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f12-legacy-btn-gap);
  min-height: var(--f12-legacy-btn-min-height);
  padding: var(--f12-legacy-btn-padding-y) var(--f12-legacy-btn-padding-x);
  border: 1px solid var(--f12-legacy-btn-border);
  border-radius: var(--f12-legacy-btn-radius);
  background: var(--f12-legacy-btn-bg);
  box-shadow: var(--f12-legacy-btn-shadow);
  color: var(--f12-legacy-btn-text);
  cursor: pointer;
  font-family: var(--f12-legacy-btn-font-family);
  font-size: var(--f12-legacy-btn-font-size);
  font-weight: var(--f12-legacy-btn-weight);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    background-color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    border-color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    box-shadow var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease);
}

a.btn:hover,
button.btn:hover,
.btn.elementor-widget .elementor-button:hover {
  transform: translateY(-1px);
  border-color: var(--f12-legacy-btn-border-strong);
  box-shadow: var(--f12-legacy-btn-shadow-hover);
  color: var(--f12-legacy-btn-text);
  text-decoration: none;
}

/* Keep icon-variant buttons aligned with text-only buttons. */
a.btn--with-icon,
.btn--with-icon.elementor-widget .elementor-button {
  gap: var(--f12-legacy-btn-gap-tight);
  padding-left: var(--f12-legacy-btn-padding-x-tight);
  padding-right: var(--f12-legacy-btn-padding-x-tight);
}

a.page-share-btn,
button.page-share-btn,
.page-share-btn.elementor-widget .elementor-button,
a.schedule-share-btn,
button.schedule-share-btn,
.schedule-share-btn.elementor-widget .elementor-button,
a.card-share-btn,
button.card-share-btn,
.card-share-btn.elementor-widget .elementor-button,
a.f12-share--minimal,
button.f12-share--minimal,
.f12-share--minimal.elementor-widget .elementor-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--f12-legacy-share-gap);
  min-height: auto;
  padding: var(--f12-legacy-share-padding);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--f12-legacy-share-text);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--f12-legacy-btn-font-family);
  font-size: var(--f12-legacy-share-font-size);
  font-weight: var(--f12-legacy-share-font-weight);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  transition:
    color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    text-decoration-color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease);
}

a.page-share-btn:hover,
button.page-share-btn:hover,
.page-share-btn.elementor-widget .elementor-button:hover,
a.schedule-share-btn:hover,
button.schedule-share-btn:hover,
.schedule-share-btn.elementor-widget .elementor-button:hover,
a.card-share-btn:hover,
button.card-share-btn:hover,
.card-share-btn.elementor-widget .elementor-button:hover,
a.f12-share--minimal:hover,
button.f12-share--minimal:hover,
.f12-share--minimal.elementor-widget .elementor-button:hover {
  transform: none;
  color: var(--f12-legacy-share-text-hover);
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a.page-share-btn:focus-visible,
button.page-share-btn:focus-visible,
a.schedule-share-btn:focus-visible,
button.schedule-share-btn:focus-visible,
a.card-share-btn:focus-visible,
button.card-share-btn:focus-visible,
a.f12-share--minimal:focus-visible,
button.f12-share--minimal:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.page-share-btn .elementor-button-icon,
.schedule-share-btn .elementor-button-icon,
.card-share-btn .elementor-button-icon,
.btn--with-icon .elementor-button-icon,
.btn--with-icon.elementor-widget .elementor-button .elementor-button-icon,
.page-share-btn.elementor-widget .elementor-button .elementor-button-icon,
.schedule-share-btn.elementor-widget .elementor-button .elementor-button-icon,
.card-share-btn.elementor-widget .elementor-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
  flex-shrink: 0;
}

.page-share-btn .elementor-button-icon svg,
.schedule-share-btn .elementor-button-icon svg,
.card-share-btn .elementor-button-icon svg,
.page-share-btn.elementor-widget .elementor-button .elementor-button-icon svg,
.schedule-share-btn.elementor-widget .elementor-button .elementor-button-icon svg,
.card-share-btn.elementor-widget .elementor-button .elementor-button-icon svg {
  fill: currentColor;
}

.btn--with-icon .elementor-button-icon svg,
.btn--with-icon.elementor-widget .elementor-button .elementor-button-icon svg {
  width: 18px;
  height: 18px;
}

/* Legacy primary stays neutral and elevated so it matches the current DS direction on light surfaces. */
a.btn--primary,
button.btn--primary,
.btn--primary.elementor-widget .elementor-button,
a.f12-share--primary,
button.f12-share--primary,
.f12-share--primary.elementor-widget .elementor-button,
a.btn--primary.page-share-btn,
button.btn--primary.page-share-btn,
.btn--primary.page-share-btn.elementor-widget .elementor-button,
a.btn--primary.schedule-share-btn,
button.btn--primary.schedule-share-btn,
.btn--primary.schedule-share-btn.elementor-widget .elementor-button,
a.btn--primary.card-share-btn,
button.btn--primary.card-share-btn,
.btn--primary.card-share-btn.elementor-widget .elementor-button,
a.page-share-btn.btn--primary,
button.page-share-btn.btn--primary,
.page-share-btn.btn--primary.elementor-widget .elementor-button,
a.schedule-share-btn.btn--primary,
button.schedule-share-btn.btn--primary,
.schedule-share-btn.btn--primary.elementor-widget .elementor-button,
a.card-share-btn.btn--primary,
button.card-share-btn.btn--primary,
.card-share-btn.btn--primary.elementor-widget .elementor-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f12-legacy-btn-gap);
  min-height: var(--f12-legacy-btn-min-height);
  padding: var(--f12-legacy-btn-padding-y) var(--f12-legacy-btn-padding-x);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--f12-legacy-btn-radius);
  background: var(--f12-legacy-btn-bg);
  color: var(--f12-legacy-btn-text-primary);
  border-color: var(--f12-legacy-btn-border);
  box-shadow: var(--f12-legacy-btn-shadow);
  cursor: pointer;
  font-family: var(--f12-legacy-btn-font-family);
  font-size: var(--f12-legacy-btn-font-size);
  font-weight: var(--f12-legacy-btn-weight);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    background-color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    border-color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    box-shadow var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease),
    color var(--f12-duration-normal, 280ms) var(--f12-ease-standard, ease);
}

a.btn--primary:hover,
button.btn--primary:hover,
.btn--primary.elementor-widget .elementor-button:hover,
a.f12-share--primary:hover,
button.f12-share--primary:hover,
.f12-share--primary.elementor-widget .elementor-button:hover,
a.btn--primary.page-share-btn:hover,
button.btn--primary.page-share-btn:hover,
.btn--primary.page-share-btn.elementor-widget .elementor-button:hover,
a.btn--primary.schedule-share-btn:hover,
button.btn--primary.schedule-share-btn:hover,
.btn--primary.schedule-share-btn.elementor-widget .elementor-button:hover,
a.btn--primary.card-share-btn:hover,
button.btn--primary.card-share-btn:hover,
.btn--primary.card-share-btn.elementor-widget .elementor-button:hover,
a.page-share-btn.btn--primary:hover,
button.page-share-btn.btn--primary:hover,
.page-share-btn.btn--primary.elementor-widget .elementor-button:hover,
a.schedule-share-btn.btn--primary:hover,
button.schedule-share-btn.btn--primary:hover,
.schedule-share-btn.btn--primary.elementor-widget .elementor-button:hover,
a.card-share-btn.btn--primary:hover,
button.card-share-btn.btn--primary:hover,
.card-share-btn.btn--primary.elementor-widget .elementor-button:hover {
  transform: translateY(-1px);
  color: var(--f12-legacy-btn-text-primary);
  border-color: var(--f12-legacy-btn-border-strong);
  box-shadow: var(--f12-legacy-btn-shadow-hover);
  text-decoration: none;
}

a.btn--secondary,
button.btn--secondary,
.btn--secondary.elementor-widget .elementor-button {
  background: transparent;
  color: var(--f12-legacy-btn-text);
  border-color: var(--f12-legacy-btn-border);
  box-shadow: none;
}

a.btn--secondary:hover,
button.btn--secondary:hover,
.btn--secondary.elementor-widget .elementor-button:hover {
  background: var(--f12-legacy-btn-bg-subtle);
  color: var(--f12-legacy-btn-text);
  border-color: var(--f12-legacy-btn-border-strong);
  box-shadow: none;
}

/* Read-more keeps the lighter legacy treatment until that UI is migrated. */
a.btn--read-more,
button.btn--read-more,
.btn--read-more.elementor-widget .elementor-button {
  background: var(--f12-legacy-btn-bg);
  color: var(--f12-legacy-btn-text-muted);
  border-color: var(--f12-legacy-btn-border);
  box-shadow: none;
  margin: 10px 0;
}

a.btn--read-more:hover,
button.btn--read-more:hover,
.btn--read-more.elementor-widget .elementor-button:hover {
  background: var(--f12-legacy-btn-bg-subtle);
  color: var(--f12-legacy-btn-text);
  border-color: var(--f12-legacy-btn-border-strong);
  box-shadow: none;
}

a.btn--outline,
button.btn--outline,
.btn--outline.elementor-widget .elementor-button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--f12-legacy-btn-text-on-dark);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

a.btn--outline:hover,
button.btn--outline:hover,
.btn--outline.elementor-widget .elementor-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--f12-legacy-btn-text-on-dark);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: none;
}

a.btn--small,
button.btn--small,
.btn--small.elementor-widget .elementor-button {
  gap: var(--f12-space-1, 0.25rem);
  min-height: auto;
  padding: 0.55rem 1rem;
  font-size: var(--f12-legacy-btn-font-size-sm);
}