:root {
	--color-fondo: #00818B;
	--background: #ffffff;
	--webPrimaryColor: #334F9E;
	--webPrimaryColorInv: #f5f5f5;
	--webAlternateColor: #D9DCEB;
	--webAlternateColorInv: #334F9E;
	--backgroundMobile: #f8f9fa;
	--backgroundRowTotal: #E8E8E8;
	--colorRowTotal: #334F9E;
	--groupBackground: #E8E8E8;
	--groupColor: #334F9E;
	/* Step color */
	--titlecolor: #334F9E;
	/* Sample buttons */
	--btnBckColor: #f1f3ff;
	--btnColor: #ef3340;
	--btnColorActive: #334F9E;
	--btnBorderColor: white;
	--boxedCheckWidth: 135px;
	/* Btn bar buttons */
	--btnMnuBorderColor: #334F9E;
	--btnMnuBackColor: #334F9E;
	--btnMnuColor: #f5f5f5;
	--ButtonRoundFontSize: 0.9rem;
	--FontFamily: sans-serif;
	--FontFamilyTitlesXS: sans-serif --FontFamilyTitles:  sans-serif
		--roundFontSize:0.9rem;
	--defaultBaseSize: 12px;
	--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);
}

body {
	font-size: var(--defaultBaseSize);
	line-height: var(--lh);
	font-family: var(--FontFamily);
	background-color: var(--background);
	margin: 8px;
	overflow-x: hidden;
	 max-width: 90rem; 
}
/* Adaptive Headings */
h1 {
	font-size: var(--h1);
	font-family: sans-serif;
	font-weight: 700;
}

h2 {
	font-size: var(--h2);
	font-family: sans-serif;
	font-weight: 600;
}

h3 {
	font-size: var(--h3);
	font-family: sans-serif;
	font-weight: 600;
}

h4 {
	font-size: var(--h4);
	font-family: sans-serif;
	font-weight: 500;
}

h5 {
	font-size: var(--h5);
	font-family: sans-serif;
	font-weight: 500;
}

h6 {
	font-size: var(--h6);
	font-family: sans-serif;
	font-weight: 400;
}

/* BASE SIZE FOR REM*/
html {
	font-size: var(--defaultBaseSize);
}

/* @media (max-width: 1200px) {  */
/* 	html { */
/*       font-size:12px; */
/*   } */
/* } */
.custom-navigate {
	background-color: var(--webAlternateColor) !important;
	color: var(--webAlternateColorInv) !important;
}

/* Headings - Default for mobile */
@media ( max-width : 768px) {
	body {
		background-color: var(--backgroundMobile);
	}
	.container-fluid {
		padding: 10px;
	}
}

.rtl {
	direction: rtl;
}

/* BANNER */
.top-banner {
	width: 100%;
	overflow: hidden;
}

.top-banner img {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	display: block;
}

@media ( max-width : 1200px) {
	.top-banner img {
		width: 100%;
	}
}

/* CARDS FOR HOME SECTIONS */
.card {
	border-radius: 8px;
	margin-bottom: 10px;
}

/* BUTTONS ROUNDS */
#ODA_HOME .list-group-flush .list-group-item,
#ODA_INDEX .list-group-flush .list-group-item
 {
	font-weight: bold;
	font-size: var(--roundFontSize);
	position: relative;
	display: block;
	padding: .75rem 0.75rem;
	margin-bottom: 5px;
	margin-top: 5px;
	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: #ffffff;
	background-color: var(--btnColor);
}

#ODA_HOME .list-group-item.active, 
#ODA_INDEX .list-group-item.active 
{
	color: #ffffff;
	background-color: var(--btnColor);
}

#ODA_HOME .list-group-item.active ,
#ODA_INDEX .list-group-item.active 
{
	color: #ffffff;
	background-color: var(--btnColor);
}

#ODA_HOME .list-group-item+.list-group-item.active, 
#ODA_INDEX .list-group-item+.list-group-item.active 
{
	margin-top: 5px;
}

