/* ---------------------------------------------------------------------------
   Ace Glove — shared design tokens

   Colour and type defer to Hub's global settings (Liquid > Theme Options).
   The hex values here are fallbacks only, so changing the theme globals
   changes every section.
   Palette: primary green, secondary dark, white, black. Nothing else.
--------------------------------------------------------------------------- */

:root {
	--ags-primary:   var(--color-primary, #007F3E);
	--ags-secondary: var(--color-secondary, #131F28);
	--ags-white:     #ffffff;
	--ags-black:     #000000;

	/* Layout — fixed for every section on the site */
	--ags-max:    1340px;
	--ags-pad-x:  40px;
	--ags-pad-y:  80px;
	--ags-radius: 5px;

	/* Motion */
	--ags-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
	--ags-speed: 0.3s;
}

@media (max-width: 1024px) {
	:root {
		--ags-pad-x: 20px;
		--ags-pad-y: 60px;
	}
}

@media (max-width: 767px) {
	:root {
		--ags-pad-x: 15px;
		--ags-pad-y: 40px;
	}
}

/* Single-path SVGs are tinted with a mask so one icon file works on any
   background. The URL arrives per element as --ags-icon. */
.ags-icon {
	display: inline-block;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: var(--ags-icon);
	mask-image: var(--ags-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------------------------------------------------------------------------
   Section row helper

   Put el_class="ags-row" on the WPBakery row that holds one of our sections.
   WPBakery's row/column gutters would otherwise leave a 15px strip down each
   side of a full-width section; our sections manage their own padding.
--------------------------------------------------------------------------- */

.vc_row.ags-row {
	margin-left: 0;
	margin-right: 0;
}

.ags-row .vc_column_container,
.ags-row .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

.ags-row .wpb_wrapper {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Buttons — shared by every section so the site has exactly three of them:
   solid green, outlined, and (in the header) the compact solid variant.
--------------------------------------------------------------------------- */

.ags-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border: 1px solid transparent;
	border-radius: var(--ags-radius);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ags-speed) var(--ags-ease),
	            border-color var(--ags-speed) var(--ags-ease),
	            color var(--ags-speed) var(--ags-ease);
}

.ags-btn:hover,
.ags-btn:focus-visible {
	text-decoration: none;
}

.ags-btn--primary {
	background-color: var(--ags-primary);
	border-color: var(--ags-primary);
	color: var(--ags-white);
}

.ags-btn--primary:hover,
.ags-btn--primary:focus-visible {
	background-color: var(--ags-secondary);
	border-color: var(--ags-secondary);
	color: var(--ags-white);
}

/* Translucent white over the hero photograph, with a grey rule. The grey is
   the secondary dark at low alpha rather than a new palette colour, so it
   stays tied to the theme's own colours. */
.ags-btn--ghost {
	background-color: rgba(255, 255, 255, 0.45);
	border-color: rgba(19, 31, 40, 0.32);
	color: var(--ags-black);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.ags-btn--ghost:hover,
.ags-btn--ghost:focus-visible {
	background-color: var(--ags-secondary);
	border-color: var(--ags-secondary);
	color: var(--ags-white);
}

.ags-btn__icon {
	width: 15px;
	height: 11px;
	transition: transform var(--ags-speed) var(--ags-ease);
}

.ags-btn:hover .ags-btn__icon {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	:root { --ags-speed: 0.001s; }
}