/* ==========================================================================
   Nós Somos — Blog (PT/EN)
   CSS adicional. NÃO substitui style.css — carrega depois dele.
   Paleta oficial da marca: #3d586b · #7a9eba · #a4b7c8 · #d3e0e9
                            #ffc154 · #f6f2ea · #f27e4f (CTA)
   ========================================================================== */

:root{
  --ns-dark:#3d586b; --ns-blue:#7a9eba; --ns-blue-2:#a4b7c8; --ns-blue-3:#d3e0e9;
  --ns-yellow:#ffc154; --ns-cream:#f6f2ea; --ns-coral:#f27e4f;
}

/* ---------- Grelha de artigos (índice) ---------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:28px; margin-top:10px;
}
.blog-card{
  background:#fff; border:1px solid var(--ns-blue-3); border-radius:22px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(61,88,107,.13); }

/* thumb — imagem já entregue recortada em 16:10 (1200x750);
   o CSS abaixo é reforço, para nunca distorcer mesmo que a fonte mude. */
.blog-thumb{ display:block; overflow:hidden; background:var(--ns-blue-3); line-height:0; }
.blog-thumb picture{ display:block; }
.blog-thumb img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  display:block; transition:transform .5s ease;
}
.blog-card:hover .blog-thumb img{ transform:scale(1.04); }

