/**
 * Close Theme — ajustes ao Mordomo Talents.
 *
 * Este ficheiro carrega depois do CSS do plugin (a dependência está declarada
 * no functions.php), por isso basta igual especificidade para sobrepor.
 */

/* -------------------------------------------------------------------------
 * Cores do plugin
 *
 * O Mordomo Talents expõe a sua paleta em variáveis; a marca Close é preto
 * sobre branco, sem cor de acento. O vermelho de erro fica como está — num
 * site a preto e branco continua a ser preciso distinguir um campo mal
 * preenchido do resto.
 * ---------------------------------------------------------------------- */

:root {
	--mordomo-accent: #000;
	--mordomo-accent-contrast: #fff;
	--mordomo-primary: #000;
	--mordomo-primary-hover: #333;
	--mordomo-primary-soft: #f4f4f4;
	--mordomo-primary-ring: rgba( 0, 0, 0, 0.12 );
}

/* -------------------------------------------------------------------------
 * Árvore de departamentos dentro do menu lateral
 *
 * O plugin desenha os departamentos como uma barra horizontal de pastilhas,
 * com os filhos a deslizarem para o lado. No menu lateral a leitura é
 * vertical, por isso o eixo é trocado: os filhos abrem por baixo do pai.
 * ---------------------------------------------------------------------- */

.close-menu .mordomo-departments,
.close-menu .mordomo-departments__list {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	list-style: none;
}

.close-menu .mordomo-departments__item {
	display: block;
	margin: 0;
	padding: 0;
}

.close-menu .mordomo-departments__group {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* Um degrau acima das ligações secundárias do menu: os departamentos são a
   navegação principal do site e são a primeira coisa que se lê aqui. */
.close-menu .mordomo-departments__link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 300;
	gap: 0.45rem;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

/* O negrito marca onde se está, não o facto de haver subdepartamentos. */
.close-menu .mordomo-departments__link.is-branch {
	border-color: transparent;
	color: inherit;
	font-weight: 300;
}

.close-menu .mordomo-departments__link:hover,
.close-menu .mordomo-departments__link.is-active {
	background: none;
	color: inherit;
	font-weight: 500;
}

/* No escuro acendem com o resto do menu (o --close-accent está no chrome.css).
   O departamento em que se está fica no peso e não na cor: a cor é de quem tem
   o rato em cima. */
.close-menu .mordomo-departments__link:hover,
.close-menu .mordomo-departments__link:focus-visible {
	color: var( --close-accent );
}

/* O caret é o glifo ▸ do plugin: aponta para baixo quando o grupo está aberto.
   É a única pista de que há mais por baixo do departamento, por isso é grande
   o suficiente para se ver sem se ir procurar. */
.close-menu .mordomo-departments__caret {
	display: inline-block;
	margin: 0;
	font-size: 0.8em;
	opacity: 0.55;
	transition: transform 0.25s ease;
}

.close-menu .mordomo-departments__group.is-open .mordomo-departments__caret {
	transform: rotate( 90deg );
}

.close-menu .mordomo-departments__children {
	display: block;
	max-width: none;
	max-height: 0;
	margin: 0;
	padding-left: 1rem;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	white-space: normal;
	transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
}

.close-menu .mordomo-departments__group.is-open > .mordomo-departments__children {
	max-height: 24rem;
	margin: 0;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.close-menu .mordomo-departments__child {
	display: block;
	padding: 0.38rem 0;
	font-size: 0.8125rem;
	opacity: 0.75;
}

.close-menu .mordomo-departments__child:hover,
.close-menu .mordomo-departments__child.is-active {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.close-menu .mordomo-departments__caret,
	.close-menu .mordomo-departments__children {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Grelha de talentos
 * ---------------------------------------------------------------------- */

.mordomo-talents-grid {
	--mordomo-columns: 4;
	--mordomo-cols: 4;
	gap: 2rem 1.5rem;
}

/* Com duas colunas num telemóvel o mesmo espaço comia as fotografias. */
@media ( max-width: 720px ) {
	.mordomo-talents-grid {
		gap: 2rem 1rem;
	}
}

.mordomo-talent-card__link {
	color: inherit;
	text-decoration: none;
}

.mordomo-talent-card__photo,
.mordomo-talent-card__placeholder {
	aspect-ratio: 3 / 4;
	background: #f2f2f2;
	border-radius: 10px;
	object-fit: cover;
}

.mordomo-talent-card__name {
	display: block;
	margin-top: 0.6rem;
	margin-bottom: 0;
	/* espaço para o coração e o sinal, que estão fora do fluxo, na ponta da linha */
	padding-right: 2.3rem;
	color: inherit;
	font-family: var( --wp--preset--font-family--body, "ITC Blair", Helvetica, Arial, sans-serif );
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * O coração do My Casting fica na linha do nome, no sítio onde o briefing
 * desenhava o "+": NOME … ♥. O plugin põe-no por cima do canto da fotografia, a
 * aparecer só ao passar o rato; aqui desce para o fim da linha do nome e fica
 * sempre à vista. É um quadrado de 1.4rem centrado na caixa de linha do nome —
 * daí o bottom negativo, que é metade da diferença entre os dois. O botão está
 * fora do <a>, por isso marca sem abrir a ficha.
 */
/*
 * Cada cartão só tem a altura do que leva dentro. Esticados até à altura da
 * linha — um nome de duas linhas chega para isso — o coração, que se agarra ao
 * fundo do cartão, descia sozinho e saía da linha do nome.
 */
.close-body .mordomo-talents-grid {
	align-items: start;
}

.close-body .mordomo-casting-toggle--card {
	top: auto;
	right: 0;
	bottom: -0.21rem;
	justify-content: flex-end;
	width: auto;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	opacity: 1;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background 0.2s ease;
}

.close-body .mordomo-casting-toggle--card .mordomo-casting-toggle__icon {
	width: 1rem;
	height: 1rem;
	filter: none;
	stroke-width: 1.5;
	transition: scale 0.2s ease, fill 0.2s ease;
}

/* O sinal ao lado do coração, à medida deste, e sem a sombra que o plugin lhe
   põe para se ler sobre a fotografia — aqui o botão está fora dela. */
.close-body .mordomo-casting-toggle--card .mordomo-casting-toggle__plus {
	width: 0.55rem;
	height: 0.55rem;
	filter: none;
}

.close-body .mordomo-casting-toggle--card:hover {
	background: none;
}

/*
 * Guardado: o coração enche-se, e é só isso. O disco que ficava por baixo do
 * "+" guardado sai — com o desenho cheio seria dizer duas vezes a mesma coisa,
 * na linha do nome de um cartão que é fotografia e pouco mais. O do plugin (um
 * disco branco, para o sinal se ler sobre a fotografia) também não serve aqui,
 * onde o botão já está fora da fotografia.
 */
.close-body .mordomo-casting-toggle--card.is-saved {
	background: none;
}

.close-body .mordomo-casting-toggle--card.is-saved:hover {
	background: none;
}

.mordomo-talent-card__department {
	display: none;
}

/*
 * Na listagem de um departamento pai os talentos vêm de vários filhos: aí, e só
 * aí, o departamento sai por baixo do nome. Numa linha só, para o cartão ter
 * sempre a mesma altura e o coração saber onde fica o nome.
 */
.close-body .mordomo-talent-card__department--branch {
	display: block;
	overflow: hidden;
	height: 0.9rem;
	margin: 0.15rem 0 0;
	color: var( --close-muted );
	font-size: 0.625rem;
	font-weight: 300;
	line-height: 0.9rem;
	letter-spacing: 0.12em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* O coração agarra-se ao fundo do cartão: sobe a altura da linha do departamento. */
.close-body .mordomo-talent-card:has( .mordomo-talent-card__department--branch ) .mordomo-casting-toggle--card {
	bottom: calc( -0.21rem + 1.05rem );
}

/* -------------------------------------------------------------------------
 * Perfil
 * ---------------------------------------------------------------------- */

/*
 * A ficha vem do plugin com o nome à largura toda e, por baixo, duas colunas —
 * a estreita com os atributos, a larga com o layout da plataforma. A grelha é
 * de lá; aqui acerta-se a tipografia à do resto do site e encosta-se a coluna
 * fixa por baixo do cabeçalho, que também é fixo e a taparia. O papel da gaveta
 * de ecrã pequeno segue o modo claro/escuro do site.
 */
.close-body .mordomo-talent-profile {
	--mordomo-aside-top: calc( var( --close-header-height ) + 1.5rem );
	--mordomo-actions-top: var( --close-header-height );
	--mordomo-paper: var( --close-paper );
}

/*
 * Em ecrã pequeno a linha dos departamentos e dos dois ícones cola-se por baixo
 * do cabeçalho e acompanha a página: precisa de papel por baixo para o conteúdo
 * não se ler através dela, também no modo escuro.
 */
@media ( max-width: 960px ) {
	html[ data-close-mode="dark" ] .close-body .mordomo-talent-profile__meta {
		background: var( --close-paper );
	}
}

.close-body .mordomo-talent-profile__name {
	font-size: clamp( 1.25rem, 2.2vw, 1.75rem );
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* O nome repetido no topo da gaveta, um ponto abaixo do da ficha */
.close-body .mordomo-talent-profile__facts-name {
	font-size: 0.9375rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.close-body .mordomo-talent-profile__department {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * Os atributos são uma lista de medidas, não uma tabela: o filete debaixo de
 * cada linha fazia uma grelha que o site não tem em mais lado nenhum. Fica só
 * o texto — etiqueta, dois pontos, valor —, na caixa alta espaçada com que o
 * site escreve tudo o que é legenda, e tudo na mesma tinta e no mesmo peso: o
 * que separa a etiqueta do valor são os dois pontos, e não a cor nem o negrito
 * que o plugin trazia de origem.
 *
 * O valor deixa de ir para a direita da coluna: encostado à etiqueta lê-se
 * como uma frase curta, e é assim que está na ficha impressa.
 *
 * Os dois pontos entram pelo CSS porque na marcação o <dt> e o <dd> já dizem,
 * a quem ouve a página, qual é a etiqueta e qual é o valor — escrevê-los no
 * HTML era repetir em voz alta o que ali é só desenho. Vale para os atributos
 * da gaveta e para os que vêm no layout da plataforma: é a mesma lista.
 */
.close-body :is(
	.mordomo-talent-attributes__item,
	.mordomo-talent-layout__attribute
) {
	justify-content: flex-start;
	padding-bottom: 0;
	border-bottom: 0;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.7;
	text-transform: uppercase;
}

/*
 * A etiqueta recua e o valor fica à frente: é o valor que se procura numa
 * ficha de medidas, a etiqueta só diz do que ele é. A distância entre os dois
 * faz-se com a tinta esbatida que o site já usa nas legendas — não com o
 * negrito, que nesta letra estreita e espaçada engrossaria a linha toda e
 * daria à lista o peso de um título.
 */
.close-body :is(
	.mordomo-talent-attributes,
	.mordomo-talent-layout__attributes
) :is( dt, dd ) {
	font-weight: inherit;
}

.close-body :is(
	.mordomo-talent-attributes,
	.mordomo-talent-layout__attributes
) dt {
	color: var( --close-muted );
}

.close-body :is(
	.mordomo-talent-attributes,
	.mordomo-talent-layout__attributes
) dd {
	color: var( --close-ink );
}

.close-body :is(
	.mordomo-talent-attributes,
	.mordomo-talent-layout__attributes
) dt::after {
	content: ":";
}

/* As imagens da ficha ficam à medida das dos cartões: o canto é o mesmo em
   toda a parte onde se vê a fotografia de um talento. O vídeo acompanha, que
   partilha a grelha com elas. */
.close-body :where(
	.mordomo-talent-layout__image img,
	.mordomo-talent-layout__video video,
	.mordomo-talent-layout__video--embed iframe,
	.mordomo-talent-gallery__item img
) {
	border-radius: 10px;
}

.mordomo-talent-links__link,
.mordomo-talent-nav__link {
	color: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.mordomo-casting-share__button,
.mordomo-quote-open,
.close-body .mordomo-casting-clear,
.close-body .mordomo-casting-share__copy,
.close-body .mordomo-casting-shared__import {
	border-radius: 0;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Limpar, copiar e importar vinham em pastilha de contorno. Na mesma linha de
   "Pedir orçamento" e "Partilhar", que são texto seco, a pastilha puxava o
   olho para a acção menos importante das três — passam todos a ler-se da
   mesma maneira, e é o sublinhado que responde ao rato. */
.close-body :where(
	.mordomo-casting-clear,
	.mordomo-casting-share__copy,
	.mordomo-casting-shared__import
) {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	line-height: 1.4;
}

.close-body :where(
	.mordomo-casting-clear,
	.mordomo-casting-share__copy,
	.mordomo-casting-shared__import
):hover,
.close-body :where(
	.mordomo-casting-clear,
	.mordomo-casting-share__copy,
	.mordomo-casting-shared__import
):focus {
	background: none;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------------
 * Sublinhados
 *
 * O Hello Elementor sublinha todas as ligações dentro de .page-content. Isso
 * serve para texto corrido, não para a navegação e as fichas que o plugin
 * imprime — aqui o sublinhado é retirado sem tocar nos links de texto.
 * ---------------------------------------------------------------------- */

.close-body .page-content a:where(
	.mordomo-talent-card__link,
	.mordomo-departments__link,
	.mordomo-talent-profile__department-link,
	.mordomo-talent-nav__link,
	.mordomo-talent-nav__back,
	.mordomo-talent-links__link,
	.mordomo-quote-open
) {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Botões — reset do Hello Elementor
 *
 * O reset.css do tema-pai pinta todos os <button> com o rosa de arranque dele
 * (#c36). O functions.php já resolve o caso geral, obrigando o CSS do plugin a
 * ser impresso depois do pai; sobra o hover dos dois botões a que o plugin não
 * dá tratamento próprio, onde a regra `button:hover` do Hello ainda ganha.
 * ---------------------------------------------------------------------- */

.close-body .mordomo-btn:hover,
.close-body .mordomo-btn:focus,
.close-body .mordomo-quote__submit:hover,
.close-body .mordomo-quote__submit:focus {
	background-color: var( --mordomo-primary-hover );
	border-color: var( --mordomo-primary-hover );
	color: var( --mordomo-accent-contrast );
}

/* -------------------------------------------------------------------------
 * Modo escuro
 *
 * O plugin traz uma paleta de cinzentos escrita à mão (o #111827 do texto, o
 * #6b7280 das legendas, o #e5e7eb dos filetes). Só as cores da marca é que
 * passam por variáveis, por isso o que fica em baixo reescreve as superfícies
 * do plugin que se vêem no site — grelha, ficha, My Casting e pedido de
 * orçamento — em função da tinta e do papel do tema. Enquanto o plugin não
 * expuser estes cinzentos como variáveis, é aqui que a tradução se faz.
 * ---------------------------------------------------------------------- */

html[ data-close-mode="dark" ] {
	--mordomo-accent: #fff;
	--mordomo-accent-contrast: #000;
	--mordomo-primary: #fff;
	--mordomo-primary-hover: #d6d6d6;
	--mordomo-primary-soft: #1c1c1c;
	--mordomo-primary-ring: rgba( 255, 255, 255, 0.24 );
}

/* Texto e legendas */
html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-talent-attributes dd,
	.mordomo-talent-nav__name,
	.mordomo-talent-links__link,
	.mordomo-talent-nav__link,
	.mordomo-casting-share__button,
	.mordomo-quote-open,
	.mordomo-legend,
	.mordomo-field label,
	.mordomo-checkbox-label,
	.mordomo-photo-name,
	.mordomo-quote__consent a
) {
	color: var( --close-ink );
}

html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-talent-card__department,
	.mordomo-talent-profile__department,
	.mordomo-department-heading__note,
	.mordomo-empty,
	.mordomo-hint,
	.mordomo-photo-status,
	.mordomo-casting-share__note,
	.mordomo-casting-shared__note,
	.mordomo-casting-shared__mine,
	.mordomo-my-casting.is-empty .mordomo-my-casting__empty,
	.mordomo-quote__close,
	.mordomo-quote__list,
	.mordomo-quote__consent,
	.mordomo-quote__selection-empty
) {
	color: var( --close-muted );
}

/* Fundos e filetes */
html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-talent-card__photo,
	.mordomo-talent-card__placeholder,
	.mordomo-photo-preview
) {
	background: var( --close-shade );
}

html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-talent-nav,
	.mordomo-quote__header,
	.mordomo-quote__consents
) {
	border-color: var( --close-hairline );
}

html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-quote__selection,
	.mordomo-casting-shared,
	.mordomo-casting-share__url,
	.mordomo-fieldset,
	.mordomo-departments__group.is-open
) {
	background: var( --close-shade );
	border-color: var( --close-hairline );
	color: var( --close-ink );
}

/* Menos no menu lateral. Lá o grupo aberto não é uma pastilha entre pastilhas
   — é uma linha da lista, com os filhos recuados por baixo do pai —, e a
   superfície do plugin desenhava um rectângulo cinzento a meio do menu. Quem
   diz de quem são os filhos é o recuo. */
html[ data-close-mode="dark" ] .close-body .close-menu .mordomo-departments__group.is-open {
	background: none;
	border-color: transparent;
}

/* Botões de contorno e campos: fundo do papel, traço do filete */
html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-talents-more__button,
	.mordomo-talent-nav__back .mordomo-talent-nav__link,
	.mordomo-quote__cancel,
	.mordomo-quote__field input,
	.mordomo-quote__field textarea,
	.mordomo-field input,
	.mordomo-field textarea,
	.mordomo-field select
) {
	background: transparent;
	border-color: var( --close-hairline );
	color: var( --close-ink );
}

html[ data-close-mode="dark" ] .close-body :where(
	.mordomo-talents-more__button:hover,
	.mordomo-talent-nav__back .mordomo-talent-nav__link:hover,
	.mordomo-quote__cancel:hover
) {
	background: var( --close-shade );
	border-color: var( --close-ink );
	color: var( --close-ink );
}

/* A gaveta do orçamento é a única superfície que flutua sobre a página. */
html[ data-close-mode="dark" ] .close-body .mordomo-quote__panel {
	background: var( --close-paper );
	box-shadow: -6px 0 28px rgba( 0, 0, 0, 0.6 );
	color: var( --close-ink );
}

html[ data-close-mode="dark" ] .close-body :where( .mordomo-quote__submit, .mordomo-quote__count ) {
	background: var( --close-ink );
	border-color: var( --close-ink );
	color: var( --close-paper );
}

/* O disco do rato inverte-se: claro sobre fundo escuro, marcado ou não — e
   marcado em repouso também, que no escuro ficava quase branco e engolia o
   coração que lá está dentro. */
html[ data-close-mode="dark" ] .close-body .mordomo-casting-toggle--card:hover,
html[ data-close-mode="dark" ] .close-body .mordomo-casting-toggle--card.is-saved,
html[ data-close-mode="dark" ] .close-body .mordomo-casting-toggle--card.is-saved:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

/*
 * O coração cheio toma o amarelo do hover — é a mesma cor a dizer a mesma
 * coisa, "isto responde-te" —, no botão de cada cartão e na ficha, e no
 * atalho do cabeçalho quando já há alguém guardado. A branco, que é a tinta
 * do modo escuro, não se distinguia do contorno de quando está vazio.
 */
html[ data-close-mode="dark" ] .close-body .mordomo-casting-toggle.is-saved .mordomo-casting-toggle__icon,
html[ data-close-mode="dark" ] .close-body .mordomo-casting-link:not( .is-empty ) .mordomo-casting-link__icon {
	fill: var( --close-accent );
	stroke: var( --close-accent );
}

/*
 * Os links do plugin acendem como os do tema: no escuro a resposta ao rato é
 * sempre o mesmo amarelo, venha o link do cabeçalho, do menu ou da ficha que o
 * Mordomo Talents imprime. O plugin escurece-os para #111827, que sobre papel
 * preto não se distinguia do repouso.
 *
 * Ficam de fora os que são botão e não link — "Ver mais", "Voltar", o enviar
 * do orçamento e os do formulário de scouting —, que respondem pelo contorno e
 * pelo fundo, e o coração, que tem regra própria acima.
 */
html[ data-close-mode="dark" ] .close-body :is(
	.mordomo-talent-card__link,
	.mordomo-talent-profile__department-link,
	.mordomo-talent-links__link,
	.mordomo-talent-nav__side .mordomo-talent-nav__link,
	.mordomo-department-heading__child,
	.mordomo-casting-share__button,
	.mordomo-quote-open,
	.mordomo-casting-clear,
	.mordomo-casting-share__copy,
	.mordomo-casting-shared__import,
	.mordomo-casting-shared__mine,
	.mordomo-quote__consent a,
	.mordomo-checkbox-label a
):is( :hover, :focus-visible ) {
	color: var( --close-accent );
}

/* O nome do talento anterior e do seguinte traz cor própria — herdar não
   chegava para o acompanhar. */
html[ data-close-mode="dark" ] .close-body .mordomo-talent-nav__side .mordomo-talent-nav__link:is( :hover, :focus-visible ) .mordomo-talent-nav__name {
	color: var( --close-accent );
}


/* -------------------------------------------------------------------------
 * Cabeçalho do departamento
 *
 * O nome do departamento escolhido e a frase que vem da plataforma, ao centro
 * por cima da grelha. É o mesmo desenho dos títulos das páginas — versaletes
 * largos e finos — para a listagem de um departamento se ler como uma página
 * do site e não como um resultado de pesquisa.
 * ---------------------------------------------------------------------- */

.close-body .mordomo-department-heading {
	margin: 0 0 clamp( 2rem, 4vw, 3.5rem );
	text-align: center;
}

.close-body .mordomo-department-heading__title {
	margin: 0;
	color: inherit;
	font-size: clamp( 1.25rem, 2.6vw, 2rem );
	font-weight: 300;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* A frase é a voz da agência a apresentar o departamento: fica mais pequena do
   que o nome, mas em corpo de texto e não em versaletes, para se poder ler. */
.close-body .mordomo-department-heading__note {
	max-width: 42rem;
	margin: 0.9rem auto 0;
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.7;
	opacity: 0.7;
}

/* Os subdepartamentos falam a mesma língua do menu — versaletes espaçados,
   peso leve — e o negrito do escolhido é o mesmo 500 que lá marca onde se
   está. */
.close-body .mordomo-department-heading__children {
	gap: 0.4rem clamp( 1rem, 3vw, 2.25rem );
	margin: clamp( 0.7rem, 1.6vw, 1.1rem ) 0 0;
}

/* Sem risco por baixo, em repouso ou ao passar por cima: quem marca o que se
   escolheu é o peso da letra, e um sublinhado a mais lia-se como uma segunda
   marca a competir com ele. */
.close-body .mordomo-department-heading__child,
.close-body .mordomo-department-heading__child:hover,
.close-body .mordomo-department-heading__child:focus,
.close-body .mordomo-department-heading__child:focus-visible {
	text-decoration: none;
}

.close-body .mordomo-department-heading__child {
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	opacity: 0.6;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.close-body .mordomo-department-heading__child:hover,
.close-body .mordomo-department-heading__child:focus-visible {
	opacity: 1;
}

.close-body .mordomo-department-heading__child.is-active {
	font-weight: 500;
	opacity: 1;
}

.close-body .mordomo-department-heading__children + .mordomo-department-heading__note {
	margin-top: clamp( 1.1rem, 2.4vw, 1.75rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.close-body .mordomo-department-heading__child {
		transition: none;
	}
}

@media ( max-width: 600px ) {
	.close-body .mordomo-department-heading__title {
		letter-spacing: 0.16em;
	}

	.close-body .mordomo-department-heading__child {
		letter-spacing: 0.08em;
	}
}

/* -------------------------------------------------------------------------
 * Formulário de scouting
 *
 * O plugin desenha o formulário na escala dele — etiqueta a .85rem, campo a
 * .95rem — e nessa escala o texto de sugestão sai maior do que a etiqueta que
 * o encima, e o título da secção sai a bold em caixa mista. Aqui a candidatura
 * passa a ler-se como o resto do site: versaletes largos e finos no que é
 * rótulo (título de secção, etiqueta, nome da foto, botão) e corpo pequeno,
 * sem tracking, no que é texto corrido.
 *
 * Só se mexe em tipografia: as caixas, os cantos e as cores continuam a ser as
 * do plugin.
 * ---------------------------------------------------------------------- */

.close-body .mordomo-legend {
	padding: 0 0.6rem;
	color: inherit;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* O :not() deixa de fora as etiquetas de checkbox — o consentimento RGPD e a
   experiência em representação são frases para ler, não rótulos. */
.close-body .mordomo-field label:not( .mordomo-checkbox-label ),
.close-body .mordomo-photo-name {
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* A sugestão fica abaixo da etiqueta, não acima: sem versaletes e derivada da
   tinta do campo, para se distinguir de um campo já preenchido nos dois modos. */
.close-body .mordomo-field input::placeholder,
.close-body .mordomo-field textarea::placeholder {
	color: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	opacity: 0.45;
}

/* A data e o género mostram sempre texto, cheios ou vazios: o formato
   DD/MM/AAAA e o nome da opção escolhida não passam por ::placeholder, por
   isso é o corpo do campo que desce. No género é também o que impede
   "Prefiro não indicar" de sair cortado na coluna de um terço. */
.close-body .mordomo-field input[type="date"],
.close-body .mordomo-field select {
	font-size: 0.8125rem;
}

.close-body .mordomo-hint,
.close-body .mordomo-checkbox-label {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	line-height: 1.6;
}

.close-body .mordomo-photo-status {
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
}

.close-body .mordomo-btn {
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}