/* Tema Loomah — layout da casca. Mesma regra do DS: só tokens, nada de hex,
   tudo em @layer lm.overrides para não brigar com a cascata do DS. */

@layer lm.overrides {

  body { background: var(--lm-surface-page); color: var(--lm-text-default); display: flex; flex-direction: column; min-block-size: 100vh; }
  body > * { flex-shrink: 0; }
  /* Empurra o rodapé para o fim em páginas curtas, sem depender de quem
     desenha o meio (tema ou plugin). */
  .loomah-push { flex: 1 0 var(--lm-space-16); }
  .loomah-main { display: block; min-block-size: 50vh; }
  /* 1.2.2 — Loomah Banners no topo da página inicial: o espaço até a
     listagem é o da seção (mais curto), não a margem do banner. !important
     em camada vence o !important sem camada do plugin. */
  .loomah-main > .lbn { margin-block: 0 !important; }
  .loomah-main > .lbn + .lm-section { padding-block-start: var(--lm-section-space-tight); }

  /* ---------- Cabeçalho ---------- */
  .loomah-header { background: var(--lm-surface-raised); border-block-end: 1px solid var(--lm-border-subtle); position: sticky; inset-block-start: 0; z-index: 50; }
  .admin-bar .loomah-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); } /* lm-spacing-ok: altura da barra do WP */
  /* 1.2.3 — até 600px a barra do WP não fica fixa (rola com a página); o
     desconto deixava um vão acima do cabeçalho, com o conteúdo aparecendo
     por trás. Só para quem está logado. */
  @media screen and (max-width: 600px) { .admin-bar .loomah-header { inset-block-start: 0; } }
  .loomah-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-4); max-inline-size: var(--lm-size-container); margin-inline: auto; padding: var(--lm-space-3) var(--lm-gutter); }

  .loomah-brand { display: flex; align-items: center; gap: var(--lm-space-3); text-decoration: none; color: var(--lm-text-strong); min-inline-size: 0; }
  /* 1.0.3 — logo do cabeçalho maior (era 48px). 64px no computador, 48px no
     celular, onde o cabeçalho divide espaço com o botão. */
  .loomah-brand picture { display: contents; }
  .loomah-brand-logo { display: block; block-size: var(--lm-space-16); inline-size: auto; max-inline-size: 20rem; object-fit: contain; }
  .loomah-footer .loomah-brand-logo { block-size: var(--lm-space-14); }
  @media (max-width: 47.99rem) { .loomah-brand-logo { block-size: var(--lm-space-12); max-inline-size: 12rem; } }
  .loomah-brand-mark { inline-size: var(--lm-space-10); block-size: var(--lm-space-10); border-radius: var(--lm-radius-md); background: var(--lm-accent-400); color: var(--lm-on-accent-fg, var(--lm-text-inverse)); display: grid; place-items: center; font-weight: var(--lm-font-weight-bold); font-size: var(--lm-font-size-xs); letter-spacing: var(--lm-letter-spacing-caps); flex: none; }
  .loomah-brand-name { font-weight: var(--lm-font-weight-semibold); line-height: var(--lm-line-height-snug); font-size: var(--lm-font-size-sm); color: var(--lm-text-accent); max-inline-size: 14rem; }

  .loomah-nav { display: flex; align-items: center; gap: var(--lm-space-2); }
  .loomah-nav-list, .loomah-nav-mobile-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--lm-space-1); }
  .loomah-nav-list a { display: inline-flex; align-items: center; block-size: var(--lm-btn-height-sm); padding-inline: var(--lm-space-3); border-radius: var(--lm-radius-control); font-size: var(--lm-font-size-xs); font-weight: var(--lm-font-weight-semibold); color: var(--lm-text-default); text-decoration: none; }
  .loomah-nav-list a:hover { background: var(--lm-surface-hover); color: var(--lm-text-strong); }
  .loomah-nav-list .current-menu-item > a, .loomah-nav-list a[aria-current="page"] { color: var(--lm-text-strong); box-shadow: inset 0 -2px 0 var(--lm-accent-400); border-radius: 0; }

  .loomah-nav-mobile { display: none; position: relative; }
  .loomah-nav-mobile > summary { list-style: none; cursor: pointer; }
  .loomah-nav-mobile > summary::-webkit-details-marker { display: none; }
  .loomah-nav-mobile-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--lm-space-2)); min-inline-size: 14rem; background: var(--lm-surface-overlay); border: var(--lm-border); border-radius: var(--lm-radius-container); box-shadow: var(--lm-shadow-lg); padding: var(--lm-space-2); }
  .loomah-nav-mobile-list { flex-direction: column; }
  .loomah-nav-mobile-list a { display: block; padding: var(--lm-space-3); border-radius: var(--lm-radius-md); color: var(--lm-text-default); text-decoration: none; }
  .loomah-nav-mobile-list a:hover { background: var(--lm-surface-hover); }

  /* 1.2.3 — link das perguntas frequentes: texto no computador, só ícone no
     celular (quando fica no cabeçalho, isto é, sem menu). */
  .loomah-faq-link .ph { display: none; }

  @media (max-width: 47.99rem) {
    .loomah-faq-link { inline-size: 2.75rem; block-size: 2.75rem; padding-inline: 0; justify-content: center; }
    .loomah-faq-link .ph { display: inline-block; font-size: 1.375rem; }
    .loomah-faq-texto { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .loomah-nav-desktop { display: none; }
    /* Some junto com o menu: no celular o link vive no painel da sanfona. */
    .loomah-so-desktop { display: none; }
    .loomah-nav-mobile { display: block; }
    .loomah-brand-name { font-size: var(--lm-font-size-xs); max-inline-size: 9rem; }
  }
  @media (max-width: 29.99rem) {
    .loomah-nav .lm-btn-secondary span { display: none; }
  }

  /* ---------- Rodapé ---------- */
  /* Fundo de MÍDIA, não inverso: surface-inverse vira claro no tema escuro,
     e o rodapé usa os tons on-media (sempre claros) e logos brancos. Mídia
     é escura nos dois temas. */
  .loomah-footer { background: var(--lm-surface-media); color: var(--lm-on-media-fg); }
  .loomah-footer-inner { max-inline-size: var(--lm-size-container); margin-inline: auto; padding: var(--lm-space-12) var(--lm-gutter) var(--lm-space-8); display: grid; gap: var(--lm-space-8); }

  /* O número de trilhas acompanha as colunas que o PHP montou: sem redes ou
     sem coluna institucional o rodapé não fica com um vão no fim. */
  .loomah-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--lm-space-8); }
  .loomah-footer-grid[data-colunas="3"] { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .loomah-footer-grid[data-colunas="2"] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .loomah-footer-grid[data-colunas="1"] { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 64rem) { .loomah-footer-grid, .loomah-footer-grid[data-colunas] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loomah-footer-id { grid-column: 1 / -1; } }
  @media (max-width: 40rem) { .loomah-footer-grid, .loomah-footer-grid[data-colunas] { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-8); } }

  .loomah-footer-id { display: grid; gap: var(--lm-space-3); justify-items: start; }
  .loomah-footer .loomah-brand, .loomah-footer .loomah-brand-name { color: var(--lm-on-media-fg); }
  .loomah-footer-desc { margin: 0; max-inline-size: 30ch; font-size: var(--lm-font-size-sm); color: var(--lm-on-media-muted); }

  .loomah-footer-col h2 { margin: 0 0 var(--lm-space-3); font-size: var(--lm-font-size-2xs); font-weight: var(--lm-font-weight-semibold); letter-spacing: var(--lm-letter-spacing-caps); text-transform: uppercase; color: var(--lm-on-media-muted); }
  .loomah-footer-col ul { margin: 0; padding: 0; display: grid; gap: var(--lm-space-2); }
  .loomah-footer-col li { list-style: none; }
  .loomah-footer-col a { display: inline-flex; align-items: center; gap: var(--lm-space-1); color: var(--lm-on-media-fg); text-decoration: none; font-size: var(--lm-font-size-sm); }
  .loomah-footer-col a i { font-size: var(--lm-font-size-xs); color: var(--lm-on-media-muted); }
  .loomah-footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .loomah-footer a:focus-visible { outline: none; box-shadow: var(--lm-focus-ring-media); border-radius: var(--lm-radius-sm); }

  /* Privacidade e Termos são rodapé jurídico, não navegação: lista própria,
     menor e apagada, para não disputar com os links de verdade. */
  .loomah-footer-col ul + ul { margin-block-start: var(--lm-space-3); }
  .loomah-footer-legal a { font-size: var(--lm-font-size-xs); color: var(--lm-on-media-muted); }
  .loomah-footer-legal a:hover { color: var(--lm-on-media-fg); }

  .loomah-footer-social { display: flex; gap: var(--lm-space-2); flex-wrap: wrap; }
  .loomah-footer-social a { inline-size: var(--lm-space-10); block-size: var(--lm-space-10); display: grid; place-items: center; border-radius: var(--lm-radius-full); color: var(--lm-on-media-fg); border: 1px solid var(--lm-on-media-border); text-decoration: none; }
  .loomah-footer-social a i { font-size: var(--lm-font-size-xl); }
  .loomah-footer-social a:hover { background: var(--lm-on-media-tint); }

  .loomah-footer-assinatura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--lm-space-3) var(--lm-space-6); padding-block-start: var(--lm-space-6); border-block-start: 1px solid var(--lm-on-media-border); font-size: var(--lm-font-size-xs); color: var(--lm-on-media-muted); }
  .loomah-footer-assinatura p { margin: 0; }
  .loomah-credits { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--lm-space-2) var(--lm-space-4); }
  .loomah-credit { display: inline-flex; align-items: center; gap: var(--lm-space-2); color: var(--lm-on-media-muted); text-decoration: none; }
  a.loomah-credit:hover { color: var(--lm-on-media-fg); }
  .loomah-credit img { display: block; block-size: var(--lm-space-5); inline-size: auto; }
  /* Logo Veronikas em cor sobre fundo escuro perde o roxo; em branco, como
     no site atual. */
  .loomah-credit-veronikas { filter: brightness(0) invert(1); }
  .loomah-footer-sep { color: var(--lm-on-media-border); }

  /* No celular o rodapé vira uma pilha centrada com quatro níveis de leitura:
     identidade, os links que se toca, os institucionais e o jurídico. Os
     títulos das colunas saem da tela (ficam para o leitor de tela): com três
     ou quatro links cada, rotular custava mais atenção do que rendia. */
  @media (max-width: 40rem) {
    .loomah-footer-grid { text-align: center; }
    .loomah-footer-id { justify-items: center; }
    .loomah-footer-desc { max-inline-size: 34ch; margin-inline: auto; }
    .loomah-footer-col h2 {
      position: absolute; inline-size: 1px; block-size: 1px; margin: -1px;
      padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .loomah-footer-col ul { gap: 0; }
    .loomah-footer-col a { justify-content: center; padding-block: var(--lm-space-2); }
    .loomah-footer-col-principal a { font-size: var(--lm-font-size-md); font-weight: var(--lm-font-weight-medium); }
    .loomah-footer-social { justify-content: center; }
    .loomah-footer-assinatura { flex-direction: column; align-items: center; text-align: center; gap: var(--lm-space-2); }
    .loomah-credits { justify-content: center; }
    .loomah-footer-sep { display: none; }
  }

  /* ---------- Página inicial ---------- */
  .loomah-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lm-space-8); align-items: center; }
  .loomah-about-solo { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 48rem) { .loomah-about { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- Genéricos ---------- */
  .loomah-narrow { max-inline-size: 36rem; margin-inline: auto; }
  .loomah-content > :first-child { margin-block-start: 0; }
}