.odaBtnBig {
	font-size: 1rem;
}

a:hover {
	color: var(--bs-gray-900);
}

a {
	color: var(--webPrimaryColor);
	text-decoration: underline;
}

ul, ol {
	list-style-position: inside;
	/* Ensures the bullet aligns with the text */
}

li p {
	display: inline;
}

ol p {
	display: inline;
}

/* #PAGE img { */
/* 	margin: 1rem; Bootstrap's m-3 equivalent */
/* } */

/* BUTTONS SAMPLES */
.boxed-check-group .boxed-check .boxed-check-input:checked+.boxed-check-label
	{
	border: 1px solid #000;
	background-color: var(--btnBckColor);
	color: #000;
}

.boxed-check-group .boxed-check .boxed-check-input:not(:disabled)+.boxed-check-label:hover
	{
	border: 0px solid var(--btnColor);
	background-color: var(--btnColor);
	color: #ffffff;
}

.boxed-check-group .boxed-check .boxed-check-label {
	display: block;
	background-color: var(--btnBckColor);
	border: 1px solid var(--btnBorderColor);
	padding: 0.1rem 0.3rem;
	margin: 0.1rem 0.1rem;
	border-radius: .25rem;
	cursor: pointer;
}

.boxed-check-label {
	padding: .2rem .5rem;
	font-size: 0.8rem;
}

.boxed-check-inline {
	width: var(--boxedCheckWidth);
}

/* LI SAMPLES FOR XS */
.country-list {
	/*     max-height: 300px; */
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 5px;
	background: white;
}

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

/* 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 */
.dropdown-submenu:hover>.dropdown-menu {
	display: block;
}

/* 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: #fff !important;
}

@media ( max-width : 576px) {
	.btn-group-custom {
		flex-direction: column;
	}
}
/* BUTTONS */
@media ( max-width : 1200px) {
	.odaBtn, odaBtnBar {
		font-size: 0.9rem;
		font-weight: bold;
	}
}

@media ( min-width : 1201px) {
	.odaBtn, odaBtnBar {
		font-size: 1rem;
		font-weight: bold;
	}
}

/* SPECIAL INDICATOR GROUP BUTTONS */
.btn-group-indicator {
	background-color: #CB347B;
	color: white;
	border: none;
	padding: 2px 4px;
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
}

.btn-group-indicator:hover {
	background-color: #A42D67;
}

.btn-group-indicator.button-active {
	background-color: #8A2458; /* Darker pink for active state */
	color: #FFD700; /* Gold text for emphasis */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
	font-weight: bold; /* Make text bold */
}

/* EQUIV ROUNDS BUTTONS */
.btn-odasmall {
	padding: .2rem .4rem;
	font-size: .700rem;
	line-height: 1.5;
	border-radius: .2rem;
}

/* INDEX LEVELS */
.oda-idxsection-1 {
	border-left: 3px solid #b42a2d;
}

.oda-idxsection-2 {
	border-left: 3px solid #ea562c;
	padding-left: 20px !important;
}

.oda-idxsection-3 {
	border-left: 3px solid #23d1a0;
	padding-left: 20px !important;
}

.oda-idxlevel-1 {
	font-size: 1rem;
	font-weight: bold;
}

.oda-idxlevel-2 {
	font-size: 0.9rem;
	font-weight: bold;
}

.oda-idxlevel-3 {
	font-size: 0.8rem;
	font-weight: bold;
}

