/* =============================================================================
   CZSBrasil — Footer
   =============================================================================
   Footer global (carregado em base.html.twig). Substitui o footer-layout2
   legado (jiji-bg, clip-path arrows). Sistema novo, tokens unicos via
   var(--czs-*). Brand register: gesto tipografico edge-to-edge como POV.
============================================================================= */

.czs-footer {
	position: relative;
	background-color: var(--czs-bg-base);
	color: var(--czs-text-secondary);
	font-family: var(--czs-font-body);
	overflow: hidden;
	isolation: isolate;
	/* padding-bottom usa max() pra respeitar o home indicator do iPhone
	   (env(safe-area-inset-bottom) ~ 34px). Sem isso, em pagina curta
	   onde o footer encosta no fundo da viewport, o indicador cobre o
	   copyright. viewport-fit=cover ja esta setado em base.html.twig:29. */
	padding-block:
		clamp(4rem, 8vw, 7.5rem)
		max(clamp(2rem, 4vw, 3.5rem), env(safe-area-inset-bottom));

	/* Below-fold optimization: pula paint do footer ate ele se aproximar
	   da viewport. Inclui dois radial-gradients caros no __ambient. O
	   intrinsic-size de 800px e o midpoint medido em desktop/mobile;
	   "auto" deixa o browser memorizar o tamanho real apos o 1o render. */
	content-visibility: auto;
	contain-intrinsic-size: auto 800px;

	/* Limita propagacao de layout/paint/style — header.css ja usa o mesmo
	   padrao (theme.css:160). Combina com content-visibility quando
	   onscreen sem efeito duplicado. */
	contain: layout paint style;
}

/* Linha de luz no topo: Discord blue -> magenta. Marca a transicao da
   pagina pro rodape sem usar uma sombra generica. Espessura 1px proposital. */
.czs-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgb(var(--czs-brand-primary-rgb) / 0.55) 30%,
		rgb(var(--czs-brand-accent-rgb) / 0.55) 70%,
		transparent 100%
	);
	z-index: 1;
}

/* Ambient atmosferico — dois halos baixos. Brand spec: "background vivo,
   moveis flat". Halos ficam em z-index -1, opacidade baixa.
   contain: paint isola o custo dos radial-gradients (que sao caros pra
   repintar) do resto da arvore do footer. */
.czs-footer__ambient {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	contain: paint;
	background:
		radial-gradient(ellipse 60% 50% at 15% 30%, rgb(var(--czs-brand-primary-rgb) / 0.08), transparent 60%),
		radial-gradient(ellipse 50% 45% at 85% 75%, rgb(var(--czs-brand-accent-rgb) / 0.06), transparent 60%);
}

/* Save-Data / prefers-reduced-data: dropar o ambient. Usuario optou por
   reduzir trafego/processamento; gradiente decorativo nao agrega. */
@media (prefers-reduced-data: reduce) {
	.czs-footer__ambient {
		display: none;
	}
}

.czs-footer__inner {
	max-width: 1280px;
	margin-inline: auto;
	/* Em landscape no iPhone com notch lateral, o conteudo pode entrar
	   atras do entalhe. max(padding-base, env()) garante recuo minimo
	   pelo safe-area sem regredir desktop. */
	padding-inline:
		max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left))
		max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-right));
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3.5rem);
}

/* =============================================================================
   GESTO TIPOGRAFICO — wordmark
   ============================================================================= */

.czs-footer__brand {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--czs-radius-md);
}

.czs-footer__brand:focus-visible {
	outline: 2px solid var(--czs-brand-primary);
	outline-offset: 6px;
}

.czs-footer__wordmark {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-family: var(--czs-font-display);
	font-weight: var(--czs-fw-bold);
	color: var(--czs-text-primary);
	/* Escala dramatica: edge-to-edge no mobile, mantem na desktop wide.
	   Min de 2.75rem garante que 9 letras Goldman 700 caibam em viewport
	   320px sem overflow. Safety horizontal mora no .czs-footer (overflow
	   hidden) — sem clip aqui pra nao cortar o L. */
	font-size: clamp(2.75rem, 13.5vw, 12.5rem);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}

/* letter-spacing nao se aplica aqui: justify-content: space-between distribui
   os spans 1-char e absorve qualquer tracking. Mantido fora pra nao confundir. */

