/*
 * UX School · UI
 * Camada visual sobre o BuddyBoss. Tudo escopado, nada global.
 *
 * Paleta conferida nos ativos (Identidade-Visual/Logos/SVG) em 28/08/2026.
 * O Branding-Visual_v1.0.md traz outra paleta, herdada da marca Rafaella Ott,
 * e por isso NAO e a fonte usada aqui.
 */

:root {
	--uxs-guarda-chuva: #FFA12F; /* UX School */
	--uxs-build:        #FF2CCE;
	--uxs-boost:        #7C68EE; /* cor de acao da interface */
	--uxs-boost-fundo:  #6A53E9; /* mesmo roxo um degrau mais escuro, so pro hover
	                                do item que ja esta ativo */
	--uxs-training:     #22B753;

	--uxs-tinta:        #181D27;
	--uxs-fundo:        #FAFAFA;
	--uxs-linha:        #DCDFE3; /* mesma linha usada na base do header */

	--uxs-raio-capa:    24px;
	--uxs-raio-card:    20px;
	--uxs-raio-botao:   8px;     /* radius-sm */

	--uxs-capa-altura:  440px;
	--uxs-card-folga:   20px;    /* folga do card pras bordas da capa */
	--uxs-gutter:       20px;    /* respiro do conteudo ate as bordas da tela */
	--uxs-painel:       68px;    /* largura do BuddyPanel recolhido. Se mudar la, mudar aqui */
	--uxs-painel-recuo: 8px;     /* recuo interno do painel: onde comeca a caixa do icone.
	                                Caiu de 10 pra 8 para o cartao do menu crescer 4px
	                                dentro dos mesmos 68px do painel, sem mexer no
	                                deslocamento do conteudo que o tema calcula. */
	--uxs-alvo:         44px;    /* alvo circular: item do menu lateral, icone do
	                                header e avatar. --alvo do Jarvis */
	--uxs-alvo-icone:   20px;    /* icone dentro do alvo. --alvo-icone do Jarvis */
	--uxs-menu-item:    32px;    /* altura do item do topo: 6 + 20 + 6, a conta da
	                                .aba do Jarvis (padding vertical + linha do texto) */
	--uxs-menu-gap:      2px;    /* entre itens e do item pra borda da capsula */
	--uxs-menu-gap-icone: 6px;   /* entre icone e rotulo no menu do topo */
	--uxs-menu-gap-secao: 6px;   /* margem do separador. Somada ao gap de 2px da
	                                capsula, da os 8px de respiro de cada lado */
	--uxs-menu-folga:   4px;     /* padding da capsula. spacing-xs do Jarvis */
	--uxs-raio-pilula:  9999px;  /* radius-full do Jarvis. Token de proposito proprio:
	                                os controles de formulario seguem
	                                --uxs-raio-controle e nao viram pilula junto */

	/* Escala neutra e movimento vindos do Jarvis 2.0, para que os dois sistemas
	   tenham o mesmo acabamento. So a cor de marca muda: la lima, aqui roxo. */
	--uxs-tinta-fraca:  #404040; /* text-secondary: item de menu em repouso */
	--uxs-cinza-icone:  #A3A3A3; /* fg-quaternary: chevron e afins */
	--uxs-hover:        #FAFAFA; /* bg-primary-hover: fundo do item sob o cursor */
	--uxs-borda:        #F5F5F5; /* border-tertiary: borda das capsulas */
	--uxs-borda-forte:  #E5E5E5; /* border-secondary: separador do menu lateral */
	--uxs-sombra-xs:    0 1px 2px 0 rgba(0, 0, 0, .05);
	--uxs-sombra-lg:    0 2px 6px 0 rgba(16, 24, 40, .10);
	--uxs-mov:          180ms;
	--uxs-curva:        cubic-bezier(.16, 1, .3, 1);
	--uxs-col-gap:      24px;    /* respiro entre a coluna lateral e o conteudo */
	--uxs-raio-widget:  24px;    /* raio dos blocos da coluna lateral */
	--uxs-raio-controle:14px;    /* raio de botao, input, select e afins */
	--uxs-alt-controle: 40px;    /* altura unica de todo controle de uma linha */
	--uxs-bg-forca:     .3;      /* intensidade do fundo do sistema. 0 desliga, 1 e o tom cheio */
}

/* ==========================================================================
   FUNDO DO SISTEMA
   Malha das quatro cores da marca sobre o cinza claro, no espirito do
   background_uxschool_02.png.

   Feito em CSS e nao com a imagem de propósito: o PNG tem 5760x7340 e 46 MB,
   mais peso que o site inteiro, e a tela ja carrega 93 folhas de estilo e
   163 scripts. Gradiente em CSS custa zero byte e escala em qualquer resolucao.

   Fica num ::before fixo atras de tudo, entao nao rola com a pagina e nao entra
   no fluxo. Para calibrar, mexer so na --uxs-bg-forca: 0 desliga, 1.5 reforca.
   ========================================================================== */