.oda-idx-item {
	font-size: 1rem;
	border-left: 3px solid #c0c0c0 !Important;
	padding-left: 20px !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-right: 10px !important;
	font-weight: normal !important;
	border-top: 0px !important;
	border-right: 0px !important;
	border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

/* ODA MENUS BUTTONS */
.btn-menus {
	border: none;
	font-size: 1rem;
	padding: 5px 9px;
	border-radius: 6px;
	color: var(--btnMnuColor);
	background-color: var(--btnMnuBackColor);
}

.btn-menus:hover {
	color: var(--btnMnuBackColor);
	background-color: var(--btnMnuColor);
}

.btn-menus:active, .btn-menus-active {
	color: var(--btnMnuColorSelected);
	background-color: var(--btnMnuBackColorSelected);
}

/* Index searh */
@media ( max-width : 768px) {
	#ODA_INDEX_TOOLBAR {
		display: flex;
		flex-wrap: nowrap; /* Prevents wrapping */
	}
	.input-group {
		flex: 1; /* Makes search input take remaining space */
		max-width: 75%; /* Adjust width to fit Reset button */
	}
	#BTN_IDX_CLEAR {
		flex-shrink: 0; /* Prevents button from shrinking */
	}
	.form-check-inline {
		font-size: 14px;
	}
}

.yellow-marked {
	background-color: yellow;
}

.toolbarLbl {
	font-size: 1rem;
}

.odaToolbarBtn {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ddd;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.odaToolbarBtn:hover {
	background-color: #f8f9fa;
	transform: scale(1.1);
}

.text-justified {
	text-align: justify;
}

input.radio-md {
	width: 1.5rem;
	height: 1.5rem;
}

.radio-lbl-md {
	margin-left: 10px;
	font-size: 1rem;
}

/* PROGRESS FASE */
.atenuado {
	opacity: 0.5 !important;
	pointer-events: none;
}

/* GRIDBOX */
div.gridbox_dhx_web.gridbox table.obj tr td {
	font-size: 1rem;
}

div.gridbox_dhx_web.gridbox table.hdr td {
	border-width: 0 1px 0 0;
	border-top: 1px solid #dbdbdb;
	border-right-color: #dbdbdb;
	padding: 7px 0 8px 0;
	background-color: #f4f4f4;
	font-family: var(--FontFamily);
	font-size: 1rem;
	color: #000;
	vertical-align: top;
	text-align: left;
	position: relative;
}

div.gridbox div.ftr td {
	font-size: 1rem;
}

div.gridbox_dhx_web.gridbox table.obj tr td {
	font-family: var(--FontFamily);
}

div.gridbox_dhx_web.gridbox table.obj.row20px tr td {
	font-family: var(--FontFamily);
}

div.gridbox div.ftr td {
	padding: 0;
	padding-left: 10px;
	padding-right: 5px;
	border-top: 1px solid gray;
	border-right: 1px solid gray;
	background-color: var(--backgroundRowTotal) !important;
	font-style: italic;
	font-family: var(--FontFamily) !important;
	color: var(--colorRowTotal);
	overflow: hidden;
}

div.gridbox {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

@media ( max-width : 768px) {
	div.gridbox_dhx_web.gridbox table.obj tr td {
		font-size: 0.8rem;
	}
	div.gridbox div.ftr td {
		font-size: 0.8rem;
	}
}

.ODAHeadLink {
	cursor: pointer;
	display: block;
}

.ODAHeadLink:hover {
	cursor: pointer;
	display: block;
	background-color: lightGray;
}

.ODAHeadGroup {
	font-weight: bold;
	display: block;
	text-align: center;
}

.odaGroupStyle {
	background-color: var(--groupBackground);
	color: var(--groupColor);
}

/*****************************
WEB STYLES
********************************/
.webPrimaryBackground {
	background-color: var(--webPrimaryColor) !important;
	color: var(--webPrimaryColorInv) !important;
	background-image: var(--webPrimaryBackgroundUrl);
	background-repeat: repeat;
	/* Increase background size to create spacing */
	background-size: 150px 150px;
	/* Optional: center the image in each repetition */
	background-position: center;
	position: relative;
}

/*****************************
SNIPPET COUNTRY LIST
********************************/
.country-list-container {
	max-height: 60vh;
	/* Ensures it does not exceed 60% of the viewport height */
	overflow-y: auto; /* Enables vertical scrolling */
	/*     border: 1px solid #ddd; Optional: Adds a subtle border */
	padding: 5px; /* Optional: Adds some spacing */
}

@media ( max-height : 600px) {
	.country-list-container {
		max-height: 40vh;
	}
}

@media ( max-height : 400px) {
	.country-list-container {
		max-height: 30vh;
	}
}

.blockquote {
	margin-bottom: 1rem;
	font-size: 1rem;
}

.equal-img {
	width: 100%; /* Full width */
	height: 220px; /* Set a fixed height */
	object-fit: cover; /* Crop the image while maintaining aspect ratio */
	object-position: center; /* Center the image within the frame */
}
/*****************************
SNIPPET NEWS
********************************/

/* Ensure all images have the same height */
.news-fixed-image {
	width: 100%; /* Ensures it doesn't overflow */
	height: 230px; /* Fixed height */
	object-fit: cover;
	/* Ensures the image maintains aspect ratio while filling */
	object-position: center; /* Centers the image */
	display: block;
	margin: 0 !important;
}

.card-title-wrapper {
	height: 70px;
	overflow: hidden;
	position: relative;
}

.card-title-wrapper-long {
	height: 160px;
	overflow: hidden;
	position: relative;
}

.card-title-wrapper::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px; /* adjust the height of the fade as needed */
	/* Adjust the gradient colors to match your card background */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff
		100%);
}

