/**************************************
 LATINOBARÓMETRO — LOGO BLUE THEME
• Keep existing class names; colors are remapped
• Place AFTER Bootstrap 5.3
**************************************/

/* ---------- Brand tokens (from logo) ---------- */
:root{
	  /* Body text: ensure ~#212529 (5.6:1 on white) */
  --bs-body-color: #212529;

  /* Muted text should still be ≥4.5:1 on white; ~#495057 works */
  --bs-secondary-color: #495057;               /* BS 5.3 token */
  --bs-tertiary-color: #5a646e;
--defaultBaseSize: 16px;

	
	/*****************************************/
	
	
  /* Logo blues */
  --brand-navy:  #022765;  /* deep */
  --brand-azure: #055588;  /* medium */
  --brand-cyan: #026C8A;;  /* ocean/teal-blue */
  --brand-sky:   #9ABACB;  /* light */
  --brand-ice:   #D9E8EE;  /* very light */

  /* Bootstrap theme hooks */
  --bs-primary: var(--brand-azure);
  --bs-secondary: var(--brand-cyan);
  /* Link hover: avoid low-contrast ice; use a darker shade */
  --bs-link-color: var(--brand-cyan);
  --bs-link-hover-color: #024e6a; /* darker than --brand-cyan */


  /* Back-compat: map previous LB vars to blues */
  --lb-brown: #055588; /* already good; ensure focus state is darker */
/*   --lb-brown:  var(--brand-azure);  used by outline “brown” buttons/borders */
  --lb-orange: var(--brand-sky);    /* subtle accent */
  --lb-cream:  var(--brand-ice);
  --lb-brown-dark:   #044770;
  --lb-brown-darker: #033a5c;

  /* Your legacy tokens remapped to blues */
  --webPrimaryColor:        var(--brand-azure);
  --webPrimaryColorInv:     #ffffff;
  --webAlternateColor:      var(--brand-ice);
  --webAlternateColorInv:   var(--brand-azure);
  --background:             #ffffff;
  --backgroundMobile:       #f8f9fa;

  /* ODA bits */
  --btnBckColor:            #eef6fb;
  --btnColor:               var(--brand-cyan);
  --btnColorActive:         var(--brand-azure);
  --btnBorderColor:         #ffffff;

  --groupBackground:        #edf3f8;
  --groupColor:             var(--brand-azure);
  --backgroundRowTotal:     #eef2f6;
  --colorRowTotal:          var(--brand-azure);
  
  --menu-max-h: min(70vh, 420px);  
  
  --lh: 1.5rem;
	--h1: clamp(2rem, 5vw, 3rem);
	--h2: clamp(1.5rem, 4vw, 2.5rem);
	--h3: clamp(1.25rem, 3.5vw, 2rem);
	--h4: clamp(1.1rem, 3vw, 1.5rem);
	--h5: clamp(1rem, 2.5vw, 1.2rem);
	--h6: clamp(0.9rem, 2vw, 1rem);
}

/* ---------- Base text & links ---------- */
html { font-size: var(--defaultBaseSize); }
body {
	 font-size: var(--defaultBaseSize);
/*   font: var(--defaultBaseSize)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; */
  background-color: var(--background);
  overflow-x: hidden;
  max-width: 120rem;
    margin: 0 auto;            /* centers horizontally */
    padding: 8px;              /* replaces your old margin for spacing */
}

/* Explicitly override Bootstrap muted utilities when needed */
.text-muted,
.small.text-muted {
  color: var(--bs-secondary-color) !important;
}



a { color: var(--bs-link-color); text-decoration: none; }
a:hover, a:focus { color: var(--bs-link-hover-color); text-decoration: underline; }

/* Keep anchor styles from overriding buttons */
a.btn, .btn a{ color: var(--bs-btn-color) !important; text-decoration: none !important; }
a.btn:hover, .btn a:hover{ color: var(--bs-link-hover-color) !important; text-decoration: underline; }

