/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   Reusable button styles used across all pages.
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	border: none;
	border-radius: 9999px;
	padding: 0.9rem 2.25rem;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

/* Primary — gold */
.ci-btn--primary {
	background-color: #c6a54e;
	color: var(--ci-color-white);
}

/* Secondary — outlined navy */
.ci-btn--secondary {
	background-color: transparent;
	color: var(--ci-color-navy);
	border: 2px solid var(--ci-color-navy);
}

/* Ghost — for use on dark backgrounds */
.ci-btn--ghost {
	background-color: transparent;
	color: var(--ci-color-white);
	border: 2px solid var(--ci-color-white);
}

/* Small variant */
.ci-btn--sm {
	font-size: 0.82rem;
	padding: 0.55rem 1.25rem;
}

/* ── Mobile: tighter horizontal padding ── */
@media (max-width: 767px) {
	.ci-btn {
		padding: 0.85rem 1.5rem;
	}
}

/* ── Hover styles — only on devices with a real pointer (not touchscreens) ── */
@media (hover: hover) and (pointer: fine) {
	.ci-btn--primary:hover {
		background-color: #b8943d;
		color: var(--ci-color-white);
	}

	.ci-btn--secondary:hover {
		background-color: var(--ci-color-navy);
		color: var(--ci-color-white);
	}

	.ci-btn--ghost:hover {
		background-color: var(--ci-color-white);
		color: var(--ci-color-navy);
	}
}