/* ==========================================================================
   Button Component — .ac-btn
   All variants share base rules; modifiers add visual differences.
   ========================================================================== */

.ac-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--ac-space-2);
	min-height:      44px;
	min-width:       44px;
	padding:         0.65rem 1.5rem;
	font-family:     var(--ac-font-family);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-semibold);
	letter-spacing:  0.02em;
	line-height:     1;
	text-decoration: none;
	white-space:     nowrap;
	border:          2px solid transparent;
	border-radius:   var(--ac-radius-md);
	cursor:          pointer;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		box-shadow       var(--ac-duration-short) var(--ac-ease-standard),
		transform        var(--ac-duration-short) var(--ac-ease-standard);
	-webkit-user-select: none;
	user-select: none;
}

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

/* ------------------------------------------------------------------
   Primary — solid navy #002F86
   ------------------------------------------------------------------ */
.ac-btn--primary {
	background-color: var(--ac-color-primary);
	color:            var(--ac-color-white);
	border-color:     var(--ac-color-primary);
}

.ac-btn--primary:hover,
.ac-btn--primary:focus-visible {
	background-color: var(--ac-color-primary-dark);
	border-color:     var(--ac-color-primary-dark);
	color:            var(--ac-color-white);
	transform:        translateY(-1px);
	box-shadow:       var(--ac-shadow-md);
}

.ac-btn--primary:active {
	transform:   translateY(0);
	box-shadow:  none;
}

/* ------------------------------------------------------------------
   Secondary — solid magenta #A50064
   (Donate, Join, high-priority accents)
   ------------------------------------------------------------------ */
.ac-btn--secondary {
	background-color: var(--ac-color-secondary);
	color:            var(--ac-color-white);
	border-color:     var(--ac-color-secondary);
}

.ac-btn--secondary:hover,
.ac-btn--secondary:focus-visible {
	background-color: var(--ac-color-secondary-dark);
	border-color:     var(--ac-color-secondary-dark);
	color:            var(--ac-color-white);
	transform:        translateY(-1px);
	box-shadow:       var(--ac-shadow-md);
}

.ac-btn--secondary:active {
	transform:  translateY(0);
	box-shadow: none;
}

/* ------------------------------------------------------------------
   Outline — navy border on white background
   ------------------------------------------------------------------ */
.ac-btn--outline {
	background-color: transparent;
	color:            var(--ac-color-primary);
	border-color:     var(--ac-color-primary);
}

.ac-btn--outline:hover,
.ac-btn--outline:focus-visible {
	background-color: var(--ac-color-primary);
	color:            var(--ac-color-white);
	transform:        translateY(-1px);
}

/* ------------------------------------------------------------------
   Outline white — for dark/navy backgrounds
   ------------------------------------------------------------------ */
.ac-btn--outline-white {
	background-color: transparent;
	color:            var(--ac-color-white);
	border-color:     var(--ac-color-white);
}

.ac-btn--outline-white:hover,
.ac-btn--outline-white:focus-visible {
	background-color: var(--ac-color-white);
	color:            var(--ac-color-primary);
}

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

/* ------------------------------------------------------------------
   Size modifiers
   ------------------------------------------------------------------ */
.ac-btn--sm {
	min-height: 36px;
	padding:    0.45rem 1rem;
	font-size:  var(--ac-font-size-xs);
}

.ac-btn--lg {
	min-height: 52px;
	padding:    0.875rem 2rem;
	font-size:  var(--ac-font-size-md);
	border-radius: var(--ac-radius-lg);
}

/* ------------------------------------------------------------------
   Pill shape modifier
   ------------------------------------------------------------------ */
.ac-btn--pill {
	border-radius: var(--ac-radius-pill);
}

/* ------------------------------------------------------------------
   Icon CTA — solid circle, primary bg → secondary on hover.
   Use anywhere a compact directional call-to-action is needed.
   <a class="ac-btn ac-btn--icon-cta" aria-label="…">
     <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
   </a>
   ------------------------------------------------------------------ */
.ac-btn--icon-cta {
	padding:          0;
	width:            40px;
	height:           40px;
	min-width:        40px;
	min-height:       40px;
	border-radius:    var(--ac-radius-pill);
	background-color: var(--ac-color-primary);
	color:            var(--ac-color-white);
	border-color:     var(--ac-color-primary);
	font-size:        0.875rem;
}

.ac-btn--icon-cta:hover,
.ac-btn--icon-cta:focus-visible {
	background-color: var(--ac-color-secondary);
	border-color:     var(--ac-color-secondary);
	color:            var(--ac-color-white);
	transform:        translateY(-1px);
	box-shadow:       var(--ac-shadow-sm);
}

/* Full-width block button (for mobile menus etc.) */
.ac-btn--block {
	width:           100%;
	justify-content: center;
}