@media (min-width: 992px) {
  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}

.btn-custom:hover {
  border-color: #7746c2;
  background-color: #7746c2;
  color: #ffffff;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Força o burger a branco (iOS Safari friendly) */

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  --bs-navbar-toggler-border-color: rgba(255,255,255,1) !important;
}

.navbar .navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg) !important;
}

/* Remove o ícone padrão */

.navbar-animated .navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 24px;
  height: 18px;
}

/* Container do ícone (o <span class="navbar-toggler-icon">) */

.navbar-animated .navbar-toggler-icon {
  background-image: none !important;
  width: 24px;
  height: 18px;
  position: relative;
  display: inline-block;
}

/* Linha do meio + linhas de cima e baixo via box-shadow */

.navbar-animated .navbar-toggler-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgb(255,255,255);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 -8px 0 rgb(255,255,255), 0 8px 0 rgb(255,255,255);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms cubic-bezier(.2,.9,.2,1);
}

/* A navbar serve de referência para o dropdown */

@media (max-width: 991.98px) {
  .navbar {
    position: relative;
  }
}

/* 1) A CAIXA BRANCA: ocupa o ecrã todo */

@media (max-width: 991.98px) {
  .collapse-full {
    position: fixed;
    left: 0;
    right: 0;
    top: 118px;
    width: 100vw;
    margin: 0;
    background: #fff;
    z-index: 2000;
    border-top: 1px solid rgba(0,0,0,.08);
  }
}

/* 2) O TEXTO: mantém o alinhamento/margens */

@media (max-width: 991.98px) {
  .collapse-full .navbar-nav {
    padding: 18px 24px 22px;
    width: 100%;
  }
}

/* Opcional: o botão "Donativos" e links não encostam */

@media (max-width: 991.98px) {
  .collapse-full .nav-link {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Navbar tem de ser o “referencial” */

@media (max-width: 991.98px) {
  .navbar {
    position: relative;
    overflow: visible;
  }
}

/* O painel do menu continua “normal”, colado à navbar */

@media (max-width: 991.98px) {
  .collapse-full {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /*IMPORTANTE: não damos background aqui;*/
    background: transparent;
    z-index: 2000;
  }
}

/* O FUNDO branco é que vai full-bleed */

@media (max-width: 991.98px) {
  .collapse-full::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: -1;
  }
}

/* O texto mantém o alinhamento actual */

@media (max-width: 991.98px) {
  .collapse-full .navbar-nav {
    padding: 18px 24px 22px;
    width: 100%;
  }
}

/* Segurança extra para evitar micro-scroll horizontal no iPhone */

@media (max-width: 991.98px) {
  html, body {
    overflow-x: hidden;
  }
}

/* Durante a animação pode estar hidden, mas quando está aberto tem de permitir crescimento */

@media (max-width: 991.98px) {
  .navbar-collapse.show {
    overflow: visible !important;
    height: auto !important;
  }
}

/* Quando está a animar (collapsing), mantém hidden para não “vazar” */

@media (max-width: 991.98px) {
  .navbar-collapse.collapsing {
    overflow: hidden !important;
  }
}

/* IMPORTANTÍSSIMO: dropdown no mobile tem de entrar no fluxo */

@media (max-width: 991.98px) {
  .navbar-collapse .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100%;
    margin: 0;
    padding-left: 12px;
    /*opcional: indent;*/
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 991.98px) {
  .collapse-full {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(0,0,0,0.06);
  }
}

body {
  padding-top: 80px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}

/* Substitui o SVG do Bootstrap por linhas desenhadas em CSS */

.navbar-toggler-icon {
  background-image: none !important;
  width: 26px;
  height: 18px;
  position: relative;
  display: inline-block;
}

/* Linha do meio + as outras duas via box-shadow */

.navbar-toggler-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgb(255,255,255);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 -8px 0 rgb(255,255,255), 0 8px 0 rgb(255,255,255);
  transition: transform 360ms cubic-bezier(.22,1,.36,1), box-shadow 360ms cubic-bezier(.22,1,.36,1);
}

/* Segunda diagonal (aparece no estado aberto) */

.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgb(255,255,255);
  border-radius: 2px;
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Estado aberto (Bootstrap alterna aria-expanded) */

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  box-shadow: none;
  transform: translateY(-50%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  opacity: 1;
}

/* Mata o ícone SVG do Bootstrap (muito importante para evitar duplicação) */

.navbar {
  --bs-navbar-toggler-icon-bg: none !important;
}

/* Desenha o burger com CSS */

.navbar-toggler-icon {
  background-image: none !important;
  background: none !important;
  width: 26px;
  height: 18px;
  position: relative;
  display: inline-block;
}

/* Linha do meio + topo/baixo via box-shadow */

.navbar-toggler-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgb(255,255,255);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 -8px 0 rgb(255,255,255), 0 8px 0 rgb(255,255,255);
  transition: transform 360ms cubic-bezier(.22,1,.36,1), box-shadow 360ms cubic-bezier(.22,1,.36,1);
}

/* Segunda diagonal para formar o X */

.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgb(255,255,255);
  border-radius: 2px;
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Aberto -> X */

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  box-shadow: none;
  transform: translateY(-50%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  opacity: 1;
}

html {
  scroll-behavior: smooth;
}

/* Offset para qualquer elemento que tenha id (âncoras) */

[id] {
  scroll-margin-top: 110px;
}