/**
 * Cup of Air — shared button design system
 * Load site-wide from templates/flex/index.php.
 *
 * Canonical API:
 *   .coa-btn
 *   .coa-btn--primary | --secondary | --outline | --ghost | --turquoise | --text | --icon
 *   .coa-btn--sm | --lg | --full
 *
 * Legacy aliases (kept for existing PHP/HTML):
 *   .coa-apps-btn*, .coa-gws-btn*, .coa-nav-cta, .coa-blog-cta-btn
 */

:root {
	--coa-btn-navy: #013a58;
	--coa-btn-navy-deep: #012a40;
	--coa-btn-turquoise: #73c3c4;
	--coa-btn-turquoise-soft: #8fd0d1;
	--coa-btn-sky: #e8f4fb;
	--coa-btn-mist: #f4f8fb;
	--coa-btn-ink: #1a2b36;

	--coa-btn-radius: 10px;
	--coa-btn-border: 2px;
	--coa-btn-gap: 8px;
	--coa-btn-font-size: 16px;
	--coa-btn-font-weight: 700;
	--coa-btn-line-height: 1.2;
	--coa-btn-min-height: 48px;
	--coa-btn-pad-y: 12px;
	--coa-btn-pad-x: 22px;
	--coa-btn-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;

	--coa-btn-sm-min-height: 34px;
	--coa-btn-sm-pad-y: 6px;
	--coa-btn-sm-pad-x: 14px;
	--coa-btn-sm-font-size: 14px;

	--coa-btn-lg-min-height: 56px;
	--coa-btn-lg-pad-y: 14px;
	--coa-btn-lg-pad-x: 28px;
	--coa-btn-lg-font-size: 17px;

	--coa-btn-focus: #73c3c4;
	--coa-btn-focus-on-dark: #ffffff;
	--coa-btn-group-gap: 12px;
}

/* ——— Base ——— */
.coa-btn,
a.coa-btn,
button.coa-btn,
input.coa-btn[type="submit"],
input.coa-btn[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--coa-btn-gap);
	box-sizing: border-box;
	min-height: var(--coa-btn-min-height);
	padding: var(--coa-btn-pad-y) var(--coa-btn-pad-x);
	border-radius: var(--coa-btn-radius);
	border: var(--coa-btn-border) solid transparent;
	font-family: inherit;
	font-size: var(--coa-btn-font-size);
	font-weight: var(--coa-btn-font-weight);
	line-height: var(--coa-btn-line-height);
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	transition: var(--coa-btn-transition);
	vertical-align: middle;
}

.coa-btn:focus {
	outline: none;
}

.coa-btn:focus-visible {
	outline: 3px solid var(--coa-btn-focus);
	outline-offset: 3px;
}

.coa-btn[disabled],
.coa-btn.is-disabled,
.coa-btn[aria-disabled="true"] {
	opacity: 0.48;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

.coa-btn .coa-gws-icon,
.coa-btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* ——— Variants ——— */

/* Primary — navy fill (main CTA on light surfaces) */
.coa-btn--primary {
	background: var(--coa-btn-navy);
	border-color: var(--coa-btn-navy);
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(1, 58, 88, 0.18);
}

.coa-btn--primary:hover,
.coa-btn--primary:focus {
	background: var(--coa-btn-navy-deep);
	border-color: var(--coa-btn-navy-deep);
	color: #fff !important;
}

/* Secondary — solid white / soft fill (primary action on dark, alt on light) */
.coa-btn--secondary {
	background: #fff;
	border-color: #fff;
	color: var(--coa-btn-navy) !important;
}

.coa-btn--secondary:hover,
.coa-btn--secondary:focus {
	background: var(--coa-btn-sky);
	border-color: var(--coa-btn-sky);
	color: var(--coa-btn-navy) !important;
}

/* Outline — bordered on light */
.coa-btn--outline {
	background: rgba(255, 255, 255, 0.94);
	border-color: rgba(1, 58, 88, 0.16);
	color: var(--coa-btn-navy) !important;
	box-shadow: none;
}

.coa-btn--outline:hover,
.coa-btn--outline:focus {
	background: var(--coa-btn-sky);
	border-color: transparent;
	color: var(--coa-btn-navy) !important;
}

/* Ghost — transparent + light border (on dark / image) */
.coa-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff !important;
	box-shadow: none;
}

.coa-btn--ghost:hover,
.coa-btn--ghost:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff !important;
}

.coa-btn--ghost:focus-visible {
	outline-color: var(--coa-btn-focus-on-dark);
}

