/* ===========================================================================
   c-header - barra fixa do topo
   Todos os seletores ficam sob .c-header. Nada aqui alcanca outro componente.
   =========================================================================== */

.c-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 10, 12, 0.72);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transicao), background var(--transicao);
}

/* c-header.js marca isto ao rolar, para a barra ganhar contorno so quando
   deixa de estar sobre o topo da pagina. */
.c-header[data-rolou="1"] {
	border-bottom-color: var(--linha);
	background: rgba(10, 10, 12, 0.92);
}

.c-header__barra {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0.875rem var(--gutter);
}

/* A marca virou flex para a pedra poder sentar na mesma linha de base do logo.
   align-items: flex-end -- os dois "pisam no chao" juntos, e nao no centro. */
.c-header__marca {
	display: flex;
	align-items: flex-end;
	gap: 0.625rem;
	flex: 0 0 auto;
	text-decoration: none;

	/* Contem a Pedra Metin sem matar a queda: `clip` no eixo X corta o vazamento
	   a esquerda na borda da marca (some o overflow horizontal e a "quebra de
	   linha" acima do logo), enquanto `visible` no eixo Y deixa a pedra continuar
	   caindo de cima. Esta combinacao (clip + visible) e valida e nao vira
	   auto/hidden. Assim a pedra fica em TODA largura, so contida. */
	overflow-x: clip;
	overflow-y: visible;
}

.c-header__logo {
	width: auto;
	height: 32px;
	object-fit: contain;
}

/* ------------------------------------------------------------ pedra metin -- */

/* Pedra Metin caindo, gerada de tools/build_pedra.py.
   O <span> reserva no fluxo SO a pedra em repouso (--pedra-w x --pedra-h). O
   arquivo e maior porque contem o percurso da queda, e ele extravasa para cima e
   para a esquerda. Reservar o arquivo inteiro empurraria o logo ~33px para a
   direita por causa de pixel transparente. */
.c-header__pedra {
	position: relative;
	flex: 0 0 auto;
	width: var(--pedra-w, 23px);
	height: var(--pedra-h, 35px);
}

.c-header__pedraImg {
	position: absolute;

	/* Ancorada pelo canto da PEDRA EM REPOUSO, nao pelo canto do arquivo. Os dois
	   deslocamentos vem do PHP e sao medidos no build -- se um dia o recorte
	   mudar, o alinhamento com o logo acompanha sozinho, sem ninguem recalibrar
	   numero no CSS. */
	right: calc(-1 * var(--pedra-dir, 0px));
	bottom: calc(-1 * var(--pedra-base, 0px));

	width: var(--pedra-l, 56px);
	height: var(--pedra-a, 87px);

	/* max-width: none E OBRIGATORIO AQUI.
	   base.css tem `img, svg { max-width: 100% }`, que e o certo para o site
	   inteiro. Mas esta imagem e absoluta, entao o bloco que a contem e o <span>
	   -- que mede so 23px, a largura da pedra em repouso. O reset limitava os
	   56px do arquivo a 23px enquanto a altura de 87px ficava de pe, e a pedra
	   aparecia achatada a 41% da largura. */
	max-width: none;

	/* O que sobe acima do header sai da tela, e e de proposito: e de lah que uma
	   Pedra Metin cai. */
	pointer-events: none;
}

/* ---------------------------------------------------------- submenu ------- */

.c-header__menuItem { position: relative; }

/* O botao do item com submenu se parece com os outros links -- o que o distingue
   e a setinha. */
.c-header__link--menu {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
}

.c-header__seta {
	transition: transform var(--transicao);
	opacity: 0.7;
}

.c-header__link--menu[aria-expanded="true"] .c-header__seta {
	transform: rotate(180deg);
	opacity: 1;
}

.c-header__link--menu[aria-expanded="true"] { color: var(--ink); }

.c-header__submenu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 5;
	width: max-content;
	max-width: min(22rem, calc(100vw - 2rem));
	padding: 0.375rem;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: rgba(16, 16, 20, 0.98);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* `hidden` esconde por padrao. A regra existe porque display:flex abaixo
   venceria o hidden do navegador. */
.c-header__submenu[hidden] { display: none; }

.c-header__submenu:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 1px;
	animation: c-header-submenu 140ms ease;
}

@keyframes c-header-submenu {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.c-header__submenu:not([hidden]) { animation: none; }
}

.c-header__subLink {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--raio-sm);
	text-decoration: none;
	transition: background var(--transicao);
}

.c-header__subLink:hover { background: var(--surface-2); }

.c-header__subRotulo {
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 500;
}

/* A nota explica o que a pagina tem. Vale o espaco: sem ela "Refino" e "Monstros"
   nao dizem se ha numero de verdade lah dentro ou so texto. */
.c-header__subNota {
	color: var(--ink-3);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* ------------------------------------------------------- gaveta: grupo ---- */

.c-header__gavetaGrupo {
	padding: 0.5rem 0.875rem 0.125rem;
	color: var(--ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.c-header__gavetaLink--sub { padding-left: 1.75rem; }

/* A pedra fica em toda largura. O que antes vazava (os ~33px de percurso a
   esquerda passando da borda da tela) agora e contido pelo `overflow-x: clip` da
   .c-header__marca, sem esconder a pedra nem cortar a queda vertical. */

/* --------------------------------------------------------------- nav ------ */

.c-header__nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: var(--e-2);
}

.c-header__link {
	padding: 0.5rem 0.875rem;
	border-radius: 999px;
	color: var(--ink-2);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--transicao), background var(--transicao);
}

.c-header__link:hover {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.05);
}

