/* ── Fontes do header — Ringbearer (a fonte da banda) ─────────────────
   Acrescentar ao fim do site.css, ou manter à parte e carregar depois.
   O site.css base põe o header em "Cinzel"; isto sobrepõe-no com a fonte
   da banda no brand e no menu. O @font-face 'Ringbearer' está no fonts.css. */
.site-header .brand {
  font-family: 'Ringbearer', 'Cinzel', Georgia, serif;
  letter-spacing: .06em;
}
.site-header .nav a,
.site-header .mobile-panel a {
  font-family: 'Ringbearer', 'Cinzel', Georgia, serif;
  letter-spacing: .05em;
}

/* ── Cartas: "Ver história" é <a>, não <button> ──────────────────────
   No template era um <button> morto (não levava a lado nenhum). O plugin
   gera um <a> para a história da música, mas o site.css só estiliza
   `.back button` — sem isto o link sairia sem estilo nenhum ao lado do
   botão "Ouvir". Copia o mesmo aspeto. */
.back .buttons a {
  flex: 1;
  border: 1px solid #9a4d2f;
  background: #160d08;
  padding: 8px 5px;
  font-size: .68rem;
  text-transform: uppercase;
  color: inherit;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Grelha de ícones: acompanha o nº de atalhos ─────────────────────
   O site.css tem `.icon-grid{grid-template-columns:repeat(7,1fr)}` — fixo
   em 7. Se a banda puser 5 ou 9 atalhos no backoffice, a grelha parte-se.
   O plug_atalhos escreve --n com o número real; 7 continua a ser o valor
   por omissão, por isso nada muda no caso normal.
   As media queries do site.css (4 e 2 colunas) vêm depois e continuam a
   ganhar em ecrãs estreitos. */
.icon-grid { grid-template-columns: repeat(var(--n, 7), 1fr) }

/* O .mobile-panel só tinha display:none dentro do @media(max-width:1120px);
   acima disso ficava sem regra e aparecia por cima do menu no desktop. */
.mobile-panel { display: none }


/* ── Header do mockup: | menus esq | PICÄ TUMILHO | menus dir | redes | ──
   A marca ocupa 40–50% da largura (6vw × ~12 carateres ≈ 45vw) e os menus
   colam-se a ela: a coluna esquerda alinha à direita, a direita à esquerda,
   e as redes empurram-se para a ponta. */
.site-header .nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1.6rem);
}
.site-header .brand {
  /* Calculado para a linha caber TODA: logo (~90px) + 4 itens de menu de
     cada lado + redes. "PICÄ TUMILHO" tem ~12 carateres a ~0.62em/char em
     Ringbearer → 3.4vw dá ~25vw à marca e sobra para o resto. O clamp trava
     nos extremos; os menus encolhem ligeiramente em ecrãs médios. */
  font-size: clamp(1.5rem, 3.4vw, 3.2rem);
  line-height: .95;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 1400px) {
  .site-header .nav-left a,
  .site-header .nav-right a { font-size: .78rem; letter-spacing: .03em }
}
.site-header .nav-left  { display: flex; justify-content: flex-end;   gap: clamp(.5rem, 1.4vw, 1.3rem) }
.site-header .nav-right { display: flex; justify-content: flex-start; gap: clamp(.5rem, 1.4vw, 1.3rem); align-items: center }
/* As redes + o ♥ "Gosto": 3 por linha (o header é alto → 2 linhas de 3),
   encostadas à direita, na mesma posição de antes. */
.site-header .social {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: .5rem;
  align-items: center;
  justify-items: center;
}

