/* =========================
   Base / tokens
   ========================= */
:root{
  --bs-body-color:#1f2937; /* slate-800 */
  --bs-body-bg:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5e9;

  /* Navbar pills */
  --nav-pill-text:#0b3b63;
  --nav-pill-bg:rgba(14,165,233,.10);
  --nav-pill-bd:rgba(14,165,233,.35);
  --nav-pill-hover-bg:rgba(14,165,233,.18);
  --nav-pill-hover-bd:rgba(14,165,233,.55);
  --nav-pill-active-bg:#0ea5e9;
  --nav-pill-active-bd:#0ea5e9;
  --nav-pill-active-tx:#fff;

  /* Hero / cards */
  --hero-blue:#0ea5e9;
  --hero-green:#a3e635;
}

html,body{ color:var(--bs-body-color); background:var(--bs-body-bg); }
body{ scroll-behavior:smooth; }

/* =========================
   Navbar + brand
   ========================= */

/* barra mais compacta */
.navbar.sticky-top{ padding-top:.20rem; padding-bottom:.20rem; }

/* links como “pills” */
.navbar .nav-link{
  color:var(--nav-pill-text);
  background:var(--nav-pill-bg);
  border:1px solid var(--nav-pill-bd);
  border-radius:.6rem;
  padding:.45rem .75rem;
  margin:.125rem .25rem;
  font-weight:500;
  line-height:1.25;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  background:var(--nav-pill-hover-bg);
  border-color:var(--nav-pill-hover-bd);
  color:var(--nav-pill-text);
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
.navbar .dropdown.show > .nav-link{
  background:var(--nav-pill-active-bg);
  border-color:var(--nav-pill-active-bd);
  color:var(--nav-pill-active-tx);
}

/* dropdown com o mesmo “feeling” */
.dropdown-menu{
  border:1px solid #e6f0fb;
  border-radius:.75rem;
  padding:.5rem;
  box-shadow:0 8px 24px rgba(14,165,233,.12);
}
.dropdown-item{ border-radius:.5rem; color:var(--nav-pill-text); }
.dropdown-item:hover,
.dropdown-item:focus{ background:var(--nav-pill-hover-bg); color:var(--nav-pill-text); }
.dropdown-item.active,
.dropdown-item:active{ background:var(--nav-pill-active-bg); color:var(--nav-pill-active-tx); }

/* Offcanvas (mobile) – manter o espaçamento */
.offcanvas .nav-link{ margin:.25rem 0; }

/* ===== Brand com símbolo + palavra ===== */
/* HTML:
<a class="navbar-brand d-flex align-items-center gap-2" href="index.html">
  <span class="logo-bg" aria-label="IAFlui"></span>
  <span class="brand-wordmark">iAFlui</span>
</a>
*/

.brand-wordmark{
  font-weight:800;
  font-size:1.5rem;     /* 1.4–1.8rem  */
  letter-spacing:.2px;
  color:#0c4a6e;
  line-height:1;
}

/* alternativa:  usar <img class="navbar-logo"> */
.navbar .navbar-logo{
  height:72px !important; width:auto !important; display:block; object-fit:contain;
}
@media (max-width:991.98px){
  .navbar .navbar-logo{ height:56px !important; }
  .brand-wordmark{ display:none; }       /* opcional: no mobile mostra só o símbolo */
  .logo-bg{ width:64px; height:48px; }   /* idem */
}
/* neutraliza limites herdados */
.navbar-brand img{ max-height:none !important; }

/* =========================
   Hero (banner com imagem + overlay)
   ========================= */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(200px, 24vh, 300px);
  background-image:url("../img/iaflui-hero.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:1px solid #eef2f7;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom right,
              rgba(14,165,233,.18), rgba(163,230,53,.12));
  pointer-events:none;
}
.hero.py-5{ padding-top:1rem !important; padding-bottom:1rem !important; }
.hero .lead{ color:var(--muted); }

/* =========================
   Cards (notícias)
   ========================= */