/* ------------------------------------------------------------ acoes ------- */

.c-header__acoes {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-left: auto;
}

/* -------------------------------------------------------------- twitch ----- */

/* Retangular, nao pilula: e um bloco de status, nao um botao.
   Estado apagado por padrao -- so o glifo, quase sumido. */
.c-header__twitch {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--linha);
	border-radius: 6px;
	color: var(--ink-3);
	text-decoration: none;
	transition: color var(--transicao), border-color var(--transicao),
	            background var(--transicao);
}

.c-header__twitch:hover {
	color: var(--ink-2);
	border-color: var(--linha-forte);
}

.c-header__twitchGlifo { flex: 0 0 auto; }

.c-header__twitchCanal {
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Com alguem transmitindo: o roxo da Twitch entra, o nome aparece, e o bloco
   ganha presenca. Sem ponto pulsante e sem a palavra "ao vivo" -- o nome do
   canal ao lado do glifo ja diz o que esta acontecendo. */
.c-header__twitch[data-vivo="1"] {
	padding-right: 0.75rem;
	border-color: rgba(145, 70, 255, 0.45);
	background: rgba(145, 70, 255, 0.12);
	color: #c4a2ff;
}

.c-header__twitch[data-vivo="1"]:hover {
	border-color: rgba(145, 70, 255, 0.75);
	background: rgba(145, 70, 255, 0.2);
	color: #d9c4ff;
}

.c-header__twitch[data-vivo="1"] .c-header__twitchGlifo { color: #9146ff; }
.c-header__twitch[data-vivo="1"] .c-header__twitchCanal { color: var(--ink); }

.c-header__conta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.75rem 0.3rem 0.3rem;
	border: 1px solid var(--linha);
	border-radius: 999px;
	color: var(--ink-2);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color var(--transicao), color var(--transicao);
}

.c-header__conta:hover {
	border-color: var(--linha-forte);
	color: var(--ink);
}

.c-header__avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--ouro), var(--ouro-escuro));
	color: #14110a;
	font-size: 0.75rem;
	font-weight: 700;
}

.c-header__contaNome {
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------------------------- gaveta ---- */

.c-header__menu {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio-sm);
	background: none;
	cursor: pointer;
}

.c-header__menu:hover { border-color: var(--ouro); }

.c-header__menu span {
	display: block;
	width: 24px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--ink);
	transition: transform var(--transicao), opacity var(--transicao);
}

/* Vira X: as duas barras (gap 6 + altura 2.5 => centros a ~4.25px do meio) se
   encontram no centro. */
.c-header__menu[aria-expanded="true"] span:first-child {
	transform: translateY(4px) rotate(45deg);
}
.c-header__menu[aria-expanded="true"] span:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

/* Gaveta = overlay de tela cheia abaixo da barra fixa.
   `hidden` fecha por padrao -- a regra abaixo existe porque o display:flex
   venceria o [hidden]{display:none} do navegador (era isto que deixava a gaveta
   "travada"/aberta em telas estreitas). */
.c-header__gaveta[hidden] { display: none; }

.c-header__gaveta {
	position: fixed;
	inset: var(--altura-header) 0 0 0;
	z-index: 40;                 /* abaixo da barra (z 50), acima do conteudo */
	display: flex;
	flex-direction: column;
	padding: var(--e-2) var(--gutter) var(--e-3);
	border-top: 1px solid var(--linha);
	background: var(--bg);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	animation: c-header-gaveta 160ms ease;
}

@keyframes c-header-gaveta {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.c-header__gaveta { animation: none; }
}

.c-header__gavetaLink {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--linha);
	color: var(--ink-2);
	font-size: 1rem;
	text-decoration: none;
}

.c-header__gavetaLink--destaque {
	border-bottom: 0;
	margin-top: var(--e-2);
	color: var(--ouro);
	font-weight: 600;
}

/* ---------------------------------------------------------- responsivo ---- */

/* Colapso em 900 (nao 860): a faixa 861-900 (tablet paisagem) mostrava nav +
   twitch + conta + download inline e ficava apertada. Agora ela tambem ganha o
   hamburguer. */
@media (max-width: 900px) {
	.c-header__nav,
	.c-header__contaNome { display: none; }

	/* Em telefone o bloco fica so com o glifo, mesmo com live: o nome do canal
	   competiria com o logo e o botao de menu. */
	.c-header__twitchCanal { max-width: 8ch; }

	.c-header__menu { display: flex; }

	/* O botao de download some do topo em tela estreita: ele ja esta na gaveta,
	   e dois CTAs lado a lado no mobile empurram o logo. */
	.c-header__download { display: none; }
}

@media (min-width: 901px) {
	/* hidden no HTML garante o estado fechado sem JS; aqui a gaveta nunca
	   aparece, mesmo se o JS a tiver aberto antes de redimensionar. O JS tambem
	   fecha ao cruzar esta fronteira (matchMedia), entao aria/hidden/trava nunca
	   ficam dessincronizados. */
	.c-header__gaveta { display: none !important; }
}