/*
 * components-vendor.css — recriação visual dos componentes que no template de
 * referência vinham de bibliotecas de terceiros (chosen, magnific-popup,
 * okayNav, jScrollPane, mediaelement).
 *
 * Nenhum arquivo original é importado e nenhuma classe das libs é reutilizada
 * (.chosen-container, .mfp-wrap, .okayNav, .jspContainer, .mejs-* não
 * aparecem aqui). A nomenclatura do tema usa o prefixo `omec-`, e os estados
 * (`is-open`, `is-active`) são os mesmos que o JS vanilla das tasks 018, 019
 * e 024 aplica.
 *
 * Depende de tokens.css.
 */

/* ==========================================================================
   Select customizado — equivalente ao chosen
   ========================================================================== */

.omec-select {
	position: relative;
	display: inline-block;
	width: 100%;
}

.omec-select__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mec-space-xs);
	width: 100%;
	padding: var(--mec-space-sm) var(--mec-space-md);
	background-color: var(--mec-color-bg);
	border: 1px solid var(--mec-color-border-strong);
	color: var(--mec-color-text);
	text-align: left;
}

.omec-select__toggle::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--mec-color-muted);
	border-bottom: 2px solid var(--mec-color-muted);
	transform: rotate(45deg) translateY(-25%);
	transition: transform var(--mec-transition-fast);
}

.omec-select.is-open .omec-select__toggle::after {
	transform: rotate(-135deg) translateY(-25%);
}

.omec-select__list {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + var(--mec-space-3xs));
	z-index: var(--mec-z-sticky);
	max-height: 15rem;
	margin: 0;
	padding: var(--mec-space-3xs) 0;
	overflow-y: auto;
	background-color: var(--mec-color-bg);
	border: 1px solid var(--mec-color-border);
	box-shadow: var(--mec-shadow-md);
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--mec-transition-fast), visibility var(--mec-transition-fast);
}

.omec-select.is-open .omec-select__list {
	visibility: visible;
	opacity: 1;
}

.omec-select__option {
	padding: var(--mec-space-xs) var(--mec-space-md);
	cursor: pointer;
}

.omec-select__option:hover,
.omec-select__option.is-active {
	background-color: var(--mec-color-accent);
	color: var(--mec-color-accent-contrast);
}

/* ==========================================================================
   Lightbox de imagem — equivalente ao magnific-popup (task 019)
   ========================================================================== */

/*
 * O `inset: 0` não basta num <dialog>: o agente de usuário lhe dá
 * `width/height: fit-content`, `margin: auto` e um teto de `max-width`, e a
 * caixa fica do tamanho da foto, centralizada, com o fundo escuro pintando só
 * ela — a página aparecia em volta, clara. Daí a largura, a altura, a margem e
 * os tetos explícitos aqui.
 */
.omec-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--mec-z-overlay);
	display: grid;
	place-items: center;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--mec-space-lg);
	border: 0;
	background-color: rgb(0 0 0 / 88%);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--mec-transition-base), visibility var(--mec-transition-base);
}

/* O fundo já é o próprio diálogo; o do agente de usuário só somaria opacidade. */
.omec-lightbox::backdrop {
	background-color: transparent;
}

/* Com o lightbox aberto, a página atrás não rola. */
html.omec-lightbox-open {
	overflow: hidden;
}

.omec-lightbox.is-open {
	visibility: visible;
	opacity: 1;
}

/*
 * A troca de imagem some e volta com a figura inteira — foto e legenda —, em
 * vez de pular de um quadro para o outro.
 *
 * A duração aqui é fonte única: o JS a lê do CSS para saber quanto esperar
 * antes de trocar o `src`. Mexer neste valor basta, e o
 * `prefers-reduced-motion` do base.css, que zera durações, passa a valer de
 * graça também para a espera do JS.
 */
.omec-lightbox__figure {
	display: flex;
	flex-direction: column;
	gap: var(--mec-space-xs);
	max-width: min(90vw, 70rem);
	max-height: 90vh;
	margin: 0;
	transition: opacity var(--mec-transition-base);
}

.omec-lightbox__figure.is-swapping {
	opacity: 0;
}

/*
 * Indicador de carregamento. Fica no diálogo, e não na figura, porque a figura
 * está apagada justamente enquanto se espera. Aparece sempre que há espera
 * real: com o arquivo em cache, o `is-loading` sai no mesmo quadro em que
 * entrou e ninguém vê nada piscar.
 */
.omec-lightbox.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 2.5rem;
	height: 2.5rem;
	margin: auto;
	border: 2px solid rgb(255 255 255 / 25%);
	border-block-start-color: var(--mec-color-inverse);
	border-radius: var(--mec-radius-circle);
	animation: omec-lightbox-spin 700ms linear infinite;
}

@keyframes omec-lightbox-spin {
	to {
		transform: rotate(1turn);
	}
}