/* Turquoise — brand accent fill (nav CTA, compact highlights) */
.coa-btn--turquoise {
	background: var(--coa-btn-turquoise);
	border-color: var(--coa-btn-turquoise);
	color: var(--coa-btn-navy) !important;
	box-shadow: none;
}

.coa-btn--turquoise:hover,
.coa-btn--turquoise:focus {
	background: var(--coa-btn-turquoise-soft);
	border-color: var(--coa-btn-turquoise-soft);
	color: var(--coa-btn-navy) !important;
}

/* Text action */
.coa-btn--text {
	min-height: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--coa-btn-navy) !important;
	font-weight: 700;
	box-shadow: none;
}

.coa-btn--text:hover,
.coa-btn--text:focus {
	color: #0a787e !important;
	text-decoration: underline !important;
}

/* Icon-only */
.coa-btn--icon {
	width: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--coa-btn-radius);
}

/* Sizes */
.coa-btn--sm {
	min-height: var(--coa-btn-sm-min-height);
	padding: var(--coa-btn-sm-pad-y) var(--coa-btn-sm-pad-x);
	font-size: var(--coa-btn-sm-font-size);
}

.coa-btn--lg {
	min-height: var(--coa-btn-lg-min-height);
	padding: var(--coa-btn-lg-pad-y) var(--coa-btn-lg-pad-x);
	font-size: var(--coa-btn-lg-font-size);
}

.coa-btn--full {
	width: 100%;
}

/* Button groups */
.coa-btn-group,
.coa-apps-actions,
.coa-gws-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--coa-btn-group-gap);
}

/* ——— Legacy CoA aliases (apps / solutions / GWS) ——— */
.coa-apps-btn,
.coa-gws-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--coa-btn-gap);
	box-sizing: border-box;
	min-height: var(--coa-btn-min-height);
	padding: var(--coa-btn-pad-y) var(--coa-btn-pad-x);
	border-radius: var(--coa-btn-radius);
	border: var(--coa-btn-border) solid transparent;
	font-size: var(--coa-btn-font-size);
	font-weight: var(--coa-btn-font-weight);
	line-height: var(--coa-btn-line-height);
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: var(--coa-btn-transition);
}

.coa-apps-btn:focus-visible,
.coa-gws-btn:focus-visible {
	outline: 3px solid var(--coa-btn-focus);
	outline-offset: 3px;
}

.coa-apps-btn-solid,
.coa-gws-btn-solid {
	background: var(--coa-btn-navy);
	border-color: var(--coa-btn-navy);
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(1, 58, 88, 0.18);
}

.coa-apps-btn-solid:hover,
.coa-apps-btn-solid:focus,
.coa-gws-btn-solid:hover,
.coa-gws-btn-solid:focus {
	background: var(--coa-btn-navy-deep);
	border-color: var(--coa-btn-navy-deep);
	color: #fff !important;
}

.coa-apps-btn-outline,
.coa-gws-btn-outline {
	background: rgba(255, 255, 255, 0.94);
	border-color: rgba(1, 58, 88, 0.16);
	color: var(--coa-btn-navy) !important;
}

.coa-apps-btn-outline:hover,
.coa-apps-btn-outline:focus,
.coa-gws-btn-outline:hover,
.coa-gws-btn-outline:focus {
	background: var(--coa-btn-sky);
	border-color: transparent;
	color: var(--coa-btn-navy) !important;
}

.coa-apps-btn-primary,
.coa-gws-btn-primary {
	background: #fff;
	border-color: #fff;
	color: var(--coa-btn-navy) !important;
}

.coa-apps-btn-primary:hover,
.coa-apps-btn-primary:focus,
.coa-gws-btn-primary:hover,
.coa-gws-btn-primary:focus {
	background: var(--coa-btn-sky);
	border-color: var(--coa-btn-sky);
	color: var(--coa-btn-navy) !important;
}

.coa-apps-btn-ghost,
.coa-gws-btn-ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff !important;
}

.coa-apps-btn-ghost:hover,
.coa-apps-btn-ghost:focus,
.coa-gws-btn-ghost:hover,
.coa-gws-btn-ghost:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff !important;
}