body {
	background-color: var(--uxs-fundo);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--uxs-fundo);
	background-image:
		radial-gradient(at  8%  6%, rgba(255, 161,  47, calc(.30 * var(--uxs-bg-forca))) 0, transparent 45%),
		radial-gradient(at 62%  2%, rgba(255,  44, 206, calc(.22 * var(--uxs-bg-forca))) 0, transparent 45%),
		radial-gradient(at 96% 38%, rgba(124, 104, 238, calc(.26 * var(--uxs-bg-forca))) 0, transparent 48%),
		radial-gradient(at 14% 62%, rgba(124, 104, 238, calc(.18 * var(--uxs-bg-forca))) 0, transparent 45%),
		radial-gradient(at 70% 88%, rgba( 34, 183,  83, calc(.18 * var(--uxs-bg-forca))) 0, transparent 45%),
		radial-gradient(at 30% 96%, rgba(255, 161,  47, calc(.16 * var(--uxs-bg-forca))) 0, transparent 45%);
}

/* O conteudo sobe uma camada pra ficar acima da malha. */
.site {
	position: relative;
	z-index: 1;
}

/* Header e BuddyPanel ficam transparentes pra malha atravessar os dois.
   Seguro nos dois casos: o header e position:relative, entao nada rola por tras
   dele; o painel e fixed mas ocupa so os 68px da esquerda, fora da area onde o
   conteudo corre. Os cartoes brancos por dentro (pilula do menu e bloco de
   icones) continuam opacos e e isso que mantem a leitura. */
.site-header.site-header--bb,
.site-branding,
.buddypanel {
	background-color: transparent;
}

/* ==========================================================================
   PERFIL · topo
   Estrutura do BuddyBoss:
     #cover-image-container
       #header-cover-image        <- a capa
       #item-header-cover-image   <- o card com avatar, nome e meta
   ========================================================================== */

/* O container ganha a borda de 1px do tema e vira referencia de posicao pro card. */
#cover-image-container {
	border: 0;
	position: relative;
	overflow: visible;
}

/* A CAPA
   Dois detalhes do tema ditam o formato desta regra:
   1. A altura vem de 'body #buddypress #header-cover-image.cover-large' no
      template-v2.min.css, entao o seletor precisa do mesmo peso pra vencer por ordem.
   2. Como o filtro do PHP devolve uma URL valida, o BuddyBoss marca o elemento com
      .has-cover-image e o tema zera o background-image. Por isso o gradiente vive
      num ::before atras da <img>, e nao no background do proprio elemento.
      Assim a capa enviada pela pessoa continua cobrindo o gradiente naturalmente. */
body #buddypress #header-cover-image.cover-large,
body #buddypress #header-cover-image.cover-small {
	height: var(--uxs-capa-altura);
	position: relative;
	border-radius: var(--uxs-raio-capa);
}

body #buddypress #header-cover-image.cover-large::before,
body #buddypress #header-cover-image.cover-small::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: var(--uxs-raio-capa);
	background-color: var(--uxs-fundo);
	background-image:
		radial-gradient(at 12% 18%, rgba(124, 104, 238, .80) 0, transparent 58%),
		radial-gradient(at 70% 10%, rgba(255, 161,  47, .88) 0, transparent 55%),
		radial-gradient(at 92% 66%, rgba(255,  44, 206, .65) 0, transparent 55%),
		radial-gradient(at 26% 88%, rgba( 34, 183,  83, .50) 0, transparent 55%);
}

/* A capa enviada pela pessoa fica acima do gradiente. */
body #buddypress #header-cover-image img.header-cover-img {
	position: relative;
	z-index: 1;
}

/* O CARD DE DADOS
   Seletor com body #buddypress porque o tema declara
   'body #buddypress #item-header-cover-image{width:100%}' com dois ids. Sem esse
   peso, o width:100% dele anula o par left/right e o card estoura pela direita.
   Fica dentro da capa, com folga igual nos lados e embaixo.
   Posicao absoluta de proposito: assim a folga de baixo continua exata mesmo
   quando o card cresce (bio maior, mais badges). Com margem negativa, qualquer
   mudanca de altura desalinharia o encaixe. */
body #buddypress #item-header-cover-image.item-header-wrap {
	position: absolute;
	left: var(--uxs-card-folga);
	right: var(--uxs-card-folga);
	bottom: var(--uxs-card-folga);
	width: auto;
	margin: 0;
	z-index: 2;
	background: #fff;
	border-radius: var(--uxs-raio-card);
	padding: 0 32px 28px;
	box-shadow:
		0 1px 2px rgba(12, 14, 18, .05),
		0 16px 40px -22px rgba(12, 14, 18, .30);
}

/* Telas menores: capa mais baixa e folga menor. */
@media screen and (max-width: 980px) {
	:root {
		--uxs-capa-altura: 320px;
		--uxs-card-folga:  12px;
	}

	body #buddypress #item-header-cover-image.item-header-wrap {
		padding: 0 20px 20px;
	}
}

/* ==========================================================================
   LARGURA DO CONTEUDO
   O tema limita tudo em .container{max-width:1200px}, o que deixa muita sobra
   em tela grande. Aqui o conteudo passa a ser fluido, com um respiro unico.

   O respiro mora num lugar so, o #primary, porque o tema empilha padding em
   .container, #primary e #cover-image-container. Somados davam 80px de folga.
   Zerar os outros e deixar so este mantem o valor previsivel e facil de mudar.

   Se um dia a leitura em monitor muito largo incomodar, o conserto e devolver
   um teto aqui, tipo max-width:1600px, sem mexer em mais nada.
   ========================================================================== */

.site-content {
	padding: 0;
}

.site-content > .container {
	max-width: none;
	padding: 0;
}

#primary.content-area {
	padding: var(--uxs-gutter) 0;
}

/* O container da capa vem com padding de 30px e margin-top negativa, que colavam
   a capa no header e somavam folga lateral. Peso de dois ids pra vencer o tema. */