/* Redes e botão Gosto partilham o mesmo disco (Font Awesome, paleta do site) */
.site-header .social a,
.site-header .social .gosto {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  border: 1px solid #6b4a22;
  color: #d8a244;
  font-size: .85rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s;
}
.site-header .social a:hover,
.site-header .social .gosto:hover { transform: translateY(-2px); border-color: currentColor }
.site-header .social a.yt:hover { color: #ff4433 }
.site-header .social a.fb:hover { color: #7aa7ff }
.site-header .social a.ig:hover { color: #ff7a9c }
.site-header .social a.sp:hover { color: #4fd66a }
.site-header .social a.tk:hover { color: #7ae6e2 }
.site-header .social .gosto:hover { color: #e3342f }

/* ♥ Gosto — estado "já gostei" (comum ao header e ao painel) */
.gosto.ativo {
  color: #e3342f !important;
  border-color: #e3342f !important;
  background: rgba(227, 52, 47, .16) !important;
  cursor: default;
}
.gosto.ativo:hover { transform: none !important }
/* contador: selo pequeno no canto do coração, só quando > 0 */
.gosto .gosto-n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #e3342f;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  font-family: 'Cinzel', serif;
}
.gosto .gosto-n[hidden] { display: none }

/* ── Menu transparente: a imagem do slider vê-se através ─────────────── */
.site-header {
  background: linear-gradient(rgba(8, 5, 3, .52), rgba(8, 5, 3, .18) 78%, transparent) !important;
  backdrop-filter: blur(2px);
  box-shadow: none;
}
.site-header.scrolled {
  background: linear-gradient(rgba(8, 5, 3, .88), rgba(8, 5, 3, .72)) !important;
  backdrop-filter: blur(6px);
}


/* ── Menu MOBILE: logo | PICÄ TUMILHO | ☰ ────────────────────────────────
   Bloco ÚNICO do header mobile (o site.css tem regras antigas em conflito;
   estas ganham por especificidade `.site-header …`, por isso não é preciso
   mexer no site.css).

   Correções desta versão:
   1. Barra em 3 zonas com colunas laterais iguais (1fr auto 1fr) → o título
      fica centrado no ECRÃ, não na coluna, mesmo com logo e ☰ de larguras
      diferentes (deixa de aparecer colado/sobreposto ao logo).
   2. Logo, título e ☰ sobem para z131/132 → ficam SEMPRE por cima do painel
      aberto (o painel é z120). Antes só o ☰ subia; logo e título ficavam
      tapados quando o menu abria.
   3. O painel arranca do topo e os itens começam por baixo da barra. */

/* o painel: fixo, a ecrã inteiro, no topo da pilha do site */
.mobile-panel {
  z-index: 120;
  position: fixed;
  inset: 0 0 auto 0;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 5.2rem 1.4rem 2.2rem;
  background: linear-gradient(rgba(8, 5, 3, .97), rgba(8, 5, 3, .93));
  border-bottom: 1px solid #6b4a22;
}
.mobile-panel.open { display: flex }
.mobile-panel a { font-size: 1.05rem }
.mobile-panel .social-mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(107, 74, 34, .5);
}
.mobile-panel .social-mobile a,
.mobile-panel .social-mobile .gosto {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  border: 1px solid #6b4a22;
  color: #d8a244;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 1120px) {
  /* a barra em 3 colunas: 1fr | marca | 1fr (lados iguais = marca centrada) */
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .55rem;
    padding: .35rem .8rem;
    z-index: 121;                 /* a barra acima do painel (z120) */
  }

  /* 1ª âncora = logo: à esquerda, no fluxo, pequeno e por cima do painel */
  .site-header > a:first-child {
    grid-column: 1;
    justify-self: start;
    position: relative;
    z-index: 131;
    display: block;
    flex: none;
  }
  .site-header .brand-logo {
    position: static !important;
    width: 52px;
    height: auto;
    max-height: 52px;
    transform: none !important;
  }

  /* invólucro do menu = célula central; no mobile só mostra a marca */
  .site-header .nav {
    grid-column: 2;
    display: flex;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 131;                 /* título por cima do painel */
  }
  .site-header .nav-left,
  .site-header .nav-right { display: none !important }
  .site-header .brand {
    font-size: clamp(1.25rem, 6vw, 2rem);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ☰ à direita; vira ✕ quando aberto; sempre clicável, acima de tudo */
  .site-header .mobile-menu {
    grid-column: 3;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid #6b4a22;
    border-radius: 6px;
    color: #d8a244;
    cursor: pointer;
    position: relative;
    z-index: 132;
    font-size: 0;                 /* o glifo vem do ::before para poder trocar */
  }
  .site-header .mobile-menu::before { content: "☰"; font-size: 1.25rem }
  .site-header .mobile-menu[aria-expanded="true"]::before { content: "✕" }

  /* o painel arranca do topo; os itens começam por baixo da barra */
  .mobile-panel { padding-top: 4.4rem }
}