.czs-footer__wordmark > span {
	display: inline-block;
	transition: transform 420ms var(--czs-ease-out), color 280ms ease;
	transition-delay: var(--letter-delay, 0ms);
}

/* will-change so durante a intencao do hover: evita promover 9 layers GPU
   o tempo todo so pelo footer estar no DOM. */
@media (hover: hover) {
	.czs-footer__brand:hover .czs-footer__wordmark > span {
		will-change: transform;
	}
}

/* Wordmark oficial CZSBrasil: CZS em verde-lima da logo, BRASIL em branco.
   Composicao fixa por politica de marca — nao substituir cores nem trocar
   o corte CZS|BRASIL. Vide memory/logo-wordmark-policy.md. */
.czs-footer__wordmark > [data-segment="czs"] {
	color: var(--czs-logo-green);
}

.czs-footer__wordmark > [data-segment="brasil"] {
	color: var(--czs-text-primary);
}

/* Hover do brand: cada letra desloca um pouco em sequencia (admin-stagger).
   Subtil — translate de 6px, nada de bounce. Delays via custom property
   pra que o retorno (hover-out) tambem respeite a cascata em vez de
   snapar de uma vez. */
.czs-footer__wordmark > span:nth-child(2) { --letter-delay: 30ms; }
.czs-footer__wordmark > span:nth-child(3) { --letter-delay: 60ms; }
.czs-footer__wordmark > span:nth-child(4) { --letter-delay: 90ms; }
.czs-footer__wordmark > span:nth-child(5) { --letter-delay: 120ms; }
.czs-footer__wordmark > span:nth-child(6) { --letter-delay: 150ms; }
.czs-footer__wordmark > span:nth-child(7) { --letter-delay: 180ms; }
.czs-footer__wordmark > span:nth-child(8) { --letter-delay: 210ms; }
.czs-footer__wordmark > span:nth-child(9) { --letter-delay: 240ms; }

@media (hover: hover) {
	.czs-footer__brand:hover .czs-footer__wordmark > span,
	.czs-footer__brand:focus-visible .czs-footer__wordmark > span {
		transform: translateY(-6px);
	}
}

/* =============================================================================
   LEDE — texto de apoio sob o wordmark
   ============================================================================= */

.czs-footer__lede {
	max-width: 50ch;
	font-size: clamp(1rem, 1.1vw + 0.5rem, 1.25rem);
	line-height: var(--czs-lh-normal);
	color: var(--czs-text-secondary);
	margin: 0;
	text-wrap: pretty;
	hyphens: none;
	flex: 1 1 320px;
}

/* "2007" pega o verde-lima da logo: rima visual com as letras CZS do
   wordmark. E o unico ponto de saturacao do lede; o resto fica texto
   secundario. */
.czs-footer__since {
	font-family: var(--czs-font-mono);
	font-size: 0.9em;
	color: var(--czs-logo-green);
	letter-spacing: 0.02em;
	padding-inline: 0.25rem;
}

.czs-footer__lede-break { display: none; }
@media (min-width: 720px) {
	.czs-footer__lede-break { display: inline; }
}

/* =============================================================================
   MANIFESTO — estanza 2: lede + CTA lado a lado
   =============================================================================
   Split horizontal que aproveita a largura do wordmark em vez de empilhar
   conteudo no canto esquerdo. align-items: end ancora o CTA na mesma
   baseline da ultima linha do lede ("admin brasileiro respondendo no
   Discord."), criando um eco visual entre o copy e a acao.
   flex-wrap entra em viewports estreitos (< ~560px): lede primeiro,
   CTA full-width abaixo (regra ja existente em @media max-width: 480px). */

.czs-footer__manifesto {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* =============================================================================
   CTA — Botao Discord
   ============================================================================= */

.czs-footer__discord-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1.05rem 2rem;
	flex: 0 0 auto;
	background: linear-gradient(135deg, var(--czs-brand-primary) 0%, var(--czs-brand-primary-hover) 100%);
	color: var(--czs-text-on-brand);
	font-family: var(--czs-font-body);
	font-weight: var(--czs-fw-semibold);
	font-size: 1.0625rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: var(--czs-radius-md);
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.08) inset,
		0 8px 30px rgb(var(--czs-brand-primary-rgb) / 0.35);
	transition: transform 300ms var(--czs-ease), box-shadow 300ms var(--czs-ease);
}

