/* BLOCO CALCULADORA — estilo BASE, comum a QUALQUER tipo de calculadora
   (casca do cartão, fieldset/legend, radio, select, slider+input, botão de
   opção grande, botão de submit, e o esqueleto genérico do resultado: título,
   número grande, seção, lista de dados). Carregado sempre que o bloco
   aparece (ver utils/blocks/calculators/calculators.php).

   O que é ESPECÍFICO de um motor de cálculo (ex: o grid de macros com cores
   proteína/carbo/gordura) fica em macros.css, carregado só quando aquele
   motor é usado — mesmo princípio do JS (macros.js só entra pro engine
   "macros"). Pra adicionar um tipo novo, criar um <tipo>.css só com o que for
   específico dele.

   Paleta/espaçamento/comportamento visual (cartão branco, botões grandes de
   objetivo, sliders com thumb vermelho etc.) replicam de propósito a
   calculadora de referência (hipertrofia.org/blog/2019/04/29/calculadora-de-macros/,
   plugin deles "cc" — CSS público em wp-content/plugins/cc/cc.css). Os nomes
   de classe aqui são nossos (calculator-*, não cc-*), pra ficar consistente
   com o resto do tema. */

.calculator {
	--calc-main: #2EFF00;
	--calc-main-dark: #2EFF00;
	--calc-text-dark: #ffffff;
	--calc-text-medium: #dddddd;
	--calc-text-light: #4b5563;
	--calc-border: #d1d5db;
	--calc-bg-light: #f9fafb;
	max-width: 70%;
    margin: 40px auto;
	padding: 40px;
	background: #00252e;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	border-radius: 15px;
	color: var(--calc-text-dark);
}


.calculator form {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	gap: 25px;
	padding: 0;
	flex-direction: column;
	/* Mesmo respiro do .calculator-results — o botão "Calcular novamente"
	   também dá scrollIntoView() de volta pra cá. */
	scroll-margin-top: 200px;
}

.calculator-form {
	margin-top: 25px;
}


.calculator *,
.calculator *::before,
.calculator *::after {
	box-sizing: border-box;
}

.calculator-title {
font-size: 29px !important;
    line-height: 34px !important;
    font-weight: 700;
    margin: 0 !important;
}

/* --- FORMULÁRIO / SEÇÕES --- */
.calculator-form > *:not([hidden]) ~ *:not([hidden]) {
	width: 100%;
}

.calculator-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
}

/* Espaço entre campos dentro do mesmo fieldset (ex: Gênero/Idade/Peso/
   Altura) — vale pra qualquer largura; no desktop, quem tem a classe
   -grid/-grid-3 zera isso e usa o gap do grid de colunas no lugar (ver
   media query mais abaixo). Sem essa regra base, no mobile (sem o grid)
   os campos ficavam colados um no outro. */
.calculator-fieldset > *:not([hidden]) ~ *:not([hidden]) {
	margin-top: 25px;
}

/* Mesma coisa pros wrappers -grid/-grid-3 (ex: Dias por semana/Duração,
   Proteína%/Carboidrato%/Gordura%) — no mobile eles não viram grid (isso só
   acontece no media query lá embaixo), então sem isso os campos ficam
   colados um no outro fora do desktop. */
.calculator-fieldset-grid > *:not([hidden]) ~ *:not([hidden]),
.calculator-fieldset-grid-3 > *:not([hidden]) ~ *:not([hidden]) {
	margin-top: 25px;
}

.calculator-fieldset legend {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 500;
	color: var(--calc-text-dark);
	margin-bottom: 0.5rem;
	padding: 0;
	width: 100%;
}

.calculator-legend-xl {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: var(--calc-text-dark) !important;
	margin-bottom: 1rem !important;
}

.calculator-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.calculator-option-panel-title {
	font-weight: 500;
	color: var(--calc-text-medium);
	margin: 0 0 0.5rem;
}

/* --- SELECT --- */
.calculator-select-wrap {
	width: 100%;
}

.calculator-select-label {
	display: block;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--calc-text-medium);
	margin-bottom: 6px;
}

.calculator-select {
	width: 100%;
	padding: 0.5rem;
	border-radius: 0.375rem;
	font-size: 15px;
	height: 45px;
	background-color: #003C4A;
	color: white;
	padding: 0 30px 0 15px;
	box-shadow: none;
	border: 1px solid  transparent;
	margin-bottom: 0;
}