body #buddypress #cover-image-container {
	padding: 0;
	margin-top: 0;
}

/* A capa vinha com margin -30px lateral pra sangrar pra fora do container. */
body #buddypress #header-cover-image.cover-large,
body #buddypress #header-cover-image.cover-small {
	margin: 0;
	width: auto;
}

/* ==========================================================================
   HEADER e BUDDYPANEL
   ========================================================================== */

/* O container do header tambem fica fluido, com o mesmo respiro do conteudo.
   Sem isso ele continua travado em max-width:1200px e se auto-centraliza, jogando
   o logo pro meio da tela enquanto o resto do site ja e fluido. */
.site-header.site-header--bb {
	padding-left: 0;
}

/* Sem padding lateral proprio: o respiro do topo passa a ser so o do container,
   pra direita do header bater com a direita do conteudo. */
.site-header.site-header--bb {
	padding-right: 0;
}

/* O header sangra por cima do painel em umas telas e nao sangra em outras, o que
   fazia o logo cair em lugares diferentes. Aqui ele sempre sangra, comecando em 0.
   O respiro do logo e o mesmo recuo interno do painel, entao o logo alinha com a
   borda esquerda da caixa de icone do menu lateral. */
.site-header.site-header--bb {
	margin-left: calc(var(--uxs-painel) * -1);
	width: auto;
}

.site-header .container.site-header-container {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--uxs-painel-recuo);
	padding-right: var(--uxs-gutter);
}

/* A linha da base do header sai. Ela nao e borda: o tema desenha como sombra
   interna, 'box-shadow: #DCDFE3 0 -1px 0 0 inset'. */
.site-header.site-header--bb {
	box-shadow: none;
}

/* Sidebar sem sombra e sem linha. A separacao fica por diferenca de fundo. */
.buddypanel {
	box-shadow: none;
}

/* MENU DO BUDDYPANEL
   Dois objetivos juntos: o bloco de itens fica centrado verticalmente, e os itens
   viram um cartao branco unico em vez de nove retangulos soltos.

   A centralizacao mudou de lugar. Antes era justify-content na propria <ul>, o que
   centrava os itens mas deixava a <ul> ocupando a altura toda, sem servir de caixa.
   Agora quem centraliza e o container, e a <ul> encolhe ate o conteudo. Assim ela
   comeca no topo do primeiro icone e termina na base do ultimo, que e exatamente
   onde o fundo branco deve ir.

   O min-height:0 e obrigatorio: o tema poe min-height:100% na <ul>, e height:auto
   sozinho nao vence min-height. Foi o que segurou o encolhimento por varias voltas.

   Raio so nas pontas: o cartao arredonda em cima e embaixo, e os itens perdem o
   raio de 6px deles, dando a leitura de bloco continuo. O overflow:hidden e o que
   recorta o primeiro e o ultimo item no canto. */
.side-panel-menu-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* O tema encerra o menu numa caixa de 48px com overflow:hidden. Ela causava dois
   estragos ao mesmo tempo: raspava 2px de cada lado do cartao de 52px, comendo a
   curva da pilula, e decepava o tooltip, que por definicao sai pro lado de fora.
   Quem rola o painel e o container de cima, que tem overflow-y proprio, entao
   liberar aqui nao tira o scroll de menu longo. */
.buddypanel .side-panel-inner {
	width: 100%;
	overflow: visible;
}

#buddypanel-menu.buddypanel-menu {
	min-height: 0;
	height: auto;
	flex: 0 0 auto;
	justify-content: flex-start;
	background: #fff;
	border-radius: var(--uxs-raio-pilula);
	overflow: hidden;
	/* A largura do cartao passa a sair da conta do item, nao de um numero fixo do
	   tema: item + folga dos dois lados. Assim o item de 44px cabe com os mesmos
	   respiro da capsula, em vez dos 2px que sobravam quando o cartao ficava preso
	   nos 48px antigos. Centrado no painel de 68px, sobram 8px de cada lado. */
	width: calc( var(--uxs-alvo) + var(--uxs-menu-folga) * 2 + 2px );
	align-self: center;
}

/* O ultimo item vinha pregado no rodape com margin-top automatica, o que
   quebraria tanto a centralizacao quanto o cartao. */
#buddypanel-menu.buddypanel-menu > li {
	margin-top: 0;
}/* Telas com coluna lateral (membros, grupos, foruns e afins).
   O tema trava a coluna de conteudo em max-width:900px, que somados aos 300px
   da coluna de filtro davam os 1200px do container antigo. Com a largura fluida,
   sobrava um vao morto a esquerda: as duas colunas ficavam encostadas na direita
   e o resto era espaco vazio.

   O !important aqui e necessario e nao e preguica: a regra do tema tem !important,
   e nem seletor com quatro classes e id venceu sem ele. */
.bb-grid > .content-area {
	max-width: none !important;
}

/* Respiro entre a coluna lateral e o conteudo.
   O tema separava as colunas so pelo padding de 10px de cada celula, o que dava
   10px de vao. Aqui o respiro vira gap explicito e as celulas ficam rentes as
   bordas do grid, entao as duas colunas alinham em 88 e 1780 como o resto do site.
   Vale pros dois lados: gap nao se importa se a lateral esta a esquerda ou a direita. */
.bb-grid {
	gap: var(--uxs-col-gap);
}

