/**
 * Fôlego Sobrando — folego.css
 *
 * Componentes só do Fôlego (inc/folego.php), carregados no site e no editor.
 * Consome somente tokens.
 *
 * Índice
 *  1. Linha de fôlego
 *  2. Caixas do editor e avisos
 *  3. Artigo: resumo, autoria e chamada do meio
 *  4. Página inicial: abertura e ferramentas
 *  5. Categoria: pilar
 *  6. 404
 */

/* 1. Linha de fôlego ----------------------------------------------------- */

/*
 * Onda contínua em folha: arcos com raio de 24px (--fs-space-6), traço de
 * 8px (--fs-space-2) e pontas arredondadas. Desenhada como máscara para
 * acompanhar o tema escuro. Substitui os separadores do texto.
 */
.fs-breath-line,
:is(.page-content, .ci-prose, .editor-styles-wrapper) :is(hr, .wp-block-separator) {
	box-sizing: content-box;
	width: min(100%, 18.5rem);
	height: 4rem;
	margin-block: var(--ci-space-7);
	margin-inline: 0;
	padding: 0;
	background-color: var(--fs-folha);
	border: 0;
	opacity: 1;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 64'%3E%3Cpath d='M4 32a24 24 0 0 1 48 0a24 24 0 0 0 48 0a24 24 0 0 1 48 0a24 24 0 0 0 48 0a24 24 0 0 1 48 0a24 24 0 0 0 48 0' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 64'%3E%3Cpath d='M4 32a24 24 0 0 1 48 0a24 24 0 0 0 48 0a24 24 0 0 1 48 0a24 24 0 0 0 48 0a24 24 0 0 1 48 0a24 24 0 0 0 48 0' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* 2. Caixas do editor e avisos ------------------------------------------- */

.wp-block-group:is(.is-style-na-pratica, .is-style-aviso-de-saude, .is-style-oferta),
.fs-notice {
	margin-block: var(--ci-flow-block);
	padding: var(--fs-space-6);
	border-radius: var(--ci-radius-md);
	font-size: var(--fs-body-small-size);
	line-height: var(--fs-body-small-line);
}

:is(.wp-block-group:is(.is-style-na-pratica, .is-style-aviso-de-saude, .is-style-oferta), .fs-notice) > :first-child {
	margin-block-start: 0;
}

:is(.wp-block-group:is(.is-style-na-pratica, .is-style-aviso-de-saude, .is-style-oferta), .fs-notice) > :last-child {
	margin-block-end: 0;
}

:is(.wp-block-group:is(.is-style-na-pratica, .is-style-aviso-de-saude, .is-style-oferta), .fs-notice) :is(h2, h3, h4) {
	margin-block: 0 var(--ci-space-2);
	font-size: var(--fs-h3-size);
	line-height: var(--fs-h3-line);
}

/* "Na prática": o que fazer, em menta. */
.wp-block-group.is-style-na-pratica {
	background-color: var(--fs-surface-tint);
	color: var(--fs-ink);
}

.wp-block-group.is-style-na-pratica::before {
	content: "Na prática";
	display: block;
	margin-block-end: var(--fs-space-2);
	color: var(--fs-folha);
	font-size: var(--fs-label-size);
	font-weight: var(--fs-label-weight);
	line-height: var(--fs-label-line);
	letter-spacing: var(--fs-label-tracking);
	text-transform: uppercase;
}

/* Aviso de saúde: só em dor e lesão. */
.wp-block-group.is-style-aviso-de-saude,
.fs-notice--health {
	background-color: var(--fs-cuidado-soft);
	color: var(--fs-cuidado);
}

:is(.wp-block-group.is-style-aviso-de-saude, .fs-notice--health) a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: currentColor;
}

.fs-notice__title {
	margin-block-end: var(--fs-space-1);
	font-family: var(--ci-font-display);
	font-size: var(--fs-h3-size);
	font-weight: var(--fs-h3-weight);
	line-height: var(--fs-h3-line);
}

/* Oferta: caixa do programa dentro do texto. */
.wp-block-group.is-style-oferta {
	background-color: var(--fs-sol-soft);
	color: var(--fs-ink);
}

/* Aviso de afiliado: discreto, no topo do texto. */
.fs-notice--affiliate {
	padding: var(--fs-space-4);
	background-color: var(--fs-surface-raised);
	border: var(--ci-border-width) solid var(--fs-line);
	color: var(--fs-ink-muted);
}

.fs-notice--affiliate a {
	color: var(--fs-link);
	text-decoration-line: underline;
}

/* 3. Artigo: resumo, autoria e chamada do meio --------------------------- */

.fs-article__summary {
	max-width: 38rem;
	margin-block: var(--ci-space-4) var(--ci-space-5);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-xl);
	line-height: 1.45;
	text-wrap: pretty;
}

.fs-article__byline {
	margin-block: var(--ci-space-2) 0;
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
}

.fs-article__byline a {
	color: var(--fs-link);
}