@media ( hover : hover) and (pointer: fine) {
	.news-equal-card:hover, .news-equal-card:focus-within {
		box-shadow: 0 0 0 2px #ccc !important;
	}
}

.white {
	color: white !Important;
}

/* For contents-web pages:    */
.social-icons {
	z-index: 200;
}

.carousel .card-img-top {
	object-fit: contain;
	width: 90%;
}

.carousel .card-body {
	min-height: 100px; /* optional to align text zones */
}

.carousel-indicators [data-bs-target] {
	background-color: #333; /* dark gray dot */
	width: 10px;
	height: 10px;
	border-radius: 50%;
	opacity: 1;
}

.carousel-indicators .active {
	background-color: #007bff; /* active = Bootstrap primary */
}

/* .carousel-indicators { */
/*   position: static; */
/*   margin-top: 1rem; */
/*   justify-content: center; */
/* } */
.people-photo-card {
	max-width: 130px;
}


/* Dark-themed dropdowns inside your transparent navbar */
.navbar-custom .dropdown-menu{
  --bs-dropdown-bg: var(--bs-dark);
  --bs-dropdown-color: var(--bs-light);
  --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);
               /* small gap under bar */
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}

 /* subtle divider under the navbar so it reads as separate */
.navbar-custom{ border-bottom:1px solid rgba(0,0,0,.06); }

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

	/* Fix individual items */
	.navbar-collapse.show .dropdown-menu .dropdown-item {
		color: white;
	}

	/* Optional: highlight on hover */
	.navbar-collapse.show .dropdown-menu .dropdown-item:hover {
		background-color: #005299;
		color: white;
	}
	.navbar-collapse.show .dropdown-menu {
		border-radius: 0.25rem;
		padding: 0.5rem 0;
	}
}

.wvs-box-img {
	max-height: 180px;
	object-fit: contain;
}

.nav.flex-column {
	/*   font-size: 0.85rem; */
	
}

#trend-file-index .nav-link:hover {
	text-decoration: underline;
	color: #0d6efd;
}

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

@media ( max-width : 576px) {
	.header-wrapper .p-4 {
		padding: 1rem !important;
	}
	.header-wrapper .p-3.rounded {
		padding: 0px !important; /* equivalent to Bootstrap p-2 */
	}
}

@media ( min-width : 992px) {
	#webinar-video-wrapper {
		aspect-ratio: 16/6; /* shorter than 16/9 */
	}
}

