/* =============================================================================
   CF Button — design-system variants for Elementor's core Button widget
   =============================================================================

   Owned by the cf-elementor-custom-widgets plugin. The PHP side
   (customizations/class-cf-button-variants.php) replaces the "Type" dropdown,
   adds a "Disabled" switcher, and stamps `cf-button--<variant>` (and
   `cf-button--disabled`) on the widget wrapper. All visuals live here.

   Depends on cf-design-system.css for the tier 1 + tier 2 tokens.

   ---------------------------------------------------------------------------
   FIGMA MAPPING (read by column; default / hover / focus / disabled)
   ---------------------------------------------------------------------------
   Green Filled : green fill, white text   → darker green on hover
   White Filled : WHITE fill, green text   → green fill, white text on hover
   Blue Outline : transparent, blue border+text → blue fill, white text on hover
   Blue Filled  : blue fill, white text    → darker blue on hover
   Focus keeps the default fill + a layered ring, EXCEPT Blue Outline whose
   focus fill turns white (per Figma). Disabled = near-white fill, light grey
   text, for every variant.

   ---------------------------------------------------------------------------
   SPECIFICITY STRATEGY — the (0,3,0) sweet spot
   ---------------------------------------------------------------------------
   Several layers style `.elementor-button` globally, observed in Elementor's
   compiled page CSS:
     • Elementor global (kit accent):
       `.elementor-widget-button .elementor-button`            → (0,2,0)
     • Astra "Inherit theme button styles":
       `.elementor-widget-button .elementor-button` (bg/border)→ (0,2,0)
       `body .elementor-button.elementor-size-*`   (pad/radius)→ (0,2,1)
     • Elementor PER-WIDGET overrides (Style tab on one button):
       `.elementor-<page> .elementor-element.elementor-element-<id> .elementor-button` → (0,4,0)

   So we target (0,3,0): add `.elementor-widget-button` (already on the wrapper,
   alongside our `cf-button--<variant>`) to the selector. (0,3,0) beats every
   GLOBAL layer by specificity alone — no load-order tricks needed — and still
   loses to PER-WIDGET overrides (0,4,0), so per-widget Background / Text /
   Border / Padding / Radius edits keep working, granularly. No `!important`.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. COMPONENT TOKENS (tier 3) — reference semantic tokens. No raw hex.
   ----------------------------------------------------------------------------- */
.cf-button--blue-filled {
	--cf-btn-bg:              var(--cf-color-action);
	--cf-btn-color:           var(--cf-color-on-action);
	--cf-btn-border:          transparent;
	--cf-btn-bg-hover:        var(--cf-color-action-hover);
	--cf-btn-color-hover:     var(--cf-color-on-action);
	--cf-btn-border-hover:    transparent;
	--cf-btn-bg-focus:        var(--cf-color-action);      /* keeps fill + ring */
	--cf-btn-ring:            var(--cf-color-action);
	--cf-btn-bg-disabled:     var(--cf-color-disabled-bg);
	--cf-btn-color-disabled:  var(--cf-color-disabled-fg);
	--cf-btn-border-disabled: transparent;
}

.cf-button--blue-outline {
	--cf-btn-bg:              transparent;
	--cf-btn-color:           var(--cf-color-action);
	--cf-btn-border:          var(--cf-color-action);
	--cf-btn-bg-hover:        var(--cf-color-action);
	--cf-btn-color-hover:     var(--cf-color-on-action);
	--cf-btn-border-hover:    var(--cf-color-action);
	--cf-btn-bg-focus:        var(--cf-color-surface);     /* focus fill = white */
	--cf-btn-ring:            var(--cf-color-action);
	--cf-btn-bg-disabled:     var(--cf-color-disabled-bg); /* #f7f7f7 like the rest */
	--cf-btn-color-disabled:  var(--cf-color-disabled-fg);
	--cf-btn-border-disabled: var(--cf-color-disabled-border);
}

.cf-button--green-filled {
	--cf-btn-bg:              var(--cf-color-success);
	--cf-btn-color:           var(--cf-color-on-success);
	--cf-btn-border:          transparent;
	--cf-btn-bg-hover:        var(--cf-color-success-hover);
	--cf-btn-color-hover:     var(--cf-color-on-success);
	--cf-btn-border-hover:    transparent;
	--cf-btn-bg-focus:        var(--cf-color-success);     /* keeps fill + ring */
	--cf-btn-ring:            var(--cf-color-success);
	--cf-btn-bg-disabled:     var(--cf-color-disabled-bg);
	--cf-btn-color-disabled:  var(--cf-color-disabled-fg);
	--cf-btn-border-disabled: transparent;
}