.bb-grid > .widget-area,
.bb-grid > .content-area {
	padding-left: 0;
	padding-right: 0;
}

/* Blocos da coluna lateral: raio maior que o padrao de 10px do tema. */
.bb-grid > .widget-area .widget {
	border-radius: var(--uxs-raio-widget);
}

/* ==========================================================================
   DIRETORIOS (grupos, membros, foruns)
   A barra de filtros e um flex: [busca] [contador oculto] [.push-right].
   ========================================================================== */

/* O .push-right do tema nao empurrava nada. Agora ele encosta na direita,
   deixando ordenacao e alternador de visualizacao embaixo do botao principal. */
#buddypress .bp-secondary-header > .push-right {
	margin-left: auto !important;
}

/* A busca passa a ter a largura de um card.
   Os 20px somados sao a margem negativa do grid de cards: a lista mede 20px a
   mais que a barra de filtros, entao sem isso a busca fica ~7px mais estreita
   que o card e o desalinho aparece. */
#buddypress .bp-secondary-header > .subnav-search {
	flex: 0 0 calc((100% + 20px) / 3) !important;
	width: auto !important;
	max-width: none !important;
}

#buddypress .bp-secondary-header > .subnav-search .dir-search,
#buddypress .bp-secondary-header > .subnav-search .dir-search form,
#buddypress .bp-secondary-header > .subnav-search .dir-search input {
	width: 100% !important;
	max-width: none !important;
}

/* Cards de grupo e de membro. O elemento arredondado e o .list-wrap por dentro
   do <li>, nao o <li>. Vale pra grade e pra lista, que compartilham o wrapper. */
#buddypress .list-wrap {
	border-radius: var(--uxs-raio-card);
}

/* ==========================================================================
   CONTROLES DE FORMULARIO
   Botao, input, select e busca tinham quatro alturas (30, 32, 34, 39) e tres
   raios (0, 6, 14). Aqui todos passam a ter a mesma altura e o mesmo raio.

   Escopo em .site de proposito: a barra de admin do WordPress tem inputs
   proprios e nao e nossa pra padronizar.

   Textarea fica fora da regra de altura, porque campo de varias linhas cresce
   com o conteudo e travar altura nele atrapalha quem escreve.

   O !important no raio nao e preguica: o tema usa !important no raio de varios
   controles, e nem seletor com body + duas classes venceu sem ele. A altura,
   essa sim, pega sem forcar. */

.site :is(.button, a.button, button,
	input[type="text"], input[type="search"], input[type="email"],
	input[type="password"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="submit"], select, textarea) {
	border-radius: var(--uxs-raio-controle) !important;
}

.site :is(.button, a.button, button,
	input[type="text"], input[type="search"], input[type="email"],
	input[type="password"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="submit"], select,
	.grid-filters, .count-more) {
	height: var(--uxs-alt-controle);
	min-height: var(--uxs-alt-controle);
}

/* Controles do tema que sao <a> ou <div> e nao carregam a classe .button, entao
   nao entram pelos seletores de tag acima. Sao listados por classe:
   .grid-filters  = alternador Grid View / List View das listagens
   .count-more    = botao "Ver tudo" dos blocos da coluna lateral
   Se aparecer outro controle fora do padrao, o lugar de incluir e aqui. */
.site .grid-filters {
	border-radius: var(--uxs-raio-controle);
	overflow: hidden;
}

.site .grid-filters > .layout-view {
	height: 100%;
	border-radius: 0;
}

/* ==========================================================================
   MENUS (topo e BuddyPanel)

   ORIGEM DESTA SECAO
   Ela nao foi desenhada aqui: e a transposicao do sistema de menu do Jarvis 2.0
   (src/shared/ds/Abas.css, ds/IconButton.css e layout/Acoes.css), pedida pela
   Rafa em 01/09/2026 como "igualzinho, sem tirar nem por". Os numeros abaixo sao
   os tokens de la, ja resolvidos em pixel:
     spacing xxs/xs/sm/md/lg = 2 / 4 / 6 / 8 / 12
     radius-full = 9999   ·   alvo = 44   ·   icone = 20
     texto sm = 14/20, semibold 600, bold 700
     borda = #F5F5F5 · hover = #FAFAFA · tinta = #171717 · tinta fraca = #404040
     sombra xs = 0 1px 2px 0 rgba(0,0,0,.05)
     movimento = 180ms cubic-bezier(.16, 1, .3, 1)
   A unica troca deliberada e a cor de marca: onde o Jarvis usa lima com texto
   preto, aqui entra o roxo da UX School com texto branco.

   A REGRA QUE MUDA TUDO
   No Jarvis a pilula que viaja e a do ITEM ATIVO, e o hover e fundo do proprio
   item. Aqui era o contrario: uma pilula so servia aos dois estados e, ao seguir
   o cursor, abandonava o ativo. Dai vinham as tres reclamacoes seguidas (hover
   branco, hover invisivel, ativo sumindo). Com a divisao do Jarvis cada estado
   tem seu dono e nenhum apaga o outro.

   Numa aplicacao de pagina unica a pilula desliza de uma aba pra outra. Aqui,
   como cada item e uma pagina, ela nasce ja no lugar certo: o deslize existe no
   componente, so nao tem para onde correr num site de multiplas paginas.
   ========================================================================== */

