/**
 * Button components — Pill CTA buttons and link underline animations.
 *
 * Variants: primary (default), gold, secondary, external.
 * Depends on design tokens from theme.json.
 *
 * @package BuryGolfClub
 * @since   1.0.0
 */

/* ========================================================================
   Pill Button — Base
   ======================================================================== */

.bgc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5625rem 0.5625rem 0.5625rem 1.25rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: var(--wp--custom--border-radius--pill);
	cursor: pointer;
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
	overflow: hidden;
}

.bgc-btn:hover {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--text-primary);
}

.bgc-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ========================================================================
   Arrow Circle
   ======================================================================== */

.bgc-btn__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.75rem;
	background-color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--border-radius--pill);
	transition: transform 0.2s ease-out, background-color 0.2s ease-out;
	flex-shrink: 0;
	overflow: hidden;
}

.bgc-btn:hover .bgc-btn__arrow {
	transform: translateX(6px);
	background-color: var(--wp--preset--color--text-primary);
}

.bgc-btn:hover .bgc-btn__arrow svg {
	stroke: var(--wp--preset--color--gold);
}

.bgc-btn__arrow svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.2s ease-out;
}

/* ========================================================================
   Variant — Gold
   ======================================================================== */

.bgc-btn--gold {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--text-primary);
}

.bgc-btn--gold:hover {
	background-color: var(--wp--preset--color--light-gold);
	color: var(--wp--preset--color--text-primary);
}

.bgc-btn--gold:hover .bgc-btn__arrow {
	background-color: var(--wp--preset--color--text-primary);
}

.bgc-btn--gold:hover .bgc-btn__arrow svg {
	stroke: var(--wp--preset--color--light-gold);
}

.bgc-btn--gold .bgc-btn__arrow {
	background-color: var(--wp--preset--color--text-primary);
}

.bgc-btn--gold .bgc-btn__arrow svg {
	stroke: var(--wp--preset--color--gold);
}

/* ========================================================================
   Variant — Secondary (text-only)
   ======================================================================== */

.bgc-btn--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--text-primary);
	padding: 0;
	min-height: 44px;
	padding-block: 0.5rem;
}

.bgc-btn--secondary:hover {
	background-color: transparent;
	color: var(--wp--preset--color--gold);
}

.bgc-btn--secondary .bgc-btn__arrow {
	background-color: var(--wp--preset--color--accent);
}

.bgc-btn--secondary .bgc-btn__arrow svg {
	stroke: var(--wp--preset--color--white);
}

.bgc-btn--secondary:hover .bgc-btn__arrow {
	background-color: var(--wp--preset--color--gold);
}

.bgc-btn--secondary:hover .bgc-btn__arrow svg {
	stroke: var(--wp--preset--color--text-primary);
}

.bgc-section--dark .bgc-btn--secondary {
	color: var(--wp--preset--color--text-light);
}

.bgc-section--dark .bgc-btn--secondary:hover {
	color: var(--wp--preset--color--gold);
}

.bgc-section--dark .bgc-btn--secondary:hover .bgc-btn__arrow {
	background-color: var(--wp--preset--color--gold);
}

.bgc-section--dark .bgc-btn--secondary:hover .bgc-btn__arrow svg {
	stroke: var(--wp--preset--color--primary);
}

/* ========================================================================
   Variant — External
   ======================================================================== */

.bgc-btn--external .bgc-btn__external-icon {
	width: 0.625rem;
	height: 0.625rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-left: -0.25rem;
}

/* ========================================================================
   Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bgc-btn {
		transition: none;
	}

	.bgc-btn__arrow {
		transition: none;
	}

	.bgc-btn__arrow svg {
		transition: none;
	}

	.bgc-btn:hover .bgc-btn__arrow {
		transform: none;
	}

	.bgc-link-underline {
		transition: none;
	}
}

/* ========================================================================
   Gradient Underline Link
   ======================================================================== */

.bgc-link-underline {
	text-decoration: none;
	background-image: linear-gradient(
		var(--wp--preset--color--gold),
		var(--wp--preset--color--gold)
	);
	background-size: 0% 2px;
	background-position: bottom left;
	background-repeat: no-repeat;
	transition: background-size 0.2s ease-out;
}

.bgc-link-underline:hover,
.bgc-link-underline:focus-visible {
	background-size: 100% 2px;
}

.bgc-section--dark .bgc-link-underline {
	color: var(--wp--preset--color--text-light);
	background-image: linear-gradient(
		var(--wp--preset--color--light-gold),
		var(--wp--preset--color--light-gold)
	);
}