/* ---------------------------------------------------------------------------
   Tema Linkaah — CSS do cromo do site.

   Este arquivo é curto de propósito. O que estiliza SEÇÃO mora no plugin
   (assets/css/linkaah.css), porque a seção continua existindo se o tema for
   trocado. Aqui fica só o que pertence ao site: reset de conflito com o
   Elementor, menus do WordPress e a rampa de acento da marca.
   -------------------------------------------------------------------------- */

@layer lm.overrides {

  /* ---- Acento institucional Linkaah ------------------------------------
     Azul #2B4BF2. A rampa foi gerada pela MESMA regra do build do design
     system (rampTargets em OKLCH: 50–300 por lightness fixa, 500–900 por
     contraste alvo contra a página), não escolhida a olho.

     A estrutura continua preta: o acento entra em foco, badge, ícone, link e
     faixa. Botão primário segue sendo o preto quente do DS.

     Trocar a cor da marca é trocar estes dez valores — nada mais no projeto
     conhece o hexadecimal. */
  :root {
    --lm-accent-50:  #EAF6FF;   /*  1.03:1 */
    --lm-accent-100: #D7EDFF;   /*  1.13:1 */
    --lm-accent-200: #B9DCFF;   /*  1.34:1 */
    --lm-accent-300: #90BDFF;   /*  1.81:1 */
    --lm-accent-400: #2B4BF2;   /*  5.83:1 — base da marca */
    --lm-accent-500: #5A8BFF;   /*  3.01:1 */
    --lm-accent-600: #3A62FF;   /*  4.53:1 */
    --lm-accent-700: #233BE3;   /*  7.05:1 */
    --lm-accent-800: #1715C8;   /* 10.00:1 */
    --lm-accent-900: #180093;   /* 13.55:1 */
  }

  /* ---- Correção geral: superfície inversa e o base.css do DS -----------
     O `base.css` fixa `h1..h6 { color: var(--lm-text-strong) }` e
     `strong, b { color: var(--lm-text-strong) }`. Dentro de `.lm-band-inverse`
     isso escreve texto escuro sobre fundo escuro e o conteúdo some.

     `color: inherit` é a correção certa: o peso continua vindo do elemento, a
     cor passa a vir do contexto. Vive no tema porque vale para o site inteiro,
     inclusive para conteúdo que não veio dos widgets. */
  .lm-band-inverse :is(h1, h2, h3, h4, h5, h6),
  .lm-band-inverse :is(strong, b),
  .lm-panel-inverse :is(h1, h2, h3, h4, h5, h6),
  .lm-panel-inverse :is(strong, b) { color: inherit; }

  .lm-band-inverse .lm-eyebrow { color: color-mix(in oklab, currentColor 70%, transparent); }

  /* ---- Âncora sob cabeçalho fixo ---------------------------------------
     Sem isto, clicar num item do menu leva a seção para debaixo da barra. */
  :target,
  section[id],
  main[id] { scroll-margin-block-start: 5rem; }

  /* ---- Menus do WordPress na casca do DS -------------------------------
     Só entra quando o menu vem do wp_nav_menu (fallback do tema). Com o
     Theme Builder do Elementor no ar, nada disto renderiza. */
  .lka-nav-menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: var(--lm-space-5);
  }
  .lka-nav-menu a {
    color: var(--lm-text-muted); text-decoration: none;
    font-size: var(--lm-font-size-sm); font-weight: var(--lm-font-weight-medium);
  }
  .lka-nav-menu a:hover,
  .lka-nav-menu .current-menu-item > a { color: var(--lm-text-strong); }

  .lka-rodape-menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--lm-space-4);
  }
  .lka-rodape-menu a {
    color: var(--lm-text-subtle); text-decoration: none;
    font-size: var(--lm-font-size-xs);
  }
  .lka-rodape-menu a:hover { color: var(--lm-text-strong); }

  /* ---- Cabeçalho do tema ------------------------------------------------
     `.lka-nav` (do plugin) já é sticky. A classe extra `.lka-nav-tema` existe
     para desligar isso SÓ no cabeçalho do tema: sem ela, a regra apagaria
     também o sticky do widget de navbar, que tem interruptor próprio. */
  .lka-nav-tema:not(.lka-nav-fixa) { position: static; }

  /* Barra fixa sem vidro precisa de fundo sólido: translúcida por acidente,
     ela deixa o conteúdo passar por baixo e o texto vira sopa. */
  .lka-nav-tema:not(.lm-glass) { background: var(--lm-surface-raised); }

  .lka-nav-cta { margin-inline-start: auto; }
  /* Com menu na frente, o `auto` já foi gasto por ele; aqui basta um respiro. */
  .lka-nav-links ~ .lka-nav-cta { margin-inline-start: var(--lm-space-3); }

  /* Logo entra na altura definida em Aparência › Linkaah. Vale para as três
     origens da marca (imagem, SVG do plugin, texto) e para os dois lugares
     onde ela aparece — barra e rodapé. */
  .custom-logo-link { display: inline-flex; align-items: center; }
  .custom-logo,
  .lka-marca svg,
  .lka-marca img {
    block-size: var(--lka-marca-altura, 1.375rem);
    inline-size: auto;
  }
  /* O rodapé tem altura própria, não um múltiplo da do cabeçalho: eram dois
     números amarrados por um fator inventado (1,35), e mexer no topo mexia no
     rodapé sem que ninguém tivesse pedido. */
  .lka-rodape-marca .lka-marca svg,
  .lka-rodape-marca .lka-marca img,
  .lka-rodape-marca .custom-logo {
    block-size: var(--lka-marca-altura-rodape, 1.875rem);
  }
  .lka-rodape-marca .lka-marca { text-decoration: none; }

  /* Linha única do rodapé, ao lado dos direitos. */
  .lka-rodape-linha { margin-inline-start: auto; }

  /* ---- Área de conteúdo ------------------------------------------------
     `.lka-main` é deliberadamente vazia de espaçamento.

     NÃO use `.lm-main` aqui: ela é do app shell do design system (o grid com
     barra lateral) e carrega gutter horizontal e respiro vertical próprios.
     Numa página pública isso aparece como uma margem que ninguém pediu, e
     numa página do Elementor ainda briga com a largura do container dele.

     O respiro certo já vem de `.lm-container` (gutter + largura máxima) e de
     `.lm-section` (ritmo vertical) — que os widgets carregam sozinhos e que o
     cliente edita no painel. Conteúdo do Elementor não recebe nenhum dos dois
     e ocupa a largura inteira, como deve. */
  .lka-main { min-inline-size: 0; }

  /* ---- Convivência com o Elementor -------------------------------------
     O Elementor põe o conteúdo em `.elementor` sem largura própria. Sem esta
     linha o widget de seção fica coladinho na borda em telas estreitas,
     porque o gutter do DS mora no `.lm-container` de dentro — e o container
     do Elementor pode estar zerado no kit do cliente. */
  .elementor-widget-container > .lka-secao { margin-inline: 0; }

  /* Imagem responsiva sem estourar a grade, que é o conflito clássico entre
     tema e Elementor com `img { max-width: 100% }` global.

     A exclusão do `.lka-real` não é detalhe: ali dentro roda a marcação de uma
     página do Linkaah, com o CSS dela. `block-size: auto` anulava a altura do
     avatar definida pelo cartão, e a foto redonda virava um retângulo. Dentro
     da prévia, quem manda é a página. */
  .lka-main img:not(.lka-real img) { max-inline-size: 100%; block-size: auto; }

}

@layer lm.overrides {

  /* ---- Template "tela limpa" -------------------------------------------
     Sem cabeçalho e sem rodapé do tema. A regra existe porque alguns plugins
     e o próprio WordPress injetam margem no body (barra de admin, avisos de
     cookie), e numa landing isso desalinha a primeira seção. */
  body.lka-canvas { margin: 0; padding: 0; }
  body.lka-canvas .lka-main { padding: 0; }

}