/* ==========================================================================
   NOORD THEME: SUBMENU (MEGA MENU DESKTOP + DRAWER MOBILE)

   Arquivo próprio, enfileirado com a versão do tema — e NÃO dentro do
   header.css. O header.css entra por `@import` no main.css e o navegador o
   busca sem query string: em produção, mudança nele fica presa no cache.

   ── Por que o submenu não aparecia no desktop ──
   `.layout-1 .noord-primary-nav` tem `overflow-x: auto` (para um menu longo
   rolar em vez de invadir a logo). Pela especificação, `overflow-x` diferente
   de `visible` força `overflow-y: auto` também — o dropdown absoluto ficava
   recortado dentro da caixa de ~26px do menu. Existia, mas nunca era visível.

   Troca: `overflow-x: clip`. O `clip` NÃO transforma o elemento em contêiner
   de rolagem, então aceita `overflow-y: visible` — e o painel, cujo bloco de
   contenção é o `.noord-header-inner` (ancestral do nav), escapa do recorte.
   A proteção da logo contra menu longo continua valendo.
   ========================================================================== */

#masthead {
  /* Mesmo recuo lateral do cabeçalho (#masthead .noord-header-inner em
     header.css) — as colunas do painel começam alinhadas ao 1º item do menu. */
  --header-side-pad: clamp(16px, 2vw, 36px);
  --mega-rows: 4;
}

@media (min-width: 992px) {

  .layout-1 .noord-primary-nav {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* O item de 1º nível deixa de ser referência de posição: o painel se ancora
     no .noord-header-inner (position: relative, largura total da tela). */
  .noord-primary-nav .menu > li,
  .noord-primary-nav .menu .sub-menu li {
    position: static;
  }

  /* ── Painel ── */

  .noord-primary-nav .menu > li > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    margin: 0;
    padding: 28px var(--header-side-pad) 40px;
    /* Mesmo fundo do cabeçalho: --header-bg existe quando o Page Builder define
       cor própria para o header; sem ela, o fundo do tema. */
    background-color: var(--header-bg, var(--color-bg, #f5f5f0));
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--color-text, #111111) 8%, transparent);
    box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.25);

    /* Colunas de até 4 itens, fluindo para a direita — como na referência */
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--mega-rows), auto);
    grid-auto-columns: minmax(120px, max-content);
    justify-content: start;
    align-items: start;
    column-gap: 72px;
    row-gap: 9px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* Ao fechar, a visibilidade só some depois do fade — evita piscar quando o
       mouse passa rápido do item para o painel. */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 1000;
  }

  /* O Customizer legado (herança do Storefront, class-noord-customizer.php)
     emite `.main-navigation ul.menu ul.sub-menu { background: <fundo do header
     escurecido 15> }` — especificidade (0,3,2), maior que a do painel acima.
     Era por isso que o painel saía cinza (#f0f0f0) sob um header branco. O #id
     garante a cor do cabeçalho. */
  #masthead .noord-primary-nav .menu > li > .sub-menu {
    background-color: var(--header-bg, var(--color-bg, #f5f5f0));
  }

  /* Ponte invisível cobrindo o vão entre o item do menu e o painel. Sem ela o
     mouse sai do <li> no caminho e o painel fecha antes de ser alcançado.
     Pertence ao painel, então só existe (e só captura o mouse) quando ele
     está aberto. */
  .noord-primary-nav .menu > li > .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 30px;
  }

  .noord-primary-nav .menu > li:hover > .sub-menu,
  .noord-primary-nav .menu > li:focus-within > .sub-menu,
  .noord-primary-nav .menu > li.focus > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }

  /* ── Links do painel ── */

  .noord-primary-nav .menu .sub-menu li {
    width: auto;
  }

  .noord-primary-nav .menu .sub-menu a {
    /* block + max-content: sem a "linha fantasma" que o inline-block herdava
       do <li> (fonte 16px) — era o que abria 36px entre as linhas — e a área
       de clique continua do tamanho do texto, não da coluna inteira. */
    display: block;
    width: max-content;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--color-text, #111111);
    background: none;
    white-space: nowrap;
  }

  .noord-primary-nav .menu .sub-menu a:hover {
    background: none;
    opacity: 0.55;
  }

  /* ── 3º nível: o item com filhos vira uma coluna própria (título + lista) ── */

  .noord-primary-nav .menu > li > .sub-menu > .menu-item-has-children {
    grid-row: 1 / -1;
  }

  .noord-primary-nav .menu > li > .sub-menu > .menu-item-has-children > a {
    font-weight: 500;
  }

  .noord-primary-nav .menu .sub-menu .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: none;
  }

  /* `.noord-primary-nav ul { align-items: center }` (header.css) vale para
     todo ul do menu; num flex em coluna isso CENTRALIZA os itens mais curtos
     que o título do grupo — "Artefatos diversos" saía 9px recuado. */
  .noord-primary-nav .menu .sub-menu .sub-menu {
    align-items: flex-start;
  }

  .noord-primary-nav .menu .sub-menu .sub-menu a {
    color: var(--color-text-muted, #666666);
  }

  /* O icons.css (herança Storefront) põe uma seta "›" nos itens de 2º nível
     com filhos — indicador de flyout lateral. No painel os filhos já aparecem
     logo abaixo do título, então a seta só confunde. A do 1º nível fica. */
  /* #masthead: o icons.css tem a mesma especificidade e carrega depois. */
  #masthead .main-navigation ul.menu ul li.menu-item-has-children > a::after {
    content: none;
    display: none;
  }

  /* ── Header transparente: vira sólido enquanto o painel está aberto ──
     Sem isto, na home a logo e o menu ficariam transparentes sobre o hero e o
     painel sólido logo abaixo — dois blocos sem relação. */

  .header-transparent .site-header:not(.is-sticky):has(.noord-primary-nav .menu > li:is(:hover, :focus-within, .focus) > .sub-menu) {
    background-color: var(--header-bg, var(--color-bg, #f5f5f0)) !important;
    --header-text: var(--color-text, #111111);
    color: var(--color-text, #111111);
  }

  .header-transparent-alt .site-header:not(.is-sticky):has(.noord-primary-nav .menu > li:is(:hover, :focus-within, .focus) > .sub-menu) .custom-logo-link:not(.custom-logo-link--transparent):not(.custom-logo-link--mobile) {
    display: inline-block;
  }

  .header-transparent-alt .site-header:not(.is-sticky):has(.noord-primary-nav .menu > li:is(:hover, :focus-within, .focus) > .sub-menu) .custom-logo-link--transparent {
    display: none;
  }
}

/* ==========================================================================
   DRAWER MOBILE — 3º nível
   O menu do drawer passou a renderizar até 3 níveis (antes `depth => 2`: o
   item de 2º nível com filhos ganhava a setinha, mas o submenu dele nem era
   impresso — tocar não fazia nada).
   ========================================================================== */

.noord-drawer-menu .sub-menu .sub-menu {
  background: rgba(0, 0, 0, 0.03);
}

.noord-drawer-menu .sub-menu .sub-menu .noord-drawer-item-wrap a {
  padding-left: 44px;
  font-size: 13px;
  color: var(--color-text-muted, #666666);
}