/* ---------- Headings (responsive) ---------- */
:root{
  --h1: clamp(2rem, 5vw, 3rem);
  --h2: clamp(1.5rem, 4vw, 2.5rem);
  --h3: clamp(1.25rem, 3.5vw, 2rem);
  --h4: clamp(1.1rem, 3vw, 1.5rem);
  --h5: clamp(1rem, 2.5vw, 1.2rem);
  --h6: clamp(0.9rem, 2vw, 1rem);
}
h1{font-size:var(--h1);font-weight:700}
h2{font-size:var(--h2);font-weight:600}
h3{font-size:var(--h3);font-weight:600}
h4{font-size:var(--h4);font-weight:500}
h5{font-size:var(--h5);font-weight:500}
h6{font-size:var(--h6);font-weight:400}

.text-justified{ text-align: justify; }
/* .text-shadow{ text-shadow: 0 1px 2px rgba(0,0,0,.35); } */
.text-shadow{ text-shadow:none; } /* shadows can fake contrast; safer off */

.link-light{
  color: black !important;
  text-decoration: none;
}


/* ---------- Banner / hero ---------- */
.header-wrapper{ position:relative; min-height:350px; margin-bottom:1rem; }
.header-wrapper .banner-img{ position:absolute; inset:0; width:100%; height:350px; object-fit:cover; z-index:-1; }
.header-wrapper .hero{ position:relative; z-index:2; padding-top:190px; } /* adjust top spacing as needed */
@media (max-width:576px){
  .header-wrapper .hero .p-4{ padding:1rem !important; }
  .hero-panel{ padding:.75rem !important; }
}

 

.hero-panel{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius:.5rem;
}
.text-lb-brown{ color: var(--brand-azure) !important; } /* back-compat alias */

/* ---------- Feature cards & salient news ---------- */
.card{ border-radius:8px; margin-bottom:10px; }
.feature-card{ transition:transform .15s ease, box-shadow .15s ease; }
.feature-card:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08); }

/* Thumb helper */
.feature-card .thumb-box{
  aspect-ratio: 16/9; width:100%; overflow:hidden; border-radius:.5rem .5rem 0 0;
  background: var(--lb-cream);
}
.feature-card .thumb-box img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Salient news wrapper */
.salient{
  border-left:.5rem solid var(--brand-cyan);
  background: linear-gradient(90deg, rgba(3,133,172,.06), rgba(3,133,172,.02));
}
/* Media box used in salient */

 
.feature-media .media-box {
    width: min(420px, 100%);
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.08);
    display: flex;
    justify-content: center; /* optional: center horizontally */
    align-items: center;     /* optional: center vertically if you give a fixed height */
}

.feature-media .media-box img {
    display: block;
    width: 100%;   /* fill the container’s width */
    height: auto;  /* keep proportions */
    object-fit: contain; /* ensures full image is visible */
}



/* ---------- Buttons (keep class names) ---------- */
/* Solid “green” becomes ocean blue */
.btn.btn-lb-green {
  background-color: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: #fff !important;
  --bs-btn-bg: var(--brand-cyan);
  --bs-btn-border-color: var(--brand-cyan);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #2b7892;
  --bs-btn-hover-border-color: #2b7892;
  --bs-btn-active-bg: #205a6c;
  --bs-btn-active-border-color: #205a6c;
}

.btn.btn-lb-green:hover,
.btn.btn-lb-green:focus{
  background-color:#2b7892; border-color:#2b7892; color:#fff !important;
}

/* Outline “brown” becomes medium azure */
.btn.btn-outline-lb-brown{
  background-color:transparent;
  border-color: var(--lb-brown);
  color: var(--lb-brown) !important;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--lb-brown);
  --bs-btn-color: var(--lb-brown);
  --bs-btn-hover-bg: var(--lb-brown);
  --bs-btn-hover-border-color: var(--lb-brown);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--lb-brown-dark);
  --bs-btn-active-border-color: var(--lb-brown-dark);
  --bs-btn-active-color: #fff;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn.btn-outline-lb-brown:hover,
.btn.btn-outline-lb-brown:focus{ background-color:var(--lb-brown); border-color:var(--lb-brown); color:#fff !important; }

/* Borders / backgrounds using old names */
.border-lb-brown{ border-color: var(--lb-brown) !important; }
.bg-lb-brown{ background-color: var(--lb-brown) !important; color:#fff !important; }

/* ---------- ODA list buttons (rounds) ---------- */
#ODA_HOME .list-group-flush .list-group-item,
#ODA_INDEX .list-group-flush .list-group-item{
  font-weight:700; font-size:.9rem; padding:.75rem; margin:5px 0;
  background-color: var(--btnBckColor); border:1px solid var(--btnBorderColor);
}
#ODA_HOME .list-group-item-action:focus,
#ODA_HOME .list-group-item-action:hover,
#ODA_INDEX .list-group-item-action:focus,
#ODA_INDEX .list-group-item-action:hover{
  color:#fff; background-color: var(--btnColor);
}
#ODA_HOME .list-group-item.active,
#ODA_INDEX .list-group-item.active{
  color:#fff; background-color: var(--btnColorActive);
}

