/* ============================================================
   TSJ · MENU DO CELULAR — fonte unica
   ------------------------------------------------------------
   O molde e o da home: fundo claro, titulos em Playfair, sub-itens
   em caixa alta terracota. Antes cada pagina escrevia o proprio
   estilo e quase todas ficaram no marrom antigo
   (linear-gradient(160deg,#4A3B35,#241A17)), que a Lolly recusou.

   Carregar SEMPRE depois dos <style> da pagina, logo antes de
   </head>, para vencer por ordem:
     <link rel="stylesheet" href="/tsj-menu.css">

   Os valores sao hex literais de proposito. As variaveis de cor
   mudam de pagina para pagina (no Living in Purpose sao rosadas),
   e o menu precisa ler igual em todo o site.
   ============================================================ */

/* ---------- o painel ---------- */
.mobile-menu,
.tsj-menu{
  position:fixed;inset:0;z-index:80;
  background:rgba(253,251,245,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:5rem 8vw 3rem;
  opacity:0;pointer-events:none;transition:opacity .4s;
  overflow-y:auto;
}
.mobile-menu.open,
.tsj-menu.open{opacity:1;pointer-events:auto}

/* o LIP embrulha os itens num .tm-in; ele nao pode limitar a largura
   nem alinhar a esquerda, senao o menu deixa de ler como o da home */
.tsj-menu .tm-in{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;width:100%;max-width:none;text-align:center;
}

/* ---------- a etiqueta "Menu" ---------- */
.mobile-menu .mm-eyebrow{
  font-family:'Jost',sans-serif;letter-spacing:.36em;text-transform:uppercase;
  font-size:.62rem;color:#8A7358;margin-bottom:1.6rem;
}

/* ---------- os destinos principais ---------- */
.mobile-menu a,
.tsj-menu a{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:500;
  color:#33261A;text-decoration:none;padding:.5rem 0;transition:color .3s;
  letter-spacing:0;text-transform:none;border:none;background:none;
}
.mobile-menu a:hover,
.tsj-menu a:hover{color:#A85C2E}

/* os titulos de grupo sao links de mesmo peso dos destinos principais */
.mobile-menu a.mm-group,
.tsj-menu a.tm-group{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:500;
  color:#33261A;text-decoration:none;padding:.5rem 0;transition:color .3s;
}
.mobile-menu a.mm-group:hover,
.tsj-menu a.tm-group:hover{color:#A85C2E}

/* ---------- os sub-itens ---------- */
.mobile-menu a.mm-sub,
.tsj-menu a.tm-sub{
  font-family:'Jost',sans-serif;font-size:.68rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:#A85C2E;
  padding:.4rem 0;text-decoration:none;border:none;background:none;
}
.mobile-menu a.mm-sub:hover,
.tsj-menu a.tm-sub:hover{color:#33261A}

/* no LIP o sub-item tinha uma barrinha a esquerda; sai */
.tsj-menu a.tm-sub::before{content:none}

/* ---------- os rotulos de secao do LIP ---------- */
/* viram a mesma etiqueta discreta da home, nao mais o dourado */
.tsj-menu .tm-eyebrow{
  font-family:'Jost',sans-serif;letter-spacing:.36em;text-transform:uppercase;
  font-size:.62rem;color:#8A7358;margin:1.4rem 0 .3rem;display:block;text-align:center;
}
.tsj-menu .tsj-grupo{
  display:flex;flex-direction:column;align-items:center;width:100%;margin:0;
}

/* ---------- o botao de acao ---------- */
.mobile-menu .mm-cta,
.tsj-menu .tm-cta{
  font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid #A85C2E;color:#A85C2E;background:none;
  padding:.8rem 2rem;border-radius:999px;margin-top:1.4rem;text-decoration:none;
  transition:background .3s,color .3s;
}
.mobile-menu .mm-cta:hover,
.tsj-menu .tm-cta:hover{background:#A85C2E;color:#FDFAF2}

/* ---------- a pilula de idioma ---------- */
.mobile-menu .mm-lang,
.tsj-menu .tm-lang{
  display:flex;align-items:center;gap:8px;background:none;
  border:1px solid #EADFC8;border-radius:999px;padding:.55rem 1.1rem;color:#6E5E4E;
  font-family:'Jost',sans-serif;letter-spacing:.14em;font-size:.72rem;cursor:pointer;margin-top:1rem;
}
.mobile-menu .mm-lang svg,
.tsj-menu .tm-lang svg{width:13px;height:13px;opacity:.55}
.mobile-menu .mm-lang .on,
.tsj-menu .tm-lang .on{color:#A85C2E;font-weight:600}

/* ---------- o X de fechar ---------- */
.mobile-menu .mm-close, .mm-close,
.tsj-menu .tm-close{
  position:absolute;top:1.1rem;right:6vw;background:none;border:none;
  color:#33261A;font-size:1.8rem;line-height:1;cursor:pointer;opacity:.6;
}

/* ---------- o "voltar para a home" e a marca do topo, so no LIP ---------- */
.tsj-menu .tm-voltar{
  font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:#8A7358;text-decoration:none;padding:.4rem 0;margin-bottom:.6rem;
}
.tsj-menu .tm-voltar:hover{color:#A85C2E}
.tsj-menu .tm-topo{
  position:absolute;top:1.1rem;left:6vw;display:flex;align-items:center;gap:.5rem;
  font-family:'Playfair Display',serif;font-size:.9rem;font-weight:600;
  color:#33261A;text-decoration:none;padding:0;
}
.tsj-menu .tm-topo img{width:24px;height:24px;object-fit:contain}

/* ---------- limpezas dos restos de estilo antigo ---------- */
/* o LIP desenhava uma pilula em volta do "voltar" e um filete entre os
   grupos. A home nao tem nem um nem outro: quem separa e o espaco. */
.tsj-menu .tm-voltar{
  border:none;background:none;border-radius:0;
}
.tsj-menu .tsj-grupo,
.tsj-menu .tsj-grupo + .tsj-grupo{
  border:none;border-top:none;padding-top:0;
}
.tsj-menu .tsj-grupo + .tsj-grupo{margin-top:1.2rem}