/* ---------------------------------------------------------------------------
 * Cabeçalho — o mesmo nas três páginas (index.html, projetos.html,
 * projeto.html).
 *
 * Estava escrito por inteiro dentro de cada uma delas, com um comentário em
 * cada a lembrar "ao mexer aqui, mexer também nas outras duas". Numa única
 * sessão foi preciso repetir a mesma alteração três vezes, e por duas vezes
 * seguidas — primeiro o tamanho da letra do menu, depois a caixa do botão de
 * contacto. Passou a viver aqui.
 *
 * O que diferia de página para página entra agora por --header-superficie: a
 * cor da faixa que aparece com o scroll, e a do painel do menu em telemóvel.
 * O index usa o creme do site (é o fundo dele), as outras duas usam branco.
 * Vai em partes R,G,B porque a mesma cor é usada com transparências
 * diferentes. Sem ninguém a definir a variável, fica branco.
 *
 * As restantes variáveis (--ink, --paper, --stone, --stone-line, --sans) vêm
 * do :root de cada página.
 * ------------------------------------------------------------------------ */

header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* Altura fixa: antes o padding passava de 26px a 16px com o scroll, o que
     obrigava a recalcular o layout a cada fotograma da transição. Agora só
     mudam fundo e borda (propriedades que não mexem no layout). */
  padding:20px 0;
  transition:border-color .5s ease;
  border-bottom:1px solid transparent;
}

/* O logótipo e o menu alinham-se pela mesma largura e margens do resto do
   site (.wrap), em vez de terem recuo próprio — sem isto ficavam mais perto
   da margem do ecrã do que o conteúdo por baixo, em janelas largas. */
header .wrap{display:flex;align-items:center;justify-content:space-between;}

/* O desfoque vive numa camada própria (::before) e não no <header>: um
   backdrop-filter no header torná-lo-ia a "containing block" dos seus filhos
   position:fixed — incluindo o menu de telemóvel — prendendo-o dentro da
   faixa fina do cabeçalho em vez de cobrir o ecrã todo. Era exatamente isto
   que impedia o menu de telemóvel de aparecer. */
header::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(var(--header-superficie,255,255,255),0);
  transition:background .5s ease, backdrop-filter .5s ease;
}
header.scrolled{border-bottom:1px solid var(--stone-line);}
header.scrolled::before{
  background:rgba(var(--header-superficie,255,255,255),.86);
  backdrop-filter:blur(10px);
}

/* ---------- marca ---------- */
.brand-mark{display:flex;align-items:center;gap:14px;}
.brand-mark img.icon{height:26px;width:auto;filter:invert(0);transition:filter .4s ease;}
.brand-mark .name{
  font-size:.86rem;letter-spacing:.14em;font-weight:700;text-transform:uppercase;
  color:var(--ink);transition:color .4s ease;
}
.brand-mark .name em{
  display:block;font-style:italic;font-family:var(--sans);font-weight:400;
  letter-spacing:.02em;text-transform:none;font-size:.78rem;color:var(--stone);
}

/* ---------- menu ---------- */
nav.links{display:flex;gap:clamp(18px,2.6vw,38px);align-items:center;}
nav.links a{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ink);position:relative;padding-bottom:4px;transition:color .4s ease;
}
nav.links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
nav.links a:hover::after{transform:scaleX(1);}
/* O "Contactos" é um item de menu como os outros: sem caixa à volta e com o
   mesmo sublinhado a crescer no hover. A classe .cta continua no HTML — já
   não pinta nada, mas é por ela que o JS encontra este link para lhe aplicar
   o "mostrar no site" do admin. */
.nav-toggle{display:none;}

/* ---------- por cima de fundo escuro ----------
   Só o index começa com o cabeçalho sobre o hero escuro. Nas outras páginas
   nenhum elemento leva .on-dark, por isso estas regras ficam simplesmente
   sem efeito — assim este ficheiro não precisa de saber em que página está. */
header.on-dark .brand-mark img.icon{filter:brightness(0) invert(1);}
header.on-dark .brand-mark .name{color:var(--paper);}
header.on-dark nav.links a{color:var(--paper);}

/* ---------- telemóvel ---------- */
@media (max-width:900px){
  nav.links{
    position:fixed;inset:0;background:rgb(var(--header-superficie,255,255,255));
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:0 32px;gap:6px;transform:translateX(100%);
    transition:transform .5s ease, visibility 0s .5s;z-index:99;
    /* Fechado, o painel está fora do ecrã mas os links continuavam a receber
       foco por Tab (e a ser lidos): visibility tira-os, depois da transição. */
    visibility:hidden;
  }
  .brand-mark{min-height:44px;}
  nav.links.open{transform:translateX(0);visibility:visible;transition:transform .5s ease, visibility 0s;}
  /* Menu aberto: a página por baixo não deve deslizar. */
  body:has(nav.links.open){overflow:hidden;}
  nav.links a{font-size:1.1rem;padding:12px 0;}
  /* O .on-dark põe o texto do menu a claro para ter contraste sobre o hero,
     mas o painel aberto é sempre de fundo claro — sem esta regra o texto
     ficava invisível enquanto não se fizesse scroll. */
  header.on-dark nav.links.open a{color:var(--ink);}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    background:none;border:none;cursor:pointer;z-index:101;
    /* alvo tátil mínimo de 44x44 */
    width:44px;height:44px;margin-right:-11px;padding:0;
  }
  .nav-toggle span{width:22px;height:1.5px;background:var(--ink);transition:background .4s ease,transform .3s ease,opacity .2s ease;}
  /* menu aberto: os três traços viram um X (fecha o menu) */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  header.on-dark .nav-toggle span{background:var(--paper);}
  /* Com o painel aberto o fundo é claro, por isso os três traços têm de ser
     escuros mesmo em .on-dark. */
  nav.links.open ~ .nav-toggle span, .nav-toggle.open span{background:var(--ink) !important;}
}