.czs-footer__discord-btn:hover {
	transform: translateY(-3px);
	box-shadow:
		0 12px 36px rgb(var(--czs-brand-primary-rgb) / 0.45),
		0 0 0 4px rgb(var(--czs-brand-primary-rgb) / 0.15);
}

.czs-footer__discord-btn:focus-visible {
	outline: 2px solid var(--czs-text-on-brand);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgb(var(--czs-brand-primary-rgb) / 0.45);
}

.czs-footer__discord-icon {
	width: 22px;
	height: 22px;
}

.czs-footer__discord-arrow {
	width: 18px;
	height: 18px;
	margin-inline-start: 0.25rem;
	transition: transform 300ms var(--czs-ease-out);
}

.czs-footer__discord-btn:hover .czs-footer__discord-arrow {
	transform: translateX(4px);
}

/* =============================================================================
   DIVIDER
   ============================================================================= */

.czs-footer__divider {
	height: 1px;
	background: var(--czs-border);
}

/* =============================================================================
   NAVEGACAO
   ============================================================================= */

.czs-footer__nav {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	/* 3 colunas semanticas: minmax 220px garante que a quebra seja 3 -> 1
	   em vez de 3 -> 2 -> 1 (intermediario 2-col fica feio com 3 grupos
	   pares). Em containers entre 380-660px colapsa direto pra 1 col. */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.czs-footer__col-title {
	font-family: var(--czs-font-display);
	font-size: 0.875rem;
	font-weight: var(--czs-fw-bold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--czs-text-primary);
	margin: 0 0 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-wrap: balance;
}

/* Marca cada coluna com um quadradinho de cor brand. Reforca a regra do
   "Discord pontual" sem usar gradient ou icon set generico. */
.czs-footer__col-title::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--czs-brand-primary);
	border-radius: 1px;
}

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

.czs-footer__list a {
	display: inline-block;
	color: var(--czs-text-secondary);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.4;
	/* Touch target ~34px na base; cobre WCAG AA 24px com folga. Subido
	   ainda mais em ponteiro coarse (laptops touch ficam no fine, mas
	   o desktop puro nao precisa de 44px). */
	padding-block: 0.4rem;
	border-radius: var(--czs-radius-sm);
	transition: color 200ms ease, transform 200ms var(--czs-ease-out);
	position: relative;
}

/* Indicador de hover discreto: a linha que cresce sob o texto.
   Replica a logica do header "underline 2px Discord blue". */
.czs-footer__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--czs-brand-primary);
	transition: width 280ms var(--czs-ease-out);
}

@media (hover: hover) {
	.czs-footer__list a:hover {
		color: var(--czs-text-primary);
		transform: translateX(3px);
	}

	.czs-footer__list a:hover::after {
		width: 100%;
	}
}

.czs-footer__list a:focus-visible {
	outline: 2px solid var(--czs-brand-primary);
	outline-offset: 4px;
	color: var(--czs-text-primary);
}

/* =============================================================================
   META — social row + copyright
   ============================================================================= */

.czs-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* Agrupa fine-print (legal + copyright) num bloco. Fica a esquerda no
   desktop com social a direita; em mobile vira ordem 2 (abaixo do social). */
.czs-footer__meta-text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

/* Legal links: lista inline com separador. Voz lighter que copyright. */
.czs-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	font-size: 0.85rem;
	line-height: 1.4;
}

.czs-footer__legal a {
	color: var(--czs-text-muted);
	text-decoration: none;
	transition: color 200ms ease;
}

@media (hover: hover) {
	.czs-footer__legal a:hover {
		color: var(--czs-text-primary);
	}
}

.czs-footer__legal a:focus-visible {
	outline: 2px solid var(--czs-brand-primary);
	outline-offset: 3px;
	color: var(--czs-text-primary);
	border-radius: var(--czs-radius-sm);
}

/* Separador visual entre legal items (so quando ha mais de 1). */
.czs-footer__legal li + li::before {
	content: "·";
	color: var(--czs-text-disabled);
	margin-inline-end: 0.75rem;
	user-select: none;
}

.czs-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.czs-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--czs-radius-md);
	color: var(--czs-text-secondary);
	background: var(--czs-overlay-light);
	border: 1px solid var(--czs-border);
	transition:
		color 220ms ease,
		background 220ms ease,
		border-color 220ms ease,
		transform 280ms var(--czs-ease-out);
}

.czs-footer__social a svg {
	width: 18px;
	height: 18px;
}