.calculator-slider-wrap input[type="number"] {
	padding: 10px 15px;
	border-radius: 0.375rem;
	margin-bottom: 0;
	height: auto;
	box-shadow: none;
	background-color: #003C4A;
	border: 1px solid  transparent;
	color: white;
	box-shadow: none;
}

.calculator-slider-wrap input[type="number"]:focus,
.calculator-select:focus {
	background-color: #00495B;
	color: white;
	box-shadow: none;
	border-color: #2EFF00;
}

.calculator-fieldset label {
    font-size: 10px;
    font-weight: 500;
    width: 100%;
    color: var(--calc-text-medium);
    line-height: 18px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
	opacity: 0.7;
	margin-bottom: 7px !important;
}

/* Label de seção inteira (ex: "Qual seu objetivo?", "Como prefere calcular
   seus macros?") — precisa de mais respiro do campo abaixo do que um label
   comum de campo único, senão fica visualmente colado. */
.calculator-fieldset-legend {
	margin-bottom: 16px !important;
}

/* --- SLIDER + INPUT sincronizados --- */
.calculator-slider-label-group {
	display: flex;
	align-items: start;
	flex-direction: column;
}

.calculator-slider-label {
	font-size: 15px;
	font-weight: 500;
	width: 100%;
	color: var(--calc-text-medium);
}
.calculator-slider-unit {
	font-size: 13px;
	opacity: 0.7;
	white-space: nowrap;
}

/* --- Caixa de dica / aviso --- */
.calculator-info-box {
	margin-top: 15px;
    background: transparent;
    border-radius: inherit;
    border: none;
    padding: 0;
    font-size: 11px !important;
    line-height: 15px !important;
    margin-bottom: 0 !important;
    opacity: 0.4;
    color: #fff;
}
.calculator-info-box.disclaimer {
	margin-top: 20px;
	text-align: center;
}