/* --- Centralizacao real do menu do topo ---
   Em fluxo normal ele fica entre o logo e o bloco da direita, que tem larguras
   diferentes, entao o menu nascia 143px fora do centro da tela. Tirando ele do
   fluxo e centralizando por transform, o eixo passa a ser o da janela.
   No Jarvis o mesmo resultado vem de uma grade "1fr auto 1fr"; aqui o cabecalho
   e do tema e nao da pra trocar a grade dele sem quebrar o resto. */
.site-header .container.site-header-container {
	position: relative;
}

#primary-navbar {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	/* O tema compara a largura do navbar com a da lista pra decidir o que nao
	   cabe. Com largura de conteudo as duas ficam iguais, ele nunca ve folga e
	   esconde o ultimo item. O min-width da a folga que falta. */
	width: max-content;
	min-width: 1000px;
	max-width: none;
	justify-content: center;
}

/* O gatilho do dropdown "mais" e o segundo filho do navbar e entrava na conta da
   largura, puxando o menu 22px pra esquerda do centro real. */
#primary-navbar > .hasItems {
	position: absolute;
	right: 0;
}

/* O painel do "mais" abre da esquerda pra direita a partir do gatilho, que fica
   no fim da barra. Em telas medias ele passava 22px da janela e a pagina inteira
   ganhava rolagem lateral, mesmo fechado: painel escondido por visibility ainda
   conta no scrollWidth. Ancorado pela direita ele cresce pra dentro. */
#primary-navbar > .hasItems .sub-menu {
	left: auto;
	right: 0;
}

/* --- A capsula dos dois menus ---
   .abas do Jarvis: fundo branco, borda de 1px, sombra xs, raio total, folga de
   4px e 2px entre itens. */
#primary-navbar ul.primary-menu,
#buddypanel-menu.buddypanel-menu {
	position: relative;
	background: #fff;
	border: 1px solid var(--uxs-borda);
	border-radius: var(--uxs-raio-pilula);
	box-shadow: var(--uxs-sombra-xs);
	padding: var(--uxs-menu-folga);
	gap: var(--uxs-menu-gap);
	overflow: visible; /* o submenu de Materiais abre pra fora */
}

#primary-navbar ul.primary-menu {
	display: flex;
	align-items: center;
	align-self: center;
	/* O tema fixa 64px de altura na lista, medida da barra inteira. A capsula tem
	   que ser do tamanho do que ela guarda: item + folga dos dois lados + a borda
	   de 1px de cada lado, ja que a caixa e border-box. */
	height: calc( var(--uxs-menu-item) + var(--uxs-menu-folga) * 2 + 2px );
}

/* --- Os itens --- */
#primary-navbar ul.primary-menu > li:not(.bb-menu-section),
#buddypanel-menu.buddypanel-menu > li:not(.bb-menu-section) {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* O tema da 64px de altura ao <li> do topo. Como a capsula so tem a altura do
   item mais a folga, esse excesso esticava a caixa branca pra 64px e o item
   ficava boiando dentro dela. A altura do <li> passa a ser a do proprio item. */
#primary-navbar ul.primary-menu > li:not(.bb-menu-section) {
	height: var(--uxs-menu-item);
	min-height: var(--uxs-menu-item);
}

#buddypanel-menu.buddypanel-menu > li:not(.bb-menu-section) {
	height: var(--uxs-alvo);
	min-height: var(--uxs-alvo);
}

/* .aba do Jarvis: 6px em cima e embaixo, 12px dos lados, texto 14/20 semibold,
   fundo transparente e raio total. O fundo transparente e o que deixa a pilula
   do ativo aparecer por tras. */
#primary-navbar ul.primary-menu > li > a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--uxs-menu-gap-icone);
	padding: 6px 12px;
	height: auto;
	min-height: 0;
	border: 0;
	border-radius: var(--uxs-raio-pilula);
	background-color: transparent;
	color: var(--uxs-tinta-fraca);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 140ms ease,
		color var(--uxs-mov) var(--uxs-curva),
		transform var(--uxs-mov) var(--uxs-curva);
}

/* .circ do Jarvis: alvo circular de 44px com icone de 20px. */
#buddypanel-menu.buddypanel-menu > li > a {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--uxs-alvo);
	height: var(--uxs-alvo);
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--uxs-raio-pilula);
	background-color: transparent;
	color: var(--uxs-tinta);
	transition: background-color 140ms ease,
		color var(--uxs-mov) var(--uxs-curva),
		transform var(--uxs-mov) var(--uxs-curva);
}

#primary-navbar ul.primary-menu > li > a i,
#primary-navbar ul.primary-menu > li > a svg,
#buddypanel-menu.buddypanel-menu > li > a i,
#buddypanel-menu.buddypanel-menu > li > a svg {
	font-size: var(--uxs-alvo-icone);
	width: var(--uxs-alvo-icone);
	height: var(--uxs-alvo-icone);
}

/* --- Hover e clique ---
   Fundo do proprio item, nao a pilula. Um sussurro de cinza, como no Jarvis: o
   que da o retorno e a mudanca de tinta do texto e o recuo no clique. */
#primary-navbar ul.primary-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:hover,
#buddypanel-menu.buddypanel-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent) > a:hover {
	background-color: var(--uxs-hover);
	color: var(--uxs-tinta);
}

#primary-navbar ul.primary-menu > li:not(.current-menu-item) > a:active,
#buddypanel-menu.buddypanel-menu > li:not(.current-menu-item) > a:active {
	transform: scale(.97);
	transition-duration: 80ms;
}