.fs-article__byline a:hover {
	text-decoration-line: underline;
}

.fs-mid-cta {
	margin-block: var(--ci-space-7);
}

/* 4. Página inicial: abertura e ferramentas ------------------------------ */

.fs-home__actions {
	margin-block: var(--ci-space-5) 0;
}

.fs-tools {
	display: grid;
	max-width: var(--ci-container-component);
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--ci-border-width) solid var(--fs-line);
}

.fs-tools__item {
	display: grid;
	gap: var(--ci-space-1);
	padding-block: var(--ci-space-4);
	border-block-end: var(--ci-border-width) solid var(--fs-line);
}

.fs-tools__link {
	color: var(--fs-folha);
	font-family: var(--ci-font-display);
	font-size: var(--fs-h3-size);
	font-weight: var(--fs-h3-weight);
	line-height: var(--fs-h3-line);
}

.fs-tools__link:hover {
	color: var(--fs-folha);
	text-decoration-line: underline;
}

.fs-tools__text {
	margin: 0;
	color: var(--ci-color-text-secondary);
	font-size: var(--fs-body-small-size);
}

@media (min-width: 768px) {
	.fs-tools__item {
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--ci-space-6);
	}
}

/* 5. Categoria: pilar ---------------------------------------------------- */

.fs-pillar {
	margin-block-end: var(--ci-space-7);
	padding-block-end: var(--ci-space-7);
	border-block-end: var(--ci-border-width) solid var(--fs-line);
}

/* Categoria só com o pilar: sem o aviso de lista vazia logo abaixo dele. */
.fs-pillar:has(+ .ci-archive__empty) {
	margin-block-end: 0;
	padding-block-end: 0;
	border-block-end: 0;
}

.fs-pillar + .ci-archive__empty {
	display: none;
}

.fs-pillar__label {
	margin-block: 0 var(--ci-space-3);
	color: var(--fs-folha);
	font-size: var(--fs-label-size);
	font-weight: var(--fs-label-weight);
	line-height: var(--fs-label-line);
	letter-spacing: var(--fs-label-tracking);
	text-transform: uppercase;
}

/* 6. 404 ----------------------------------------------------------------- */

.fs-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-3);
	margin-block: var(--ci-space-5) 0;
}

/* 7. Menu principal: submenus e botão do programa ------------------------ */

/*
 * "Temas" e "Ferramentas" abrem submenus (assets/js/folego-menu.js troca o
 * link "#" por um botão). No celular, o submenu abre dentro do painel do
 * "Menu"; no desktop, flutua abaixo do item, com borda e sem sombra.
 */
.fs-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ci-space-2);
	width: 100%;
	padding: var(--ci-space-3) 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ci-color-text);
	font-family: var(--ci-font-sans);
	font-size: var(--ci-text-base);
	font-weight: var(--ci-weight-medium);
	line-height: var(--ci-leading-snug);
	text-align: start;
	cursor: pointer;
}

.fs-submenu-toggle:hover {
	background: transparent;
	text-decoration-line: underline;
	text-underline-offset: 0.4em;
}

.fs-submenu-toggle svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	transition: transform var(--ci-duration-fast) var(--ci-ease);
}

.fs-has-submenu.is-open > .fs-submenu-toggle svg {
	transform: rotate(180deg);
}

.ci-menu .sub-menu {
	margin: 0;
	padding: 0 0 var(--ci-space-2) var(--ci-space-4);
	list-style: none;
}

.ci-menu .sub-menu a {
	padding-block: var(--ci-space-2);
	color: var(--ci-color-text-secondary);
	font-weight: var(--ci-weight-regular);
}

.ci-menu .sub-menu a:hover {
	color: var(--ci-color-text);
}

.ci-js .ci-menu .fs-has-submenu > .sub-menu {
	display: none;
}

.ci-js .ci-menu .fs-has-submenu.is-open > .sub-menu {
	display: block;
}

/* "O programa": o botão principal do cabeçalho, em sol. */
.ci-menu .ci-menu__product a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ci-control-height-sm);
	margin-block: var(--ci-space-2);
	padding: var(--ci-space-2) var(--ci-space-5);
	background-color: var(--ci-color-cta);
	border-radius: var(--ci-radius-pill);
	color: var(--ci-color-on-cta);
	font-weight: var(--ci-weight-semibold);
	text-decoration: none;
}

.ci-menu .ci-menu__product a:hover {
	background-color: var(--ci-color-cta-hover);
	color: var(--ci-color-on-cta);
	text-decoration: none;
}