.calculator-warning {
    padding: 0.5rem 0.75rem;
    background: #b91c1c;
    color: #fff;
    border-radius: 0.375rem;
    font-size: 12px;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* --- Botão principal --- */
.calculator-submit {
	width: 100%;
	font-weight: 700;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: var(--calc-main);
	border: none;
	height: 50px;
	    border-radius: 200px !important;
		font-size: 16px !important;
	    color: #000;
    text-transform: uppercase;
	cursor: pointer;
	transition: background-color 300ms;
}

.calculator-submit:hover {
	background: var(--calc-main-dark);
}

.calculator-results [data-calculator-recalculate] {
	margin-top: 1.5rem;
}

/* --- RESULTADO --- */
.calculator-results {
	margin-top: 25px;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	/* Deixa um respiro do topo quando o JS dá scrollIntoView() pra cá (ao
	   calcular), pra não colar debaixo do header fixo/sticky do site. */
	scroll-margin-top: 200px;
}
.calculator-results-calories {
	margin-bottom: 0 !important;
}

.single-article-content .calculator-results-title {
	font-size: 22px;
	margin: 0;
	font-weight: normal;
	margin-bottom: 5px;
	letter-spacing: 0;
}
.calculator-results-calories-label {
	margin-bottom: 0 !important;
}
.single-article-content .calculator-results-subtitle {
	margin-bottom: 0 !important;
	font-size: 14px !important;
}

.calculator-results-subtitle {
	color: var(--calc-text-medium);
	opacity: 0.7;
	margin: 0;
}

/* Título/subtítulo à esquerda, número de calorias à direita — lado a lado
   na mesma linha em vez de tudo empilhado e centralizado. */
.calculator-results-headline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.calculator-results-hero {
	text-align: right;
}

.calculator-results-calories {
	font-size: 3.25rem;
	line-height: 1;
	font-weight: 800;
	color: var(--calc-main);
	margin: 0 0 0.5rem;
}

.calculator-results-calories-label {
	color: var(--calc-text-medium);
	opacity: 0.7;
	margin: 0;
}

.calculator-results-section {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

.calculator-results-section-title {
    font-size: 22px;
    font-weight: normal;
    margin: 0 0 1rem;
    letter-spacing: 0;
}

.calculator-data-list {
	display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #001D24;
    border-radius: 0.5rem;
    padding: 20px;
}

.calculator-data-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	letter-spacing: 0.3px;
	color: var(--calc-text-medium);
	opacity: 0.6;
}

.calculator-data-item span:last-child {
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: #fff;
	opacity: 1;
}

.calculator-disclaimer {
	margin-top: 1.5rem;
	font-size: 13px;
	opacity: 0.7;
}

.calculator-admin-notice {
	background: #fff8e5;
	border: 1px dashed #e0b200;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
}

.calculator-conditional {
	background-color: #001D24;
	padding: 25px;
	border-radius: 0.375rem;
	margin-top: 20px;
}
.calculator-conditional .calculator-conditional {
	padding: 0;
}

/* Espaço entre campos empilhados dentro de uma seção condicional (ex:
   dias/duração + select de intensidade, em força e cardio). Usa gap (não
   margin-top em *~*) de propósito — é o mesmo padrão do .calculator-form,
   pra não ficar sumindo toda vez que alguém mexe nesse arquivo. */
.calculator-v-stack {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

/* display:flex acima é regra de autor e vence o display:none padrão do
   [hidden] do navegador (mesma especificidade, mas origem diferente) — sem
   isso, qualquer seção com essa classe (força/cardio) ficava sempre visível
   na tela, ignorando o combo que deveria escondê-la via JS. */
.calculator-v-stack[hidden] {
	display: none;
}


/* --- Desktop: fieldset com vários campos simples lado a lado, 2 colunas
   (ex: Gênero/Idade/Peso/Altura). Só usado onde tem campo suficiente pra
   preencher — os outros fieldsets (1 campo + painel condicional) continuam
   de 1 coluna, senão sobraria buraco vazio do lado. */
@media screen and (min-width: 641px) {
	.calculator-fieldset-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
		row-gap: 1.5rem;
	}

	.calculator-fieldset-grid > *:not([hidden]) ~ *:not([hidden]) {
		margin-top: 0;
	}

	/* Painéis de detalhe (condicionais) sempre ocupam a linha inteira — só
	   os pares de campo (select/number) ficam 2 a 2. */
	.calculator-fieldset-grid > .calculator-conditional {
		grid-column: 1 / -1;
	}

	/* Campo marcado como largura total (2º parâmetro $full_width do
	   $select_field) — ex: uma pergunta longa que não tem par pra ficar do
	   lado, e quebraria feio ocupando só meia coluna. */
	.calculator-select-wrap-full {
		grid-column: 1 / -1;
	}

	/* Mesma ideia do -grid (2 colunas), só que 3 — ex: Proteínas/Carboidratos/
	   Gorduras (%) no método por porcentagem. */
	.calculator-fieldset-grid-3 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 20px;
		row-gap: 20px;
	}

	.calculator-fieldset-grid-3 > *:not([hidden]) ~ *:not([hidden]) {
		margin-top: 0;
	}
}

@media screen and (max-width: 640px) {
	.calculator {
		padding: 25px;
		max-width: inherit;
	}
	.single-article-content .calculator-title {
        font-size: 24px !important;
        line-height: 30px !important;
	}
	.single-article-content .calculator-results-title,
	.calculator-results-section-title {
		    font-size: 18px;
    	line-height: 22px;
	}
	.calculator-results-calories-label {
		text-align: left;
	}

	/* Compacto: rótulo em cima, valor embaixo, com mais respiro entre cada
	   grupo (TMB/GET/Ajuste) — no desktop continua rótulo/valor lado a lado. */
	.calculator-data-list {
		gap: 16px;
	}

	.calculator-data-item {
		flex-direction: column;
		gap: 2px;
	}
}

/* Grupo de campos de um sistema de unidades (métrico/imperial), trocado pelo
   select "Unidades" — sem o painel escuro do .calculator-conditional: é o
   mesmo formulário, só com outros campos. Dentro de um .calculator-fieldset-grid
   ocupa a linha inteira (e é ele mesmo um grid, com as colunas dos campos).
   O [hidden] precisa vencer o display:grid do -grid/-grid-3. */
.calculator-units-group {
	grid-column: 1 / -1;
}
.calculator-units-group[hidden] {
	display: none !important;
}
/* Grupo com um campo só (ex.: o peso na calculadora de água): ocupa uma
   coluna, como um campo comum, em vez da linha inteira. */
.calculator-units-group-inline {
	grid-column: auto;
}

/* Título do resultado recebe foco via JS (acessibilidade), só pra guiar
   teclado/leitor de tela — sem o contorno de foco visual. */
.calculator [data-calculator-results-title]:focus,
.calculator [data-imc-results-title]:focus {
	outline: none;
}