/* Sem realce no ativo: clicar nele nao faz nada, e fundo que muda sugere acao
   que nao existe. Regra vinda do Jarvis, palavra por palavra. */
#primary-navbar ul.primary-menu > li.current-menu-item > a:hover,
#primary-navbar ul.primary-menu > li.current_page_item > a:hover,
#buddypanel-menu.buddypanel-menu > li.current-menu-item > a:hover,
#buddypanel-menu.buddypanel-menu > li.current_page_item > a:hover,
#buddypanel-menu.buddypanel-menu > li.current-menu-parent > a:hover {
	background-color: transparent;
	transform: none;
}

/* --- A pilula do ativo ---
   Um elemento so, atras dos itens, medido no DOM pelo JS. */
.uxs-indicador {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	border-radius: var(--uxs-raio-pilula);
	background: var(--uxs-boost);
	pointer-events: none;
	opacity: 0;
	transition: transform var(--uxs-mov) var(--uxs-curva),
		width var(--uxs-mov) var(--uxs-curva),
		height var(--uxs-mov) var(--uxs-curva),
		opacity 140ms ease;
}

/* Primeiro quadro: assume a posicao sem deslizar desde a borda. */
.uxs-indicador[data-animar="false"] {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.uxs-indicador {
		transition: opacity 140ms ease;
	}

	#primary-navbar ul.primary-menu > li > a,
	#buddypanel-menu.buddypanel-menu > li > a {
		transition-duration: 1ms;
	}

	#primary-navbar ul.primary-menu > li > a:active,
	#buddypanel-menu.buddypanel-menu > li > a:active {
		transform: none;
	}
}

/* --- O item ativo ---
   Ele nao pinta fundo: quem pinta e a pilula atras. O que muda aqui e o peso e a
   tinta. Sobre o roxo, branco (no Jarvis e preto sobre o lima; e a mesma regra
   de contraste, resolvida pra cor de marca de cada um). */
#primary-navbar ul.primary-menu > li.current-menu-item > a,
#primary-navbar ul.primary-menu > li.current_page_item > a,
#primary-navbar ul.primary-menu > li.current-menu-ancestor > a,
#buddypanel-menu.buddypanel-menu > li.current-menu-item > a,
#buddypanel-menu.buddypanel-menu > li.current_page_item > a,
#buddypanel-menu.buddypanel-menu > li.current-menu-ancestor > a,
#buddypanel-menu.buddypanel-menu > li.current-menu-parent > a {
	background-color: transparent;
	color: #fff;
	font-weight: 700;
}

#primary-navbar ul.primary-menu > li.current-menu-item > a i,
#primary-navbar ul.primary-menu > li.current_page_item > a i,
#primary-navbar ul.primary-menu > li.current-menu-ancestor > a i,
#buddypanel-menu.buddypanel-menu > li.current-menu-item > a i,
#buddypanel-menu.buddypanel-menu > li.current_page_item > a i,
#buddypanel-menu.buddypanel-menu > li.current-menu-ancestor > a i,
#buddypanel-menu.buddypanel-menu > li.current-menu-parent > a i {
	color: #fff;
}

/* Enquanto o JS nao montou a pilula, o ativo pinta o proprio fundo. Sem isso ele
   ficaria branco sobre branco no intervalo entre a pintura e o script. */
#primary-navbar ul.primary-menu:not(.uxs-com-indicador) > li.current-menu-item > a,
#primary-navbar ul.primary-menu:not(.uxs-com-indicador) > li.current_page_item > a,
#buddypanel-menu.buddypanel-menu:not(.uxs-com-indicador) > li.current-menu-item > a,
#buddypanel-menu.buddypanel-menu:not(.uxs-com-indicador) > li.current_page_item > a,
#buddypanel-menu.buddypanel-menu:not(.uxs-com-indicador) > li.current-menu-parent > a {
	background-color: var(--uxs-boost);
}

/* --- Chevron do item com submenu (Materiais) ---
   O tema desenha esse chevron num ::after do proprio <li>, com line-height de
   64px, que era a altura antiga do item. Com o item menor o glifo caia abaixo do
   texto: e o "quebrado desde o comeco". Aqui ele volta pro eixo do texto e
   acompanha a cor do estado. A seta e o que diferencia "vai para uma tela" de
   "abre uma lista" (a mesma nota que existe na .aba--grupo do Jarvis). */
#primary-navbar ul.primary-menu > li.menu-item-has-children > a {
	padding-right: 28px;
}

#primary-navbar ul.primary-menu > li.menu-item-has-children:not(.hideshow)::after {
	top: 50%;
	right: 10px;
	z-index: 2;
	margin: 0;
	line-height: 1;
	font-size: 14px;
	color: var(--uxs-cinza-icone);
	transform: translateY(-50%);
	transition: transform var(--uxs-mov) var(--uxs-curva), color var(--uxs-mov) var(--uxs-curva);
	pointer-events: none;
}

/* Sobre o roxo o cinza do seletor sumiria: a seta acompanha o texto. */
#primary-navbar ul.primary-menu > li.menu-item-has-children.current-menu-item::after,
#primary-navbar ul.primary-menu > li.menu-item-has-children.current-menu-ancestor::after {
	color: #fff;
}

/* Aberto, a seta aponta pra cima: senao ela mente sobre o estado do submenu. */
#primary-navbar ul.primary-menu > li.menu-item-has-children:hover::after {
	transform: translateY(-50%) rotate(180deg);
}