.omec-lightbox__image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
}

.omec-lightbox__caption {
	color: var(--mec-color-inverse);
	font-size: var(--mec-font-size-sm);
	text-align: center;
}

.omec-lightbox__close,
.omec-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background-color: rgb(255 255 255 / 12%);
	border-radius: var(--mec-radius-circle);
	color: var(--mec-color-inverse);
	font-size: var(--mec-font-size-lg);
	transition: background-color var(--mec-transition-fast);
}

.omec-lightbox__close:hover,
.omec-lightbox__nav:hover {
	background-color: rgb(255 255 255 / 25%);
	color: var(--mec-color-inverse);
}

.omec-lightbox__close {
	inset-block-start: var(--mec-space-lg);
	inset-inline-end: var(--mec-space-lg);
}

.omec-lightbox__nav--prev {
	inset-inline-start: var(--mec-space-lg);
}

.omec-lightbox__nav--next {
	inset-inline-end: var(--mec-space-lg);
}

/*
 * Cursor de zoom no que abre o lightbox. A classe é posta pelo JS no elemento
 * que recebe o clique — o link, quando a imagem está dentro de um; a própria
 * imagem, quando não está —, então cobre os dois casos de uma vez.
 */
.omec-lightbox-trigger,
.omec-lightbox-trigger img {
	cursor: zoom-in;
}

/* ==========================================================================
   Navegação mobile — equivalente ao okayNav (task 018)
   ========================================================================== */

.omec-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem;
}

.omec-nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentcolor;
	transition: transform var(--mec-transition-fast), opacity var(--mec-transition-fast);
}

.omec-nav-toggle[aria-expanded="true"] .omec-nav-toggle__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.omec-nav-toggle[aria-expanded="true"] .omec-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.omec-nav-toggle[aria-expanded="true"] .omec-nav-toggle__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Submenu sanfonado dentro do off-canvas. */
.mec_mobile_menu .sub-menu {
	display: none;
	margin-inline-start: var(--mec-space-md);
	padding: 0;
	list-style: none;
}

.mec_mobile_menu li.is-open > .sub-menu {
	display: block;
}

/*
 * Item do menu off-canvas, medido no modelo: 18px em negrito, sem borda.
 *
 * O tema trazia 14px em peso normal com uma linha de 1px sob cada item. As três
 * coisas divergiam — a auditoria não pega esta tela porque roda em 1280 e 1000,
 * e o menu mobile só existe abaixo de 1024.
 *
 * A linha some porque no modelo os itens se separam por espaço, não por régua:
 * com 18px em negrito, o corpo já basta para distinguir um item do outro, e a
 * borda embaixo de cada um faz o painel parecer uma tabela.
 */
.mec_mobile_menu a {
	display: block;
	padding-block: var(--mec-space-3xs);
	color: var(--mec-color-heading);
	font-size: var(--mec-font-size-lg);
	font-weight: var(--mec-font-weight-bold);
}

/* ==========================================================================
   Scrollbar customizada — equivalente ao jScrollPane
   ========================================================================== */

.omec-scroll {
	overflow-y: auto;
	scrollbar-color: var(--mec-color-border-strong) transparent;
	scrollbar-width: thin;
}

.omec-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.omec-scroll::-webkit-scrollbar-track {
	background-color: transparent;
}

.omec-scroll::-webkit-scrollbar-thumb {
	background-color: var(--mec-color-border-strong);
}

.omec-scroll::-webkit-scrollbar-thumb:hover {
	background-color: var(--mec-color-muted);
}

/* ==========================================================================
   Player de mídia nativo — equivalente ao mediaelement (task 024)
   ========================================================================== */

.omec-media {
	display: block;
	width: 100%;
	margin-block: var(--mec-space-lg);
	background-color: var(--mec-color-surface-dark);
}

video.omec-media {
	aspect-ratio: 16 / 9;
	height: auto;
}

audio.omec-media {
	height: 2.75rem;
}

.omec-media:focus-visible {
	outline: 1px dotted #666666;
	outline-offset: 2px;
}

/*
 * Reserva para quando o JS não roda: sem o wrapper que media-player.js monta,
 * o embed mantém a largura fixa do atributo e atravessa a coluna. Limitar a
 * largura deixa a altura desproporcional, mas preserva o resto do layout.
 */
.entry-content iframe {
	max-width: 100%;
}

/* O wrapper é um <span>, porque o editor deixa o embed dentro de um <p>. */
.omec-media-wrap {
	display: block;
	position: relative;
	overflow: hidden;
}

.omec-media-wrap iframe {
	display: block;
	width: 100%;
	aspect-ratio: var( --omec-media-ratio, 16 / 9 );
	height: auto;
	border: 0;
}

/* Placeholder do lazy load nativo enquanto a imagem não decodifica. */
.omec-lazy {
	background-color: var(--mec-color-surface-alt);
}