/* Menu "Categorias" (template-parts/layout/categorias-painel.php). Um componente para o computador
   (dentro de .mega-menu) e para o celular (dentro do menu lateral escuro).
   Vidro escuro do cabeçalho e do painel de login (cabecalho.css, conta-header.css .acct-panel).
   Cartão: hexágono azul com o ícone, nome, contagem e seta; hover e foco sem transição. */

.cat-menu {
	--cm-text: hsl(214 45% 95%);
	--cm-strong: #fff;
	--cm-muted: hsl(212 26% 76%);
	--cm-line: hsl(0 0% 100% / 0.1);
	--cm-card: hsl(0 0% 100% / 0.05);
	--cm-card-line: hsl(0 0% 100% / 0.07);
	--cm-hex: var(--color-primary);
	--cm-blue: hsl(219 89% 59%); /* o azul do botão Entrar do login */
	--cm-link: hsl(205 100% 75%); /* os links do login */

	display: flex;
	flex-direction: column;
	min-height: 0;
	color: var(--cm-text);
	font-family: var(--font-body);
}

/* ===== computador: o painel do mega menu vira vidro escuro ===== */
.mega-menu.mega-menu--categorias {
	overflow: hidden;
	border: 1px solid hsl(0 0% 100% / 0.15);
	border-radius: 1rem;
	background: linear-gradient(180deg, hsl(215 68% 14% / 0.9), hsl(211 81% 6% / 0.95));
	box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.12), 0 28px 50px -22px hsl(215 60% 3% / 0.8);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
}

/* Sem suporte a desfoque, o vidro viraria um véu claro demais: degradê opaco, como no login. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.mega-menu.mega-menu--categorias {
		background: linear-gradient(180deg, hsl(215 68% 14%), hsl(211 81% 6%));
	}
}

.cat-menu__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 1.125rem 1.25rem 0.875rem;
}

.cat-menu__title {
	display: grid;
	margin-right: auto;
}

.cat-menu .cat-menu__heading {
	margin: 0;
	color: var(--cm-strong);
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cat-menu__title span {
	color: var(--cm-muted);
	font-size: 0.8125rem;
}

.cat-menu__filtros {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--cm-line);
	border-radius: 10px;
	background: var(--cm-card);
}

.cat-menu__filtros button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--cm-muted);
	font: 600 0.8125rem/1.2 var(--font-body);
	white-space: nowrap;
	cursor: pointer;
}

.cat-menu__filtros button:hover {
	color: var(--cm-strong);
}

.cat-menu__filtros button[aria-pressed="true"] {
	background: hsl(0 0% 100% / 0.14);
	color: var(--cm-strong);
	box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.1);
}

.cat-menu__filtros button:focus-visible {
	outline: 2px solid var(--cm-link);
	outline-offset: 1px;
}

.cat-menu__filtros svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
}

.cat-menu__busca {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: min(100%, 17.5rem);
	height: 2.5rem;
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid hsl(0 0% 100% / 0.14);
	border-radius: 10px;
	background: hsl(0 0% 100% / 0.06);
}

.cat-menu__busca:focus-within {
	border-color: var(--cm-link);
	background: hsl(0 0% 100% / 0.1);
	box-shadow: 0 0 0 3px hsl(219 89% 59% / 0.3);
}

.cat-menu__busca svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: hsl(212 22% 66%);
}

.cat-menu__busca input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cm-strong);
	font: 400 0.9375rem var(--font-body);
	outline: none;
}

.cat-menu__busca input::placeholder {
	color: hsl(212 22% 66%);
	opacity: 1;
}

/* O menu fica dentro de .site-header__nav, cujas regras de ul e a (flex, cor clara, recuo, peso) vencem
   seletores de uma classe só; por isso a grade, o cartão e os links do rodapé vão com .cat-menu na frente.

   Grade: colunas de no mínimo 240px; cada linha estica os cartões até o mais alto dela (o nome nunca
   é cortado). Passando da altura máxima, rola por dentro e a borda de baixo esmaece. */
.cat-menu .cat-menu__grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	align-items: stretch;
	gap: 0.5rem;
	min-height: 0;
	max-height: min(26rem, calc(100dvh - 15rem));
	margin: 0;
	padding: 0.125rem 1.25rem 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-color: hsl(0 0% 100% / 0.2) transparent;
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
}

.cat-menu__grade > li {
	display: flex;
	margin: 0;
}

.cat-menu__grade > li[hidden] {
	display: none;
}