/* --- Separadores de secao do menu lateral ---
   O que o tema chama de "secao" e um item de menu inteiro: tem <a>, icone,
   rotulo e tooltip. Com o painel recolhido ele esconde o conteudo e desenha so
   um risco num ::after, mas o item continua ocupando a altura de sempre.
   Resultado: onde deveria haver um respiro havia um buraco do tamanho de um
   item, com o risco boiando no meio dele.

   Aqui o item encolhe pro tamanho do que ele de fato mostra: uma linha. O
   respiro vem de margem, nao de altura fantasma. Escopado no painel recolhido:
   aberto, a secao volta a ser cabecalho com texto e precisa da altura toda. */
.buddypanel--toggle-off #buddypanel-menu.buddypanel-menu > li.bb-menu-section {
	display: block;
	height: 2px;
	min-height: 0;
	margin: var(--uxs-menu-gap-secao) 0;
	overflow: hidden;
	pointer-events: none; /* sem tooltip: nao ha o que um separador explicar */
}

/* O <a> sai do fluxo por inteiro. Ele nao pode virar uma caixa de 1px: como o
   risco e um ::after, que vem depois dele no fluxo, qualquer altura sobrando no
   <a> empurra o risco pra fora do li e o overflow o corta. */
.buddypanel--toggle-off #buddypanel-menu.buddypanel-menu > li.bb-menu-section > a {
	display: none;
}

.buddypanel--toggle-off #buddypanel-menu.buddypanel-menu > li.bb-menu-section::after {
	position: static;
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--uxs-borda-forte);
	border-radius: var(--uxs-raio-pilula);
	transform: none;
}

/* Nao ha margem entre os alvos: quem separa e o gap da capsula, que ja vale nos
   dois menus. Ter os dois somava 4px onde a regra pede 2. */
#buddypanel-menu.buddypanel-menu > li {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- Tooltip do menu lateral ---
   O balao e a pontinha sao dois pseudo-elementos com imagem de fundo propria; a
   pontinha ja vem desenhada pelo tema, aqui so se resolve ONDE cada um fica.

   O tema posiciona os dois por uma soma de left/right negativos, margens fixas e
   translate, calibrada pra largura antiga do painel. Com o cartao em outra
   medida essa soma caia por volta de x=27, ou seja, em cima do proprio icone, e
   o balao ficava 3px fora do eixo vertical dele.

   Aqui a conta e ancorada no que nao muda: 100% da largura da ancora (a borda
   direita do icone) e 50% da altura dela. O balao passa a nascer sempre depois
   do cartao, centrado no icone, e a distancia vira um numero legivel em vez de
   um resto de soma. O transform e repetido no :hover porque o tema troca ele la
   pra animar a entrada; sem repetir, o balao saltava de lugar ao aparecer. */
.buddypanel #buddypanel-menu [data-balloon][data-balloon-pos="right"]::after,
.buddypanel #buddypanel-menu [data-balloon][data-balloon-pos="right"]:hover::after,
.buddypanel #buddypanel-menu [data-balloon][data-balloon-pos="right"]:focus::after {
	left: 100%;
	right: auto;
	top: 50%;
	bottom: auto;
	margin: 0 0 0 16px;
	transform: translateY(-50%);
	border-radius: var(--uxs-raio-pilula);
}

.buddypanel #buddypanel-menu [data-balloon][data-balloon-pos="right"]::before,
.buddypanel #buddypanel-menu [data-balloon][data-balloon-pos="right"]:hover::before,
.buddypanel #buddypanel-menu [data-balloon][data-balloon-pos="right"]:focus::before {
	left: 100%;
	right: auto;
	top: 50%;
	bottom: auto;
	margin: 0 0 0 10px;
	transform: translateY(-50%);
}

/* Demais tooltips do sistema seguem o mesmo raio, sem mexer na posicao. */
.bb-tooltip::after,
[data-balloon][data-balloon-pos]::after {
	border-radius: var(--uxs-raio-pilula);
}

/* --- Proporcao do logo e do bloco da direita ---
   Os dois passam a caber na mesma altura de item dos menus.

   O arquivo do logo e quadrado (1024x1024), mas o tema entrega a imagem numa
   caixa alta demais, e sao TRES travas somadas: width e height fixos, min-height
   de 60px (que ganha de qualquer height) e padding vertical de 10px, que sozinho
   ja explica 20 dos 60. O conteudo real sempre foi 40x40 boiando nessa caixa, e
   era isso que tirava a marca do eixo do header. Por isso as tentativas de
   resolver so com altura ou max-height nunca pegaram.
   Dai o !important: as travas do tema sao medidas fixas, e nao ha seletor que
   ganhe delas por especificidade.

   O <a> em volta era inline e colapsava a 28px de altura, o que desalinhava a
   marca do eixo do header. Como flex, ele passa a ter a altura da imagem. */
/* A marca fica 2,5px acima do eixo enquanto o wrapper for bloco de texto: o
   <a> em linha assenta na linha de base e sobra o espaco do descendente embaixo.
   Como flex, o eixo vertical passa a ser o do proprio header. */
.site-branding,
.site-branding .site-title,
.site-branding a {
	display: flex;
	align-items: center;
}

/* O tema reserva 32px de min-width pro bloco da marca, medida do logo antigo. Com
   a marca em 40px a imagem vazava do proprio bloco e o menu comecava por cima
   dela. A caixa passa a ser do tamanho do que ela carrega. */
