/* ==========================================================================
   layout.css — cabeçalho, drawer mobile e rodapé
   Compartilhado por todas as páginas. O markup do header e do footer é
   idêntico byte a byte em todos os HTML (ver README, "Manutenção").
   ========================================================================== */

/* --- Cabeçalho ---------------------------------------------------------
   Transparente sobre o Hero no topo; opaco e com borda depois do primeiro
   scroll. A classe .is-stuck é aplicada por js/main.js.
   ----------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.header.is-stuck {
  background: var(--bg-blur);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Páginas internas não têm Hero atrás do header: começam opacas. */
.header--solid { background: var(--bg-blur); border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  width: 100%;
}

/* Assinatura em duas linhas: GIANLUCA em cima, COSTA menor e centralizado
   embaixo. A coluna do grid tem a largura da linha maior, então justify-items
   center alinha COSTA pelo eixo de GIANLUCA sem afetar o resto do cabeçalho. */
.brand {
  display: grid;
  justify-items: center;
  gap: .1875rem;
  font-family: var(--font-sans);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  line-height: 1;
}
.brand:hover { color: var(--text); }

.brand__nome {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .16em;
}
.brand__sobrenome {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--text-dim);
}
.brand:hover .brand__sobrenome { color: var(--gold); }

.header__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }

.nav__link {
  position: relative;
  padding-block: .5rem;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--text); }

/* Estado ativo: fio dourado de 1px. Nunca só a cor — o item ativo também
   carrega aria-current, conforme o requisito de acessibilidade. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav__link[aria-current]::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--text); }

.header__cta { display: flex; align-items: center; gap: .75rem; }
.header__cta .btn { padding: .5rem 1rem; min-height: 40px; }

/* --- Alternador do drawer ---------------------------------------------- */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger__bars { display: block; position: relative; width: 22px; height: 12px; }
.burger__bars::before,
.burger__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease);
}
.burger__bars::before { top: 0; }
.burger__bars::after  { top: 10.5px; }
.burger[aria-expanded="true"] .burger__bars::before { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { top: 5px; transform: rotate(-45deg); }

/* --- Drawer mobile ----------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  align-content: center;
  gap: var(--space-inner);
  padding: calc(var(--header-h) + 2rem) var(--margin-side) 2rem;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  /* visibility com 0s de duração e delay igual ao fade: ao abrir vira visible
     de imediato — o que torna os links focáveis já no primeiro frame, condição
     para o main.js mover o foco para dentro; ao fechar, só some depois do fade.
     Com visibility na transição normal, o valor computado ainda é hidden no
     frame da abertura e o focus() falha em silêncio. */
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.drawer.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t) var(--ease), visibility 0s linear 0s;
}

.drawer__nav { display: grid; gap: 1.25rem; }
.drawer__link {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--text);
  letter-spacing: var(--ls-title);
}
.drawer__link[aria-current] { color: var(--gold); }

/* Contato e currículo permanecem visíveis dentro do drawer. */
.drawer__foot { display: grid; gap: 1rem; justify-items: start; }
.drawer__foot .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .header__nav { display: none; }
  .header__cta .btn { display: none; }
  .burger { display: inline-flex; }
}

/* --- Rodapé ------------------------------------------------------------
   Três peças: assinatura e tagline à esquerda, direitos no meio, redes à
   direita. A navegação fica no cabeçalho; não se repete aqui.
   ----------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: var(--border);
  background: var(--bg);
}

/* 1fr auto 1fr, e não space-between: assim os direitos ficam centralizados na
   faixa mesmo com os blocos das pontas tendo larguras diferentes. */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem var(--gutter);
}

.footer__brand { display: grid; gap: .375rem; }

/* Mesmo estilo e tamanho do GIANLUCA do cabeçalho. */
.footer__nome {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}

.footer__tag {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--gold);
}

.footer__legal { text-align: center; }

.footer__social { display: flex; gap: .5rem; justify-self: end; }
.footer__social a {
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  border: var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold); }

.footer__legal {
  font-size: var(--fs-caption);
  color: var(--text-dim);
}

/* Abaixo de 1100px as três colunas não caibem sem quebrar a tagline: empilha, e
   empilhado tudo fica centralizado. Centrar acompanha o empilhamento em vez de
   valer só no celular — um rodapé em coluna alinhado à esquerda no tablet e
   centralizado no telefone seria inconsistência sem motivo. */
@media (max-width: 1100px) {
  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5rem;
  }
  .footer__brand { justify-items: center; text-align: center; }
  .footer__legal { text-align: center; }
  .footer__social { justify-self: center; }
}