/* =========================================================
   República45 Eventos — frontend
   ========================================================= */

.r45-eventos,
.r45-single {
	--r45-laranja: #FE5000;
	--r45-texto: #1a1a1a;
	--r45-cinza: #8a8a8a;
	--r45-linha: #e6e6e6;
	--r45-preto: #171717;
	/* Fonts do plugin (as duas famílias que importas). */
	--r45-font: "Mark Pro Regular", sans-serif;
	--r45-font-bold: "Mark Pro Bold", sans-serif;
	font-family: var(--r45-font);
	color: var(--r45-texto);
	/* Sem largura máxima nem margens laterais: o espaçamento é controlado
	   pelo container/linha onde colocas o shortcode. */
	width: 100%;
}

/* Botões e campos não herdam a font por defeito — força a Regular. */
.r45-eventos button,
.r45-eventos input,
.r45-eventos select,
.r45-eventos a,
.r45-single button,
.r45-single input,
.r45-single select,
.r45-single textarea,
.r45-single a {
	font-family: var(--r45-font);
}

/* Elementos a bold usam a família Bold (as duas famílias são separadas). */
.r45-eventos .r45-tab,
.r45-eventos .r45-row__dia,
.r45-eventos .r45-row__titulo,
.r45-eventos .r45-badge,
.r45-eventos .r45-btn,
.r45-eventos strong,
.r45-eventos b,
.r45-single .r45-single__voltar,
.r45-single .r45-badge,
.r45-single .r45-btn,
.r45-single .r45-cal__btn,
.r45-single .r45-form-titulo,
.r45-single .r45-detalhe strong,
.r45-single strong,
.r45-single b {
	font-family: var(--r45-font-bold);
}

/* A página de evento é renderizada dentro do .container-wrap do Salient,
   por isso as margens laterais (e o footer) vêm do próprio tema.
   Não impomos aqui largura/padding para não duplicar. */
.r45-single {
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Abas de região (print 1) ---------- */
.r45-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
}
.r45-tab {
	appearance: none;
	background: #fff;
	border: 1px solid var(--r45-linha);
	border-radius: 4px;
	padding: 10px 18px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--r45-texto);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.r45-tab:hover { border-color: #cfcfcf; }
.r45-tab.is-active {
	background: var(--r45-preto);
	border-color: var(--r45-preto);
	color: #fff;
}

/* ---------- Linhas de eventos ---------- */
.r45-lista { display: block; }

.r45-row {
	display: grid;
	grid-template-columns: 92px 1fr auto auto;
	align-items: center;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--r45-linha);
}
.r45-row.is-hidden { display: none; }

.r45-row__data { display: flex; flex-direction: column; line-height: 1.2; }
.r45-row__dia {
	color: var(--r45-laranja);
	font-weight: 700;
	font-size: 25px;
}
.r45-row__semana {
	color: var(--r45-laranja);
	font-size: 20px;
	opacity: .9;
}

.r45-row__info { display: flex; flex-direction: column; gap: 4px; }
.r45-row__titulo {
	font-size: 20px;
	font-weight: 700;
	color: var(--r45-texto);
	text-decoration: none;
	line-height: 1.25;
}
.r45-row__titulo:hover { color: var(--r45-laranja); }
.r45-row__local { color: var(--r45-cinza); font-size: 20px; }

/* ---------- Badges de categoria ---------- */
.r45-row__badges,
.r45-single__badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.r45-badge {
	--r45-cat-cor: var(--r45-laranja);
	display: inline-block;
	border: 1px solid var(--r45-cat-cor);
	color: var(--r45-cat-cor);
	background: transparent;
	border-radius: 3px;
	padding: 1px 7px;
	font-size: 9px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
}
/* Badges na lista (print 1) com padding a condizer com o botão; no single (print 2) ficam finos. */
.r45-row__badges .r45-badge {
	font-size: 12px;
	padding: 5px 10px;
	line-height: 1.2;
}