.blog-card-body{ padding:26px 28px 30px; display:flex; flex-direction:column; flex:1; }
.blog-card .kicker{
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ns-blue); margin-bottom:11px;
}
.blog-card h3{ font-size:21px; line-height:1.34; color:var(--ns-dark); margin:0 0 12px; }
.blog-card h3 a{ color:inherit; text-decoration:none; }
.blog-card h3 a:hover{ color:var(--ns-coral); }
.blog-card p{ font-size:15.5px; line-height:1.66; color:#5b6b78; margin:0 0 20px; }
.blog-card .read-more{
  margin-top:auto; font-weight:700; color:var(--ns-coral); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.blog-card .read-more:hover{ gap:13px; }

/* ---------- Hero do artigo ----------
   O .page-hero do site foi desenhado para títulos de 1 palavra ("Surf").
   Num artigo o título é uma frase — precisa de escala própria. */
.page-hero.post-hero h1{
  font-size:42px; line-height:1.2; max-width:900px; margin:0 auto 6px;
  text-transform:none; letter-spacing:-.01em;
}
.page-hero.post-hero .eyebrow{ margin-bottom:14px; }

/* ---------- Corpo do artigo ---------- */
.post-body{ padding:78px 0 40px; }
.post-body .container{ max-width:820px; }
.post-body h2{
  font-size:29px; line-height:1.3; color:var(--ns-dark);
  margin:52px 0 18px; font-weight:800;
}
.post-body h2:first-of-type{ margin-top:0; }
.post-body h3{ font-size:21px; color:var(--ns-dark); margin:34px 0 12px; font-weight:700; }
.post-body p{ font-size:17.5px; line-height:1.82; color:#4a5a66; margin:0 0 22px; }
.post-body strong{ color:var(--ns-dark); }
.post-body a{ color:var(--ns-coral); }

/* Imagem destacada do artigo (topo do corpo) — é o LCP da página */
.post-featured{
  margin:0 0 38px; border-radius:20px; overflow:hidden; line-height:0;
  background:var(--ns-blue-3);
}
.post-featured picture{ display:block; }
.post-featured img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
}

/* Bloco "Resposta direta" — destaque de topo */
.post-answer{
  background:var(--ns-cream); border-left:5px solid var(--ns-coral);
  border-radius:0 18px 18px 0; padding:26px 30px; margin:0 0 40px;
}
.post-answer p{ margin:0; font-size:18px; line-height:1.78; color:var(--ns-dark); }

/* FAQ */
.post-faq{ background:#fff; border:1px solid var(--ns-blue-3); border-radius:20px; padding:12px 28px; margin:26px 0 10px; }
.post-faq details{ border-bottom:1px solid var(--ns-blue-3); padding:18px 0; }
.post-faq details:last-child{ border-bottom:0; }
.post-faq summary{
  cursor:pointer; font-weight:700; color:var(--ns-dark); font-size:17px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.post-faq summary::-webkit-details-marker{ display:none; }
.post-faq summary::after{ content:"+"; color:var(--ns-coral); font-size:24px; line-height:1; }
.post-faq details[open] summary::after{ content:"–"; }
.post-faq details p{ margin:14px 0 0; font-size:16.5px; }

/* Próximo passo */
.post-next{
  background:var(--ns-blue-3); border-radius:20px; padding:30px 32px; margin:42px 0 0;
}
.post-next h2{ margin-top:0 !important; font-size:24px; }
.post-next p:last-child{ margin-bottom:0; }

/* ---------- Seletor de idioma ---------- */
.lang-switch{ display:inline-flex; align-items:center; gap:6px; margin-left:14px; }
.lang-switch a{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-decoration:none;
  color:var(--ns-dark); padding:5px 10px; border-radius:8px; line-height:1;
  border:1px solid var(--ns-blue-2);
}
.lang-switch a:hover{ color:var(--ns-coral); border-color:var(--ns-coral); }
.lang-switch a.is-active{ background:var(--ns-dark); color:#fff; border-color:var(--ns-dark); }
@media (max-width:991px){
  .lang-switch{ margin:12px 0 0; }
}

/* ---------- Responsivo ---------- */
@media (max-width:991px){
  .page-hero.post-hero h1{ font-size:32px; }
}
@media (max-width:767px){
  .page-hero.post-hero h1{ font-size:26px; line-height:1.26; }
  .post-body{ padding:52px 0 30px; }
  .post-body h2{ font-size:24px; margin:40px 0 14px; }
  .post-body h3{ font-size:19px; }
  .post-body p{ font-size:16.5px; line-height:1.76; }
  .post-featured{ margin-bottom:26px; border-radius:16px; }
  .post-answer{ padding:22px 24px; }
  .post-answer p{ font-size:16.5px; }
  .post-next{ padding:26px 24px; }
  .blog-grid{ grid-template-columns:1fr; gap:22px; }
  .blog-card-body{ padding:22px 22px 26px; }
}

/* ==========================================================================
   MENU — correções (vale para TODO o site: o blog.css é carregado em todas
   as páginas). 1) header fixo ao rolar  2) dropdown abre ao passar o rato
   ========================================================================== */

/* 1) HEADER FIXO — acompanha o scroll.
   Nota: `position:sticky` NÃO serve aqui — o header vive dentro de um
   <div class="position-relative"> com a altura exacta do header, por isso o
   sticky "acabava" mal esse pai saía do ecrã. Solução: o header passa a
   `fixed` e o pai fica como PLACEHOLDER da altura (86px desktop / 82px mobile),
   para o conteúdo não saltar. */
/* ⚠️ Na HOME o wrapper é `.surfing_banner_outer.position-relative` e contém
   header + HERO CAROUSEL. Usar `height` aqui ESMAGA o hero (sobrepõe tudo).
   `padding-top` empurra o conteúdo e serve os dois casos:
   · páginas internas (wrapper só com o header) -> fica com 86px de altura;
   · home (wrapper com header + hero)           -> hero desce 86px, intacto. */
.position-relative:has(> .header){ padding-top:86px; }
.header{
  position:fixed; top:0; left:0; right:0; z-index:1040;
  background:#fff; box-shadow:0 4px 18px rgba(61,88,107,.10);
}
@media (max-width:991px){
  .position-relative:has(> .header){ padding-top:82px; }
  /* menu aberto não pode ficar preso dentro dos 82px */
  .header .navbar-collapse{ background:#fff; }
}
/* âncoras (#sobre, #equipa…) não podem ficar escondidas atrás do header fixo */
html{ scroll-padding-top:96px; }

/* 2) Dropdown "Modalidades" — abre no hover (desktop), sem precisar de clique */
@media (min-width:992px){
  .navbar-nav .nav-item.dropdown > .dropdown-menu{
    display:block; opacity:0; visibility:hidden; pointer-events:none;
    margin-top:0; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    border:1px solid var(--ns-blue-3); border-radius:14px;
    box-shadow:0 12px 30px rgba(61,88,107,.15); padding:8px 0; min-width:190px;
  }
  /* ⚠️ O Bootstrap (data-toggle="dropdown" + jQuery) adiciona `.show` ao CLICAR
     e o menu ficava preso aberto — a queixa do Gil ("só fixa se clicar").
     Aqui o HOVER manda sempre: o `.show` do Bootstrap é neutralizado e o menu
     abre/fecha só com o rato, como no surfchurch.pt. */
  .navbar-nav .nav-item.dropdown > .dropdown-menu.show{
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  }
  /* `.is-open` é posto pelo ns-menu.js quando o rato PASSA por cima — e fica.
     Não usamos `:hover` para abrir, senão fecharia ao tirar o rato (o Gil quer
     que MANTENHA aberto). O `.show` do Bootstrap continua neutralizado acima. */
  .navbar-nav .nav-item.dropdown.is-open > .dropdown-menu,
  .navbar-nav .nav-item.dropdown.is-open > .dropdown-menu.show,
  .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  /* item activo destacado enquanto o menu está aberto */
  .navbar-nav .nav-item.dropdown.is-open > .dropdown-toggle{ color:var(--ns-coral); }
  /* ponte invisível: evita fechar ao mover o rato do link para o menu */
  .navbar-nav .nav-item.dropdown::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  }
  .navbar-nav .nav-item.dropdown{ position:relative; }
  .navbar-nav .dropdown-item{
    padding:9px 20px; font-weight:600; color:var(--ns-dark);
  }
  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item.active{ background:var(--ns-cream); color:var(--ns-coral); }
}

/* 3) Mobile — dropdown dentro do fluxo, sem sobrepor o conteúdo */
@media (max-width:991px){
  .navbar-nav .nav-item.dropdown > .dropdown-menu{
    position:static; float:none; width:100%; margin:6px 0 4px;
    border:0; border-left:3px solid var(--ns-blue-3); border-radius:0;
    box-shadow:none; padding:2px 0 2px 14px; background:transparent;
  }
  .navbar-nav .dropdown-item{ padding:9px 0; font-weight:600; }
  .navbar-collapse{ max-height:78vh; overflow-y:auto; }
}