.card{
  background:linear-gradient(180deg,
              rgba(14,165,233,.10), rgba(163,230,53,.10));
  border:1px solid rgba(14,165,233,.28);
  border-radius:1rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(14,165,233,.16);
  border-color:rgba(14,165,233,.40);
}
.card .card-title a{ color:#0b3b63; text-decoration:none; }
.card .card-title a:hover{ text-decoration:underline; }
.card .card-footer{ background:transparent; border-top:0; }

/* Sidebar */
.sidebar .list-group-item{
  border:0; border-bottom:1px dashed #e5e7eb; padding:.6rem 0;
}

/* Footer */
.footer{ border-top:1px solid #eef2f7; }

/* =========================
   Back to top
   ========================= */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:1050;
  border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.back-to-top[hidden]{ display:none !important; }

/* símbolo (usa o PNG como background para “ignorar” margens do ficheiro) */


/* palavra ao lado */
.brand-wordmark{
  font-weight: 800;
  font-size: 1.5rem;   /* 1.4–1.8rem  */
  letter-spacing: .2px;
  color: #0c4a6e;
  line-height: 1;
}

@media (max-width: 991.98px){
    .brand-wordmark{ display: none; } /* opcional no mobile */
}

/* Mostra só a secção do idioma ativo dentro do MAIN */
main [data-lang] { display: none; }
main [data-lang].show { display: block; }

#searchResults .list-group-item h6{ color:#0c4a6e; }
#searchResults mark{ padding:0 .1em; border-radius:.2em; }

/* campo de pesquisa com ícone */
.search-wrap{ position: relative; }
.search-wrap .form-icon{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.search-wrap .form-control{ padding-left: 2rem; }


/* tamanho do logo na navbar */
:root { --logo-size: 104px; } /* ajustar aqui */

.logo-bg{
  display:inline-block;
  width: var(--logo-size);
  height: var(--logo-size);
  aspect-ratio: 1 / 1;                         /* garante quadrado */
  flex: 0 0 var(--logo-size);
  background-image: url("../img/iaflui-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;                    /* mostra o círculo inteiro */
  padding: 4px;                                /* respiro nas bordas */
  background-origin: content-box;              /* padding não recorta a imagem */
  /* image-rendering:-webkit-optimize-contrast; opcional */
}

@media (min-width: 992px){
  :root { --logo-size: 104px; }
}

/* Barra roxa cheia */
:root{
  --brand:#8e2ba6;         /* beringela */
  --brand-600:#741f8e;
  --brand-200:#e8d3f1;
  --link-teal:#1e7f99;     /* links azul-esverdeado como no mock */
}

/* Nav roxa */
.navbar-eggplant{
  background: var(--brand);
  border-bottom: 0;
}
.navbar-eggplant .nav-link{
  color:#fff !important;
  background:transparent;
  border:0;
  padding:.55rem .75rem;
  border-radius:.5rem;
}
.navbar-eggplant .nav-link:hover,
.navbar-eggplant .nav-link:focus{
  background: rgba(255,255,255,.12);
  color:#fff;
}
.navbar-eggplant .dropdown-menu{
  border:1px solid var(--brand-200);
  box-shadow:0 12px 24px rgba(142,43,166,.18);
}

/* Cards “clean” como no screenshot */
.card{
  background:#fff;
  border:2px solid var(--brand-200);
  border-radius:16px;
  box-shadow:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(142,43,166,.12);
  border-color:#d9b8ea; /* um tom acima */
}
.card .card-title a{ color:var(--link-teal); text-decoration:none; }
.card .card-title a:hover{ text-decoration:underline; }
.card .btn-link{ color:var(--link-teal); }

/* Esconder a linha “meta” (data/categoria) */
.post-meta{ display:none !important; }

/* Cartões da sidebar com a mesma borda lilás suave */
.sidebar .card{
  border:2px solid var(--brand-200);
  box-shadow:none;
}
.sidebar .list-group-item a{
  color:var(--link-teal);
  text-decoration:none;
}
.sidebar .list-group-item a:hover{ text-decoration:underline; }

/* “Sem categorias” */
.sidebar .badge{ background:#fff; border:2px solid var(--brand-200); color:#444; }

/* Estilo dos nomes/links na equipa */
.team a{
  color: var(--link-teal);           /* definido no tema iREUSE */
  text-decoration: underline;
  font-weight: 700;
}
.team a:hover{ text-decoration: none; }
.team .small{ line-height: 1.25; }


/* === iREUSE palette === */
:root{
  --brand-700:#6c1f77;
  --brand-600:#7a2386;
  --brand-500:#8a2ca2;
  --brand-400:#a75bc0;
  --brand-300:#c490d8;
  --brand-200:#e5d1ef;
  --brand-100:#f4ebfb;

  --link-teal:#157a8a;      /* títulos/links nos cards */
}

/* Navbar pills em beringela */
.navbar .nav-link{
  color:#fff;
  background:rgba(138,44,162,.18);
  border:1px solid rgba(138,44,162,.38);
}
.navbar .nav-link:hover{ background:rgba(138,44,162,.28); border-color:rgba(138,44,162,.55); }
.navbar .nav-link.active{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }

/* HERO mais suave */
.hero{
  background-image:url("assets/img/hero-ireuse.png"); /* mantém o que tens se quiseres */
  border-bottom:1px solid var(--brand-100);
}
.hero::before{
  background:linear-gradient(135deg,
    rgba(138,44,162,.12),
    rgba(21,122,138,.08)
  );
}

/* Cards brancos com bordo beringela e hover leve */
.card{
  background:#fff;
  border:1px solid var(--brand-200);
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(138,44,162,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform:translateY(-1px);
  border-color:var(--brand-300);
  box-shadow:0 12px 28px rgba(138,44,162,.12);
}
.card .card-title a{ color:var(--link-teal); text-decoration:none; font-weight:600; }
.card .card-title a:hover{ text-decoration:underline; }

/* Esconder meta (data/categoria) nos cartões */
.post-meta, .card .bi-calendar-event{ display:none !important; }

/* Sidebar cartões */
.sidebar .card{ border-color:var(--brand-200); }
.sidebar .list-group-item{ border:0; border-bottom:1px dashed #e5e7eb; padding:.6rem 0; }
.sidebar .badge{ display:none; } /* “Sem categorias” */

/* Pesquisa – botão em beringela */
#searchBtn, .sidebar .btn-primary{ background:var(--brand-600); border-color:var(--brand-600); }
#searchBtn:hover, .sidebar .btn-primary:hover{ background:var(--brand-700); border-color:var(--brand-700); }

/* Hero com imagem decorativa só no index */
.hero--rings{
  position: relative;
  overflow: hidden;
  background: none; /* garante que não fica a imagem antiga */
}
.hero--rings::after{
  content:"";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(56vw, 920px);
  height: min(56vw, 920px);
  background: url("../img/circulo_cortado.png") no-repeat right center / contain; /* <- caminho correto */
  pointer-events: none;
  opacity: 1;
}
.hero--rings .container{ position: relative; z-index: 1; }

@media (max-width: 991.98px){
  .hero--rings::after{
    width: 100vw;
    height: 100vw;
    right: -35vw;   /* puxa um pouco para fora no mobile */
    opacity: .25;   /* mais subtil no telemóvel */
  }
}

/* “Ler mais” com setinha */
.read-more{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  text-decoration:none;
}
.read-more .bi{
  font-size:1rem;
  transition:transform .15s ease, opacity .15s ease;
  opacity:.9;
}
.read-more:hover .bi{
  transform:translateX(2px);
  opacity:1;
}

/* “Artigos Recentes” com setinha */
.recent-link{
  text-decoration: none;
  gap: .5rem;
}
.recent-link .bi{
  font-size: 1rem;
  opacity: .9;
  transition: transform .15s ease, opacity .15s ease;
}
.recent-link:hover .bi{
  transform: translateX(2px);
  opacity: 1;
}

/* cor partilhada p/ “Ler mais” e “Artigos Recentes” */
:root{
  /* usa a  cor do “Ler mais”; fallback roxo-beringela */
  --link-accent: var(--brand-700, #6D2E8A);
  --link-accent-hover: var(--brand-800, #5a1e71);
}

/* garantir que “Ler mais” herda a mesma cor  */
.read-more{ color: var(--link-accent); }
.read-more:hover{ color: var(--link-accent-hover); }

/* links de Artigos Recentes com seta ANTES do texto */
.recent-link{
  text-decoration: none;
  color: var(--link-accent);
  gap: .25rem;
}
.recent-link:hover{
  color: var(--link-accent-hover);
}
.recent-link .bi{
  color: currentColor;            /* seta na mesma cor do link */
  font-size: 1rem;
  opacity: .95;
  transition: transform .15s ease, opacity .15s ease;
}
.recent-link:hover .bi{
  transform: translateX(2px);
  opacity: 1;
}