/* ====== FONTES ====== */
@import url('https://fonts.cdnfonts.com/css/sugar-pie');

@font-face {
  font-family: 'Agrandir';
  src: url('fonts/Agrandir-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* ====== TOKENS DA MARCA ====== */
:root{
  --primary:   #3F7D20;   /* verde principal */
  --primary-900:#2F5C18;
  --secondary: #72B01D;   /* verde claro/acento */
  --title:     #F6D000;   /* amarelo títulos */
  --subtitle:  #FF9100;   /* laranja subtítulos/realce */
  /* translúcidos usados pelo slider overlay */
  --primary-trans: rgba(63,125,32,0.08);
  --subtitle-trans: rgba(255,145,0,0.08);
  --light:     #FFF1D3;
  --paper:     #FFFBF0;   /* fundo “papel” do guia */
  --ink:       #1B1405;   /* texto/preto suave */
  --muted:     #8C8778;

  --radius-lg: 20px;
  --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10);
}

/* ====== BASE ====== */
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  padding-top:56px;
  background-color:var(--paper);
  color:var(--ink);
  font-family:'Agrandir',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height:1.55;
}

/* Hierarquia de títulos no estilo do guia */
h1,h2{ font-family:'Sugar Pie', cursive; letter-spacing:.2px; }
h1{ color:var(--title); font-size:clamp(2.2rem, 3vw, 3rem); }
h2{ color:var(--subtitle); font-size:clamp(1.6rem, 2.2vw, 2.2rem); }
h3,h4,h5,h6{ color:var(--secondary); font-weight:700; }

/* ====== LINKS ====== */
a{ color:var(--primary); }
a:hover{ color:var(--secondary); }

/* ====== NAV PILLS/SCROLLSPY ====== */
.nav-pills .nav-link{ border-radius:10px; }
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
  background:linear-gradient(180deg,var(--subtitle), #FFB74A);
  color:#231800;
  box-shadow:var(--shadow-sm);
}

/* ====== NAVBAR (menu principal) ====== */
.menu{
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 25%, var(--light) 100%);
  border-bottom: 3px solid rgba(0,0,0,.04);
  backdrop-filter: saturate(140%) blur(6px);
}
.navbar-dark .navbar-toggler{ border-color:transparent; }
.navbar-brand{
  color:var(--ink);
  font-weight:800;
  letter-spacing:.3px;
  display:flex; align-items:center; gap:.6rem;
}
.navbar-brand .brand-text{
  font-family:'Sugar Pie', cursive;
  color:var(--title);
  text-shadow:0 2px 0 rgba(0,0,0,.06);
}
.navbar-brand:hover{ color:var(--ink); }
.navbar-nav{ --bs-nav-link-hover-color: var(--subtitle); }
.nav-link{
  color:var(--ink);
  font-weight:700;
  text-transform:uppercase;
  font-size:.92rem;
  letter-spacing:.6px;
  padding-inline:.9rem !important;
  position:relative;
}
.nav-link:hover{ color:var(--subtitle); }
.nav-link:focus{ color:var(--subtitle); outline: none; }

.navbar-nav .nav-link.active::after,
.navbar-nav .show>.nav-link::after{
  content:'';
  position:absolute; left:10%; right:10%; bottom:.2rem;
  height:3px; border-radius:2px;
  background:var(--subtitle);
}

/* ====== DROPDOWN / MEGAMENU ====== */
.dropdown-menu{
  --bs-dropdown-bg: #fff;
  --bs-dropdown-link-active-bg: rgba(255,145,0,.08);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow: var(--shadow-md);
  padding: .75rem;
}
.dropdown-header{
  color:var(--primary);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.8px;
}
.dropdown-item{
  border-radius:10px;
  font-weight:600;
}
.dropdown-item:hover{
  background: rgba(255,145,0,.10);
}

/* Mobile: dropdown ocupa largura total e “cola” no topo do menu */
@media (max-width: 991.98px){
  .dropdown-menu{
    width: 100% !important;
    border-radius: 12px;
  }
}
/* === Navbar dropdown (estável: sem glitch e sem animação) === */
/* Desktop com mouse/trackpad: abre no hover; mobile/tablet continua no click */

/* Evita corte do menu por overflow dos wrappers */
.navbar, .menu { overflow: visible; }