/* Dense mode utility if many rounds */
.odaBtn--compact{ padding:.2rem .3rem !important; margin-bottom:.2rem !important; font-size:.85rem !important; }

/* ---------- TOC / FAQ right index ---------- */
#toc .list-group-item{
  background-color: transparent; color: var(--bs-body-color);
  border:0; border-left:.25rem solid transparent; border-radius:0;
  padding:.5rem .75rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#toc .list-group-item + .list-group-item{ border-top:1px solid var(--bs-border-color); }
#toc .list-group-item:hover, #toc .list-group-item:focus{
  background-color: var(--lb-orange); color:#0b2239;
  border-left-color: var(--lb-brown);
  outline:0; box-shadow:0 0 0 .15rem rgba(3,133,172,.15);
}
#toc .list-group-item.active{
  background-color: var(--lb-orange); color:#fff; font-weight:600;
  border-left-color: var(--lb-orange);
}

/* ---------- Years list (multi-column) ---------- */
.list-group.lb-years-list{ display:block; column-gap:.75rem; column-count:1; }
@media (min-width:576px){ .list-group.lb-years-list{ column-count:2; } }
@media (min-width:992px){ .list-group.lb-years-list{ column-count:3; } }
.lb-years-list .list-group-item{
  display:inline-block; width:100%; break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-bottom:.5rem; border-radius:.375rem; padding:.5rem .75rem;
}
.lb-years-list .list-group-item:first-child{ border:1px solid var(--brand-cyan); }

/* ---------- Utility ---------- */
.object-fit-cover{ object-fit:cover; }
.webPrimaryBackground{
  background-color: var(--webPrimaryColor) !important;
  color: var(--webPrimaryColorInv) !important;
  background-image: var(--webPrimaryBackgroundUrl);
  background-repeat: repeat; background-size: 150px 150px; background-position: center;
}

/* ===== Footer (Logo Blue theme) ===== */
.footer-lb{
  /* choose flat or gradient — keep one */
  /* Flat: */
  /* background-color: var(--brand-navy) !important; */

  /* Gradient (more “alive”): */
  --footer-bg-1: var(--brand-azure);
  --footer-bg-2: var(--brand-navy);
  background: linear-gradient(180deg, var(--footer-bg-1), var(--footer-bg-2)) !important;

  color:#fff !important;
  border-top: 4px solid var(--brand-cyan);
}

.footer-lb a,
.footer-lb {
  color: rgba(255,255,255,.9) !important;
  text-decoration: none;
}
.footer-lb a:hover{
  color:#fff !important;
  text-decoration: underline;
}

/* Tidy spacing & readability */
.footer-lb .list-unstyled li + li{ margin-top:.35rem; }
.footer-lb .text-opacity-75{ color: rgba(255,255,255,.75) !important; }

/* Logo treatment so it reads on dark */
.footer-lb .logo-img{
  height:40px;
  background:#fff;
  border-radius:.25rem;
  padding:.125rem .25rem;
}

/* Partners logos — uniform size, centered, hover polish */
:root{ --partner-h: 48px; }              /* tweak once to resize all */
@media (min-width: 992px){ :root{ --partner-h: 56px; } }

.partners-row a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--partner-h) + 8px);  /* consistent row height */
  width: 100%;
}