.cf-button--white-filled {
	--cf-btn-bg:              var(--cf-color-surface);      /* SOLID WHITE fill */
	--cf-btn-color:           var(--cf-color-success);      /* green text/icon  */
	--cf-btn-border:          transparent;                  /* no outline       */
	--cf-btn-bg-hover:        var(--cf-color-success);
	--cf-btn-color-hover:     var(--cf-color-on-success);
	--cf-btn-border-hover:    var(--cf-color-success);
	--cf-btn-bg-focus:        var(--cf-color-surface);      /* focus fill = white */
	--cf-btn-ring:            var(--cf-color-success);      /* green ring        */
	--cf-btn-bg-disabled:     var(--cf-color-disabled-bg);
	--cf-btn-color-disabled:  var(--cf-color-disabled-fg);
	--cf-btn-border-disabled: transparent;
}

/* Shared structural tokens — identical across variants, from primitive scales. */
[class*="cf-button--"] {
	--cf-btn-radius:       var(--cf-radius-pill);
	--cf-btn-border-width: var(--cf-border-width);
	--cf-btn-padding-y:    var(--cf-space-2-5);             /* 10px */
	--cf-btn-padding-x:    var(--cf-space-6);               /* 24px */
	--cf-btn-font-family:  var(--cf-font-family-base);
	--cf-btn-font-size:    var(--cf-font-size-md);          /* 16px */
	--cf-btn-font-weight:  var(--cf-font-weight-medium);    /* 500  */
	/* 22px line-height → 44px total height: 22 + (10 padding ×2) + (1 border ×2). */
	--cf-btn-line-height:  22px;
	--cf-btn-gap:          var(--cf-space-2);               /* 8px icon↔label */
	--cf-btn-transition:   background-color var(--cf-transition-base), color var(--cf-transition-base), border-color var(--cf-transition-base), box-shadow var(--cf-transition-base);
}

/* -----------------------------------------------------------------------------
   2. THE CONSUMER RULE — (0,3,0): widget wrapper + variant class + button.
   Beats all global button layers; still loses to per-widget overrides (0,4,0).

   Widget targets share the SAME variant tokens (the wrapper carries the
   `cf-button--<variant>` class in every case):
     - core Button   : `.elementor-widget-button … .elementor-button`        → (0,3,0)
     - Slides        : `.elementor-widget-slides … .swiper-slide-inner
                        .elementor-slide-button`                             → (0,4,0)
     - Call To Action: `.elementor-widget-call-to-action …
                        .elementor-cta__button.elementor-button`            → (0,4,0)

   Slides + CTA need (0,4,0) because Elementor Pro ships DEFAULT button styles
   at (0,3,0) that would otherwise tie our rule and win on source order:
     - Slides: `.elementor-slides .swiper-slide-inner .elementor-slide-button`
       { background: transparent; border: 2px solid #fff; color: #fff }
     - CTA:    `.elementor-cta--skin-* .elementor-cta__button.elementor-button`
       { border-color; color } (+ a transparent/bordered base)
   (0,4,0) beats those defaults by specificity while still losing to per-widget
   overrides (also (0,4,0) but printed later in the page CSS).
   ----------------------------------------------------------------------------- */
.elementor-widget-button[class*="cf-button--"] .elementor-button,
.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button,
.elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cf-btn-gap);
	vertical-align: middle;

	/* 44px total height: 22px line-height + 10px×2 padding + 1px×2 border. */
	padding: var(--cf-btn-padding-y) var(--cf-btn-padding-x);

	background-color: var(--cf-btn-bg);
	color: var(--cf-btn-color);
	border-style: solid;
	border-width: var(--cf-btn-border-width);
	border-color: var(--cf-btn-border);
	border-radius: var(--cf-btn-radius);

	font-family: var(--cf-btn-font-family);
	font-size: var(--cf-btn-font-size);
	font-weight: var(--cf-btn-font-weight);
	line-height: var(--cf-btn-line-height);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;

	cursor: pointer;
	transition: var(--cf-btn-transition);
}

/* Icon (font icon or inline SVG) follows the text colour. */
.elementor-widget-button[class*="cf-button--"] .elementor-button .elementor-button-icon,
.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button .elementor-button-icon,
.elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	color: inherit;
}

.elementor-widget-button[class*="cf-button--"] .elementor-button .elementor-button-icon svg,
.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button .elementor-button-icon svg,
.elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button .elementor-button-icon svg {
	fill: currentColor;
}

