/**
 * Vemax Company - Addon — Vemax — Documentos Legais.
 *
 * Transcrito de TermsAndConditionsPage.tsx (export atualizado) e de
 * client/src/index.css (classe .container e tokens de cor OKLCH). Cobre
 * apenas o bloco "Documents" do original — os três cards e a nota final; o
 * hero ("Legal Documents" / "Terms & Conditions" / introdução / "Back to
 * Home") é montado à parte, diretamente no Elementor. Sem seletor fora de
 * `.vemax-legal-docs`: nenhuma regra aqui toca `.elementor-container`,
 * `.elementor-section`, `.e-con` ou `.container`.
 *
 * Cores (OKLCH do original convertidas para sRGB):
 *   oklch(0.20 0.04 260) -> #0B1628  fundo dos cards
 *   oklch(0.15 0.04 260) -> #030B1C  texto do botão "View Document"
 *   oklch(0.85 0.18 85)  -> #FFC200  dourado (destaque, ícone, botão)
 *   oklch(0.80 0.16 85)  -> #EDB417  dourado hover do botão
 */

/* ------------------------------------------------------------------ */
/* Container — mesma regra de .container do original (client/src/index.css) */
/* ------------------------------------------------------------------ */

.vemax-legal-docs__container {
	width: 100%;
	max-width: 56rem; /* max-w-4xl do Tailwind, usado no Hero e no bloco de documentos */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.vemax-legal-docs__container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.vemax-legal-docs__container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* ------------------------------------------------------------------ */
/* Documentos — container py-16 lg:py-24, cards space-y-6              */
/* ------------------------------------------------------------------ */

.vemax-legal-docs__body {
	padding-top: 4rem;    /* py-16 */
	padding-bottom: 4rem;
}

@media (min-width: 1024px) {
	.vemax-legal-docs__body {
		padding-top: 6rem;    /* lg:py-24 */
		padding-bottom: 6rem;
	}
}

.vemax-legal-docs__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* space-y-6 */
}

/* Card: flex-col, sm:flex-row sm:items-center, gap-5, p-6, rounded-xl,
   bg oklch(0.20 0.04 260), border white/5, hover:border gold/30,
   transition-all duration-300. Sem altura fixa — cresce com o conteúdo.
   A troca coluna->linha (sm: por padrão, 640px) é impressa pelo widget em
   PHP (render_breakpoint_style()), porque o breakpoint é configurável na
   aba Estilo > Card > "Muda para linha a partir de" — não uma regra fixa
   aqui, para o controle do Elementor ser a única fonte de verdade. */
.vemax-legal-docs__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.25rem; /* gap-5 */
	padding: 1.5rem; /* p-6 */
	border-radius: 0.75rem; /* rounded-xl: --radius (0.5rem) + 4px */
	background-color: #0B1628;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition-property: all;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.vemax-legal-docs__card:hover,
.vemax-legal-docs__card:focus-within {
	border-color: rgba(255, 194, 0, 0.3); /* hover:border-[oklch(0.85_0.18_85/0.3)] */
}

/* Ícone: w-14 h-14, rounded-xl, bg gold/10, border gold/20 */
.vemax-legal-docs__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;  /* w-14 */
	height: 3.5rem; /* h-14 */
	border-radius: 0.75rem; /* rounded-xl */
	background-color: rgba(255, 194, 0, 0.1);
	border: 1px solid rgba(255, 194, 0, 0.2);
}

/* Ícone FileText: w-7 h-7, cor gold, stroke 2 (herdado do Vemax_Icons) */
.vemax-legal-docs__icon .vemax-icon-svg {
	width: 1.75rem;  /* w-7 */
	height: 1.75rem; /* h-7 */
	color: #FFC200;
}

.vemax-legal-docs__text {
	flex: 1 1 auto;
	min-width: 0;
}

.vemax-legal-docs__doc-title {
	margin: 0;
	font-size: 1.125rem; /* text-lg */
	font-weight: 700;    /* font-bold */
	color: #ffffff;
	transition: color 200ms ease;
}

.vemax-legal-docs__card:hover .vemax-legal-docs__doc-title,
.vemax-legal-docs__card:focus-within .vemax-legal-docs__doc-title {
	color: #FFC200; /* group-hover:text-[oklch(0.85_0.18_85)] */
}

.vemax-legal-docs__doc-desc {
	margin: 0.25rem 0 0; /* mt-1 */
	font-size: 0.875rem; /* text-sm */
	color: rgba(255, 255, 255, 0.5); /* text-white/50 */
}

/* CTA: px-5 py-2.5, rounded-lg, bg gold, text navy, font-semibold text-sm,
   hover:bg gold-dark, active:scale-[0.97] */
.vemax-legal-docs__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem; /* gap-2 */
	padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
	border-radius: 0.5rem; /* rounded-lg: --radius */
	background-color: #FFC200;
	color: #030B1C;
	font-size: 0.875rem; /* text-sm */
	font-weight: 600;    /* font-semibold */
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 200ms;
}

.vemax-legal-docs__cta:hover,
.vemax-legal-docs__cta:focus-visible {
	background-color: #EDB417;
	color: #030B1C;
}

.vemax-legal-docs__cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.vemax-legal-docs__cta:active {
	scale: 97%; /* active:scale-[0.97] */
}

.vemax-legal-docs__cta-icon {
	display: block;
	width: 1rem;  /* w-4 */
	height: 1rem; /* h-4 */
	flex-shrink: 0;
}

/* Nota final: text-xs text-white/30 mt-12 text-center */
.vemax-legal-docs__note {
	margin: 3rem 0 0; /* mt-12 */
	font-size: 0.75rem; /* text-xs */
	text-align: center;
	color: rgba(255, 255, 255, 0.3); /* text-white/30 */
}

.vemax-legal-docs__note a {
	color: #FFC200;
	text-decoration: none;
}

.vemax-legal-docs__note a:hover,
.vemax-legal-docs__note a:focus-visible {
	text-decoration: underline;
}

.vemax-legal-docs__note a:focus-visible {
	outline: 2px solid #FFC200;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* prefers-reduced-motion                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.vemax-legal-docs__card,
	.vemax-legal-docs__doc-title,
	.vemax-legal-docs__cta {
		transition: none;
	}

	.vemax-legal-docs__cta:active {
		scale: 100%;
	}
}