/*
 * Button variants. The injected "Variant" control (functions.php) stamps
 * redteam-button--<variant> on the widget wrapper; this file owns every variant's
 * look. "Custom" intentionally has no rule — it reveals the native Type + Style
 * controls for one-off buttons instead.
 *
 * Structure: shared declarations first, in grouped "skeleton" rules, then each
 * variant adds only what differs (colours + hover). A shared property is defined
 * once, never repeated per variant.
 *
 * ON !important: these selectors already out-specify Elementor's Kit CSS, so that
 * is not what it's for. It is kept ONLY on properties a per-widget Style-tab
 * override could otherwise win — those generate higher-specificity, later-loaded
 * rules, and a preset must beat them, since the Style tab stays open on preset
 * buttons. Layout and border win on specificity alone and carry none. (Hide the
 * Style tab in functions.php and every !important here could go.)
 *
 * :focus is styled alongside :hover throughout, because Elementor applies its own
 * hover styles on focus too.
 */


/* SHARED */

.elementor-widget-button:is(.redteam-button--primary, .redteam-button--secondary, .redteam-button--tertiary, .redteam-button--link, .redteam-button--login) .elementor-button {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body-small) !important;
	font-size: var(--font-body-small-size) !important;
	font-weight: var(--font-body-small-weight) !important;
	line-height: var(--font-body-small-line-height) !important;
}

/* Solid button shape — centred, padded, rounded. Link opts out (see below). */
.elementor-widget-button:is(.redteam-button--primary, .redteam-button--secondary, .redteam-button--tertiary, .redteam-button--link, .redteam-button--login) .elementor-button {
	justify-content: center;
	padding: var(--s3) var(--s4) !important;
	border-radius: var(--s05) !important;
}

/* Icon/label gap — every variant. */
.elementor-widget-button:is(.redteam-button--primary, .redteam-button--secondary, .redteam-button--tertiary, .redteam-button--link, .redteam-button--login) .elementor-button-content-wrapper {
	align-items: center;
	gap: var(--s2);
}

/* The arrow glyph, and the Link variant's colour/underline/hover treatment, live in
 * the shared ARROW LINK section of style.css — not redefined here. */

/* Solid variants — icons follow the button's text colour. (Link sets its own.) */
.elementor-widget-button:is(.redteam-button--primary, .redteam-button--secondary, .redteam-button--tertiary, .redteam-button--link, .redteam-button--login) .elementor-button-icon svg {
	fill: currentColor;
}

.elementor-widget-button:is(.redteam-button--primary, .redteam-button--secondary, .redteam-button--tertiary, .redteam-button--link, .redteam-button--login) .elementor-button-icon i {
	color: inherit;
}





/* PRIMARY */

.elementor-widget-button.redteam-button--primary .elementor-button {
	background-color: var(--color-red-200-base) !important;
	color: var(--color-white) !important;
}

.elementor-widget-button.redteam-button--primary .elementor-button:hover,
.elementor-widget-button.redteam-button--primary .elementor-button:focus {
	background-color: var(--color-red-500) !important;
	color: var(--color-pearl-200-base) !important;
}





/* SECONDARY */

.elementor-widget-button.redteam-button--secondary .elementor-button {
	background-color: var(--color-white) !important;
	color: var(--color-walnut-400) !important;
}

.elementor-widget-button.redteam-button--secondary .elementor-button:hover,
.elementor-widget-button.redteam-button--secondary .elementor-button:focus {
	background-color: var(--color-walnut-400) !important;
	color: var(--color-pearl-200-base) !important;
}





/* TERTIARY */

.elementor-widget-button.redteam-button--tertiary .elementor-button {
	box-shadow: inset 0 0 0 1rem var(--color-walnut-400);
	background-color: var(--color-white) !important;
	color: var(--color-walnut-400) !important;
}

.elementor-widget-button.redteam-button--tertiary .elementor-button:hover,
.elementor-widget-button.redteam-button--tertiary .elementor-button:focus {
	background-color: var(--color-walnut-400) !important;
	color: var(--color-pearl-200-base) !important;
}





/* LINK */

.elementor-widget-button.redteam-button--link .elementor-button {
	background: none !important;
	padding: 0 !important;
	border: none;
	border-radius: 0 !important;
	background-color: var(--color-transparent) !important;
}

/* Link's icon colour is independent of its text colour, so it's driven explicitly. */
.elementor-widget-button.redteam-button--link .elementor-button-icon svg {
	fill: var(--color-red-200-base);
}

.elementor-widget-button.redteam-button--link .elementor-button-icon i {
	color: var(--color-red-200-base);
}

.elementor-widget-button.redteam-button--link .elementor-button:hover .elementor-button-icon svg,
.elementor-widget-button.redteam-button--link .elementor-button:focus .elementor-button-icon svg {
	fill: var(--color-white);
}