/* ===== TOC hierárquico (H1 > H2 > H3) ===== */
#page-navbar.page-toc{
  max-height: calc(100vh - 140px);
  overflow: auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-left:5px solid var(--subtitle);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
#page-navbar h5{
  font-family:'Sugar Pie', cursive;
  color:var(--subtitle);
  margin-bottom:.35rem;
}

/* reset: por padrão, NENHUM bullet */
#page-nav-links .nav-link{
  position: relative;
  border-radius:10px;
  padding:.28rem .5rem;
  color: var(--muted);
  font-weight:700;
}
#page-nav-links .nav-link::before{ content:none; }

/* nível 1 (H1): sem bullet, maiorzinho */
#page-nav-links .toc-link.level-1{
  font-size:.95rem;
  color: var(--ink);
  padding-left:.5rem;
}

/* nível 2 (H2): bullet e leve indent + borda guia */
#page-nav-links .toc-sub.level-2{
  margin-left:.35rem;
  border-left: 2px dashed rgba(0,0,0,.08);
  padding-left:.5rem;
}
#page-nav-links .toc-link.level-2{
  font-size:.88rem;
  padding-left:1.1rem;
}
#page-nav-links .toc-link.level-2::before{
  content:'•';
  position:absolute; left:.5rem; top:.12rem; line-height:1;
  color: var(--subtitle);
}

/* nível 3 (H3): traço, mais leve e mais indent */
#page-nav-links .toc-sub.level-3{
  margin-left:.65rem;
  border-left: 2px dotted rgba(0,0,0,.06);
  padding-left:.45rem;
}
#page-nav-links .toc-link.level-3{
  font-size:.82rem;
  padding-left:1.25rem;
  color: color-mix(in srgb, var(--muted) 85%, var(--ink) 15%);
}
#page-nav-links .toc-link.level-3::before{
  content:'–';
  position:absolute; left:.65rem; top:.05rem; line-height:1;
  color: color-mix(in srgb, var(--muted) 80%, var(--subtitle) 20%);
}

/* estados */
#page-nav-links .nav-link:hover{
  background: rgba(255,145,0,.08);
  color:#231800;
}
#page-nav-links .nav-link.active,
#page-nav-links .show>.nav-link{
  background: rgba(255,145,0,.12);
  color:#231800;
  box-shadow: var(--shadow-sm);
}
/* === TOC: sem rolamento + subtítulos menores + quebra de linha === */

/* remove altura/scroll internos do TOC */
#page-navbar.page-toc{
  max-height: none;         /* estava calc(100vh - 140px) */
  overflow: visible;        /* estava auto */
}

/* permite quebrar linha e evita scroll horizontal */
#page-nav-links .nav-link{
  white-space: normal;      /* quebra em múltiplas linhas */
  overflow-wrap: anywhere;  /* força quebra em palavras longas */
  word-break: normal;
  line-height: 1.25;
}

/* tamanhos fixos (menores) para subtítulos */
#page-nav-links .toc-link.level-2{  /* H2 */
  font-size: .82rem;
  padding-top: .22rem;
  padding-bottom: .22rem;
}
#page-nav-links .toc-link.level-3{  /* H3 */
  font-size: .78rem;
  padding-top: .18rem;
  padding-bottom: .18rem;
  color: color-mix(in srgb, var(--muted) 85%, var(--ink) 15%);
}

/* nível 1 (H1) permanece destacado e sem bullet */
#page-nav-links .toc-link.level-1{
  font-size: .95rem;
  color: var(--ink);
}

/* garante que bullets só apareçam nos níveis 2 e 3 */
#page-nav-links .nav-link::before{ content: none; }
#page-nav-links .toc-link.level-2::before{
  content:'•';
  position:absolute; left:.5rem; top:.12rem; line-height:1;
  color: var(--subtitle);
}
#page-nav-links .toc-link.level-3::before{
  content:'–';
  position:absolute; left:.65rem; top:.05rem; line-height:1;
  color: color-mix(in srgb, var(--muted) 80%, var(--subtitle) 20%);
}

/* mantém a estrutura visual/indentação */
#page-nav-links .toc-sub.level-2{
  margin-left:.35rem; border-left: 2px dashed rgba(0,0,0,.08); padding-left:.5rem;
}
#page-nav-links .toc-sub.level-3{
  margin-left:.65rem; border-left: 2px dotted rgba(0,0,0,.06); padding-left:.45rem;
}