/* --- Slides: variant colours + manual-override layer, above the Content Color
   leak ----------------------------------------------------------------------
   Elementor Pro's per-slide "Content Color" control stamps BOTH text colour and
   border-color on the slide button:
     `{{WRAPPER}} {{CURRENT_ITEM}} .swiper-slide-inner .elementor-slide-button`
     { color: <value>; border-color: <value> }
   In the EDITOR `{{WRAPPER}}` expands to THREE classes
   (`.elementor-<post>` + `.elementor-element` + `.elementor-element-<id>`), so
   that rule reaches (0,6,0) and is injected in a live `<style>` printed AFTER
   this stylesheet. It therefore outranks BOTH the variant defaults (0,4,0) and
   the manual Style → Button colour controls (also (0,4,0)) — a Content Color
   picked for the heading/description (typically white over a photo) repaints
   the button's text + border (e.g. an invisible white-on-white button), and it
   survives "Reset style to variant" (Content Color is a per-slide repeater
   control, outside the reset's scope).

   No single normal declaration can sit above Content Color (0,6,0) yet still
   lose to the (0,4,0) manual controls, so the layering is done with custom
   properties instead of raw specificity: the manual controls are re-pointed (in
   class-cf-button-variants.php) at `--cf-btn-*-override` properties, and this
   ONE rule paints the button from `var(--override, var(--variant))`. Nothing
   else writes those `-override` properties, so the effective order is
     manual override  >  variant default  >  (Content Color, neutralised)
   with no ties or load-order dependence, in the editor and on the frontend.

   Specificity is (0,7,0) (wrapper class tripled) so this single painting rule
   beats Content Color's (0,6,0) regardless of source order; tripling a class
   needs no DOM wrapper, so it also survives the `e_optimized_markup`
   experiment. Clearing a control drops its `-override` property and the
   `var()` fallback restores the variant default. */
.elementor-widget-slides.elementor-widget-slides.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-button.elementor-slide-button {
	background-color: var(--cf-btn-bg-override, var(--cf-btn-bg));
	color: var(--cf-btn-color-override, var(--cf-btn-color));
	border-color: var(--cf-btn-border-override, var(--cf-btn-border));
}

.elementor-widget-slides.elementor-widget-slides.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-button.elementor-slide-button:hover {
	background-color: var(--cf-btn-bg-hover-override, var(--cf-btn-bg-hover));
	color: var(--cf-btn-color-hover-override, var(--cf-btn-color-hover));
	border-color: var(--cf-btn-border-hover-override, var(--cf-btn-border-hover));
}

/* --- Hover ----------------------------------------------------------------- */
.elementor-widget-button[class*="cf-button--"] .elementor-button:hover,
.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button:hover,
.elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button:hover {
	background-color: var(--cf-btn-bg-hover);
	color: var(--cf-btn-color-hover);
	border-color: var(--cf-btn-border-hover);
}

/* --- Focus (keyboard) -----------------------------------------------------
   Default fill (or the variant's focus fill — white for Blue Outline) plus a
   layered ring: inner band + outer coloured ring. `:focus-visible` only.
   WCAG 2.4.7 / 1.4.11. */
.elementor-widget-button[class*="cf-button--"] .elementor-button:focus-visible,
.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button:focus-visible,
.elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button:focus-visible {
	background-color: var(--cf-btn-bg-focus);
	box-shadow:
		0 0 0 var(--cf-focus-ring-gap) var(--cf-focus-ring-gap-color),
		0 0 0 calc(var(--cf-focus-ring-gap) + var(--cf-focus-ring-width)) var(--cf-btn-ring);
	outline: var(--cf-focus-ring-width) solid transparent; /* Windows High Contrast Mode fallback. */
	outline-offset: var(--cf-focus-ring-gap);
}

/* Mouse `:focus` without `:focus-visible` — hover styling is enough. */
.elementor-widget-button[class*="cf-button--"] .elementor-button:focus:not(:focus-visible),
.elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button:focus:not(:focus-visible),
.elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button:focus:not(:focus-visible) {
	outline: none;
}

/* -----------------------------------------------------------------------------
   3. DISABLED state — driven by the widget's "Disabled" switcher (adds
   `cf-button--disabled` on the wrapper + aria-disabled/tabindex on the <a>).
   Near-white fill, light grey text.
   ----------------------------------------------------------------------------- */
.elementor-widget-button[class*="cf-button--"].cf-button--disabled .elementor-button,
.elementor-widget-button[class*="cf-button--"] .elementor-button:disabled,
.elementor-widget-button[class*="cf-button--"] .elementor-button[disabled],
.elementor-widget-button[class*="cf-button--"] .elementor-button[aria-disabled="true"] {
	background-color: var(--cf-btn-bg-disabled);
	color: var(--cf-btn-color-disabled);
	border-color: var(--cf-btn-border-disabled);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}