.elementor-widget-button.redteam-button--link .elementor-button:hover .elementor-button-icon i,
.elementor-widget-button.redteam-button--link .elementor-button:focus .elementor-button-icon i {
	color: var(--color-white);
}




/* SMALL TEXT (manual modifier) */

/*
 * `BUTTON-SM` is a manually-typed CSS class (Advanced > CSS Classes on the widget
 * instance), NOT another Variant preset: it steps any variant's font-size down to
 * 14rem — e.g. the mega-menu's Link buttons — without affecting that variant
 * elsewhere. Unscoped by breakpoint on purpose; 14rem holds all the way down.
 *
 * It ties the SHARED rule's specificity (0-3-0), and since that rule carries
 * `!important` this one must too, then wins the tie by sitting BELOW it in this
 * file — source order is the tiebreaker between two equally specific !importants.
 *
 * `text-align: left` is separate from the SHARED rule's `justify-content: center`,
 * which only positions the icon+text group within the button box and doesn't
 * affect how a multi-line label aligns inside `.elementor-button-text`.
 */
.elementor-widget-button.BUTTON-SM .elementor-button {
	font-size: 14rem !important;
	text-align: left;
}

/* On the Link variant, BUTTON-SM also swaps the REST colour from ARROW LINK's
 * `--redteam-card-fg` default to a flat black-500; hover stays the shared red.
 * `:not(:hover):not(:focus)` is required, not decorative: without it this rule
 * ties ARROW LINK's own hover rule at 0-4-0 and — loading after style.css — wins
 * it, bleeding black into the hover state. The :not()s exclude hover explicitly
 * and lift this to 0-6-0, so it only ever competes for the rest state. */
.elementor-widget-button.redteam-button--link.BUTTON-SM .elementor-button:not(:hover):not(:focus) {
	color: var(--color-black-500) !important;
}

/* Dark-surface toggle — repoints --redteam-card-fg to white, which is all the shared ARROW
 * LINK rules in style.css read for the rest-state text and (via redteam-button-arrow--yes)
 * arrow colour; the hover rule reads --redteam-arrow-link-hover instead, so it's untouched
 * and the arrow keeps going to the same red on hover as the text does. */
.elementor-widget-button.redteam-button--link.redteam-button-link-invert--yes .elementor-button {
	--redteam-card-fg: var(--color-white);
}




/* CURRENT PAGE (global nav) */

/*
 * `redteam-button-current` is stamped by functions.php on a button linking to the page being
 * viewed, and only inside the header location — a body-copy Link button pointing at its own page
 * is never stamped. The `.elementor-widget-n-menu` scope is the second half of that: it asks "is
 * this inside the Mega Menu?", so a header button sitting beside the menu (Login, Book a Demo)
 * stays unstyled even if it one day gets the Link variant.
 *
 * NOT scoped on `.NAV`, deliberately: that hand-added class is the contract for the mobile nav
 * treatment in style.css and belongs to it alone. `.elementor-widget-n-menu` is the Mega Menu
 * widget's own wrapper class, so it is structural, breakpoint-agnostic, and true whether or not
 * anyone ever touches the `NAV` class.
 *
 * The colour is ARROW LINK's hover red, so an active link reads the same as a hovered one, which
 * is what the Mega Menu's own top-level Active state already does.
 *
 * This has to beat BUTTON-SM's rest rule above (0-6-0, !important), which is what paints these
 * links black-500 — so it carries !important too and wins outright on specificity at 0-7-0,
 * without depending on source order. The :not()s are the same trick BUTTON-SM uses: they keep
 * this rule out of the hover state rather than tying the shared ARROW LINK hover rule.
 */
.elementor-widget-n-menu .elementor-widget-button.redteam-button--link.redteam-button-current .elementor-button:not(:hover):not(:focus) {
	color: var(--redteam-arrow-link-hover, var(--color-red-200-base)) !important;
}




/* LOGIN */

.elementor-widget-button.redteam-button--login .elementor-button {
	background-color: var(--color-transparent) !important;
	color: var(--color-black) !important;
	padding: calc(var(--s3) - 1.6rem) var(--s4) !important
}

.elementor-widget-button.redteam-button--login .elementor-button .elementor-button-content-wrapper::after {
	content: "";
	display: block;
	mask: var(--icon-user);
	mask-size: cover;
	mask-repeat: no-repeat;
	mask-position: right center;
	width: 24rem;
	height: 24rem;
	background-color: currentColor;
}

.elementor-widget-button.redteam-button--login .elementor-button:hover,
.elementor-widget-button.redteam-button--login .elementor-button:focus {
	background-color: var(--color-walnut-400) !important;
	color: var(--color-pearl-200-base) !important;
}