/* ====== CALLOUTS ====== */
.bd-callout{
  padding:1.25rem; margin:1.25rem 0;
  border:1px solid #e9ecef; border-left-width:.5rem;
  border-radius:16px; background:#fff;
  box-shadow: var(--shadow-sm);
}
.bd-callout h4{ margin-bottom:.75rem; }
.bd-callout-info{    border-left-color: var(--secondary); }
.bd-callout-warning{ border-left-color: var(--subtitle); }
.bd-callout-danger{  border-left-color: #d9534f; }

/* ====== CARDS DE MEMBROS ====== */
.member-card .card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  background:#fff;
}
.member-card .card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.member-card-img-container{
  aspect-ratio:1/1; overflow:hidden; border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
  position:relative;
  background: linear-gradient(180deg, var(--paper), #fff);
}
.member-card-img-container img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.member-card .card-title{
  color:var(--primary);
  font-weight:800;
}
.member-card .card-text{
  color:#4b463a;
}

/* ====== FOOTER ====== */
.footer{
  background:
    radial-gradient(1200px 300px at 20% -10%, rgba(255,200,64,.18), transparent 60%),
    linear-gradient(180deg, var(--primary-900), var(--primary));
  color:#fff;
  border-top: 3px solid var(--title); /* thinner */
  padding-top: .5rem; /* reduce vertical space */
  padding-bottom: .5rem;
  position: relative;
  left: 0; right: 0; width: 100vw; /* full-bleed */
  margin-left: calc(50% - 50vw); /* neutralize parent centering */
  margin-right: calc(50% - 50vw);
}
.footer h4{
  font-family:'Sugar Pie', cursive;
  color:var(--title);
}
footer a{ color:#fff; font-weight:800; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }

/* ====== FIGURAS ====== */
.entire-width-image{ width:100%; padding-bottom:25px; }
.standard-img{ width:min(560px, 100%); padding:25px 0; }


/* ===== UTILIDADES ===== */
.left-aligned{ margin-left:auto; }
.bg-dark{ background-color:#343a40 !important; } /* usado no footer.html original */
.bg-hero{ background-color:var(--primary); }

/* Banner principal na página inicial */
.page-banner{ position: relative; width: 100%; overflow: hidden; }
.page-banner .banner-img{ display:block; width:100%; height: clamp(180px, 24vw, 420px); object-fit: cover; }
.page-banner::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.08));
  pointer-events: none;
}

