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

/* ---------- Brand tokens (from logo) ---------- */
:root{
  /* Logo blues */
  --brand-navy:  #022765;  /* deep */
  --brand-azure: #055588;  /* medium */
  --brand-cyan:  #0385AC;  /* 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);
  --bs-link-color: var(--brand-cyan);
  --bs-link-hover-color: #026a88;

  /* Back-compat: map previous LB vars to blues */
  --lb-green:  var(--brand-cyan);   /* used by .btn-lb-green, links, etc. */
  --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);  
}

/* ---------- Base text & links ---------- */
html { font-size: 14px; }
body {
  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 */
}



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; }

/* ---------- 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); }




/* ---------- 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,.92);
  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(--lb-green);
  border-color: var(--lb-green);
  color:#fff !important;
  --bs-btn-bg: var(--lb-green);
  --bs-btn-border-color: var(--lb-green);
  --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(--lb-green); }

/* ---------- 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 .link-light{
  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 */

/* ---------- Navbar + dropdowns (z-index & colors) ---------- */
.navbar-over-light,.navbar-custom{ position:relative; z-index:1030; }
.navbar .dropdown-menu{ z-index:1040; border-radius:6px; box-shadow:0 .5rem 1rem rgba(0,0,0,.08); }

/* Light navbar over light banner */
.navbar-over-light .navbar-brand, .navbar-over-light .nav-link{ color:#0d214f !important; }
.navbar-over-light .nav-link:hover{ color:var(--brand-azure) !important; }
.navbar-over-light .dropdown-menu{ background-color:#fff; }
.navbar-over-light .dropdown-item{ color:#212529; }
.navbar-over-light .dropdown-item:hover{ background-color: var(--brand-cyan); color:#fff; }

/* Transparent/dark navbar variant */
.navbar-custom .navbar-nav .nav-link{ color:#fff !important; opacity:.95; }
.navbar-custom .navbar-nav .nav-link:hover{ opacity:1; }
.navbar-custom .dropdown-menu{
  --bs-dropdown-bg: rgba(0,0,0,.9);
  --bs-dropdown-color: #fff;
  --bs-dropdown-link-color: rgba(255,255,255,.9);
  --bs-dropdown-link-hover-color:#fff;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.08);
  --bs-dropdown-border-color: rgba(255,255,255,.15);
}


/* Mobile expanded menu */
@media (max-width:576px){
  .navbar-custom .navbar-collapse.show{
    background-color: var(--brand-navy);
    padding:1rem; border-radius:.25rem; border:1px solid #dee2e6;
  }
  .navbar-custom .nav-link, .navbar-custom .dropdown-item{ color:#fff; }
  .navbar-collapse.show .dropdown-menu{ background-color: var(--brand-navy); color:#fff; }
  .navbar-collapse.show .dropdown-menu .dropdown-item:hover{ background-color:#033a5c; color:#fff; }
}


/* ===== Navbar dropdowns (Bootstrap 5.3) ===== */

/* Make sure nothing clips the menus */
.header-wrapper,
.navbar,
.navbar-over-light,
.navbar-custom,
.navbar-glass {
  position: relative;
  z-index: 1080;       /* higher than page content */
  overflow: visible;   /* prevent clipping */
}

/* Desktop: hover/focus opens menus; mobile keeps Bootstrap click behavior */
@media (hover:hover) and (pointer:fine) and (min-width: 992px){
  /* Base menu is always “layouted”, but hidden via visibility/opacity (not display:none)
     so submenus can measure/position correctly */
  .navbar .dropdown-menu {
    display: block;            /* keep in flow for positioning */
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
  }
  /* Open on hover/focus */
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu,
  .navbar .dropdown.show > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Submenu support */
  .dropdown-submenu { position: relative; }
 
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu:focus-within > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Optional: caret for submenu toggles */
  .dropdown-submenu > .dropdown-toggle::after {
    content: "›";
    border: 0;
    margin-left: .35rem;
    font-weight: 700;
    line-height: 1;
  }
   /* 1) Make submenus flush with the parent (no horizontal gap) */
  .dropdown-submenu { position: relative; }
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0;        /* was .25rem — remove the gap */
    margin-top: -.25rem;   /* small vertical align tweak */
    transform: none;       /* remove any translateX */
    
    /* if you're using the visibility/opacity pattern: */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
   max-height: var(--menu-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  }
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu:focus-within > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* 2) Invisible bridge between parent and submenu */
  .dropdown-submenu::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 12px;           /* the “bridge” width */
  }
}

/* Kill the inline z-index on the navbar and put it on top */
.navbar-over-light { z-index: 1100 !important; position: relative; }

/* Keep dropdowns above the navbar */
.navbar-over-light .dropdown-menu { z-index: 1120 !important; }


/* Dropdowns above the navbar itself */
.navbar .dropdown-menu {
  z-index: 1095;       /* above the navbar (1080) */
  /* polish */
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
  border-radius: .5rem;
}




/* Subtle glass behind nav */
.navbar-glass{ background:rgba(255,255,255,.7); backdrop-filter:blur(6px); border-radius:.5rem; padding:.25rem .75rem; }




/* 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 */
.dropdown-submenu {
	position: relative;
}

/* Position nested submenu */
.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -0.5rem;
	display: none;
}

/* Show submenu when hovering */


/* Improve visual style */
.navbar .dropdown-menu {
	background-color: var(--bs-light); /* Use your defined color */
	border-radius: 6px;
}

.navbar .dropdown-item {
	color: var(--bs-gray-900);
}

.navbar .dropdown-item:hover {
	background-color: var(--bs-gray-900);
	color: var(--bs-light);
}

.navbar-custom .navbar-nav .nav-link, .navbar-custom .navbar-nav .nav-link:hover,
	.navbar-custom .navbar-nav .nav-link:focus, .navbar-custom .navbar-nav .nav-link:active
	{
	color: var(--bs-dropdown-link-hover-color) !important;
	background-color: var(--bs-dropdown-link-hover-bg) !important;
}

 
@media ( max-width : 576px) {
	/* Add a background color only when the navbar is expanded */
	.navbar-custom .navbar-collapse.show {
		background-color:var(--bs-dropdown-bg); /* WVS blue or any readable color */
		padding: 1rem;
		border-radius: 0.25rem;
	}
	.navbar-custom .navbar-collapse.show {
		background-color:var(--bs-dropdown-bg);
		padding: 1rem;
		border-radius: 0.25rem;
		border: 1px solid #dee2e6;
	}
	.navbar-custom .nav-link, .navbar-custom .dropdown-item {
		color: var(--bs-dropdown-color);
	}
	/* Ensure all dropdown menus in mobile view have a readable background */
	.navbar-collapse.show .dropdown-menu {
		background-color:var(--bs-dropdown-bg); /* Same as navbar background */
		color: var(--bs-dropdown-color);
	}

	/* Fix individual items */
	.navbar-collapse.show .dropdown-menu .dropdown-item {
		color: var(--bs-dropdown-color);
	}

	/* Optional: highlight on hover */
	.navbar-collapse.show .dropdown-menu .dropdown-item:hover {
		background-color: var(--bs-dropdown-link-hover-bg);
		color: var(--bs-dropdown-link-hover-color) !important;

	}
	.navbar-collapse.show .dropdown-menu {
		border-radius: 0.25rem;
		padding: 0.5rem 0;
	}
}
 

.nav.flex-column .nav-link {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	line-height: 1.1;
}

.nav.flex-column li {
	margin-bottom: 0.1rem;
}

.nav.flex-column ul {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
}