/* ==========================================================================
   LEXSTUDI — HEADER & FOOTER · v1.0 · Julho 2026
   Requer lexstudi-tokens.css já carregado globalmente.

   IMPORTANTE — leitura antes de usar:
   Este ficheiro cobre tudo o que já podemos estilizar agora (a barra de
   categorias mobile, a estrutura do rodapé, polimento geral "like app").
   O cabeçalho desktop em si (logo + JetMenu + JetSearch + ícones) só
   ganha classes CSS exactas depois de o construíres no Elementor dentro
   do JetThemeCore — o JetMenu gera a sua própria marcação, que só
   conhecemos depois de estar montado. Deixei um bloco reservado no fim
   (secção 4) com instruções de como voltar aqui e afinar nessa altura —
   não é um passo esquecido, é mesmo a ordem certa.
   ========================================================================== */

/* ---------- 1. CONTENTOR GERAL DO CABEÇALHO ---------- */
/* Aplica a classe lxm-header no Container exterior do template de
   Header no JetThemeCore. */
.lxm-header {
  background: var(--color-white);
  box-shadow: 0 1px 0 var(--color-border);
  position: sticky; top: 0; z-index: var(--z-sticky, 30);
}
.lxm-header .lxm-header-inner {
  max-width: var(--grid-max-width); margin: 0 auto; padding: 0 var(--grid-padding-mobile);
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
}
@media (min-width: 768px) { .lxm-header .lxm-header-inner { padding: 0 var(--grid-gutter-desktop); min-height: 76px; } }

/* Ícones de acção do cabeçalho (busca, notificações, favoritos, conta) —
   aplica lxm-header-icon a cada botão/link de ícone que colocares lá. */
.lxm-header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch-target-min); height: var(--touch-target-min);
  border-radius: 50%; color: var(--color-text-body); background: none; border: none; cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.lxm-header-icon svg { width: 20px; height: 20px; stroke-width: 1.75; }
.lxm-header-icon:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.lxm-header-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 2. BARRA DE CATEGORIAS MOBILE (scroll horizontal) ---------- */
/* Container: Listing Grid do JetEngine (Área Jurídica) com esta classe.
   Cada item do Listing Item deve ter a classe lxm-cat-pill. */
.lxm-cats {
  display: flex; gap: var(--space-s); overflow-x: auto; padding: var(--space-s) var(--grid-padding-mobile);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; background: var(--color-white); border-bottom: 1px solid var(--color-border);
}
.lxm-cats::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .lxm-cats { display: none; } } /* só mobile — desktop usa o mega menu */

.lxm-cat-pill {
  flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-m); border-radius: var(--radius-full); background: var(--color-bg-alt);
  color: var(--color-text-heading); font-size: var(--text-body-sm); font-weight: var(--weight-body-medium);
  text-decoration: none; white-space: nowrap; min-height: 36px;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.lxm-cat-pill:hover, .lxm-cat-pill.is-active { background: var(--color-primary); color: var(--color-white); }
.lxm-cat-pill svg { width: 14px; height: 14px; stroke-width: 2; }

/* ---------- 3. RODAPÉ DESKTOP (4 colunas) ---------- */
/* Aplica lxm-footer no Container exterior do template de Footer.
   Cada coluna: lxm-footer-col. Título de coluna: lxm-footer-title. */
.lxm-footer { display: none; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: var(--space-3xl) 0 var(--space-xl); }
@media (min-width: 768px) { .lxm-footer { display: block; } } /* mobile não tem rodapé convencional */

.lxm-footer-inner { max-width: var(--grid-max-width); margin: 0 auto; padding: 0 var(--grid-gutter-desktop); }
.lxm-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
@media (min-width: 768px) { .lxm-footer-grid { grid-template-columns: repeat(4, 1fr); } }

.lxm-footer-title { font: var(--type-h4); color: var(--color-text-heading); margin: 0 0 var(--space-m); }
.lxm-footer-col p { font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--color-text-muted); margin: 0 0 var(--space-s); }
.lxm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.lxm-footer-col li { margin-bottom: var(--space-s); }
.lxm-footer-col a { font-size: var(--text-body-sm); color: var(--color-text-muted); text-decoration: none; transition: color var(--duration-base) var(--ease-standard); }
.lxm-footer-col a:hover { color: var(--color-primary); }

.lxm-footer-bottom { margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--color-border); text-align: center; font-size: var(--text-caption); color: var(--color-text-muted); }

/* ---------- 4. RESERVADO — afinar depois de montares o header com JetMenu/JetSearch ---------- */
/*
   Quando o cabeçalho desktop estiver montado no Elementor:
   1. Inspecciona (F12) o menu JetMenu e o campo JetSearch já montados.
   2. Volta aqui e acrescenta regras específicas para as classes que
      o Crocoblock gerar (costumam começar por .jet-menu- e .jet-search-)
      — normalmente só precisas de ajustar cor, tipografia e espaçamento
      para bater certo com os tokens, a estrutura já vem funcional.
   3. Não apagues nada das secções 1-3 acima — continuam válidas.
*/