/*
 * Site-wide 3D buttons.
 *
 * A solid offset edge in the brand's black rather than a blurred shadow: the
 * site's buttons are flat yellow with a 10px radius, and a soft shadow only
 * muddies that edge. A hard edge underneath reads as a physical surface, and
 * the button travels down into it on press so the depth is felt, not just seen.
 *
 * Matched to the kit's own button rule:
 *   .elementor-kit-6 button, input[type=button|submit], .elementor-button
 * so every button on the site is covered by the same treatment.
 *
 * Deliberately NOT included:
 *   - links styled as text
 *   - form field controls
 *   - white / outline / ghost buttons (secondary actions)
 *   - navigation and icon-only chrome
 *   - anything inside the GHL iframe (unreachable across origins anyway)
 * Depth marks the primary action on a screen; applying it everywhere flattens
 * the hierarchy and makes a page look like a toy rather than a product.
 */

/*
 * ONLY the yellow (primary) buttons get the raised edge.
 *
 * White, outline and ghost buttons are secondary by design — giving them the
 * same treatment flattens the hierarchy, so a "Back" or "Learn more" ends up
 * shouting as loudly as the thing you actually want clicked. Depth is reserved
 * for the primary action on a screen.
 *
 * `.primary_btn` is the site's own class for these; the funnel and calendar
 * primaries are listed alongside it.
 */
.elementor-kit-6 button.primary_btn,
.elementor-kit-6 input[type="submit"].primary_btn,
.elementor-kit-6 .elementor-button.primary_btn,
#golonch-funnel .golonch-fn-btn--primary,
#golonch-funnel .golonch-cal__confirm button.golonch-fn-btn {
  box-shadow: 0 4px 0 0 var(--secoundry, #000);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.elementor-kit-6 button.primary_btn:hover,
.elementor-kit-6 input[type="submit"].primary_btn:hover,
.elementor-kit-6 .elementor-button.primary_btn:hover,
#golonch-funnel .golonch-fn-btn--primary:hover,
#golonch-funnel .golonch-cal__confirm button.golonch-fn-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--secoundry, #000);
}

.elementor-kit-6 button.primary_btn:active,
.elementor-kit-6 input[type="submit"].primary_btn:active,
.elementor-kit-6 .elementor-button.primary_btn:active,
#golonch-funnel .golonch-fn-btn--primary:active,
#golonch-funnel .golonch-cal__confirm button.golonch-fn-btn:active:not(:disabled) {
  /* Pressed flat against its own shadow. */
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--secoundry, #000);
}

/* Disabled buttons must not look pressable. */
.elementor-kit-6 button.primary_btn:disabled,
#golonch-funnel .golonch-cal__confirm button.golonch-fn-btn:disabled {
  transform: none;
  box-shadow: 0 2px 0 0 var(--secoundry, #000);
  opacity: 0.55;
}

/* Keep the depth, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .elementor-kit-6 button.primary_btn,
  .elementor-kit-6 .elementor-button.primary_btn,
  #golonch-funnel .golonch-fn-btn--primary {
    transition: none;
  }
  .elementor-kit-6 button.primary_btn:hover,
  .elementor-kit-6 button.primary_btn:active,
  .elementor-kit-6 .elementor-button.primary_btn:hover,
  .elementor-kit-6 .elementor-button.primary_btn:active,
  #golonch-funnel .golonch-fn-btn--primary:hover,
  #golonch-funnel .golonch-fn-btn--primary:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Reusable class: btn-3d
 * ------------------------------------------------------------------ *
 *
 * Add `btn-3d` to any Elementor widget's Advanced > CSS Classes field to give
 * that button the raised edge. Works whether the class lands on the widget
 * wrapper (Elementor's usual behaviour) or directly on the button.
 *
 * Deliberately colour-agnostic: the edge uses currentColor's companion token
 * rather than a fixed black, so it suits a yellow, white or dark button. Pair
 * it with `btn-3d--light` on dark buttons where a black edge would vanish.
 */

.btn-3d .elementor-button,
.btn-3d button,
.btn-3d input[type="submit"],
button.btn-3d,
a.btn-3d.elementor-button {
  box-shadow: 0 4px 0 0 var(--secoundry, #000);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-3d .elementor-button:hover,
.btn-3d button:hover,
.btn-3d input[type="submit"]:hover,
button.btn-3d:hover,
a.btn-3d.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--secoundry, #000);
}

.btn-3d .elementor-button:active,
.btn-3d button:active,
.btn-3d input[type="submit"]:active,
button.btn-3d:active,
a.btn-3d.elementor-button:active {
  /* Pressed flat against its own shadow. */
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--secoundry, #000);
}

/* For dark or black buttons, where a black edge would be invisible. */
.btn-3d--light .elementor-button,
.btn-3d--light button,
button.btn-3d--light,
a.btn-3d--light.elementor-button {
  box-shadow: 0 4px 0 0 var(--primary, #e5fe02);
}
.btn-3d--light .elementor-button:hover,
.btn-3d--light button:hover,
button.btn-3d--light:hover,
a.btn-3d--light.elementor-button:hover {
  box-shadow: 0 6px 0 0 var(--primary, #e5fe02);
}
.btn-3d--light .elementor-button:active,
.btn-3d--light button:active,
button.btn-3d--light:active,
a.btn-3d--light.elementor-button:active {
  box-shadow: 0 1px 0 0 var(--primary, #e5fe02);
}

@media (prefers-reduced-motion: reduce) {
  .btn-3d .elementor-button,
  .btn-3d button,
  button.btn-3d,
  a.btn-3d.elementor-button {
    transition: none;
  }
  .btn-3d .elementor-button:hover,
  .btn-3d .elementor-button:active,
  .btn-3d button:hover,
  .btn-3d button:active,
  button.btn-3d:hover,
  button.btn-3d:active,
  a.btn-3d.elementor-button:hover,
  a.btn-3d.elementor-button:active {
    transform: none;
  }
}