/* ============================================================
   FAQ pública orienteme — Zoho Desk Help Center
   Personalizar > CSS. Validado em 17/09/2026 contra
   https://suporte.orienteme.com.br/portal/pt-br/kb
   Todos os seletores foram conferidos no DOM da página.
   ============================================================ */

/* ---------- 1. Tipografia da marca ----------
   Poppins é a fonte dos produtos web no manual. Se o Zoho remover o @import,
   usar o <link> do Google Fonts que está no HTML do cabeçalho. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
body, body input, body button, body textarea { font-family:'Poppins','Open Sans',Arial,sans-serif !important; }
body * { font-family:inherit !important; }

/* ---------- 2. Fundo ----------
   Off-white da marca. Só no body: o #container é pintado pelo Zoho no Modo
   noturno (painel de acessibilidade > Exibir), e forçá-lo aqui deixava metade
   da página clara com o resto escuro. */
body { background-color:#F0F4F2; }

/* ---------- 3. Cabeçalho ----------
   O gradiente termina no teal e não no verde pálido: o branco passa a ter
   contraste acima de 4,5:1 em toda a faixa. A imagem é a foto de banco de
   imagens padrão do Zoho, que aparecia por cima da busca. */
#headerContainer { background-image:linear-gradient(110deg,#004038 0%,#006A5B 55%,#009884 100%) !important; }
.Header__headerImg { display:none !important; }

/* ---------- 4. Título do topo ----------
   Depende da linha <h1 class="hcHero"> no HTML do cabeçalho.
   O bloco vira coluna para o título ficar acima da busca, não ao lado. */
.Header__headerSearch { display:flex !important; flex-direction:column; justify-content:center; gap:8px; }
.hcHero { color:#ffffff; font-size:22px; font-weight:600; line-height:1.2; margin:0; white-space:nowrap; }
@media (max-width:900px){ .hcHero { display:none; } }

/* ---------- 5. Busca ----------
   A pílula vale só no campo inline, que o Zoho exibe a partir de 1024px. Abaixo
   disso a lupa abre um overlay de tela cheia usando ESTE MESMO elemento, com
   fundo claro próprio. O escopo é por largura e não pela classe searchPanelActive,
   porque ao digitar o campo inline também recebe essa classe.
   O searchPanelSearchBox é um retângulo rgba(51,51,51,.2) que o Zoho pinta
   dentro do campo, pensado para a foto do cabeçalho: escurece o fundo e
   derruba o contraste do texto para 3,8:1. */
@media (min-width:1024px){
  .Search__searchPanel { background:#ffffff !important; border-radius:999px !important; box-shadow:0 2px 10px rgba(0,64,56,.18); padding:0 18px !important; }
  .Search__searchPanel .searchPanelSearchBox { background:transparent !important; border-radius:999px !important; }
}
.Search__searchPanel input { color:#004038 !important; font-size:16px !important; }
.Search__searchPanel input::placeholder { color:#3D5C55 !important; opacity:1; }
#searchContainer svg { fill:#006A5B !important; color:#006A5B !important; }

/* ---------- 6. Abas ----------
   O Zoho aplica padding 18px 15px 10px só na aba ativa, deixa as outras com
   padding 0 e 10px a menos de altura, e cobre o gradiente com uma faixa
   rgba(255,255,255,.1). Isto iguala as quatro e devolve o gradiente.
   No celular as 4 abas dividem a largura e cada rótulo quebra em 2 linhas;
   com 3 abas cada uma cabe em 1 linha, e o contato segue no primeiro card. */
.Header__tabs { background:transparent !important; }
.Header__tabsList { align-items:stretch; }
.Header__tabsTab { display:flex; margin:0 !important; }
.Header__tabsTab a { display:flex !important; align-items:center; padding:0 16px !important; min-height:52px; font-size:15px !important; font-weight:500 !important; color:#ffffff !important; letter-spacing:.2px; }
.Header__tabsTab a:hover { color:#D0F5DF !important; }
#portal_tabSolutions a { font-weight:600 !important; }
@media (max-width:600px){
  .Header__tabsTab a { padding:0 10px !important; font-size:14px !important; }
  #portal_tabContato { display:none !important; }
}

/* ---------- 7. Categorias da home ----------
   O pai dos cards é a div sem classe dentro de .Feed__feedContent. O :has()
   é obrigatório: a lista de artigos da categoria usa o mesmo container, e sem
   ele os artigos também virariam grade. */
.Feed__feedContent > div:has(> a.CategoryBlock__kbCategory) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
a.CategoryBlock__kbCategory { height:100%; margin:0 !important; padding:22px !important; border-radius:14px; box-shadow:0 1px 4px rgba(0,64,56,.10) !important; transition:transform .15s ease, box-shadow .15s ease; }
a.CategoryBlock__kbCategory:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,64,56,.16) !important; }
a.CategoryBlock__kbCategory .MediaObject__mediaObject { flex-direction:column !important; align-items:flex-start; }
a.CategoryBlock__kbCategory .MediaObject__mediaObjectFigure { margin:0 !important; padding:0 !important; }
a.CategoryBlock__kbCategory .Avatar__avatar,
a.CategoryBlock__kbCategory .Avatar__avatar img { width:52px !important; height:52px !important; }
a.CategoryBlock__kbCategory .Avatar__avatar { margin:0 0 12px 0 !important; }
/* Ícones: os PNGs das categorias são line art preto, que some no card escuro do
   Modo noturno. O primeiro par do filtro (brightness 0 + saturate) achata a arte
   em preto puro, e o resto leva ao teal da marca: medido em rgb(0,150,143),
   3,6:1 no card branco e 4,4:1 no card escuro. Funciona mesmo se o arquivo do
   ícone for trocado depois, porque a normalização vem antes. */
a.CategoryBlock__kbCategory .Avatar__avatar img { filter:brightness(0) saturate(100%) invert(47%) sepia(72%) saturate(2000%) hue-rotate(143deg) brightness(80%) contrast(105%); }

/* ---------- 8. Artigos populares ----------
   Sem corte no meio da frase. */
.Menu__menuLink, .Menu__menuLink * { white-space:normal !important; text-overflow:clip !important; overflow:visible !important; }

/* ---------- 8.1 Paginação da lista de artigos ----------
   O item desabilitado é um <span> sem classe que o Zoho deixa em 20px dentro de
   um bloco #f1f1f1, enquanto o link ativo fica em 15px: o botão que não faz nada
   pesava mais que o que leva à próxima página. */
.Pagination__paginationItem span, .Pagination__paginationLink { font-size:15px !important; }
.Pagination__disabled { background:transparent !important; opacity:.45; }

/* ---------- 9. Rodapé ----------
   Depende do bloco .Footer__footerLinks no HTML do rodapé.
   #006A5B sobre #F0F4F2 dá 5,89:1. */
.Footer__footer { padding:22px 16px !important; }
.Footer__footerLinks { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:10px; }
.Footer__footerLinks a.Footer__footerLink { color:#006A5B !important; font-weight:500; }

/* ---------- 10. Telas menores ----------
   Grade: 2 colunas até 1024px, 2 colunas menores no celular com respiro lateral.
   O bloco "Seguir" assina notificações de uma seção da base, que é recurso de
   quem administra conteúdo, e o texto do Zoho vem com erro de concordância
   ("deste seção"). Título e descrição da categoria são repetição do cabeçalho
   dela, logo acima: no desktop ficam ao lado, no celular ficam embaixo. */
@media (max-width:1024px){ .Feed__feedContent > div:has(> a.CategoryBlock__kbCategory) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px){
  .KBArticleRightContainer__userFollowOption { display:none !important; }
  .KBArticleRightContainer__title,
  .KBArticleRightContainer__descriptionContent,
  .KBArticleRightContainer__categoryDescription { display:none !important; }
}
@media (max-width:600px){
  .Feed__feedContent > div:has(> a.CategoryBlock__kbCategory) { grid-template-columns:1fr 1fr; gap:12px; padding:0 12px; }
  a.CategoryBlock__kbCategory { padding:14px !important; }
  a.CategoryBlock__kbCategory .Avatar__avatar,
  a.CategoryBlock__kbCategory .Avatar__avatar img { width:44px !important; height:44px !important; }
  a.CategoryBlock__kbCategory .Avatar__avatar { margin-bottom:8px !important; }
}

/* ---------- 11. Tipografia no celular ----------
   Medido em 360px: título do artigo em 38,4px, título da categoria em 28,4px,
   contador em 19,5px, widgets em 21,3px, contra 16px dos itens da lista.
   Os itens ficam como estão: 16px é o tamanho de leitura. */
@media (max-width:768px){
  .ArticleHeader__articleDetailHeader { font-size:26px !important; line-height:1.25 !important; }
}
@media (max-width:600px){
  .ArticleHeader__articleDetailHeader { font-size:24px !important; line-height:1.25 !important; }
  .KBArticleListLeftContainer__kblistHeading { font-size:22px !important; line-height:1.3 !important; }
  .KBArticleListLeftContainer__articleCount { font-size:14px !important; }
  .Pagination__paginationItem, .Pagination__paginationLink { font-size:15px !important; }
  .CategoriesContainer__solutionListHeading,
  .ArticleWidgets__menuTitle,
  .modulesname { font-size:17px !important; line-height:1.35 !important; }
}

/* ---------- 12. Abas em uma linha no celular ----------
   Abaixo de 360px os rótulos quebravam em duas linhas e desalinhavam com a
   aba FAQ, que cabe em uma. */
@media (max-width:600px){
  .Header__tabsTab a { white-space:nowrap; font-size:13px !important; padding:0 8px !important; }
}

/* ---------- 13. Modo noturno ----------
   O Zoho tem tema escuro nativo no painel de acessibilidade (Exibir > Modo
   noturno / Automático). Ele não marca o tema com classe nem atributo: o único
   sinal é o style inline que ele põe no body. Daí o seletor abaixo.
   Fundo dele: body #171717, cards #212121. */
/* o fundo claro do #container vem da configuração do portal (Aparência >
   Corpo > Plano de fundo) e o Modo noturno não repinta esse elemento:
   sem isto, metade da página fica clara dentro do tema escuro. */
body[style*="rgb(23, 23, 23)"] #container { background-color:transparent !important; }
/* no Modo noturno o Zoho pinta o próprio input de #212121 por cima da
   pílula branca, e o texto verde escuro fica em 1,37:1. */
body[style*="rgb(23, 23, 23)"] .Search__searchPanel input { background:transparent !important; }
body[style*="rgb(23, 23, 23)"] .Footer__footerLinks a.Footer__footerLink { color:#6CCA98 !important; }
body[style*="rgb(23, 23, 23)"] a.CategoryBlock__kbCategory { border:1px solid #2E2E2E; box-shadow:none !important; }
body[style*="rgb(23, 23, 23)"] a.CategoryBlock__kbCategory:hover { box-shadow:0 8px 20px rgba(0,0,0,.45) !important; }