.coa-apps a.coa-apps-btn-solid,
.coa-apps a.coa-apps-btn-solid:visited,
.coa-gws a.coa-gws-btn-solid,
.coa-gws a.coa-gws-btn-solid:visited { color: #fff !important; }

.coa-apps a.coa-apps-btn-outline,
.coa-apps a.coa-apps-btn-outline:visited,
.coa-apps a.coa-apps-btn-primary,
.coa-apps a.coa-apps-btn-primary:visited,
.coa-gws a.coa-gws-btn-outline,
.coa-gws a.coa-gws-btn-outline:visited,
.coa-gws a.coa-gws-btn-primary,
.coa-gws a.coa-gws-btn-primary:visited { color: var(--coa-btn-navy) !important; }

.coa-apps a.coa-apps-btn-ghost,
.coa-apps a.coa-apps-btn-ghost:visited,
.coa-gws a.coa-gws-btn-ghost,
.coa-gws a.coa-gws-btn-ghost:visited { color: #fff !important; }

/* ——— Nav CTA (compact turquoise) ——— */
#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta,
#sp-header .sp-megamenu-wrapper > .sp-megamenu-parent > li > a.coa-nav-cta,
.sp-megamenu-wrapper > .sp-megamenu-parent > li > a.coa-nav-cta,
.offcanvas-menu a.coa-nav-cta {
	border-radius: var(--coa-btn-radius);
	border-width: 1.5px;
	border-style: solid;
	border-color: var(--coa-btn-turquoise);
	background: var(--coa-btn-turquoise);
	color: var(--coa-btn-navy) !important;
	font-weight: var(--coa-btn-font-weight);
	box-shadow: none;
	transition: var(--coa-btn-transition);
}

#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:hover,
#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:focus,
.offcanvas-menu a.coa-nav-cta:hover,
.offcanvas-menu a.coa-nav-cta:focus {
	background: var(--coa-btn-turquoise-soft);
	border-color: var(--coa-btn-turquoise-soft);
	color: var(--coa-btn-navy) !important;
}

/* ——— Blog CTA ——— */
.cupofair-blog .coa-blog-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--coa-btn-sm-min-height);
	padding: var(--coa-btn-sm-pad-y) var(--coa-btn-sm-pad-x);
	border-radius: var(--coa-btn-radius);
	border: var(--coa-btn-border) solid var(--coa-btn-navy);
	background: var(--coa-btn-navy);
	color: #fff !important;
	font-weight: var(--coa-btn-font-weight);
	font-size: var(--coa-btn-sm-font-size);
	line-height: var(--coa-btn-line-height);
	text-decoration: none !important;
	box-shadow: none;
	transition: var(--coa-btn-transition);
}

.cupofair-blog .coa-blog-cta-btn:hover,
.cupofair-blog .coa-blog-cta-btn:focus {
	background: var(--coa-btn-navy-deep);
	border-color: var(--coa-btn-navy-deep);
	color: #fff !important;
}

/* ——— SPPB / Helix / Joomla bridge (front-end only) ——— */
body:not(.admin) #sp-page-builder .sppb-btn,
body:not(.admin) #sp-component .btn,
body:not(.admin) #sp-component .btn-primary,
body:not(.admin) #sp-component .button,
body:not(.admin) #sp-component .btn-readmore,
body:not(.admin) .sppb-btn-primary,
body:not(.admin) .coa-capex-quote-btn .sppb-btn,
body:not(.admin) a.sppb-btn.coa-capex-quote-btn,
body:not(.admin) .sppb-addon-button.coa-capex-quote-btn .sppb-btn,
body:not(.admin) .coa-home-articles .sppb-addon-content > a.sppb-btn,
body:not(.admin) .coa-home-solutions .sppb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--coa-btn-gap);
	min-height: var(--coa-btn-min-height);
	padding: var(--coa-btn-pad-y) var(--coa-btn-pad-x);
	border-radius: var(--coa-btn-radius) !important;
	border-width: var(--coa-btn-border);
	border-style: solid;
	font-size: var(--coa-btn-font-size);
	font-weight: var(--coa-btn-font-weight);
	line-height: var(--coa-btn-line-height);
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: var(--coa-btn-transition);
}

/* Filled SPPB / Helix CTAs → navy (includes editor “custom” fills that used old teal) */
body:not(.admin) #sp-page-builder .sppb-btn-primary,
body:not(.admin) #sp-page-builder .sppb-btn-default,
body:not(.admin) #sp-page-builder .sppb-btn-custom:not(.sppb-btn-outline):not(.sppb-btn-link),
body:not(.admin) #sp-component .btn-primary,
body:not(.admin) #sp-component .button,
body:not(.admin) #sp-component .btn-readmore,
body:not(.admin) .sppb-btn-primary,
body:not(.admin) .coa-capex-quote-btn .sppb-btn,
body:not(.admin) a.sppb-btn.coa-capex-quote-btn,
body:not(.admin) .sppb-addon-button.coa-capex-quote-btn .sppb-btn,
body:not(.admin) .coa-home-articles .sppb-addon-content > a.sppb-btn,
body:not(.admin) .coa-home-solutions .sppb-btn,
body:not(.admin) .coa-home-articles-cta.sppb-btn {
	background: var(--coa-btn-navy) !important;
	border-color: var(--coa-btn-navy) !important;
	color: #fff !important;
}