/* ===== HERO: compare (imagens bem enquadradas) ===== */
.hero-compare .image-compare-container{
  /* proporções responsivas: 16:9 desktop, 4:3 mobile */
  aspect-ratio: 16/9;
  max-height: 520px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media (max-width: 576px){
  .hero-compare .image-compare-container{ aspect-ratio: 4/3; max-height: 420px; }
}

.hero-compare .compare-layer{
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.hero-compare .compare-layer img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Estado inicial 50/50 (evita flash) */
.hero-compare .compare-left {  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.hero-compare .compare-right { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }

/* Linha divisora com brilho sutil */
.compare-divider{
  position: absolute; inset: 0 auto 0 50%;
  width: 4px; z-index: 2;
  background: var(--subtitle);
  box-shadow:
    0 0 0 4px rgba(255,145,0,.18),
    0 0 18px rgba(255,145,0,.28);
  transform: translateX(-2px);
  pointer-events: none;
}

/* Slider SOBRE as imagens (overlay) */
.overlay-slider{
  position: absolute; left: 0; top: 40px; transform: none;
  /* fill the compare-box exactly */
  width: 100%;
  max-width: none;
  box-sizing: border-box; /* allow internal padding without changing total width */
  height: 36px;
  z-index: 3;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 8px;
  border: none;
  outline: none;
  cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
  transition: background 0.2s;
}

/* container padding when slider is on top */
.slider-overlay-container{ padding-top: 18px; }

/* TRILHO (WebKit/Blink) — preenchimento bi-color é atualizado no JS */
.overlay-slider::-webkit-slider-runnable-track{
  height: 14px; border-radius: 999px;
  /* use a CSS variable so JS can update the visible gradient for the track */
  background: var(--slider-gradient, linear-gradient(90deg, var(--primary-trans) 0%, var(--primary-trans) 50%, var(--subtitle-trans) 50%, var(--subtitle-trans) 100%));
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}

/* TRILHO (Firefox) — progress é o lado esquerdo (verde), track o direito (laranja) */
.overlay-slider::-moz-range-track{
  height: 14px; border-radius: 999px;
  /* track color (right side) — can be overridden by --slider-moz-track */
  background: var(--slider-moz-track, rgba(255,145,0,0.15));
  border: 1px solid rgba(255,255,255,.5);
}
.overlay-slider::-moz-range-progress{
  height: 14px; border-radius: 999px;
  /* progress color (left side) — can be overridden by --slider-moz-progress */
  background: var(--slider-moz-progress, rgba(63,125,32,0.15));
}

/* POLEGAR com ícone (fatia de laranja) e efeito “glass” */
.overlay-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; border-radius: 50%;
  margin-top: -10px; /* centraliza no trilho */
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'> \
      <circle cx='32' cy='32' r='28' fill='%23FF9100' stroke='white' stroke-width='4'/> \
      <line x1='32' y1='6'  x2='32' y2='58' stroke='white' stroke-width='4'/> \
      <line x1='6'  y1='32' x2='58' y2='32' stroke='white' stroke-width='4'/> \
      <line x1='14' y1='14' x2='50' y2='50' stroke='white' stroke-width='4'/> \
      <line x1='50' y1='14' x2='14' y2='50' stroke='white' stroke-width='4'/> \
    </svg>");
  background-repeat: no-repeat; background-position: center; background-size: 72% 72%;
  border: 3px solid var(--subtitle);
  box-shadow:
    0 0 0 6px rgba(255,145,0,.18),
    0 8px 18px rgba(0,0,0,.25);
}
.overlay-slider::-moz-range-thumb{
  width: 34px; height: 34px; border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'> \
      <circle cx='32' cy='32' r='28' fill='%23FF9100' stroke='white' stroke-width='4'/> \
      <line x1='32' y1='6'  x2='32' y2='58' stroke='white' stroke-width='4'/> \
      <line x1='6'  y1='32' x2='58' y2='32' stroke='white' stroke-width='4'/> \
      <line x1='14' y1='14' x2='50' y2='50' stroke='white' stroke-width='4'/> \
      <line x1='50' y1='14' x2='14' y2='50' stroke='white' stroke-width='4'/> \
    </svg>");
  background-repeat: no-repeat; background-position: center; background-size: 72% 72%;
  border: 3px solid var(--subtitle);
  box-shadow:
    0 0 0 6px rgba(255,145,0,.18),
    0 8px 18px rgba(0,0,0,.25);
}

/* Rótulos (opcionais) */
.compare-label{
  position: absolute; top: 10px; z-index: 2;
  padding: .25rem .5rem; font-weight: 800; font-size: .8rem;
  border-radius: .5rem; background: rgba(0,0,0,.45); color: #fff;
  backdrop-filter: blur(4px);
}
.compare-label-left{ left: 10px; }
.compare-label-right{ right: 10px; }
 
/* ====== MEMBER CARDS: ANIMAÇÕES E EFEITOS MODERNOS ====== */
/* container que aplica transição ao aparecer */
.member-card-animate{
  opacity: 0;
  transform: translateY(18px) scale(.996);
  transition: opacity .6s cubic-bezier(.2,.9,.3,1), transform .6s cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
}
.member-card-animate.revealed{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* leve efeito 3D ao passar o mouse - o cartão real terá transform de tilt */
.member-card[data-tilt] .card{
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.member-card[data-tilt]:hover .card{
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* destaque interno: overlay sutil e nome elevado */
.member-card .card::after{
  content: '';
  position: absolute; inset: 0; border-radius: var(--radius-lg);
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
}
.member-card .card-body{ position: relative; z-index: 1; }

/* delay utility (JS will set inline delays too) */
.member-card-animate[data-delay="0"]{ transition-delay: 0s; }

/* small responsive tweaks */
@media (max-width: 576px){
  .member-card-animate{ transform: translateY(8px) scale(.998); }
}

/* ====== ACCORDION – identidade PepCitrus ====== */
/* HTML esperado: <div class="accordion identity" id="..."> ... */

.accordion.identity{
  /* mapeia para os tokens existentes */
  --bs-accordion-color: var(--ink);
  --bs-accordion-bg: #fff; /* usa cartão branco, sobre paper */
  --bs-accordion-border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: var(--radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--radius-lg) - 2px);

  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: color-mix(in srgb, var(--primary) 6%, #fff);
  --bs-accordion-btn-padding-x: 1.1rem;
  --bs-accordion-btn-padding-y: .95rem;

  --bs-accordion-active-color: var(--primary);
  --bs-accordion-active-bg: color-mix(in srgb, var(--subtitle) 14%, #fff);

  --bs-accordion-btn-focus-border-color: color-mix(in srgb, var(--secondary) 50%, #fff);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .20rem rgba(114,176,29,.20);

  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: visible;
}

/* item: bordas sutis e sem “listras” laterais */
.accordion.identity .accordion-item{
  border: 0;
  border-top: 1px solid var(--bs-accordion-border-color);
  background: #fff;
}
.accordion.identity .accordion-item:first-child{
  border-top: 0;
}

/* cabeçalho: usa Sugar Pie para “tom lúdico” ou mantenha Agrandir (comente a linha abaixo) */
.accordion.identity .accordion-button{
  font-weight: 800;
  letter-spacing: .2px;
  font-family: 'Agrandir', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bs-accordion-btn-bg);
  color: var(--bs-accordion-btn-color);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

/* estado aberto */
.accordion.identity .accordion-button:not(.collapsed){
  color: var(--bs-accordion-active-color);
  background: var(--bs-accordion-active-bg);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
}

/* foco/teclado */
.accordion.identity .accordion-button:focus{
  border-color: var(--bs-accordion-btn-focus-border-color);
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
  outline: 0;
}

/* ícone chevron recolorido com a paleta (usa data-URI SVG) */
.accordion.identity .accordion-button::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FF9100' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  transform: none; /* deixa a seta sempre apontando p/ baixo, o Bootstrap rotaciona no aberto */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}

/* corpo do accordion: tipografia suave e espaço confortável */
.accordion.identity .accordion-body{
  background: #fff;
  padding: 1rem 1.1rem 1.25rem;
  color: var(--ink);
}
.accordion.identity .accordion-body p{
  margin-bottom: .85rem;
}

/* hover sutil */
.accordion.identity .accordion-button:hover{
  background: color-mix(in srgb, var(--subtitle) 10%, #fff);
}

/* “cartão” mais destacado quando aberto */
.accordion.identity .accordion-collapse.show{
  box-shadow: inset 0 6px 16px rgba(0,0,0,.04);
  position: static !important;
}

/* título h2/h3 dentro do corpo usando a hierarquia do guia */
.accordion.identity .accordion-body h3,
.accordion.identity .accordion-body h4{
  color: var(--secondary);
  font-weight: 800;
}

/* acessibilidade / redução de movimento */
@media (prefers-reduced-motion: reduce){
  .accordion.identity .accordion-button{
    transition: none;
  }
}

/* --- FIX: accordion “abrindo para cima” --- */
.accordion.identity{
  display: flow-root;     /* cria um BFC e evita margin-collapsing para cima */
  overflow: visible;      /* já estava no seu tema, mantemos visível */
}

.accordion.identity .accordion-item{
  display: block;         /* garante fluxo padrão */
}

.accordion.identity .accordion-collapse{
  position: static !important; /* evita stacking/posicionamento esquisito */
}

.accordion.identity .accordion-button{ margin: 0; }
.accordion.identity .accordion-body{ margin: 0; padding-top: 1rem; }

/* Se algum global aplicar transforms no ancestral, garantimos origem da animação */
.accordion.identity .collapsing{ transform-origin: top; }

/* Opcional: se ainda notar “salto”, quebre o colapso acima do accordion também */
#hpAccordion{ padding-top: 1px; margin-top: -1px; }  /* hack anti margin-collapsing */

/* Se sua barra tem a classe .menu (como no seu tema) */
.menu.navbar{
  /* define as variáveis do Bootstrap para a navbar */
  --bs-navbar-color: var(--ink);
  --bs-navbar-hover-color: var(--subtitle);
  /* ativo = variação mais clara do ink */
  --bs-navbar-active-color: color-mix(in srgb, var(--ink) 60%, #fff 40%);
}

/* aplica nos estados ativos/abertos */
.menu .nav-link.active,
.menu .show > .nav-link,
.menu .nav-link:active{
  color: var(--bs-navbar-active-color) !important;
}

/* mantém o sublinhado/indicador que você já tem */
.navbar-nav .nav-link.active::after,
.navbar-nav .show > .nav-link::after{
  background: var(--subtitle);
}