/* Sobe pra 44px completo em touch puro (sem hover). Sai do AA pro AAA. */
@media (hover: none) and (pointer: coarse) {
	.czs-footer__list a {
		padding-block: 0.55rem;
	}
}

/* Per-platform brand colors via --platform-hue custom property.
   Default fica em Discord blue (brand-primary). Cada [data-platform]
   sobrescreve com a cor real da plataforma. Default neutro, hover
   colorido: recognition sem rainbow-vomit no estado de repouso. */
.czs-footer__social a {
	--platform-color: var(--czs-brand-primary);
	--platform-color-rgb: var(--czs-brand-primary-rgb);
}

.czs-footer__social a[data-platform="youtube"]   { --platform-color: #ff0033; --platform-color-rgb: 255 0 51; }
.czs-footer__social a[data-platform="twitch"]    { --platform-color: #9146ff; --platform-color-rgb: 145 70 255; }
.czs-footer__social a[data-platform="instagram"] { --platform-color: #e4405f; --platform-color-rgb: 228 64 95; }
/* X nao tem cor de marca real (era azul, virou branco-em-preto). Mantem
   brand-primary do projeto pra nao inventar identidade. */
.czs-footer__social a[data-platform="tiktok"]    { --platform-color: #fe2c55; --platform-color-rgb: 254 44 85; }
.czs-footer__social a[data-platform="facebook"]  { --platform-color: #1877f2; --platform-color-rgb: 24 119 242; }

/* Hover lift gated em (hover: hover): em touch, mobile Safari emula hover
   no primeiro tap e a translacao gruda ate tap-fora. Mantemos o feedback
   visual pra cor/borda em touch (via :active mais abaixo) sem o glitch. */
@media (hover: hover) {
	.czs-footer__social a:hover {
		color: var(--platform-color);
		background: rgb(var(--platform-color-rgb) / 0.14);
		border-color: rgb(var(--platform-color-rgb) / 0.5);
		transform: translateY(-2px);
	}
}

.czs-footer__social a:active {
	color: var(--platform-color);
	background: rgb(var(--platform-color-rgb) / 0.2);
	border-color: rgb(var(--platform-color-rgb) / 0.55);
}

.czs-footer__social a:focus-visible {
	outline: 2px solid var(--czs-brand-primary);
	outline-offset: 3px;
	color: var(--czs-text-primary);
}

.czs-footer__copyright {
	margin: 0;
	font-size: 0.85rem;
	color: var(--czs-text-muted);
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.czs-footer__copyright-mark {
	color: var(--czs-text-secondary);
	font-weight: var(--czs-fw-medium);
}

.czs-footer__copyright-sep {
	color: var(--czs-text-disabled);
}

/* =============================================================================
   RESPONSIVO
   ============================================================================= */

@media (max-width: 720px) {
	.czs-footer__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Social no topo, fine print abaixo: convencao de footer mobile. */
	.czs-footer__meta-text {
		order: 2;
	}
}

@media (max-width: 560px) {
	/* Quando o lede quebra pra coluna propria (flex-basis 320px nao cabe
	   ao lado do CTA), CTA segue full-width pra ficar com peso visual. */
	.czs-footer__discord-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	/* 6 icones x 44px + gaps estouram <360px e quebram em 2 linhas. Apertar
	   o gap mantem uma linha so ate ~340px sem reduzir o touch target. */
	.czs-footer__social {
		gap: 0.35rem;
	}
}

/* Foldables (Galaxy Fold fechado ~280px, surface duo ~320px). Em viewports
   ultra-estreitos o min do clamp (2.75rem) faz as 9 letras do wordmark
   passarem da largura disponivel e o overflow:hidden do .czs-footer corta
   o "L". Aqui rebaixamos o piso pra garantir gesture intacto. */
@media (max-width: 360px) {
	.czs-footer__wordmark {
		font-size: clamp(2.25rem, 12vw, 12.5rem);
	}

	.czs-footer__inner {
		padding-inline: 1rem;
	}
}

/* =============================================================================
   ACESSIBILIDADE — reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.czs-footer__wordmark > span,
	.czs-footer__discord-btn,
	.czs-footer__discord-arrow,
	.czs-footer__list a,
	.czs-footer__list a::after,
	.czs-footer__social a {
		transition: none !important;
	}

	.czs-footer__brand:hover .czs-footer__wordmark > span,
	.czs-footer__discord-btn:hover,
	.czs-footer__discord-btn:hover .czs-footer__discord-arrow,
	.czs-footer__list a:hover,
	.czs-footer__social a:hover {
		transform: none !important;
	}
}

/* =============================================================================
   ACESSIBILIDADE — prefers-contrast: more
   =============================================================================
   Quando o usuario pede mais contraste (Windows/macOS), o texto secundario
   "elegante" vira hostil. Subimos rumo a ink. Divider e bordas ganham peso. */

@media (prefers-contrast: more) {
	.czs-footer {
		color: var(--czs-text-primary);
	}

	.czs-footer__lede,
	.czs-footer__list a,
	.czs-footer__legal a,
	.czs-footer__social a,
	.czs-footer__copyright,
	.czs-footer__copyright-mark {
		color: var(--czs-text-primary);
	}

	.czs-footer__divider {
		background: var(--czs-border-strong);
		height: 2px;
	}

	.czs-footer__social a {
		border-color: var(--czs-border-strong);
	}
}

/* =============================================================================
   ACESSIBILIDADE — forced-colors (Windows High Contrast)
   =============================================================================
   No HCM, gradientes e box-shadows somem. O CTA Discord vira retangulo
   transparente sem affordance. Damos a ele um border explicito (ButtonText)
   e mantemos foco visivel via outline (CanvasText). A linha de luz no topo
   tambem some — substituida por border-top continuo. */

@media (forced-colors: active) {
	.czs-footer {
		border-top: 1px solid CanvasText;
	}

	.czs-footer::before,
	.czs-footer__ambient {
		display: none;
	}

	.czs-footer__discord-btn {
		background: ButtonFace;
		color: ButtonText;
		border: 1px solid ButtonText;
		box-shadow: none;
	}

	.czs-footer__discord-btn:hover,
	.czs-footer__discord-btn:focus-visible {
		background: Highlight;
		color: HighlightText;
		border-color: HighlightText;
	}

	.czs-footer__social a,
	.czs-footer__list a:focus-visible,
	.czs-footer__brand:focus-visible {
		outline-color: CanvasText;
	}

	.czs-footer__wordmark-accent,
	.czs-footer__col-title::before {
		/* Cor de marca vira AccentColor (suportada em browsers modernos);
		   onde nao for, herda CanvasText sem perder leitura. */
		color: AccentColor;
		background: AccentColor;
	}
}

/* =============================================================================
   PRINT — papel branco, tinta preta, sem decoracao
   =============================================================================
   Ambient gradients gastam toner. O wordmark gigante domina a folha. Social
   icons sao redundantes (URL ja existe no copyright). Mantemos a nav porque
   gente que imprime quer poder voltar pro site. */

@media print {
	.czs-footer {
		background: #fff;
		color: #000;
		padding-block: 1.5rem;
		page-break-inside: avoid;
	}

	.czs-footer::before,
	.czs-footer__ambient {
		display: none;
	}

	.czs-footer__wordmark {
		font-size: 1.5rem;
		justify-content: flex-start;
		gap: 0.05em;
	}

	.czs-footer__wordmark-accent {
		color: #000;
	}

	.czs-footer__lede,
	.czs-footer__list a,
	.czs-footer__legal a,
	.czs-footer__col-title,
	.czs-footer__copyright,
	.czs-footer__copyright-mark {
		color: #000;
	}

	.czs-footer__legal li + li::before {
		color: #555;
	}

	.czs-footer__col-title::before {
		background: #000;
	}

	.czs-footer__cta,
	.czs-footer__social,
	.czs-footer__divider {
		display: none;
	}

	.czs-footer__list a::after {
		display: none;
	}

	.czs-footer__list a[href]::after {
		content: " (" attr(href) ")";
		display: inline;
		position: static;
		width: auto;
		height: auto;
		background: none;
		font-size: 0.75em;
		color: #555;
	}
}

/* =============================================================================
   OVERRIDES — neutraliza o footer legado (style.css)
   =============================================================================
   O footer-area-1.html.twig antigo usava .footer-wrapper.footer-layout2.
   Como a CSS legada ainda esta no bundle, esses resets garantem que se
   alguem reintroduzir aquelas classes (ou se cache servir markup antigo),
   o novo footer permanece consistente. */

.czs-footer .footer-top-shape,
.czs-footer .widget-area,
.czs-footer .copyright-wrap {
	all: unset;
}