/* ---------- Botão Inscrever-me ---------- */
.r45-btn {
	display: inline-block;
	border: 1px solid var(--r45-laranja);
	color: var(--r45-laranja);
	background: #fff;
	border-radius: 4px;
	padding: 9px 18px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.r45-btn:hover { background: var(--r45-laranja); color: #fff; }

.r45-vazio { color: var(--r45-cinza); padding: 24px 0; }

/* ---------- Página individual (print 2) ---------- */
.r45-single__wrap { padding: 8px 0 40px; }

.r45-single__breadcrumb-h {
	margin: 0 0 26px;
	padding: 0;
	line-height: 1.2;
}
.r45-single__voltar {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--r45-laranja);
	font-size: 30px;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.r45-single__seta { font-size: 26px; color: var(--r45-texto); }

/* Topo: 2 colunas 6/6 (texto esq. + imagem dir.) SÓ quando há imagem. */
.r45-single__topo--com-imagem {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
/* Respiro à direita do texto para não colar à imagem. */
.r45-single__topo--com-imagem .r45-single__texto { padding-right: 24px; }

@media (max-width: 820px) {
	.r45-single__topo--com-imagem { grid-template-columns: 1fr; gap: 22px; }
	.r45-single__topo--com-imagem .r45-single__texto { padding-right: 0; }
	.r45-single__topo--com-imagem .r45-single__imagem { order: -1; } /* imagem por cima no mobile */
}

/* --- Afinação do mobile na página de evento --- */
@media (max-width: 640px) {
	.r45-single__wrap { padding: 4px 0 30px; }
	.r45-single__breadcrumb-h { margin-bottom: 18px; }
	.r45-single__voltar { font-size: 20px; gap: 8px; }
	.r45-single__seta { font-size: 20px; }
	.r45-single__titulo { gap: 8px; }
	.r45-single__sep { margin: 24px 0; }
	.r45-detalhe { font-size: 18px; }
	.r45-single__detalhes { margin-bottom: 26px; }
	.r45-form-wrap { padding: 26px 20px; }
	.r45-form-titulo { margin-bottom: 16px; }
}

/* Título do evento — SEM font-size/font-weight: herda o heading do tema. */
.r45-single__titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.r45-single__descricao { color: #444; line-height: 1.6; font-size: 16px; }

.r45-single__imagem img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* No mobile a imagem não estica/domina: fica um banner limpo com rácio fixo. */
@media (max-width: 820px) {
	.r45-single__imagem { margin-top: 8px; }
	.r45-single__imagem img {
		aspect-ratio: 16 / 10;
		height: auto;
		object-fit: cover;
	}
}

.r45-single__sep {
	border: 0;
	border-top: 1px solid var(--r45-linha);
	margin: 34px 0;
}

/* ---------- Detalhes ---------- */
.r45-single__detalhes { margin-bottom: 34px; }
/* "Detalhes" — SEM font-size: herda o heading do tema. */
.r45-single__detalhes-titulo { margin: 0 0 14px; }
.r45-detalhe { margin: 0 0 14px; font-size: 22px; color: #333; }
.r45-detalhe strong { font-weight: 700; }

/* ---------- Formulário FormCraft ---------- */
.r45-form-wrap {
	background: var(--r45-preto);
	color: #fff;
	border-radius: 10px;
	padding: 5% 34px;
}
/* Título do form — SEM font-size: herda o heading do tema. */
.r45-form-titulo {
	color: var(--r45-laranja);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 20px;
}
.r45-formcraft input[type="text"],
.r45-formcraft input[type="email"],
.r45-formcraft input[type="tel"],
.r45-formcraft textarea {
	background: transparent;
	border: 1px solid #555;
	border-radius: 4px;
	color: #fff;
}

/* O <form> do FormCraft traz color:#666 inline — força texto branco. */
.r45-form-wrap .fc-form { color: #fff !important; }

.r45-form-wrap .fc-form input[type="text"],
.r45-form-wrap .fc-form input[type="email"],
.r45-form-wrap .fc-form input[type="tel"],
.r45-form-wrap .fc-form textarea {
	color: #fff !important;
	background: transparent !important;
}

/* Placeholders num cinzento claro (legível sobre o fundo escuro). */
.r45-form-wrap .fc-form input::placeholder,
.r45-form-wrap .fc-form textarea::placeholder {
	color: #9a9a9a !important;
	opacity: 1;
}

/* Autofill do browser não pinta o fundo de branco. */
.r45-form-wrap .fc-form input:-webkit-autofill,
.r45-form-wrap .fc-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	transition: background-color 9999s ease-in-out 0s;
}

/* Botão Submeter do FormCraft: laranja + texto branco; hover transparente com outline. */
.r45-form-wrap .submit-button {
	background: var(--r45-laranja) !important;
	color: #fff !important;
	border: 1px solid var(--r45-laranja) !important;
	border-radius: 6px !important;
	font-size: 18px !important;
	padding: 5px 15px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s !important;
	box-shadow: none !important;
}
.r45-form-wrap .submit-button .text { color: inherit !important; }

.r45-form-wrap .submit-button:hover {
	background: transparent !important;
	color: var(--r45-laranja) !important;
	border-color: var(--r45-laranja) !important;
}
.r45-form-wrap .submit-button:hover .text { color: var(--r45-laranja) !important; }

/* Override de alta especificidade para o padding/tamanho vencer o Salient. */
html body .r45-form-wrap button.submit-button[type="submit"] {
	font-size: 18px !important;
	padding: 5px 15px !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	height: auto !important;
}

/* Vagas restantes / lotação esgotada. */
.r45-vagas {
	margin: -8px 0 18px;
	color: #cfcfcf;
	font-size: 14px;
}
.r45-vagas strong { color: var(--r45-laranja); }

.r45-form-wrap--esgotado .r45-esgotado-msg {
	margin: 0;
	color: #cfcfcf;
	font-size: 15px;
	line-height: 1.6;
}

/* Badge "Esgotado / Terminado" na lista. */
.r45-badge--esgotado {
	border-color: #8a8a8a;
	color: #8a8a8a;
}
/* "– ESGOTADO" / "– TERMINADO" no título da atividade. */
.r45-titulo-estado {
	color: var(--r45-laranja);
	font-weight: 700;
	white-space: nowrap;
}

/* Botão inativo quando a atividade encerra. */
.r45-btn--disabled {
	border-color: #b8b8b8 !important;
	color: #9a9a9a !important;
	background: #f3f3f3 !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* Linha encerrada — ligeiramente esbatida. */
.r45-row.is-encerrado { opacity: .72; }
.r45-row.is-encerrado .r45-row__titulo:hover { color: var(--r45-texto); }

/* Honeypot anti-bot (invisível para humanos). */
.r45-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Mensagens de validação do plugin. */
.r45-erro-msg {
	display: block;
	color: #ff5a5a;
	font-size: 12px;
	margin-top: 4px;
}

/* ---------- Dropdown "Adicionar ao calendário" ---------- */
.r45-cal {
	position: relative;
	display: inline-block;
	margin-top: 22px;
}
.r45-cal__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	appearance: none;
	background: transparent;
	border: 1px solid var(--r45-laranja);
	color: var(--r45-laranja);
	border-radius: 4px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.r45-cal__btn:hover,
.r45-cal.is-open .r45-cal__btn {
	background: var(--r45-laranja);
	color: #fff;
}
.r45-cal__ico {
	width: 16px;
	height: 16px;
	display: inline-block;
	object-fit: contain;
	flex-shrink: 0;
}
.r45-cal__seta { font-size: 11px; transition: transform .15s; }
.r45-cal.is-open .r45-cal__seta { transform: rotate( 180deg ); }

.r45-cal__menu {
	position: absolute;
	left: 0;
	top: calc( 100% + 6px );
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--r45-linha);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, .18 );
	padding: 6px;
	z-index: 20;
}
.r45-cal__item {
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	color: var(--r45-texto);
	text-decoration: none;
	font-size: 14px;
}
.r45-cal__item:hover { background: #f4f4f4; color: var(--r45-laranja); }

/* ---------- Responsivo ---------- */
@media (max-width: 640px) {
	.r45-row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"data"
			"info"
			"badges"
			"acao";
		gap: 10px;
		padding: 22px 0;
	}
	/* Data em linha: "8 Set  Terça". */
	.r45-row__data {
		grid-area: data;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
	}
	.r45-row__dia { font-size: 22px; }
	.r45-row__semana { font-size: 16px; }

	.r45-row__info { grid-area: info; gap: 2px; }
	.r45-row__titulo { font-size: 21px; line-height: 1.2; }
	.r45-row__local { font-size: 16px; }

	.r45-row__badges { grid-area: badges; }
	.r45-row__acao { grid-area: acao; }
	.r45-btn { display: block; text-align: center; padding: 12px 18px; }
}