.cat-menu .cat-card {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 4.25rem;
	padding: 0.75rem;
	border: 1px solid var(--cm-card-line);
	border-radius: 12px;
	background: var(--cm-card);
	color: var(--cm-text);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
}

/* hexágono como o do logo */
.cat-card__ico {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.75rem;
	clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
	background: var(--cm-hex);
	color: #fff;
}

.cat-card__ico svg {
	width: 20px;
	height: 20px;
}

.cat-card__txt {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.cat-card__nome {
	color: var(--cm-strong);
	font-family: var(--font-heading);
	font-size: 0.965rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.cat-card__conta {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	color: var(--cm-muted);
	font-size: 0.78125rem;
	font-variant-numeric: tabular-nums;
}

.cat-card__cadeado {
	display: inline-flex;
	color: var(--cm-link);
}

.cat-card__cadeado[hidden] {
	display: none;
}

.cat-card__cadeado svg {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

.cat-card__aqui {
	color: var(--cm-link);
	font-size: 0.78125rem;
	font-weight: 700;
}

.cat-card__seta {
	display: inline-flex;
	color: hsl(212 20% 55%);
}

.cat-card__seta svg {
	width: 16px;
	height: 16px;
}

/* hover e foco: sem transição (a regra geral a:hover do tema não muda as cores daqui).
   O tema dá a todo "a" uma transição de cor, borda e fundo; aqui ela atrasava o hover. */
.cat-menu a {
	transition: none;
}

.cat-menu .cat-card:hover,
.cat-menu .cat-card:focus-visible {
	border-color: hsl(219 89% 59% / 0.55);
	background: hsl(0 0% 100% / 0.1);
	box-shadow: 0 10px 24px -16px hsl(219 89% 59% / 0.7);
	color: var(--cm-text);
	text-decoration: none;
}

.cat-card:hover .cat-card__ico,
.cat-card:focus-visible .cat-card__ico {
	background: var(--cm-blue);
}

.cat-card:hover .cat-card__seta,
.cat-card:focus-visible .cat-card__seta {
	color: var(--cm-link);
	transform: translateX(2px);
}

.cat-menu .cat-card:focus-visible {
	outline: 2px solid var(--cm-link);
	outline-offset: 2px;
}

.cat-menu .cat-card[aria-current="page"] {
	border-color: var(--cm-blue);
	background: hsl(219 89% 59% / 0.16);
}

.cat-card[aria-current="page"] .cat-card__ico {
	background: var(--cm-blue);
}

.cat-menu__vazio {
	margin: 0;
	padding: 0.25rem 1.25rem 1.25rem;
	color: var(--cm-muted);
	font-size: 0.875rem;
}

.cat-menu__pe {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--cm-line);
	background: hsl(211 81% 4% / 0.35);
	font-size: 0.84375rem;
	font-weight: 700;
}

.cat-menu .cat-menu__pe a {
	display: inline;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--cm-link);
	font-size: inherit;
	font-weight: 700;
	text-decoration: none;
}

.cat-menu .cat-menu__pe a:hover {
	color: var(--cm-strong);
}

/* ===== celular: os cartões entram direto no menu lateral escuro, sem painel à parte ===== */
.mobile-cats--painel {
	padding: 0.25rem 0 0.75rem;
}

.mobile-cats--painel .cat-menu__head {
	padding: 0.5rem 0 0.625rem;
}

.mobile-cats--painel .cat-menu__title {
	display: none; /* o botão que abre a lista já diz "Categorias · N áreas editoriais" */
}

.mobile-cats--painel .cat-menu__busca {
	width: 100%;
}

.mobile-cats--painel .cat-menu__filtros {
	order: 3;
	width: 100%;
}

.mobile-cats--painel .cat-menu__filtros button {
	flex: 1;
	justify-content: center;
	padding: 0.375rem 0.5rem;
}

.mobile-cats--painel .cat-menu__grade {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.375rem;
	max-height: none;
	padding: 0 0 0.75rem;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.mobile-cats--painel .cat-card {
	grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
	min-height: 3.625rem;
	padding: 0.5625rem 0.75rem;
}

.mobile-cats--painel .cat-card__ico {
	width: 2.25rem;
	height: 2.5rem;
}

.mobile-cats--painel .cat-menu__vazio {
	padding-inline: 0;
}

.mobile-cats--painel .cat-menu__pe {
	flex-direction: column;
	padding: 0.75rem 0 0;
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	.cat-card:hover .cat-card__seta,
	.cat-card:focus-visible .cat-card__seta {
		transform: none;
	}
}