/**
 * buttons.css — Componente de botão pill (.fbb-btn--pill), base + 5 variantes.
 *
 * Variantes confirmadas no DESIGN.md (paleta oficial FBB + cores de
 * sistema): navy (informativo), red (doação/ação), green (voluntariado/
 * confirmação), yellow (destaque pontual), whatsapp (cor de sistema,
 * não é marca).
 *
 * Depende de assets/css/base/_variables.css (ver ordem de enqueue em
 * inc/enqueue.php).
 */

.fbb-btn--pill {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1.5px solid transparent;
	border-radius: var( --fbb-radius-pill );
	padding: var( --fbb-button-padding-y, 18px ) var( --fbb-button-padding-x, 30px );
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-extrabold );
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	color: var( --fbb-color-white );
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.fbb-btn--pill:hover,
.fbb-btn--pill:focus-visible {
	transform: scale( 1.03 ); /* SUGESTÃO de hover — não extraído do Figma (estático), ver DESIGN.md Seção 6. */
}

.fbb-btn--pill:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --fbb-color-yellow ) 75%, white );
	outline-offset: 3px;
}

.fbb-btn__label {
	white-space: nowrap;
}

@media ( max-width: 479px ) {
	.fbb-btn__label {
		white-space: normal;
	}
}

/* =============================================================
 * Variantes de cor
 * ============================================================= */
.fbb-btn--navy {
	background-color: var( --fbb-color-navy );
}

.fbb-btn--navy:hover,
.fbb-btn--navy:focus-visible {
	background-color: color-mix( in srgb, var( --fbb-color-navy ) 85%, white );
}

.fbb-btn--red {
	background-color: var( --fbb-color-red );
}

.fbb-btn--red:hover,
.fbb-btn--red:focus-visible {
	background-color: color-mix( in srgb, var( --fbb-color-red ) 85%, black );
}

.fbb-btn--green {
	background-color: var( --fbb-color-green );
}

.fbb-btn--green:hover,
.fbb-btn--green:focus-visible {
	background-color: color-mix( in srgb, var( --fbb-color-green ) 85%, black );
}

.fbb-btn--yellow {
	background-color: var( --fbb-color-yellow );
	color: var( --fbb-color-navy ); /* contraste — texto branco sobre amarelo reprova AA, ver nota abaixo. */
}

.fbb-btn--yellow:hover,
.fbb-btn--yellow:focus-visible {
	background-color: color-mix( in srgb, var( --fbb-color-yellow ) 85%, black );
}

.fbb-btn--whatsapp {
	background-color: var( --fbb-color-whatsapp );
}

.fbb-btn--whatsapp:hover,
.fbb-btn--whatsapp:focus-visible {
	background-color: color-mix( in srgb, var( --fbb-color-whatsapp ) 85%, black );
}

/* =============================================================
 * Variante outline (usada em CTAs secundários — ex. "Como podemos ajudar →")
 * ============================================================= */
.fbb-btn--outline-navy {
	background-color: transparent;
	color: var( --fbb-color-navy );
	border: 1.5px solid var( --fbb-color-navy );
}

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

.fbb-btn--outline-white {
	background-color: transparent;
	color: var( --fbb-color-white );
	border: 1.5px solid var( --fbb-color-white );
}

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

/* Nota de acessibilidade: .fbb-btn--yellow usa texto navy (não branco),
 * pois branco sobre #FFDA00 reprova o contraste mínimo AA (WCAG 2.1) —
 * ajuste de implementação não coberto pelo Figma estático. */