.partners-row .partner-logo{
  max-height: var(--partner-h);
  max-width: 100%;
  width: auto;           /* keep aspect ratio */
  height: auto;          /* works with max-height */
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;

  /* subtle effect */
  filter: grayscale(20%);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.partners-row a:hover .partner-logo{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}






/* Social icons on the header strip */
.header-top .social-icons a{ color:#0d214f !important; opacity:.85; }
.header-top .social-icons a:hover{ opacity:1; }



/* MENUS BUTTONS */










/* Ensure dropdown menus are hidden by default */
/* .dropdown-menu { */
/* 	display: none; */
/* } */

/* Show dropdown menu when hovering over the parent */
/* .nav-item.dropdown:hover>.dropdown-menu { */
/* 	display: block; */
/* } */
/* .dropdown-submenu:hover>.dropdown-menu { */
/* 	display: block; */
/* } */
/* Submenus styling */
/* Desktop: hover/focus opens menus; mobile keeps Bootstrap click behavior */

 

/* ACCESSIBILITY */


/* Visible when focused, off-screen otherwise */
.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#fff; color:#000; border:2px solid #000; z-index:2000;
}

/* Strong, uniform focus ring */
:focus-visible {
  outline: 3px solid #ffbf47; /* AA-visible amber */
  outline-offset: 2px;
}

/* Don’t remove outlines on buttons/links */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

a, button, .dropdown-item, .nav-link {
  /* large targets without visually bloating text */
  min-height: 44px;
  padding-block: .5rem;
}

@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}




 /* ===== Header home===== */

:root {
  /* Responsive hero height: min 520px, ~70vh, max 980px */
  --home-hero-h: 400px;
}

/* Taller on very large desktops */
@media (min-width: 1800px) {
  :root { --home-hero-h: 500px; } /* adjust to taste (900–1100px) */
}
@media (max-width:576px){
	:root { --home-hero-h: 550px; }
}

.header-wrapper-home{
  position: relative;
  height: var(--home-hero-h);
  /* keep the bg defined in the element via inline style URL if you like */
  background: center top / cover no-repeat; /* bias crop to top */
  overflow: hidden;
}

/* Let the inner container fill and center content vertically */
.header-wrapper-home > .container {
/*   height: 100%; */
  display: flex;
  align-items: center;      /* vertical centering */
}

/* Minor mobile tweaks (keep yours) */
@media (max-width: 576px) {
  .header-wrapper-home .p-4 { padding: 1rem !important; }
  .header-wrapper-home .p-3.rounded { padding: 0 !important; }
}

 
@media (min-aspect-ratio: 21/9) {
  .header-wrapper-home { background-size: contain;  }
}
 

.lead {
	font-size:1rem !important;
	
}

:root{
  --hero-lift:  340px;        /* how far the hero overlaps upward */
}

/* Reserve space so main content starts after the visual header */
main#main{
  padding-top: var(--home-hero-h);
}

/* Pull the hero card up into the header image area */
#home-hero{
  margin-top: calc(-1 * var(--hero-lift));
  position: relative;
}
#home-features{
  margin-top: 60px;
/*   position: relative; */
}

/* Optional: a little depth for the hero card */
.hero-card{
  background: rgba(255,255,255,.95);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}


 /* ===== Header subpages ===== */
:root {
  /* Responsive hero height: min 520px, ~70vh, max 980px */
  --hero-h: 240px;
}

  .header-hero { position: relative; }
  .header-hero .hero-bg {
    position: absolute; inset: 0 0 auto 0; height: var(--hero-h);
    width: 100%; object-fit: cover; z-index: -1;
  }
/* vertical alignment helpers for the hero image */
.hero-bg        { object-fit: cover; object-position: 50% 50%; }  /* centered (default) */
.hero-bg-top    { object-position: 50% 0%; }      /* anchor to top */
.hero-bg-center { object-position: 50% 50%; }     /* center */
.hero-bg-bottom { object-position: 50% 100%; }    /* anchor to bottom */
  /* Default: center cropping */
.header-hero { position: relative; height: var(--hero-h); overflow: hidden; }
.header-hero .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;max-height: var(--hero-h);
  object-fit:cover; object-position:center;

  /* Reveal effect */
  opacity:0;
  filter: blur(10px);
  transform: scale(1.02);            /* tiny zoom to hide decode pop */
  transition:
    opacity .6s ease,
    filter  .9s ease,
    transform 1.2s ease;
  will-change: opacity, filter, transform;
}
.header-hero .hero-bg.is-ready{
  opacity:1;
  filter: blur(0);
  transform: none;
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce){
  .header-hero .hero-bg{ transition:none; filter:none; transform:none; }
}
 /* Keep header + nav above the image */
  .header-hero header,
  .header-hero nav { position: relative; z-index: 20; }
 
 
 
 /* ===== Header home ===== */
:root{ --hero-bg: rgba(255,255,255,.96); }

