/*
 * 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-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: 10px;    /* recuo interno do painel: onde comeca a caixa do icone */
	--uxs-menu-altura:  44px;    /* altura da pilula do menu do topo */
	--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;
}

#buddypanel-menu.buddypanel-menu {
	min-height: 0;
	height: auto;
	flex: 0 0 auto;
	justify-content: flex-start;
	background: #fff;
	border-radius: var(--uxs-raio-card);
	overflow: hidden;
}

/* Itens sem fundo e sem raio proprios, pra virarem um bloco so. */
#buddypanel-menu.buddypanel-menu > li > a {
	background-color: transparent;
	border-radius: 0;
}

/* ITEM ATIVO.
   O tema pinta o texto e o icone do item ativo de branco e conta com o fundo
   dele pra dar contraste. Como a regra acima zera esse fundo, o item ativo
   ficava branco sobre o cartao branco e sumia da tela. O fundo volta aqui, na
   cor de acao, e o icone segue branco por cima. */
#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: var(--uxs-boost);
	color: #fff;
}

#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;
}

/* O tema prega o ultimo item no rodape com margin-top automatica, e ela quebraria
   tanto a centralizacao quanto o cartao. Se um dia ele precisar voltar pro rodape,
   e so remover esta regra e tirar o item de dentro da <ul>. */
#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;
}

/* ==========================================================================
   MENU DO TOPO
   Mesmo sistema do menu lateral: um cartao branco unico, com raio so nas
   pontas, e os itens retos por dentro. O ativo ganha o amarelo da marca.
   ========================================================================== */

#primary-navbar {
	display: flex;
	align-items: center;
}

#primary-navbar ul.primary-menu {
	display: flex;
	align-items: stretch;
	align-self: center;
	height: var(--uxs-menu-altura);
	background: #fff;
	border-radius: var(--uxs-raio-card);
	overflow: hidden;
}

/* O height:100% nos dois e obrigatorio. O tema da 64px de altura aos <li>, e como
   a pilula tem 44px, os itens vazavam 20px pra baixo e o overflow:hidden cortava
   o rodape deles. Herdar a altura da <ul> resolve e centraliza o conteudo. */
#primary-navbar ul.primary-menu > li {
	display: flex;
	align-items: stretch;
	height: 100%;
}

#primary-navbar ul.primary-menu > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 16px;
	border-radius: 0;
}

/* Item ativo. O icone precisa ser pintado junto do texto, senao fica escuro
   sobre o amarelo e some. */
#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 {
	background: var(--uxs-boost);
	color: #fff;
}

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