.site-branding {
	min-width: 0;
	width: auto;
	flex: 0 0 auto;
}

.site-branding img.bb-logo {
	width: auto !important;
	height: var(--uxs-alvo) !important;
	min-height: 0 !important;
	padding: 0 !important;
	max-width: none;
	max-height: none;
}

/* --- Bloco de acoes do header (Acoes.css do Jarvis) ---
   Os icones dividem UMA capsula branca e o avatar fica solto ao lado. O
   agrupamento nao existe no HTML do BuddyBoss: os quatro sao irmaos diretos, e
   nao ha seletor que embrulhe tres deles. Quem cria o embrulho e o JS desta
   camada, e ele some junto com o plugin. */
#header-aside .header-aside-inner {
	display: flex;
	align-items: center;
	gap: var(--uxs-menu-gap-icone);
}

/* O tema separa busca de mensagens com um risco vertical. Na capsula ele vira
   ruido: o proprio agrupamento ja diz que aquilo e um bloco so. */
#header-aside .bb-separator {
	display: none;
}

.uxs-acoes {
	display: flex;
	align-items: center;
	gap: var(--uxs-menu-gap);
	height: var(--uxs-alvo);
	padding-inline: var(--uxs-menu-folga);
	border: 1px solid var(--uxs-borda);
	border-radius: var(--uxs-raio-pilula);
	background: #fff;
	box-shadow: var(--uxs-sombra-xs);
}

/* Alvo nu: dentro da capsula o botao nao tem borda nem sombra propria, so o
   circulo de hover. 36px e o --alvo-nu do Jarvis. */
.uxs-acoes > * > a,
.uxs-acoes > a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--uxs-raio-pilula);
	color: var(--uxs-tinta);
	transition: background-color 140ms ease, transform var(--uxs-mov) var(--uxs-curva);
}

.uxs-acoes > * > a:hover,
.uxs-acoes > a:hover {
	background-color: var(--uxs-hover);
}

.uxs-acoes > * > a:active,
.uxs-acoes > a:active {
	transform: scale(.94);
	transition-duration: 80ms;
}

.uxs-acoes i,
.uxs-acoes svg {
	font-size: var(--uxs-alvo-icone);
	width: var(--uxs-alvo-icone);
	height: var(--uxs-alvo-icone);
}

/* Avatar: circulo do tamanho do alvo, anel branco separando do fundo, e a mesma
   micro-interacao dos botoes circulares do Jarvis (sobe 1px, sombra cresce). */
#header-aside .user-wrap > a {
	display: grid;
	place-items: center;
	width: var(--uxs-alvo);
	height: var(--uxs-alvo);
	padding: 0;
	border: 2px solid #fff;
	border-radius: var(--uxs-raio-pilula);
	background: var(--uxs-borda);
	box-shadow: var(--uxs-sombra-xs);
	overflow: hidden;
	transition: transform var(--uxs-mov) var(--uxs-curva),
		box-shadow var(--uxs-mov) var(--uxs-curva);
}

#header-aside .user-wrap > a:hover {
	transform: translateY(-1px);
	box-shadow: var(--uxs-sombra-lg);
}

#header-aside .user-wrap > a:active {
	transform: translateY(0) scale(.94);
	transition-duration: 80ms;
}

#header-aside .user-wrap > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
	#header-aside .user-wrap > a,
	.uxs-acoes > * > a,
	.uxs-acoes > a {
		transition-duration: 1ms;
	}

	#header-aside .user-wrap > a:hover,
	#header-aside .user-wrap > a:active {
		transform: none;
	}
}

/* --- Responsivo ---
   Abaixo de 1200px o menu centralizado por transform comeca a encostar no bloco
   da direita. A partir dai ele volta pro fluxo e o tema assume o menu mobile. */
@media screen and (max-width: 1200px) {
	#primary-navbar {
		position: static;
		transform: none;
		/* O min-width so faz sentido enquanto o menu esta centralizado por absolute:
		   la ele existe pra dar folga ao script de overflow do tema, que senao
		   esconde o ultimo item. De volta ao fluxo ele vira o oposto do que deveria:
		   reserva 1000px numa barra que ja nao tem esse espaco e empurra o bloco da
		   direita (busca, mensagens, avatar) pra fora da tela, criando rolagem
		   horizontal. No fluxo, quem decide a largura e o conteudo. */
		min-width: 0;
		width: auto;
		/* Cresce e encolhe com o espaco que sobra entre o logo e o bloco da direita.
		   E o que devolve o menu "mais" do tema: o script dele compara a largura da
		   barra com a da lista pra decidir o que nao cabe. Com largura de conteudo
		   as duas eram iguais, ele nunca via sobra, mantinha os seis itens e o bloco
		   da direita saia da tela. Ocupando o espaco disponivel, a conta volta a
		   fazer sentido e os itens que nao cabem vao pro dropdown. */
		flex: 1 1 auto;
	}

	#primary-navbar ul.primary-menu {
		max-width: 100%;
	}

	/* Item flex nao encolhe abaixo do proprio conteudo enquanto min-width for auto.
	   Era isso que fazia a barra de navegacao manter 676px numa faixa de 645 e
	   empurrar busca, mensagens e avatar pra fora da tela: o flex-grow estava certo,
	   mas o flex-shrink nao tinha permissao pra agir. */
	.site-header .main-navigation {
		min-width: 0;
		overflow: hidden;
	}

	#primary-navbar > .hasItems {
		position: static;
	}
}