.abstract-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 4; /* Number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#INFOGRAPHICS .card-img-top {
	height: auto;
	max-height:200px;
	object-fit: cover;
	width: 100%;
	display: block;
}

#INFOGRAPHICS .card-body {
	display: flex;
	flex-direction: column;
}

#INFOGRAPHICS .card-body p {
	flex-grow: 1;
}
#INFOGRAPHICS .card {
  max-width: 100%;
  overflow: hidden;
}

.card .small a {
  color: #0d6efd;
  font-size: 0.85rem;
}
.card .small a:hover {
  text-decoration: underline;
}
.card:hover {
  cursor: pointer;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.sublink-list li {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

.sub-link {
  font-size: 0.85rem;
  text-decoration: none;
  position: relative; 
	z-index:4000 !important;
}

.sub-link:hover {
  text-decoration: underline;
  color: #0d6efd;
}


/* Logo resizing */
.logo-img {
  max-height: 80px;
}

/* Optional: constrain logo size on smaller screens */
@media (max-width: 576px) {
  .logo-img {
    max-height: 60px;
  }
}
 @media (min-width: 992px) { /* lg and up */
    .limit-lg { max-width: 980px; }
  }
 

  
   /* Make the map area feel substantial while loading / responsive afterwards */
  #map-container { height:500px}

 
.about-logo { max-height: 140px; object-fit: contain; }
.quick-facts-img { max-height: 360px; object-fit: contain; }
 

  /* Nice active state for currently selected wave */
  #wave-buttons .btn.active {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  
  .network-hero { max-height: 240px; object-fit: cover; }
  
   #weights, #why-weights, #s017, #equilibrated, #popweight, #multi-samples { scroll-margin-top: 6rem; }
   
   
   /* Secondary-styled pagination with spacing */
.pagination-secondary{
  --bs-pagination-bg: transparent;
  --bs-pagination-color: var(--bs-secondary);
  --bs-pagination-border-color: var(--bs-secondary);

  --bs-pagination-hover-color:#fff;
  --bs-pagination-hover-bg: var(--bs-secondary);
  --bs-pagination-hover-border-color: var(--bs-secondary);

  --bs-pagination-focus-color:#fff;
  --bs-pagination-focus-bg: var(--bs-secondary);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-secondary-rgb), .25);

  --bs-pagination-active-color:#fff;
  --bs-pagination-active-bg: var(--bs-secondary);
  --bs-pagination-active-border-color: var(--bs-secondary);

  --bs-pagination-disabled-color: var(--bs-secondary);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--bs-secondary);
}

/* Optional: slightly round each button since they’re separated */
.pagination-secondary .page-link{ border-radius:.5rem; }
   
   
/* Clamp/expand abstract text */
.abstract.clamped{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;            /* change to 7 if you prefer */
  overflow:hidden;
  position:relative;
}
.abstract.clamped::after{           /* subtle fade at bottom */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2.25rem;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--bs-card-bg));
  pointer-events:none;
}
.abstract.expanded{
  display:block;                    /* disables the clamp */
  overflow:visible;
}

/* Consistent cover aspect ratio and tidy abstracts */
.book-cover{ aspect-ratio: 2 / 3; object-fit: cover; background:#f8f9fa; }
.bookabstract.clamped{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.bookrecordabstract.clamped{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; overflow:hidden; position:relative;
}
.bookrecordabstract.clamped::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.25rem;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--bs-body-bg));
}

.bookrecord-cover{
  max-height: clamp(240px, 40vh, 420px);
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background:#f8f9fa;
}


.bookmodal-cover{
  max-width: 100%;
  max-height: 85vh;   /* or 900px if you prefer */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Make sure text can shrink inside flex columns */
.news-card .card-body{ min-width: 0; }

/* general clamp util */
.clamp-3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  line-clamp:3; /* modern */
}

/* make sure the abstract becomes a single inline flow */
.news-card .abstract{
  min-width:0;
}
.news-card .abstract > *{ display:inline; }     /* flatten nested tags */
.news-card .abstract p{ display:inline; margin:0; }
.news-card .abstract br{ display:none; }        /* avoid manual breaks */

/* optional: subtle fade at bottom */
.news-card .abstract.clamp-3{
  position:relative;
}
.news-card .abstract.clamp-3::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1.6rem;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--bs-card-bg));
  pointer-events:none;
}
/* NEWS LIST — secondary-accent theme (Bootstrap 5.3+) */
#news-list .list-group-item{
  border-left: .25rem solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Hover: subtle tint + left accent */
