/* ==========================================================================
   AfriAgentic — CTA button system
   One size for the whole site, taken from the demo's .btn: 12px 24px padding,
   13.5px/600 type, 2px radius, 8px gap to the arrow. Gold buttons land at
   46px tall and outlined ones at 48px, the extra 2px being their border —
   exactly as the demo renders.
   ========================================================================== */

.aa-btn .elementor-button,
.ast-custom-button,
.wpforms-submit,
.aa-btn .elementor-button-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	padding: 12px 24px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-radius: 2px !important;
	white-space: nowrap;
}

/* The header CTA was rendering 10px shorter than everything else. */
#masthead .ast-custom-button {
	padding: 12px 24px !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	border-radius: 2px !important;
}

/* Arrow glyph keeps a fixed size regardless of the button it sits in. */
.aa-btn .elementor-button::after,
.ast-custom-button::after {
	width: 14px !important;
	height: 14px !important;
	flex: 0 0 14px !important;
}

/* ==================== MOBILE ====================
   The demo widens exactly two families below 680px: the closing CTA band
   (.cta-ctas .btn { width:100% }) and the interior page-header actions
   (.page-header-actions .btn { flex:1 }). Everything else — the homepage hero
   pair, inline panel links, form submits, the header CTA — keeps its natural
   width. Measured against the demo at 390px: widened buttons are 346px, the
   others stay between 134px and 188px. */

@media (max-width: 680px) {

	/* Closing CTA band on every page. */
	.sec-burgundy-deep .aa-btn,
	.sec-burgundy-deep .aa-btn .elementor-button {
		width: 100% !important;
	}

	.sec-burgundy-deep .e-con.e-flex {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}

	/* Interior hero actions. */
	.aa-page-hero .aa-btn,
	.aa-page-hero .aa-btn .elementor-button {
		width: 100% !important;
	}

	.aa-page-hero .e-con.e-flex:has(> .aa-btn) {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Card-level actions fill their card, as the demo's event cards do. */
	.aa-card .aa-btn,
	.aa-card .aa-btn .elementor-button,
	.pathway-card .aa-btn,
	.pathway-card .aa-btn .elementor-button {
		width: 100% !important;
	}

	/* Long labels must be allowed to wrap once they are full width. */
	.sec-burgundy-deep .aa-btn .elementor-button,
	.aa-page-hero .aa-btn .elementor-button,
	.aa-card .aa-btn .elementor-button {
		white-space: normal;
	}
}

/* AA-BTN-TRIM
   Astra's own drawer rule outranks the shared button block, so the mobile
   CTA kept a 4px radius while every other button had 2px. */
.ast-mobile-popup-drawer .ast-custom-button,
.ast-mobile-popup-drawer .menu-link.ast-custom-button,
body .ast-mobile-popup-drawer .ast-button-wrap .ast-custom-button{
	border-radius:2px!important;
}

/* The CTA band and interior hero measured 290–330px across pages because each
   section nests its own horizontal padding. The demo puts a single 22px gutter
   on the container and lets the button fill the rest, giving a consistent
   346px at 390px wide. */
@media (max-width:680px){
	.sec-burgundy-deep,
	.aa-page-hero{
		padding-left:22px!important;
		padding-right:22px!important;
	}

	.sec-burgundy-deep .e-con,
	.sec-burgundy-deep .e-con-inner,
	.aa-page-hero .e-con,
	.aa-page-hero .e-con-inner{
		width:100%!important;
		max-width:100%!important;
		padding-left:0!important;
		padding-right:0!important;
	}
}

/* AA-GUTTER
   Interior pages carry Astra's .ast-container 20px gutter on top of each
   section's own 22px, so content sat 42px in from the edge while the homepage
   (full-width template) sat at 22px. The demo uses a single 22px gutter. Every
   section already supplies its own, so the outer one is dropped on mobile. */
@media (max-width:680px){
	.ast-container{padding-left:0!important;padding-right:0!important;}
}

/* AA-CTA-ARROW2 — the header/drawer CTA rendered an empty ::after box; the
   glyph is declared here alongside the rest of the button system. */
#masthead .ast-custom-button::after,
.ast-mobile-popup-drawer .ast-custom-button::after{
	content:''!important;
	display:inline-block;
	width:14px!important;height:14px!important;flex:0 0 14px!important;
	background:currentColor!important;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
	transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
#masthead .ast-custom-button:hover::after,
.ast-mobile-popup-drawer .ast-custom-button:hover::after{transform:translateX(3px);}

/* AA-MOBILE-HDR-CTA — the demo keeps a Get Started button beside the burger.
   At 390px the row is tight, so the mobile CTA takes slightly less horizontal
   padding than its desktop counterpart while keeping the same height. */
@media (max-width:921px){
	#ast-mobile-header .ast-custom-button{padding:12px 18px!important;font-size:13px!important;}
	#ast-mobile-header .ast-builder-grid-row{column-gap:10px!important;}
}
@media (max-width:420px){
	#ast-mobile-header .ast-custom-button{padding:11px 14px!important;font-size:12.5px!important;}
	#ast-mobile-header .aa-wordmark{font-size:17px!important;}
}