/* 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; }

  /* ---------- 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 */
  .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-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); }

  @media (max-width: 47.99rem) {
    .loomah-nav-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); }
  .loomah-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lm-space-6); flex-wrap: wrap; }
  .loomah-footer-brand { display: grid; gap: var(--lm-space-3); }
  .loomah-footer .loomah-brand, .loomah-footer .loomah-brand-name { color: var(--lm-on-media-fg); }
  .loomah-footer-desc { margin: 0; max-inline-size: 36ch; font-size: var(--lm-font-size-sm); color: var(--lm-on-media-muted); }
  .loomah-footer-social { display: flex; gap: var(--lm-space-2); }
  .loomah-footer-social a { inline-size: var(--lm-btn-height); block-size: var(--lm-btn-height); 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; font-size: var(--lm-font-size-lg); }
  .loomah-footer-social a:hover { background: var(--lm-on-media-tint); }
  .loomah-footer-bottom { display: flex; justify-content: space-between; gap: var(--lm-space-4); flex-wrap: wrap; 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-bottom p { margin: 0; }
  .loomah-footer-bottom a { color: var(--lm-on-media-fg); }
  .loomah-credits { display: flex; gap: var(--lm-space-5); flex-wrap: wrap; align-items: center; }
  .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-6); 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-links { display: flex; gap: var(--lm-space-5); flex-wrap: wrap; }

  /* ---------- 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; }
}