@media (min-width: 1025px) {
	.ci-menu {
		align-items: center;
	}

	.ci-menu > .menu-item {
		position: relative;
	}

	.fs-submenu-toggle {
		width: auto;
		padding-inline: 0;
	}

	.ci-menu .sub-menu,
	.ci-js .ci-menu .fs-has-submenu > .sub-menu {
		position: absolute;
		z-index: 20;
		top: 100%;
		left: calc(-1 * var(--ci-space-4));
		display: none;
		min-width: 15rem;
		padding: var(--ci-space-2) var(--ci-space-4);
		background-color: var(--ci-color-surface);
		border: var(--ci-border-width) solid var(--ci-color-border);
		border-radius: var(--ci-radius-md);
	}

	/* Sem JavaScript, abre no hover e no foco; com ele, no hover e pelo botão (Esc fecha). */
	:root:not(.ci-js) .ci-menu .menu-item-has-children:is(:hover, :focus-within) > .sub-menu,
	.ci-js .ci-menu .fs-has-submenu:is(:hover, .is-open) > .sub-menu {
		display: block;
	}

	.ci-menu .sub-menu a {
		white-space: nowrap;
	}

	/* O botão do programa dispensa a linha divisória herdada. */
	.ci-menu__product {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.ci-menu .ci-menu__product a {
		margin-block: 0;
	}
}

/* 8. Páginas fixas ------------------------------------------------------- */

/* Cards de artigos dentro da coluna de leitura ([fs_artigos]). */
.ci-page__content .fs-page-articles {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	margin-block: var(--ci-flow-block);
}

.ci-page__content :is(.ci-newsletter, .ci-product-cta) {
	margin-block: var(--ci-space-7);
}

/* 9. Calculadora de pace ([fs_calculadora_pace]) ------------------------- */

.fs-pace {
	margin-block: var(--ci-space-7);
	padding: var(--ci-space-5);
	background-color: var(--ci-color-surface);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
}

.fs-pace__form {
	display: grid;
	gap: var(--ci-space-5);
}

.fs-pace fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.fs-pace__legend {
	display: block;
	margin-block-end: var(--ci-space-2);
	padding: 0;
	color: var(--ci-color-text);
	font-family: var(--ci-font-display);
	font-size: var(--ci-text-base);
	font-weight: var(--ci-weight-bold);
}

/* Escolha do cálculo: três botões em pílula. */
.fs-pace__modes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-2);
}

.fs-pace__modes .fs-pace__legend {
	flex-basis: 100%;
}

.fs-pace__mode {
	position: relative;
	cursor: pointer;
}

.fs-pace__mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fs-pace__mode span {
	display: inline-flex;
	align-items: center;
	min-height: var(--ci-control-height-sm);
	padding: var(--ci-space-2) var(--ci-space-4);
	border: var(--ci-border-width) solid var(--ci-color-border-strong);
	border-radius: var(--ci-radius-pill);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-semibold);
	transition: background-color var(--ci-duration-fast) var(--ci-ease), border-color var(--ci-duration-fast) var(--ci-ease), color var(--ci-duration-fast) var(--ci-ease);
}

.fs-pace__mode:hover span {
	border-color: var(--ci-color-action);
	color: var(--ci-color-action);
}

.fs-pace__mode input:checked + span {
	background-color: var(--ci-color-action);
	border-color: var(--ci-color-action);
	color: var(--ci-color-on-action);
}

.fs-pace__mode input:focus-visible + span {
	outline: var(--ci-focus-width) solid var(--ci-color-focus);
	outline-offset: var(--ci-focus-offset);
}

.fs-pace__presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-2);
	margin-block-start: var(--ci-space-3);
}

/* Horas, minutos e segundos lado a lado, com a unidade depois do número. */
.fs-pace__units {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-3);
}

.fs-pace__units label {
	display: flex;
	align-items: center;
	gap: var(--ci-space-2);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
}

.fs-pace .fs-pace__units input {
	width: 5rem;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.fs-pace__submit {
	justify-self: start;
	min-width: 10rem;
}

.fs-pace__error {
	margin: 0;
	color: var(--ci-color-caution);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-semibold);
}

.fs-pace__result {
	margin-block-start: var(--ci-space-6);
	padding-block-start: var(--ci-space-5);
	border-block-start: var(--ci-border-width) solid var(--fs-line);
}

.fs-pace__label {
	margin: 0;
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ci-tracking-wide);
}

.fs-pace__value {
	margin: var(--ci-space-1) 0 var(--ci-space-2);
	color: var(--fs-folha);
	font-family: var(--ci-font-display);
	font-size: var(--ci-text-4xl);
	font-weight: var(--ci-weight-black);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.fs-pace__value span {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-xl);
	font-weight: var(--ci-weight-bold);
}

.fs-pace__summary {
	margin: 0;
}

.fs-pace__heading {
	margin-block: var(--ci-space-6) var(--ci-space-1);
	font-size: var(--ci-text-lg);
}

.fs-pace__hint,
.fs-pace__note {
	margin-block: 0 var(--ci-space-3);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
}

.fs-pace__table {
	margin-block-end: 0;
	font-variant-numeric: tabular-nums;
}

.fs-pace__table th[scope="row"] {
	font-weight: var(--ci-weight-semibold);
	text-align: start;
}

.fs-pace__table td {
	text-align: end;
}

@media (max-width: 479px) {
	.fs-pace {
		padding: var(--ci-space-4);
	}
}