/*!
 * Mousas — Componentes: botões, cards, badges, chips, forms, tabelas
 *
 * @author   Dante Testa <https://dantetesta.com.br>
 * @version  1.0.0
 * @since    2026-04-17 15:46:00 UTC-03
 */

/* =============================================================================
 * Botões
 * ========================================================================== */

.mousas-btn {
	--btn-bg: var(--mousas-primary);
	--btn-color: var(--mousas-white);
	--btn-border: var(--mousas-primary);
	--btn-shadow: var(--mousas-shadow-base);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mousas-space-xs);
	min-height: 48px;
	padding: 0.875rem 1.5rem;
	font-family: var(--mousas-font-sans);
	font-size: var(--mousas-fs-base);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	color: var(--btn-color);
	background: var(--btn-bg);
	border: 1.5px solid var(--btn-border);
	border-radius: var(--mousas-radius-pill);
	box-shadow: var(--btn-shadow);
	cursor: pointer;
	transition:
		background-color var(--mousas-transition),
		color var(--mousas-transition),
		border-color var(--mousas-transition),
		transform var(--mousas-transition),
		box-shadow var(--mousas-transition);
	user-select: none;
	white-space: nowrap;
}

.mousas-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--mousas-shadow-md);
}

.mousas-btn:active { transform: translateY(0); }

.mousas-btn:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--mousas-accent) 60%, transparent);
	outline-offset: 2px;
}

.mousas-btn[disabled], .mousas-btn.is-disabled {
	opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

.mousas-btn--primary { --btn-bg: var(--mousas-primary); --btn-color: var(--mousas-white); --btn-border: var(--mousas-primary); }
.mousas-btn--primary:hover { --btn-bg: var(--mousas-primary-600); --btn-border: var(--mousas-primary-600); color: var(--mousas-white); }

.mousas-btn--accent { --btn-bg: var(--mousas-accent); --btn-color: var(--mousas-primary); --btn-border: var(--mousas-accent); }
.mousas-btn--accent:hover { --btn-bg: var(--mousas-accent-700); --btn-border: var(--mousas-accent-700); color: var(--mousas-white); }

.mousas-btn--ghost {
	--btn-bg: transparent;
	--btn-color: var(--mousas-primary);
	--btn-border: var(--mousas-neutral-300);
	--btn-shadow: none;
}
.mousas-btn--ghost:hover {
	--btn-border: var(--mousas-primary);
	--btn-bg: var(--mousas-primary-100);
	color: var(--mousas-primary);
}

/* Variante para uso sobre fundos escuros (hero dark, footer, modais escuros). */
.mousas-btn--on-dark {
	--btn-bg: transparent;
	--btn-color: var(--mousas-white);
	--btn-border: rgba(255, 255, 255, 0.45);
	--btn-shadow: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.mousas-btn--on-dark:hover {
	--btn-bg: rgba(255, 255, 255, 0.10);
	--btn-border: var(--mousas-white);
	color: var(--mousas-white);
}

.mousas-btn--dark { --btn-bg: var(--mousas-secondary); --btn-color: var(--mousas-white); --btn-border: var(--mousas-secondary); }
.mousas-btn--dark:hover { --btn-bg: var(--mousas-primary); --btn-border: var(--mousas-primary); color: var(--mousas-white); }

.mousas-btn--link { --btn-bg: transparent; --btn-color: var(--mousas-primary); --btn-border: transparent; --btn-shadow: none; padding: 0.5rem 0.75rem; min-height: 40px; }
.mousas-btn--link:hover { text-decoration: underline; transform: none; color: var(--mousas-accent-700); }

.mousas-btn--sm { min-height: 40px; padding: 0.625rem 1.125rem; font-size: var(--mousas-fs-sm); }
.mousas-btn--lg { min-height: 56px; padding: 1rem 1.75rem; font-size: var(--mousas-fs-lg); }
.mousas-btn--block { display: flex; width: 100%; }

.mousas-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mousas-space-sm);
	align-items: center;
}

/* =============================================================================
 * Cards
 * ========================================================================== */

.mousas-card {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	transition: transform var(--mousas-transition), box-shadow var(--mousas-transition), border-color var(--mousas-transition);
}

.mousas-card:hover { transform: translateY(-2px); box-shadow: var(--mousas-shadow-md); border-color: var(--mousas-neutral-300); }

