/* =========================================================
   12D Button System
   File: assets/css/button.css
   =========================================================

   Purpose
   -------
   Shared structural, semantic-role, interaction-state, and accessibility
   styling for canonical 12D buttons used by the standalone Button widget
   and by other framework components that opt into the Button system.

   Visual identity remains controlled through Elementor Global Styles,
   consumer Style controls, and the website's design system.
   ========================================================= */

.d12-button__wrap {
  width: 100%;
}

/*
 * Canonical Button structure.
 *
 * Shared by the standalone 12D – Button widget and Button-system consumers
 * such as the Card CTA when CTA Style = Button.
 *
 * Role classes are included in these selectors deliberately. This gives the
 * shared system enough specificity to coexist with Elementor's own button
 * styling without requiring consumers such as Card to carry Elementor's
 * .elementor-button class merely to receive canonical 12D Button behaviour.
 */
.d12-button.d12-button--primary,
.d12-button.d12-button--secondary,
.d12-button.d12-button--ghost {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
}

/*
 * Shared inner Button structure.
 *
 * Consumers such as Card use the same content/text/icon classes as the
 * standalone Button widget, allowing canonical icon positioning, spacing,
 * state colours, and typography behaviour to remain centralized here.
 */
.d12-button__content {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.d12-button__text {
  min-width: 0;
}

.d12-button__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--d12-button-icon-color, inherit);
}

.d12-button:not(.d12-button--presentation):hover .d12-button__icon {
  color: var(--d12-button-icon-hover-color, inherit);
}

.d12-button:focus-visible .d12-button__icon {
  color: var(--d12-button-icon-focus-color, inherit);
}

/*
 * Normalize Elementor icon output for all Button consumers.
 *
 * Explicit dimensions prevent selected icons from rendering without usable
 * visual dimensions in shared Button consumers, including Card CTAs.
 * SVG fill follows currentColor so Card and other consumers automatically
 * inherit the shared Normal / Hover / Focus icon-colour system.
 */
.d12-button__icon i,
.d12-button__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.d12-button__icon svg {
  fill: currentColor;
}

/*
 * Semantic Button Role defaults.
 *
 * Button Roles preserve a distinct Normal-state hierarchy while sharing the
 * framework's canonical temporary interaction states.
 *
 * Primary:
 * - strongest Normal presentation;
 * - white foreground on Global Accent.
 *
 * Secondary:
 * - reduced Normal emphasis;
 * - Global Accent foreground on white.
 *
 * Ghost:
 * - most subtle Normal presentation;
 * - Global Text foreground on a transparent background.
 *
 * Consumer Style controls may override these defaults locally without changing
 * the semantic Button Role.
 * Normal Accent resolves through the shared custom-colour lookup, with the
 * Elementor system Accent retained as a fallback.
 */

body .elementor a.d12-button.d12-button--primary,
button.d12-button.d12-button--primary {
  color: var(--d12-button-text-color, var(--d12-white, #ffffff));
  background-color: var(
    --d12-button-background-color,
    var(--d12-accent, var(--e-global-color-accent))
  );
  border-style: solid;
  border-width: 1px;
  border-color: var(
    --d12-button-border-color,
    var(--d12-accent, var(--e-global-color-accent))
  );
}

body .elementor a.d12-button.d12-button--secondary,
button.d12-button.d12-button--secondary {
  color: var(
    --d12-button-text-color,
    var(--d12-accent, var(--e-global-color-accent))
  );
  background-color: var(
    --d12-button-background-color,
    var(--d12-white, #ffffff)
  );
  border-style: solid;
  border-width: 1px;
  border-color: var(
    --d12-button-border-color,
    var(--d12-accent, var(--e-global-color-accent))
  );
}

body .elementor a.d12-button.d12-button--ghost,
button.d12-button.d12-button--ghost {
  color: var(--d12-button-text-color, var(--e-global-color-text));
  background-color: var(--d12-button-background-color, transparent);
  border-style: solid;
  border-width: 1px;
  border-color: var(--d12-button-border-color, var(--e-global-color-text));
}

/*
 * Native focus protection.
 *
 * Elementor and some themes apply generic `button:focus` colours to native
 * buttons. Canonical 12D Buttons own their own interaction presentation, so
 * focused Buttons receive the canonical Focus colours here rather than an
 * external theme state.
 *
 * `:focus-visible` below additionally provides the canonical keyboard Focus
 * Indicator. Hover remains independent and may coexist with Focus when both
 * interaction conditions are present.
 */
button.d12-button.d12-button--primary:focus,
button.d12-button.d12-button--secondary:focus,
button.d12-button.d12-button--ghost:focus {
  color: var(
    --d12-button-text-color-focus,
    var(--d12-accent-hover, var(--e-global-color-accent))
  );
  background-color: var(--d12-button-background-color-focus, transparent);
  border-color: var(--d12-button-border-color-focus, transparent);
}

/*
 * Canonical Hover state.
 *
 * Button Roles converge on the same temporary interaction presentation:
 * white foreground on Global Accent Hover with no ordinary visible border.
 *
 * Explicit Elementor Hover controls override only their corresponding Hover
 * custom properties.
 */
.d12-button.d12-button--primary:not(.d12-button--presentation):hover,
.d12-button.d12-button--secondary:not(.d12-button--presentation):hover,
.d12-button.d12-button--ghost:not(.d12-button--presentation):hover {
  color: var(--d12-button-text-color-hover, var(--d12-white, #ffffff));
  background-color: var(
    --d12-button-background-color-hover,
    var(--d12-accent-hover, var(--e-global-color-accent))
  );
  border-color: var(--d12-button-border-color-hover, transparent);
}

/*
 * Canonical Focus state.
 *
 * Focus is deliberately distinct from Hover:
 * - Global Accent Hover foreground;
 * - transparent background;
 * - transparent ordinary border;
 * - separate Global Accent Hover Focus Indicator.
 *
 * Explicit Elementor Focus controls continue to override the corresponding
 * Focus values independently.
 */
body .elementor a.d12-button.d12-button--primary:focus-visible,
body .elementor a.d12-button.d12-button--secondary:focus-visible,
body .elementor a.d12-button.d12-button--ghost:focus-visible,
button.d12-button.d12-button--primary:focus-visible,
button.d12-button.d12-button--secondary:focus-visible,
button.d12-button.d12-button--ghost:focus-visible {
  color: var(
    --d12-button-text-color-focus,
    var(--d12-accent-hover, var(--e-global-color-accent))
  );
  background-color: var(--d12-button-background-color-focus, transparent);
  border-color: var(--d12-button-border-color-focus, transparent);
}

/*
 * Canonical Button Focus Indicator.
 *
 * Some themes suppress button outlines with `outline-color: transparent
 * !important`. The canonical 12D Button system owns its keyboard Focus
 * Indicator, so these properties are deliberately hardened against that
 * external interference.
 */
button.d12-button:focus-visible,
a.d12-button:focus-visible,
.d12-button.d12-button--primary:focus-visible,
.d12-button.d12-button--secondary:focus-visible,
.d12-button.d12-button--ghost:focus-visible {
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  ) !important;
  outline-offset: 3px;
}

/* End of file assets/css/button.css */