#news-list .list-group-item:hover{
  background-color: rgba(var(--bs-secondary-rgb), .06);
  border-color: rgba(var(--bs-secondary-rgb), .35);
}

/* Keyboard focus ring (accessible) */
#news-list .list-group-item:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-secondary-rgb), .25);
}

/* Active/selected item (if you add .active) */
#news-list .list-group-item.active{
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
}
#news-list .list-group-item.active .text-muted{ color: rgba(255,255,255,.75) !important; }
#news-list .list-group-item.active .badge{
  background: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

/* Keep links clean; no underline on hover */
#news-list .list-group-item-action:hover,
#news-list .list-group-item-action:focus{
  text-decoration: none;
}


  /* Faqs */
 .faq-answer p { text-align: justify; }
 /* Base style for all items */
#faqIndex .list-group-item {
  border: none;                 /* cleaner look without default border */
  border-left: 3px solid transparent; /* subtle highlight for active/hover */
  padding: 0.6rem 1rem;
  font-weight: 500;
  background-color: transparent; /* keep background clean until hover/active */
  color: #2c3e50;                 /* deep navy text */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover */
#faqIndex .list-group-item:hover {
  background-color: #34495e;     /* lighter navy */
  color: #fff;
  border-color: #34495e;
}

/* Active */
#faqIndex .list-group-item.active {
  background-color: #2c3e50;     /* deep academic navy */
  color: #fff;
  border-color: #2c3e50;
}

/* --- TOC base --- */
#toc .list-group-item {
  background-color: transparent;            /* calm by default */
  color: var(--bs-body-color);
  border: 0;                                /* remove heavy borders */
  border-left: .25rem solid transparent;    /* subtle left rail */
  border-radius: 0;
  padding: .5rem .75rem;                    /* your tighter spacing */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Divider between items (since we removed borders) */
#toc .list-group-item + .list-group-item {
  border-top: 1px solid var(--bs-border-color);
}

/* Hover / focus (unselected) */
#toc .list-group-item:hover,
#toc .list-group-item:focus {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-text-emphasis);
  border-left-color: var(--bs-secondary);
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 .15rem rgba(var(--bs-secondary-rgb), .15); /* gentle focus ring */
}

/* Active (current section) */
#toc .list-group-item.active {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--bs-primary);     /* brand accent on the rail */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Optional: make the clickable area feel tighter on very small screens */
@media (max-width: 991.98px){
  #toc .list-group-item { padding: .5rem .5rem; }
}


#xTwitter .list-group .mt-1 { 
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 
  overflow:hidden; 
}

/* Show 4 items on desktop; keep all on mobile */
@media (min-width: 992px){
  #xTwitter .list-group .list-group-item:nth-child(n+5){ display:none; }
}

.prose { max-width: 65rem; margin-inline: auto; }


.note {
  --note-bg: var(--bs-info-bg-subtle);
  --note-border: var(--bs-info);
  --note-text: var(--bs-info-text-emphasis);
  background-color: var(--note-bg);
  border-left: .375rem solid var(--note-border);
  border-radius: .375rem;
  padding: .75rem .9rem;
}
.note .note-title {
  color: var(--note-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .25rem 0;
}
.note .note-body { margin: 0; }

/* Variant for warnings (stronger) */
.note-warning {
  --note-bg: var(--bs-warning-bg-subtle);
  --note-border: var(--bs-warning);
  --note-text: var(--bs-warning-text-emphasis);
}

/* Logo cards */
.funder-card .funder-logo {
  width: 96px;              /* consistent logo block */
  height: 64px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(10%);
  opacity: .95;
}
.funder-card:hover .funder-logo { filter: none; opacity: 1; }

/* Optional: keep long names from wobbling the layout */
.funder-card h6 { margin-bottom: .125rem; }

.president-photo { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }