/**
 * Close Theme — cabeçalho, menu lateral, rodapé, homepage.
 *
 * Só marcação do tema. Os ajustes ao que o Mordomo Talents imprime estão em
 * custom.css, que carrega depois do CSS do plugin.
 */

/*
 * As cores estão todas em duas variáveis — tinta e papel — e o modo escuro
 * limita-se a trocá-las. Por isso o resto da folha nunca escreve #000 nem #fff
 * directamente, tirando o que fica por cima do vídeo, que é sempre branco.
 */
:root {
	--close-header-height: 5.5rem;
	--close-gutter: 2.5rem;
	--close-menu-width: 24rem;
	--close-menu-radius: 20px;
	--close-ink: #000;
	--close-paper: #fff;
	--close-shade: #f2f2f2;
	--close-muted: rgba( 0, 0, 0, 0.55 );
	--close-veil: rgba( 255, 255, 255, 0.72 );
	--close-veil-strong: rgba( 255, 255, 255, 0.92 );
	--close-hairline: rgba( 0, 0, 0, 0.12 );
	--close-scrim: rgba( 0, 0, 0, 0.25 );

	/*
	 * O único desvio ao preto e branco, e só no modo escuro: o amarelo que
	 * acende o que está debaixo do rato. Em claro não há acento — quem marca o
	 * hover continua a ser o peso da letra —, e por isso a variável devolve a
	 * tinta herdada: as regras que a usam ficam sem efeito nenhum.
	 */
	--close-accent: inherit;

	--close-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/*
 * Modo escuro. O atributo entra no <html> por um script no <head>, antes de a
 * página pintar — se fosse o chrome.js a pô-lo, via-se o branco a piscar.
 * O preto não é #000: sobre preto absoluto o texto branco vibra, e as
 * fotografias precisam de um fundo com que contrastem.
 */
html[ data-close-mode="dark" ] {
	--close-ink: #fff;
	--close-paper: #0d0d0d;
	--close-shade: #1c1c1c;
	--close-muted: rgba( 255, 255, 255, 0.6 );
	--close-veil: rgba( 13, 13, 13, 0.72 );
	--close-veil-strong: rgba( 13, 13, 13, 0.92 );
	--close-hairline: rgba( 255, 255, 255, 0.18 );
	--close-scrim: rgba( 0, 0, 0, 0.6 );
	--close-accent: #eaea68;

	/* Diz ao browser que pinte scrollbars e campos de formulário a condizer. */
	color-scheme: dark;
}

/* O <html> leva a mesma cor para o balanço do scroll não abrir uma faixa branca. */
html {
	background: var( --close-paper );
}

@media ( max-width: 782px ) {
	:root {
		--close-header-height: 4.25rem;
		--close-gutter: 1.25rem;

		/*
		 * O menu não toma o ecrã todo: fica à esquerda uma nesga da página que
		 * estava por baixo. É essa nesga que diz que isto é um painel por cima
		 * e não outro ecrã — e é também por ali que se sai, tocando fora. Ao
		 * não encostar à margem esquerda, o canto arredondado do lado de dentro
		 * volta a ver-se, como em ecrã grande.
		 */
		--close-menu-width: min( 21rem, 78vw );
	}
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

body.close-body {
	margin: 0;
	background: var( --close-paper );
	color: var( --close-ink );
	font-family: var( --wp--preset--font-family--body, "ITC Blair", Helvetica, Arial, sans-serif );
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

body.close-body.close-menu-open {
	overflow: hidden;
}

/*
 * O atributo hidden é o que o JS usa para fechar os painéis e o aviso de
 * cookies. A regra do browser — [hidden] { display: none } — perde para
 * qualquer display declarado aqui, por a folha do tema vir sempre à frente da
 * do browser; sem esta linha o .close-cookies { display: flex } mantinha o
 * aviso à vista mesmo depois de aceite.
 */
.close-body [hidden] {
	display: none;
}

.close-site {
	display: flex;
	min-height: 100vh;
	min-height: 100svh;
	flex-direction: column;
}

.close-main {
	flex: 1 0 auto;
	padding-top: var( --close-header-height );
}

/* A homepage tem o vídeo por baixo do cabeçalho, por isso não reserva espaço. */
body.close-body--hero .close-main {
	padding-top: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
	word-wrap: normal;
}

.close-skip-link:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var( --close-ink );
	clip: auto;
	clip-path: none;
	color: var( --close-paper );
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * O Hello Elementor limita o .site-main a 1140px. No Close o conteúdo vai de
 * margem a margem, com a mesma goteira do cabeçalho, para a grelha de talentos
 * alinhar com o logótipo. A classe do body sobe a especificidade acima da
 * regra do tema pai.
 */
.close-body .close-main .site-main {
	max-width: none;
	width: 100%;
	padding: clamp( 1.5rem, 4vw, 2.5rem ) var( --close-gutter ) clamp( 3rem, 8vw, 5rem );
}

.close-body .close-main .page-header {
	padding: 0;
}

/*
 * O título da página fica ao centro — é assim que a ficha do talento já vinha
 * do plugin, e o cabeçalho e a grelha continuam encostados à margem esquerda.
 */
.close-body .close-main .page-header .entry-title {
	max-width: none;
	margin: 0 0 clamp( 1rem, 3vw, 2rem );
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-align: center;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Cabeçalho
 * ---------------------------------------------------------------------- */

.close-header {
	position: fixed;
	z-index: 60;
	top: 0;
	right: 0;
	left: 0;
	transition: background-color 0.35s var( --close-ease ), box-shadow 0.35s var( --close-ease );
}

.close-header__inner {
	display: flex;
	height: var( --close-header-height );
	align-items: center;
	justify-content: space-between;
	padding: 0 var( --close-gutter );
	gap: 1.5rem;
}

.close-logo {
	position: relative;
	display: block;
	width: clamp( 7rem, 12vw, 11rem );
	line-height: 0;
}

.close-logo__img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.35s var( --close-ease );
}

/*
 * A variante preta define a altura do bloco; a branca fica por cima em
 * absoluto, para a troca de cor ser um fade e não um salto de layout.
 */
.close-logo__img--white {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.close-logo__img--black {
	opacity: 1;
}

/* No modo escuro é o logótipo branco que serve, em toda a parte. */
html[ data-close-mode="dark" ] .close-logo__img--black {
	opacity: 0;
}

html[ data-close-mode="dark" ] .close-logo__img--white {
	opacity: 1;
}

/*
 * No escuro o logótipo acende com o resto do cabeçalho. Um <img> não se pinta
 * por CSS, por isso o amarelo entra como uma mancha com a forma do próprio
 * ficheiro branco, que serve de máscara: o recorte é o mesmo e não há um
 * terceiro SVG para manter em dia quando a marca mudar.
 *
 * A imagem branca sai enquanto a mancha entra. Sobrepostas, a franja suavizada
 * da de baixo abria um halo claro à volta das letras.
 */
html[ data-close-mode="dark" ] .close-header .close-logo::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var( --close-accent );
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s var( --close-ease );
	-webkit-mask: url( "../logo/close-logo-white.svg" ) center / contain no-repeat;
	mask: url( "../logo/close-logo-white.svg" ) center / contain no-repeat;
}

html[ data-close-mode="dark" ] .close-header .close-logo:hover::after,
html[ data-close-mode="dark" ] .close-header .close-logo:focus-visible::after {
	opacity: 1;
}

/* O .close-body à frente é o peso que falta para ganhar à regra do logótipo
   sobre o vídeo da homepage, que também acende a variante branca. */
html[ data-close-mode="dark" ] .close-body .close-header .close-logo:hover .close-logo__img--white,
html[ data-close-mode="dark" ] .close-body .close-header .close-logo:focus-visible .close-logo__img--white {
	opacity: 0;
}

.close-header__actions {
	display: flex;
	align-items: center;
	gap: clamp( 0.5rem, 1.6vw, 1.5rem );
	/* Os botões passaram a ter folga própria; a margem negativa devolve o MENU
	   à margem da página, para o alinhamento com o logótipo não se perder. */
	margin-right: -0.75rem;
}

/*
 * A folga está sempre lá — só se vê ao passar o rato, quando ganha fundo. Se
 * só aparecesse no hover, os botões saltavam de sítio ao passar por eles.
 */
.close-header__action {
	padding: 0.4rem 0.75rem;
	margin: -0.4rem 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * O reset.css do Hello Elementor pinta qualquer <button> com o rosa de arranque
 * dele (#c36) mal ganhe foco. O `button:focus` do pai pesa mais do que o nome
 * dos botões do cabeçalho, e o MENU ficava com o fundo vermelho depois de se
 * clicar nele — a lupa e o modo, que são o mesmo botão, faziam o mesmo.
 *
 * Aqui repõe-se o que é do tema. A guarda não leva o nome do <body> à frente de
 * propósito: com ele passaria à frente das regras de estado que vêm a seguir e
 * apagava-lhes a pastilha. Assim fica com o peso delas, e quem vem depois é que
 * manda — o véu do hover, o contorno do foco por teclado e a pastilha do painel
 * aberto.
 */
.close-header__action:focus {
	background: none;
	color: inherit;
}

/*
 * No hover o texto engrossa e mantém a cor do cabeçalho — preto nas páginas,
 * branco sobre o vídeo. O véu por baixo é de propósito muito ténue: mais do que
 * isto e as letras deixariam de se ler a preto e passariam a cinzento.
 */
.close-header__action:hover,
.close-header__action:focus-visible,
.close-header__action[ aria-expanded="true" ] {
	background: rgba( 0, 0, 0, 0.06 );
	background: color-mix( in srgb, currentColor 8%, transparent );
	color: inherit;
	font-weight: 700;
}

/*
 * No escuro o hover também acende. Como o desenho dos botões é todo feito em
 * currentColor, o amarelo passa sozinho ao traço da lupa, às barras do MENU e
 * ao coração do My Casting. Fica em regra à parte da de cima para não entrar
 * na pastilha do painel aberto, que continua a ser tinta cheia.
 */
.close-header__action:hover,
.close-header__action:focus-visible {
	color: var( --close-accent );
}

.close-header__action:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/*
 * O anel de foco do tema-pai.
 *
 * O reset.css do Hello Elementor põe `box-shadow: 0 0 0 4px #fff` — mais um
 * contorno preto — em todos os inputs e botões com :focus-visible. Sobre o
 * vídeo e sobre o vidro dos painéis isso desenha um rectângulo branco à volta
 * do elemento; era o que se via em caixa à volta da caixa de pesquisa, que o
 * desenho quer sem caixa nenhuma, só o filete por baixo.
 *
 * O contorno já vinha a ser retirado caso a caso (aqui em cima, no campo de
 * pesquisa, no puxador dos intervalos); o box-shadow é que nunca chegou a ser.
 * Sai de uma vez em todo o cabeçalho, que já diz que tem foco com meios
 * próprios: o contorno fino dos botões de texto, o véu dos botões-ícone, o anel
 * no puxador dos intervalos e o chip do género.
 */
.close-body :is(
	.close-header__action,
	.close-search__field,
	.close-search__icon-button,
	.close-filter__thumb,
	.close-filter__submit,
	.close-filter__reset
):focus-visible {
	box-shadow: none;
}

/* Tirado o anel do pai, os dois botões do fim dos filtros ficavam sem foco
   visível — a opacidade que tinham é a mesma do hover. Ganham o contorno do
   tema, em tinta, que se vê tanto sobre a pastilha escura como sobre o papel. */
.close-body .close-filter__submit:focus-visible,
.close-body .close-filter__reset:focus-visible {
	outline: 2px solid var( --close-ink );
	outline-offset: 2px;
}

/*
 * Botão só com desenho (a lupa da pesquisa). O traço acompanha a cor do
 * cabeçalho — preto sobre branco, branco sobre o vídeo — e engrossa no lugar
 * onde o texto dos outros botões passa a médio, para o gesto ser o mesmo.
 */
.close-header__action--icon {
	display: inline-flex;
	align-items: center;
}

/* A palavra e o desenho na mesma linha, tanto no MENU como no My Casting. O
   atalho leva o nome do cabeçalho à frente porque o CSS do plugin, que entra
   depois deste ficheiro, também lhe dá uma folga própria. */
.close-header__action--menu,
.close-header__actions .close-header__action--casting {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Os três traços do MENU. Dobram-se num × ao abrir, e a dobra corre do
 * aria-expanded — o mesmo atributo que diz o estado a quem ouve a página, para
 * não haver uma classe à parte a poder discordar dele.
 *
 * Os traços estão os três no meio da caixa; o de cima e o de baixo é que se
 * afastam. Assim o fecho é uma rotação sobre o mesmo ponto e não há salto entre
 * a posição de repouso e a de aberto.
 */
.close-burger {
	position: relative;
	display: block;
	width: 1.15rem;
	height: 0.85rem;
	flex: none;
}

.close-burger__bar {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	margin-top: -0.5px;
	background: currentColor;
	transition: transform 0.35s var( --close-ease ), opacity 0.2s ease;
}

.close-burger__bar:nth-child( 1 ) {
	transform: translateY( -0.35rem );
}

.close-burger__bar:nth-child( 3 ) {
	transform: translateY( 0.35rem );
}

.close-header__action--menu[ aria-expanded="true" ] .close-burger__bar:nth-child( 1 ) {
	transform: rotate( 45deg );
}

.close-header__action--menu[ aria-expanded="true" ] .close-burger__bar:nth-child( 2 ) {
	opacity: 0;
}

.close-header__action--menu[ aria-expanded="true" ] .close-burger__bar:nth-child( 3 ) {
	transform: rotate( -45deg );
}

/* No hover o texto dos botões engrossa; aqui o equivalente é o traço. */
.close-header__action--menu:hover .close-burger__bar,
.close-header__action--menu:focus-visible .close-burger__bar,
.close-header__action--menu[ aria-expanded="true" ] .close-burger__bar {
	height: 2px;
	margin-top: -1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.close-burger__bar {
		transition: none;
	}
}

/* O coração do My Casting à escala da lupa, e a engrossar como ela. */
.close-header__action--casting .mordomo-casting-link__icon {
	width: 1.3rem;
	height: 1.3rem;
	stroke-width: 1.3;
	transition: fill 0.2s ease, stroke-width 0.2s ease;
}

.close-header__action--casting:hover .mordomo-casting-link__icon,
.close-header__action--casting:focus-visible .mordomo-casting-link__icon {
	stroke-width: 2.2;
}

.close-header__icon {
	display: block;
	width: 1.4rem;
	height: 1.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	transition: stroke-width 0.2s ease;
}

/*
 * Painel aberto: a pastilha enche-se, em qualquer dos botões. O desenho não
 * muda — a lupa não passa a ×, como no botão do My Casting — mas fica claro
 * qual das acções está aberta sem se ter de olhar para o painel.
 */
.close-header__action[ aria-expanded="true" ] {
	background: var( --close-ink );
	color: var( --close-paper );
}

/*
 * Contador de filtros, agora encostado à lupa — era da palavra FILTER, que
 * saiu. É um anel em currentColor e não uma bolinha cheia, para se inverter
 * sozinho quando o botão fica em pastilha preta.
 */
.close-header__count,
.close-header__action--casting .mordomo-casting-count {
	display: inline-flex;
	min-width: 1.25rem;
	height: 1.25rem;
	align-items: center;
	justify-content: center;
	padding: 0 0.3rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	margin-left: 0.4rem;
	background: none;
	color: inherit;
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0;
}

/* O contador do plugin nasce escondido e é o JavaScript que o mostra: em
   selecção vazia não há número nenhum a ocupar a linha. */
.close-header__action--casting .mordomo-casting-count[ hidden ] {
	display: none;
}

/*
 * Botão de modo: mostra o desenho do modo para onde se vai, não o do modo em
 * que se está — a lua quando se está no claro, o sol quando se está no escuro.
 */
.close-header__icon--sun {
	display: none;
}

html[ data-close-mode="dark" ] .close-header__icon--moon {
	display: none;
}

html[ data-close-mode="dark" ] .close-header__icon--sun {
	display: block;
}

/* A lupa não tem peso de letra: o equivalente ao bold é o traço mais grosso. */
.close-header__action--icon:hover .close-header__icon,
.close-header__action--icon:focus-visible .close-header__icon,
.close-header__action--icon[ aria-expanded="true" ] .close-header__icon {
	stroke-width: 2.2;
}

/*
 * Sobre o vídeo da homepage o cabeçalho é branco e sem fundo — mas só enquanto
 * nada estiver aberto por baixo dele. Com a pesquisa ou os filtros à mostra, a
 * faixa do topo tem de acompanhar o painel: sem isso ficava uma tira de imagem
 * entre o logótipo e a caixa, como se fossem duas coisas soltas.
 */
body.close-body--hero .close-header:not( .is-solid ):not( :has( .close-panel.is-open ) ) {
	color: #fff;
}

body.close-body--hero .close-header:not( .is-solid ):not( :has( .close-panel.is-open ) ) .close-logo__img--black {
	opacity: 0;
}

body.close-body--hero .close-header:not( .is-solid ):not( :has( .close-panel.is-open ) ) .close-logo__img--white {
	opacity: 1;
}

/*
 * O véu do cabeçalho é o mesmo do painel — a faixa e a caixa lêem-se como uma
 * superfície só, e a tinta preta volta a ter fundo onde assentar.
 */
.close-header.is-solid,
.close-header:has( .close-panel.is-open ) {
	background: var( --close-veil-strong );
	box-shadow: 0 1px 0 var( --close-hairline );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
}

/* Com o painel aberto o filete do cabeçalho é o topo do painel: não se repete. */
.close-header:has( .close-panel.is-open ) {
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Painel de pesquisa e filtros
 * ---------------------------------------------------------------------- */

/*
 * O painel desce de baixo do cabeçalho. O hidden entra e sai no JS; a
 * classe is-open é que faz a animação, porque um elemento com hidden não
 * transita. Descem meio centímetro e ganham opacidade — o suficiente para se
 * perceber de onde vieram sem atrasar quem já está a escrever.
 */
.close-panel {
	padding: 1.5rem var( --close-gutter ) 1.75rem;
	background: var( --close-veil-strong );
	border-bottom: 1px solid var( --close-hairline );
	color: var( --close-ink );
	opacity: 0;
	transform: translateY( -0.5rem );
	transition: opacity 0.24s ease, transform 0.28s var( --close-ease );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
}

.close-panel.is-open {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.close-panel {
		transform: none;
		transition: none;
	}
}

/*
 * A pesquisa é uma linha só: lupa, campo e seta, assentes num filete. O campo
 * é grande de propósito — é a acção principal do painel e o nome escrito lê-se
 * à distância a que se está do ecrã quando se escreve.
 *
 * Procurar e filtrar são o mesmo formulário: a linha do nome fica por cima,
 * mais estreita, e as medidas por baixo. O que separa os dois assuntos é a
 * folga — não há filete nem caixa, que era o que faria o painel parecer uma
 * janela por cima da página em vez da própria página.
 */
.close-find .close-filter {
	margin-top: 2rem;
}

.close-search {
	display: flex;
	max-width: 46rem;
	align-items: center;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid currentColor;
	gap: 0.75rem;
}

.close-search__icon {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}

/*
 * A classe do body é precisa: o reset.css do Hello Elementor põe caixa, canto
 * redondo e folga em input[type=search] com mais peso do que uma classe só, e
 * o campo aparecia dentro de um rectângulo cinzento.
 */
.close-body .close-search__field {
	width: 100%;
	padding: 0.15rem 0;
	border: 0;
	background: none;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: clamp( 0.875rem, 1.1vw, 1rem );
	font-weight: 300;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.close-body .close-search__field:focus {
	outline: 0;
}

.close-body .close-search__field::placeholder {
	color: currentColor;
	opacity: 0.35;
}

/* O X do próprio browser duplicaria o botão de limpar, e não é desenho nosso. */
.close-body .close-search__field::-webkit-search-decoration,
.close-body .close-search__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.close-search__icon-button {
	display: inline-flex;
	width: 1.9rem;
	height: 1.9rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.close-search__icon-button svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.close-search__icon-button:hover,
.close-search__icon-button:focus-visible {
	background: color-mix( in srgb, currentColor 10%, transparent );
}

/* O limpar é secundário: só se vê quando há texto, e mais leve do que a seta. */
.close-search__clear {
	opacity: 0.5;
}

.close-search__clear:hover {
	opacity: 1;
}

.close-search__hint {
	margin: 0.75rem 0 0;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	opacity: 0.45;
	text-transform: uppercase;
}

/*
 * Os filtros. A grelha é de campos autónomos: cada medida é um par
 * mínimo/máximo assente num filete, como a linha da pesquisa, e o género é uma
 * fila de botões. Tudo o que se vê é texto e um filete — não há caixas, para o
 * painel continuar a ser a página e não uma janela por cima dela.
 */
.close-filter {
	display: flex;
	max-width: 68rem;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.75rem 2.5rem;
}

.close-filter__field {
	display: flex;
	min-width: 0;
	flex: 0 1 13rem;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 0;
	gap: 0.5rem;
}

.close-filter__label {
	display: block;
	padding: 0;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	opacity: 0.5;
	text-transform: uppercase;
}

.close-filter__unit {
	letter-spacing: 0.08em;
	opacity: 0.7;
	text-transform: none;
}

/*
 * Intervalo de duplo puxador. A linha é o domínio todo, o traço cheio é o
 * intervalo escolhido e os dois pontos são <input type=range> sobrepostos —
 * cada um só recebe o rato no seu puxador, senão o de cima roubava o clique ao
 * de baixo em toda a linha.
 */
.close-filter__slider {
	display: flex;
	min-width: 11rem;
	flex-direction: column;
	gap: 0.45rem;
}

.close-filter__readout {
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

/* Enquanto o intervalo é o todo, não é um filtro — e lê-se como sugestão. */
.close-filter__slider.is-set .close-filter__readout {
	opacity: 1;
}

.close-filter__track {
	position: relative;
	height: 1.1rem;
}

.close-filter__track::before {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	content: '';
	margin-top: -0.5px;
	opacity: 0.25;
}

/* O intervalo escolhido é um traço mais grosso e opaco sobre a linha do
   domínio; enquanto ninguém lhe tocou fica esbatido como o resto do campo. */
.close-filter__fill {
	position: absolute;
	top: 50%;
	height: 2px;
	background: currentColor;
	margin-top: -1px;
	opacity: 0.35;
	transition: opacity 0.2s ease;
}

.close-filter__slider.is-set .close-filter__fill {
	opacity: 1;
}

.close-body .close-filter__slider:not( .is-set ) .close-filter__thumb::-webkit-slider-thumb {
	opacity: 0.45;
}

.close-body .close-filter__slider:not( .is-set ) .close-filter__thumb::-moz-range-thumb {
	opacity: 0.45;
}

.close-body .close-filter__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.1rem;
	padding: 0;
	border: 0;
	appearance: none;
	background: none;
	border-radius: 0;
	margin: 0;
	pointer-events: none;
}

.close-body .close-filter__thumb:focus {
	outline: 0;
}

.close-body .close-filter__thumb::-webkit-slider-thumb {
	width: 0.75rem;
	height: 0.75rem;
	border: 0;
	appearance: none;
	background: var( --close-ink );
	border-radius: 999px;
	cursor: grab;
	pointer-events: auto;
	transition: scale 0.15s ease;
}

.close-body .close-filter__thumb::-moz-range-thumb {
	width: 0.75rem;
	height: 0.75rem;
	border: 0;
	background: var( --close-ink );
	border-radius: 999px;
	cursor: grab;
	pointer-events: auto;
}

.close-body .close-filter__thumb::-moz-range-track {
	background: none;
}

.close-body .close-filter__thumb:hover::-webkit-slider-thumb,
.close-body .close-filter__thumb:focus-visible::-webkit-slider-thumb {
	scale: 1.25;
}

/* O foco tem de se ver: o puxador é pequeno e não tem contorno próprio. */
.close-body .close-filter__thumb:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 2px var( --close-paper ), 0 0 0 3px var( --close-ink );
}

.close-body .close-filter__thumb:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 2px var( --close-paper ), 0 0 0 3px var( --close-ink );
}

.close-filter__field--gender {
	flex: 0 1 auto;
}

/* A altura mínima é a do bloco das medidas (valor + linha), para os rótulos de
   todos os campos ficarem à mesma altura. */
.close-filter__choices {
	display: flex;
	min-height: 2.65rem;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 0.35rem;
	gap: 0.4rem;
}

.close-filter__choice {
	cursor: pointer;
}

.close-filter__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	border: 0;
	margin: -1px;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
}

.close-filter__chip {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	opacity: 0.45;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	white-space: nowrap;
}

.close-filter__choice:hover .close-filter__chip {
	opacity: 0.8;
}

.close-filter__radio:checked + .close-filter__chip {
	background: var( --close-ink );
	color: var( --close-paper );
	opacity: 1;
}

.close-filter__radio:focus-visible + .close-filter__chip {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.close-filter__actions {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	gap: 0.5rem 1.25rem;
}

.close-filter__submit {
	padding: 0.55rem 1.75rem;
	border: 0;
	background: var( --close-ink );
	border-radius: 999px;
	color: var( --close-paper );
	cursor: pointer;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.close-filter__submit:hover,
.close-filter__submit:focus-visible {
	opacity: 0.8;
}

.close-filter__reset {
	color: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-decoration: underline;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Menu lateral
 * ---------------------------------------------------------------------- */

.close-scrim {
	position: fixed;
	z-index: 65;
	background: var( --close-scrim );
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s var( --close-ease );
}

.close-scrim.is-visible {
	opacity: 1;
}

.close-menu {
	position: fixed;
	z-index: 70;
	top: 0;
	right: 0;
	width: var( --close-menu-width );
	max-width: 100vw;
	height: 100vh;
	height: 100svh;
	border-radius: var( --close-menu-radius ) 0 0 var( --close-menu-radius );
	background: var( --close-veil );
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX( 100% );
	transition: transform 0.4s var( --close-ease );
	-webkit-backdrop-filter: blur( 28px ) saturate( 140% );
	backdrop-filter: blur( 28px ) saturate( 140% );
}

.close-menu.is-open {
	transform: translateX( 0 );
}

/*
 * O × do painel. Fica à altura a que estava o MENU, no canto que o painel lhe
 * tapou — quem clicou ali para abrir volta a encontrar a saída no mesmo sítio.
 */
.close-menu__close {
	position: absolute;
	top: calc( var( --close-header-height ) / 2 - 1.25rem );
	right: calc( var( --close-gutter ) - 0.625rem );
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	cursor: pointer;
}

.close-menu__close-icon {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	transition: stroke-width 0.2s ease;
}

/* O × é um <button> como os do cabeçalho: leva a mesma guarda contra o rosa
   de arranque do tema-pai, e do mesmo peso, para o que vem a seguir lhe poder
   dar o véu. */
.close-menu__close:focus {
	background: none;
	color: inherit;
}

.close-menu__close:hover,
.close-menu__close:focus-visible {
	background: rgba( 0, 0, 0, 0.06 );
	background: color-mix( in srgb, currentColor 8%, transparent );
	color: inherit;
}

.close-menu__close:hover .close-menu__close-icon,
.close-menu__close:focus-visible .close-menu__close-icon {
	stroke-width: 2.2;
}

.close-menu__close:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
	box-shadow: none;
}

.close-menu__inner {
	display: flex;
	min-height: 100%;
	flex-direction: column;
	padding: calc( var( --close-header-height ) + 1.5rem ) var( --close-gutter ) 2.5rem;
	gap: 2.25rem;
}

/*
 * Em ecrã pequeno a lista afasta-se mais da margem esquerda do que a goteira
 * da página pedia. É pouco — meio centímetro —, mas é o que faz o painel
 * parecer uma coluna com margem própria e não a página encolhida: o texto
 * começa longe do corte, e o corte é o que se vê primeiro quando o menu entra.
 */
@media ( max-width: 782px ) {
	.close-menu__inner {
		padding-left: calc( var( --close-gutter ) + 0.75rem );
	}
}

.close-menu__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: 0.9rem;
	list-style: none;
}

.close-menu__list--secondary {
	margin-top: auto;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

.close-menu__link,
.close-menu__list a {
	color: inherit;
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.close-menu__link:hover,
.close-menu__list a:hover,
.close-menu__list .current-menu-item > a {
	font-weight: 500;
}

/* A cor é só do que está debaixo do rato: a página em que se está marca-se
   pelo peso, e acesa ao mesmo tempo seriam duas marcas a dizer o mesmo. */
.close-menu__link:hover,
.close-menu__link:focus-visible,
.close-menu__list a:hover,
.close-menu__list a:focus-visible {
	color: var( --close-accent );
}

/*
 * Redes sociais. O nome da rede escreve-se só para quem ouve a página: à vista
 * está o ícone, de contorno fino, que se enche ao passar o rato. Os dois
 * desenhos vêm sobrepostos no mesmo SVG (ver close_theme_social_icon) e trocam
 * por opacidade — assim o ícone não muda de tamanho nem salta na troca, e o
 * traço é sempre a tinta da página, que no modo escuro se inverte sozinha.
 */
.close-socials {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	gap: 1rem;
	list-style: none;
}

.close-socials__link {
	display: block;
	color: inherit;
	line-height: 0;
	text-decoration: none;
}

.close-socials__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* No menu lateral há espaço de sobra e as redes são um destino, não um remate
   de rodapé: ficam à escala do que se toca com o dedo. */
.close-socials--menu .close-socials__icon {
	width: 2rem;
	height: 2rem;
}

.close-socials__line,
.close-socials__solid {
	transition: opacity 0.2s ease;
}

.close-socials__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.close-socials__solid {
	fill: currentColor;
	stroke: none;
	opacity: 0;
}

.close-socials__link:hover .close-socials__line,
.close-socials__link:focus-visible .close-socials__line {
	opacity: 0;
}

.close-socials__link:hover .close-socials__solid,
.close-socials__link:focus-visible .close-socials__solid {
	opacity: 1;
}

/* Os dois desenhos são pintados em currentColor: acender o link acende o que
   lá está dentro, cheio ou de contorno. */
.close-socials__link:hover,
.close-socials__link:focus-visible {
	color: var( --close-accent );
}

/* Uma rede sem ícone continua a sair pelo nome, na escala do resto do rodapé. */
.close-socials__link--text {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.close-socials__link--text:hover {
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * Homepage
 * ---------------------------------------------------------------------- */

.close-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	background: #000;
	overflow: hidden;
}

.close-hero__media {
	position: absolute;
	inset: 0;
}

/*
 * O leitor do Vimeo tem sempre a proporção do ficheiro e enche de preto o que
 * sobrar do iframe. Para cobrir o ecrã, a moldura é dimensionada exactamente
 * nessa proporção — que o front-page.php escreve em --close-hero-ratio a
 * partir do oEmbed — ao maior entre a largura e a altura necessárias, e
 * centrada: o excesso fica cortado, como num object-fit: cover.
 */
.close-hero__frame {
	--close-hero-ratio: 1.7778;

	position: absolute;
	top: 50%;
	left: 50%;
	width: max( 100vw, calc( 100vh * var( --close-hero-ratio ) ) );
	height: max( 100vh, calc( 100vw / var( --close-hero-ratio ) ) );
	width: max( 100vw, calc( 100svh * var( --close-hero-ratio ) ) );
	height: max( 100svh, calc( 100vw / var( --close-hero-ratio ) ) );
	transform: translate( -50%, -50% );
}

.close-hero__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Um ficheiro de vídeo recorta-se sozinho: basta a moldura ocupar o ecrã. */
.close-hero__frame--file {
	width: 100%;
	height: 100%;
}

.close-hero__frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.close-hero__frame--portrait {
	display: none;
}

/* Só há troca de vídeo se estiver configurado um vertical. */
@media ( max-width: 782px ) and ( orientation: portrait ) {
	.close-hero:has( .close-hero__frame--portrait ) .close-hero__frame--landscape {
		display: none;
	}

	.close-hero__frame--portrait {
		display: block;
	}
}

.close-hero__overlay {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	pointer-events: none;
}

.close-hero__overlay .close-logo {
	width: clamp( 12rem, 34vw, 32rem );
}

.close-hero__overlay .close-logo__img--black {
	opacity: 0;
}

.close-hero__overlay .close-logo__img--white {
	opacity: 1;
}

.close-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	width: 2.5rem;
	height: 2.5rem;
	transform: translateX( -50% );
}

.close-hero__scroll-arrow {
	position: absolute;
	top: 40%;
	left: 50%;
	width: 0.85rem;
	height: 0.85rem;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: translate( -50%, -50% ) rotate( 45deg );
	animation: close-nudge 2.4s var( --close-ease ) infinite;
}

@keyframes close-nudge {
	0%, 100% { transform: translate( -50%, -50% ) rotate( 45deg ); }
	50% { transform: translate( -50%, 0 ) rotate( 45deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.close-hero__scroll-arrow {
		animation: none;
	}

	.close-menu,
	.close-scrim,
	.close-logo__img,
	.close-header .close-logo::after {
		transition: none;
	}
}

.close-latest {
	padding: clamp( 3rem, 8vw, 6rem ) var( --close-gutter );
}

.close-latest__title {
	margin: 0 0 clamp( 1.5rem, 4vw, 3rem );
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.close-latest__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

@media ( max-width: 960px ) {
	.close-latest__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 720px ) {
	.close-latest__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.close-latest__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.close-latest__media {
	display: block;
	aspect-ratio: 3 / 4;
	background: var( --close-shade );
	overflow: hidden;
}

.close-latest__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var( --close-ease );
}

.close-latest__link:hover .close-latest__image {
	transform: scale( 1.03 );
}

.close-latest__name {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* A grelha do Mordomo Instagram na LATEST: o mesmo cinzento de espera e a
   mesma curva que os cartões de artigo, também no modo escuro. */
.close-latest .mordomo-instagram {
	--mordomo-instagram-placeholder: var( --close-shade );
	--mordomo-instagram-ease: var( --close-ease );
}

/* -------------------------------------------------------------------------
 * Rodapé
 * ---------------------------------------------------------------------- */

.close-footer {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	padding: clamp( 2rem, 5vw, 3.5rem ) var( --close-gutter ) 1.5rem;
	background: var( --close-veil );
	border-top: 1px solid var( --close-hairline );
	-webkit-backdrop-filter: blur( 24px ) saturate( 140% );
	backdrop-filter: blur( 24px ) saturate( 140% );
}

.close-footer__inner {
	display: grid;
	align-items: start;
	gap: 2rem;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

@media ( max-width: 782px ) {
	.close-footer__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

.close-footer__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: 0.4rem;
	list-style: none;
}

.close-footer__link,
.close-footer__list a {
	color: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.close-footer__link:hover,
.close-footer__list a:hover {
	font-weight: 500;
}

.close-footer__link:hover,
.close-footer__link:focus-visible,
.close-footer__list a:hover,
.close-footer__list a:focus-visible {
	color: var( --close-accent );
}

.close-footer__col--address {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.close-footer__closer {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.close-footer__copyright {
	margin: clamp( 2rem, 5vw, 3.5rem ) 0 0;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	opacity: 0.6;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Aviso de cookies
 * ---------------------------------------------------------------------- */

.close-cookies {
	position: fixed;
	z-index: 80;
	right: var( --close-gutter );
	bottom: var( --close-gutter );
	left: var( --close-gutter );
	display: flex;
	max-width: 46rem;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	margin: 0 auto;
	background: var( --close-veil-strong );
	border: 1px solid var( --close-hairline );
	gap: 1.5rem;
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
}

@media ( max-width: 600px ) {
	.close-cookies {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

.close-cookies__text {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
}

.close-cookies__link {
	color: inherit;
	text-decoration: underline;
}

.close-cookies__link:hover,
.close-cookies__link:focus-visible {
	color: var( --close-accent );
}

.close-cookies__actions {
	display: flex;
	gap: 0.75rem;
}

.close-cookies__button {
	padding: 0.5rem 1.25rem;
	border: 1px solid var( --close-ink );
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.close-cookies__button--accept {
	background: var( --close-ink );
	color: var( --close-paper );
}

/* -------------------------------------------------------------------------
 * Ecrãs pequenos
 *
 * ITC Blair é larga e as três acções com letterspacing não cabem a 390px ao
 * lado do logótipo. Em vez de as esconder, encolhem — continuam legíveis e a
 * navegação mantém-se completa.
 * ---------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	:root {
		--close-header-height: 3.75rem;
	}

	.close-header .close-logo {
		width: 5.5rem;
	}

	.close-header__inner {
		gap: 0.75rem;
	}

	/* Com três acções e o contador de filtros, o espaço entre botões encolhe
	   ao mínimo: a folga que faltava vinha do próprio botão, não das letras. */
	.close-header__actions {
		gap: 0.15rem;
		margin-right: -0.4rem;
	}

	.close-header__action {
		padding: 0.4rem 0.4rem;
		font-size: 0.625rem;
		letter-spacing: 0.08em;
	}

	.close-header__count,
	.close-header__action--casting .mordomo-casting-count {
		min-width: 1rem;
		height: 1rem;
		margin-left: 0.3rem;
		font-size: 0.5625rem;
	}

	/* Quatro acções não cabem em palavras. A do My Casting fica só com o
	   coração e o número — que é o que já se lê de relance —, e a palavra
	   passa para quem ouve a página. */
	.close-header__action--casting .mordomo-casting-link__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		clip-path: inset( 50% );
		overflow: hidden;
		white-space: nowrap;
	}

	.close-header__actions .close-header__action--casting {
		gap: 0.25rem;
	}

	/* Em ecrã estreito cada medida ocupa a linha toda: os pares mínimo/máximo
	   lado a lado ficariam com dois centímetros de largura cada um. */
	.close-filter {
		gap: 1.25rem 1.5rem;
	}

	.close-filter__field {
		flex: 1 1 100%;
	}

	.close-filter__slider {
		min-width: 0;
	}
}