.header-wrapper-home .hero-card{
  background: var(--hero-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
  color: #111; /* ensure text is dark on the light panel */
}
@media (prefers-reduced-transparency: reduce){
  .header-wrapper-home .hero-card{ backdrop-filter: none; }
}

 
 /* ===== Footer ===== */

.footer-lb a:hover,
.footer-lb a:focus { opacity: 1 !important; text-decoration: underline; }
.footer-lb .link-opacity-75-hover { opacity: 1 !important; } 

 /* ===== TOC ===== */
/* ToC links: keep focus clearly visible */
#toc a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: underline;
}

/* Optional: ensure brown header contrast if needed */
.lb-header.bg-lb-brown {
  position: relative;
}
.lb-header.bg-lb-brown::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.15); /* increase to .2 if contrast is borderline */
  pointer-events: none;
}
.lb-header.bg-lb-brown > * { position: relative; }





/* ===== Navbar dropdowns (Bootstrap 5.3) ===== */
 :root{
  /* Glass tokens (define them!) */
  --glass-light: rgba(255,255,255,.98);  /* nearly white */
  --glass-dark:  rgba(0,0,0,.55);
  --glass-blur:  8px;
}
/* Navbar on light difuminated background with dark text */
.navbar.glass-light{
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));

  /* Force Bootstrap 5 navbar colors to dark text */
  --bs-navbar-color: rgba(0,0,0,.8);
  --bs-navbar-hover-color: rgba(0,0,0,1);
  --bs-navbar-active-color: #000;
  --bs-navbar-brand-color: #000;
  --bs-navbar-toggler-border-color: rgba(0,0,0,.2);
} 

 /* Force a near-white painted navbar (not transparent) */
.navbar.glass-light{
  background-color: var(--glass-light) !important; /* use background-color, not background */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);      /* subtle edge so it reads above the banner */
}
 
/* Improve visual style */
/* Make sure nothing clips the menus */
.navbar,
.navbar-over-light,
.navbar-custom,
.navbar-glass {
  position: relative;
  z-index: 1080;       /* higher than page content */
  overflow: visible;   /* prevent clipping */
}

.navbar-logo {
	max-height:50px;
}
@media (max-width:576px){
	.navbar-logo {
	max-width: 150px;
	}
}

/***************/
/* ===== Dropdown behavior & styling ===== */

/* Match dropdowns to your glass-light navbar theme */
.navbar.glass-light .dropdown-menu{
  --bs-dropdown-bg: var(--glass-light);
  --bs-dropdown-border-color: rgba(0,0,0,.08);
  --bs-dropdown-link-color: rgba(0,0,0,.8);
  --bs-dropdown-link-hover-color: rgba(0,0,0,1);
  --bs-dropdown-link-hover-bg: rgba(0,0,0,.06);
  --bs-dropdown-link-active-bg: rgba(0,0,0,.12);
  --bs-dropdown-shadow: 0 .5rem 1rem rgba(0,0,0,.08);

  background: var(--bs-dropdown-bg);
  border-color: var(--bs-dropdown-border-color);
  box-shadow: var(--bs-dropdown-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: .35rem; /* tighter look inside navbar */
  min-width: 16rem;
}

/* Optional: subtle bullets to differentiate submenu items */
.navbar.glass-light .dropdown-item{
  position: relative;
  padding-left: 1.25rem;
}
.navbar.glass-light .dropdown-item::before{
  content: "•";
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  opacity: .6;
}

/* Keyboard focus ring for accessibility */
.navbar.glass-light .dropdown-item:focus-visible,
.navbar.glass-light .nav-link:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
  border-radius: .25rem;
}
/* Ensure menus can appear above content */
.navbar{ position: relative; z-index: 1080; }
/* dropdown with caret */
.navbar .dropdown-toggle-split { line-height: 1; }
.navbar .dropdown-toggle-split::after { margin-left: .15rem; }


