/* BASE (desktop) */
header{
  position: fixed; top:0; left:0; width:100%;
  background:#000; color:#fff;
  padding: 20px clamp(16px, 5vw, 102px);
  z-index:1000;
}

.header-container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; /* se faltar espaço, nav pode passar para 2ª linha */
}

/* Título: usa ellipsis em médios e substitui por curto em mobile */
.headerTexto { font-size: clamp(18px, 2.2vw, 24px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.header-nav{
  display:flex; align-items:center; gap: 0 12px; flex-wrap:wrap;
}

.header-nav a{
  margin:0; padding:.25rem .25rem;
  text-decoration:none; color:#fff; font-weight:700; position:relative; display:inline-block;
  transition: color .3s ease, transform .3s ease;
}
.header-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:#f00; transition:width .3s ease;
}
.header-nav a:hover, .header-nav a:focus { transform:none; } /* evitar "saltar" e empurrar layout */
.header-nav a:hover::after, .header-nav a:focus::after, .header-nav a.active::after { width:100%; }

.menu-toggle{ display:none; cursor:pointer; font-size:1.6rem; background:transparent; border:0; color:#fff; line-height:1; }



/* ---------- MOBILE (<= 768px) ---------- */
/* ------ COLAPSAR NAV MAIS CEDO (<= 950px) ------ */
@media (max-width: 1100px){
  /* evita 2ª linha — como o nav vai colapsar, não precisamos de wrap */
  .header-container{ flex-wrap: nowrap; }

  /* título curto */
  .headerTexto span{ display:none; }
  .headerTexto::after{
    content:"O TEMPLO";
    font-size:20px; font-weight:700;
  }

  /* mostra o toggle e esconde a nav por defeito */
  .menu-toggle{ display:block; }

  .header-nav{
    display:none;                 /* colapsado */
    position:absolute;
    top:100%; left:0; right:0;
    background:#111;
    border-top:1px solid #222;
    padding:8px 12px;
    flex-direction:column;
    gap:4px;
  }
  .header-nav a{
    padding:10px 6px;
    font-size:1rem;
    width:100%;
  }
  .header-nav.active{ display:flex; } /* quando clicas no toggle */
  
}


/* ---------- EXTRA PEQUENOS (<= 360px) ---------- */
@media (max-width: 360px){
  .headerTexto::after{ content:"TEMPLO"; } /* ainda mais curto se for preciso */
}

/* Compensar header fixo (aplica no teu layout global, não precisa ser aqui):
   body { padding-top: var(--header-h); } — ou usa margem no primeiro bloco */