body:not(.admin) #sp-page-builder .sppb-btn-primary:hover,
body:not(.admin) #sp-page-builder .sppb-btn-primary:focus,
body:not(.admin) #sp-page-builder .sppb-btn-default:hover,
body:not(.admin) #sp-page-builder .sppb-btn-default:focus,
body:not(.admin) #sp-page-builder .sppb-btn-custom:not(.sppb-btn-outline):not(.sppb-btn-link):hover,
body:not(.admin) #sp-page-builder .sppb-btn-custom:not(.sppb-btn-outline):not(.sppb-btn-link):focus,
body:not(.admin) #sp-component .btn-primary:hover,
body:not(.admin) #sp-component .btn-primary:focus,
body:not(.admin) #sp-component .button:hover,
body:not(.admin) #sp-component .button:focus,
body:not(.admin) #sp-component .btn-readmore:hover,
body:not(.admin) #sp-component .btn-readmore:focus,
body:not(.admin) .sppb-btn-primary:hover,
body:not(.admin) .sppb-btn-primary:focus,
body:not(.admin) .coa-capex-quote-btn .sppb-btn:hover,
body:not(.admin) .coa-capex-quote-btn .sppb-btn:focus,
body:not(.admin) a.sppb-btn.coa-capex-quote-btn:hover,
body:not(.admin) a.sppb-btn.coa-capex-quote-btn:focus,
body:not(.admin) .coa-home-articles .sppb-addon-content > a.sppb-btn:hover,
body:not(.admin) .coa-home-solutions .sppb-btn:hover,
body:not(.admin) .coa-home-articles-cta.sppb-btn:hover,
body:not(.admin) .coa-home-articles-cta.sppb-btn:focus {
	background: var(--coa-btn-navy-deep) !important;
	border-color: var(--coa-btn-navy-deep) !important;
	color: #fff !important;
}

/* SPPB outline → outline variant */
body:not(.admin) #sp-page-builder .sppb-btn-outline,
body:not(.admin) #sp-page-builder .sppb-btn-primary.sppb-btn-outline,
body:not(.admin) .sppb-btn-primary.sppb-btn-outline {
	background: transparent !important;
	border-color: var(--coa-btn-navy) !important;
	color: var(--coa-btn-navy) !important;
	box-shadow: none !important;
}

body:not(.admin) #sp-page-builder .sppb-btn-outline:hover,
body:not(.admin) #sp-page-builder .sppb-btn-outline:focus,
body:not(.admin) #sp-page-builder .sppb-btn-primary.sppb-btn-outline:hover,
body:not(.admin) #sp-page-builder .sppb-btn-primary.sppb-btn-outline:focus,
body:not(.admin) .sppb-btn-primary.sppb-btn-outline:hover,
body:not(.admin) .sppb-btn-primary.sppb-btn-outline:focus {
	background: var(--coa-btn-navy) !important;
	border-color: var(--coa-btn-navy) !important;
	color: #fff !important;
}

/* Kill SPPB “round/pill” on CTA buttons — keep tags/chips alone */
body:not(.admin) #sp-page-builder .sppb-btn.sppb-btn-round,
body:not(.admin) #sp-page-builder .sppb-btn.sppb-btn-rounded {
	border-radius: var(--coa-btn-radius) !important;
}

body:not(.admin) #sp-page-builder .sppb-btn:focus-visible,
body:not(.admin) #sp-component .btn:focus-visible,
body:not(.admin) #sp-component .button:focus-visible {
	outline: 3px solid var(--coa-btn-focus);
	outline-offset: 3px;
}

/* Form submits in public forms */
body:not(.admin) .sppb-addon-form-builder .sppb-btn,
body:not(.admin) .sppb-addon-ajax-contact .sppb-btn {
	min-height: var(--coa-btn-min-height);
	border-radius: var(--coa-btn-radius) !important;
}

@media (max-width: 640px) {
	.coa-btn-group,
	.coa-apps-actions,
	.coa-gws-actions {
		width: 100%;
	}

	.coa-btn-group > .coa-btn,
	.coa-apps-actions > .coa-apps-btn,
	.coa-apps-actions > .coa-btn,
	.coa-gws-actions > .coa-gws-btn,
	.coa-gws-actions > .coa-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coa-btn,
	.coa-apps-btn,
	.coa-gws-btn,
	body:not(.admin) #sp-page-builder .sppb-btn {
		transition: none;
	}
}