.mousas-card--featured {
	border-color: var(--mousas-accent);
	box-shadow: var(--mousas-shadow-lg);
	position: relative;
}

.mousas-card--dark {
	background: var(--mousas-primary);
	color: var(--mousas-white);
	border-color: var(--mousas-primary);
}
.mousas-card--dark h2, .mousas-card--dark h3 { color: var(--mousas-white); }

.mousas-card__title {
	font-family: var(--mousas-font-display);
	font-size: var(--mousas-fs-xl);
	margin-bottom: var(--mousas-space-sm);
}

.mousas-card__body > * + * { margin-top: var(--mousas-space-sm); }

.mousas-card-post {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-card-post:hover { transform: translateY(-2px); box-shadow: var(--mousas-shadow-md); }

.mousas-card-post__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mousas-neutral-100); }
.mousas-card-post__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mousas-transition-slow); }
.mousas-card-post:hover .mousas-card-post__cover img { transform: scale(1.03); }

.mousas-card-post__body { padding: var(--mousas-space-lg); display: flex; flex-direction: column; gap: var(--mousas-space-sm); flex: 1; }

.mousas-card-post__meta {
	font-size: var(--mousas-fs-xs);
	color: var(--mousas-text-muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mousas-card-post__title {
	font-family: var(--mousas-font-display);
	font-size: var(--mousas-fs-xl);
	line-height: 1.25;
}

.mousas-card-post__title a { color: var(--mousas-text-strong); text-decoration: none; }
.mousas-card-post__title a:hover { color: var(--mousas-accent-700); }

.mousas-card-post__excerpt { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-sm); }

/* =============================================================================
 * Badges / Chips
 * ========================================================================== */

.mousas-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	font-size: var(--mousas-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--mousas-radius-pill);
	background: var(--mousas-primary-100);
	color: var(--mousas-primary);
	white-space: nowrap;
	line-height: 1.2;
}

.mousas-badge--accent { background: color-mix(in oklab, var(--mousas-accent) 20%, white); color: var(--mousas-accent-700); }
.mousas-badge--success { background: color-mix(in oklab, var(--mousas-success) 20%, white); color: var(--mousas-success); }

.mousas-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	font-size: var(--mousas-fs-sm);
	font-weight: 500;
	border-radius: var(--mousas-radius-pill);
	border: 1px solid var(--mousas-neutral-200);
	background: var(--mousas-white);
	color: var(--mousas-secondary);
}

/* =============================================================================
 * Ícones inline
 * ========================================================================== */

.mousas-ico {
	display: inline-block;
	fill: currentColor;
	flex-shrink: 0;
	vertical-align: -0.15em;
}

/* =============================================================================
 * Forms
 * ========================================================================== */

.mousas-form { display: grid; gap: var(--mousas-space-md); }

.mousas-field {
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-2xs);
}

.mousas-field__label { font-size: var(--mousas-fs-sm); font-weight: 600; color: var(--mousas-text-strong); }

.mousas-field__input,
.mousas-field__textarea,
.mousas-field__select {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	background: var(--mousas-white);
	color: var(--mousas-text);
	border: 1.5px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-md);
	font-size: var(--mousas-fs-base);
	line-height: 1.4;
	transition: border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-field__textarea { min-height: 140px; resize: vertical; }

.mousas-field__input:focus,
.mousas-field__textarea:focus,
.mousas-field__select:focus {
	outline: none;
	border-color: var(--mousas-primary);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--mousas-primary) 20%, transparent);
}

.mousas-field__help { font-size: var(--mousas-fs-xs); color: var(--mousas-text-muted); }
.mousas-field__error { font-size: var(--mousas-fs-xs); color: var(--mousas-danger); }

.mousas-checkbox { display: inline-flex; gap: 0.5rem; align-items: flex-start; font-size: var(--mousas-fs-sm); }

/* Busca */
.mousas-search {
	display: flex;
	gap: var(--mousas-space-xs);
	max-width: 420px;
}
.mousas-search__input {
	flex: 1;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-pill);
	background: var(--mousas-white);
}
.mousas-search__input:focus { outline: none; border-color: var(--mousas-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mousas-primary) 20%, transparent); }

/* =============================================================================
 * Honeypot (invisível para humanos)
 * ========================================================================== */

.mousas-honeypot {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	height: 0; width: 0;
}