/* --- Desktop (lg and up): open on hover & focus --- */
@media (min-width: 992px){
  /* Show menu on hover */
  .navbar .dropdown:hover > .dropdown-menu{
    display: block;
    visibility: visible;
    opacity: 1;
  }
  /* Keep menu open when using keyboard */
  .navbar .dropdown:focus-within > .dropdown-menu{
    display: block;
  }
  /* Optional: fade-in nicety */
  .navbar .dropdown-menu{
    display: block;          /* allow transition; we control visibility */
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease, visibility .15s ease;
    margin-top: .25rem;      /* slight offset */
  }
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu{
    visibility: visible;
    opacity: 1;
  }
 
  .navbar .nav-item.dropdown { position: relative; } /* anchor for absolute children */

  /* base state: invisible but already absolutely positioned below the trigger */
  .navbar .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .25rem;       /* spacing below the trigger */
    display: block;           /* keep for your fade trick */
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease, visibility .15s ease;
  }

  /* show on hover/focus-within */
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu{
    visibility: visible;
    opacity: 1;
  }
}


/* --- Mobile (below lg): open on click, flow inside the collapse --- */
@media (max-width: 991.98px){
  /* Let menus flow vertically instead of absolute popovers */
  .navbar .navbar-collapse .dropdown-menu{
    position: static;
    float: none;
    transform: none !important;
    box-shadow: none;     /* flatter inside the column */
    margin-top: 0;
    border-width: 0;
    background: transparent;  /* inherit glass panel look */
    padding: .25rem 0;
  }
  /* Make links look like a vertical list, keep your colors */
  .navbar.glass-light .dropdown-item{
    padding: .35rem .75rem .35rem 1.25rem;
    border-radius: .375rem;
  }
  .navbar.glass-light .dropdown-item:hover{
    background: var(--bs-dropdown-link-hover-bg);
  }
 
  /* default: keep your hero height as-is */
  .header-wrapper-home,
  .header-hero{
    /* whatever you already use (min-height/height/background) */
    overflow: hidden;            /* usual crop for the hero */
  }

  /* when the collapsed navbar is OPEN, let the header auto-expand */
  .header-wrapper-home:has(.navbar-collapse.show),
  .header-hero:has(.navbar-collapse.show){
    height: auto;                /* grow with menu items */
    min-height: 0;               /* remove fixed min-height if any */
    overflow: visible;           /* avoid clipping the dropdowns */
    padding-bottom: .5rem;       /* small breathing room under menu */
  }

  /* Let the LI wrap to a new line for the menu */
  .navbar .nav-item.dropdown.d-flex{
    flex-wrap: wrap;           /* keep first row, allow second row */
    align-items: center;
  }

  /* Label link grows; caret stays snug on the same row */
  .navbar .nav-item.dropdown .nav-link.pe-1{
    flex: 1 1 auto;            /* take remaining space */
    min-width: 0;              /* avoid overflow */
  }
  .navbar .dropdown-toggle-split{
    flex: 0 0 auto;            /* don't wrap the caret */
  }

  /* Submenu drops to the next line and fills width */
  .navbar .navbar-collapse .dropdown-menu{
    position: static;
    transform: none !important;
    box-shadow: none;
    border: 0;
    margin: .25rem 0 0;
    width: 100%;
    flex-basis: 100%;          /* force onto next line */
  }

  /* One item per line */
  .navbar .dropdown-item{
    display: block;
    width: 100%;
  }
 
  .navbar .nav-link,
  .navbar .dropdown-toggle-split{
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
 
  /* 1) Make the collapsed menu look like a panel */
  .navbar .navbar-collapse{
    background: var(--glass-light);          /* keeps your theme */
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
    margin-top: .25rem;
    border-radius: .5rem;                     /* soft panel edge */
    padding: .25rem .25rem .35rem;
  }

  /* 2) When menu is open, add a clear "frontier" under the header */
  .header-wrapper-home:has(.navbar-collapse.show),
  .header-hero:has(.navbar-collapse.show){
    overflow: visible;                         /* avoid clipping */
    box-shadow: 0 10px 18px rgba(0,0,0,.12);   /* the frontier */
  }

  /* Optional: extra subtle gradient edge under the open header */
  .header-wrapper-home:has(.navbar-collapse.show)::after,
  .header-hero:has(.navbar-collapse.show)::after{
    content: "";
    display: block;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent);
  }

  /* Keep items readable and touch-friendly */
  .navbar .dropdown-item{
    display: block;
    width: 100%;
    border-radius: .375rem;
  }
  .navbar.glass-light .dropdown-item:focus-visible{
    outline: 2px solid rgba(0,0,0,.35);
    outline-offset: 2px;
  }
}