/************************
A NOTE ABOUT THIS CSS:
This file is designed to ensure basic styles are provided for our most commonly used assets on websites.
To modify color variables, see nld-color.css
*************************/

/************************
FONT INCLUDES - Google Fonts or Adobe Font @import
*************************/
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/************************
BODY
*************************/
* {
	/**/
}

body {
	background: var(--dark);
	color: var(--light);
	font-family: "Inter", serif;
	font-size: 1rem;
}	

::selection { /*text selection*/
	background: var(--tertiary-shade-02);
	color: #fff;
}

/*************************
HEADINGS AND FONTS
**************************/
.display-1, .display-2, .display-3, .display-4 {
	font-weight: 900;
}

h1, .h1 { /*only use for page titles*/
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h2, .h2 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h3, .h3 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h4, .h4 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h5, .h5 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h6, .h6 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 1px;
}

.text-serif {
	font-family: Georgia, serif;
}

.text-sans-serif {
	font-family: "Montserrat", "Jost", sans-serif;
}

.text-sans-serif-2 {
	font-family: "Inter", sans-serif;
}

.text-muted {
	color: inherit!important;
	opacity: 0.75;
}

.fw-xbold {
	font-weight: 800;
}

.lead { /*slightly larger text used for intro paragraphs*/
	font-size: 1.3rem;
	font-weight: normal;
}

.small, small, .text-small { /*small text used for asides or footnotes*/
	font-size: 0.9rem;
	font-weight: normal;
}

pre {
	border-left: 5px solid var(--secondary);
	background: var(--darker);
	padding: 1rem;
	white-space: pre;
}

code {
	color: var(--secondary)!important;
	background: var(--darker);
}

blockquote { /*used for pullquotes in articles*/
	font-size: 1.4rem;
	font-weight: 600;
	font-style: italic;
	max-width: 400px;
	margin: 2.5rem auto;
	position: relative;
	border-left: 5px solid var(--primary);
	padding: 1rem;
}

	blockquote p {
		margin-bottom: 0;
	}

	/*blockquote:before {
		position: absolute;
		margin-left: -30px;
		font-style: normal;
		font-weight: 700;
		font-family: "Montserrat", Jost, sans-serif;
		font-size: 3rem;
		line-height: 1rem;
		height: 25px;
		width: 25px;
		display: flex;
		align-items: center;
		
		content: ' E;
		color: var(--primary);
		
	}*/
	
	blockquote cite {
		font-size: 0.8rem;
		color: var(--gray);
	}

figure {
	
}

	figure img {
		max-width: 100%;
		height: auto;
	}

	figcaption {
		font-style: italic;
		color: var(--gray);
	}
	
/*** extra large screen display, font adjustments ***/
	@media (min-width: 1600px) {		
		h1, .h1 {
			font-size: 3.25rem;
		}
		
		h2, .h2 {
			font-size: 2.5rem;
		}
		
		h3, .h3 {
			font-size: 2.35rem;
		}
		
		h4, .h4 {
			font-size: 1.75rem;
		}
		
		h5, .h5 {
			font-size: 1.5rem;
		}
		
		h6, .h6 {
			font-size: 1rem;
		}
	}	
	
	@media (max-width: 600px) {
		.card-title {
			font-size: 1.1rem;
		}
	}

.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6   {
	margin: 1.5rem 0;
}

/**************************
LINKS AND BUTTONS
***************************/
/*** default links ***/	
a {
	transition: 0.3s;
	color: inherit;
}

	a:hover {
		
	}
	
	a:active, a:focus {
		
	}
	
	a:focus-visible { /* used for keyboard accessiblity */
		box-shadow: 0 0 0 .1rem var(--primary-tint-03);
		outline: var(--primary);
	}

/*** default button ***/	
.btn, button {
	border-color: inherit;
	transition: 0.3s;
	
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
}

	.btn-sm {
		padding: 0.5rem 0.75rem;
	}
	
	.btn-lg {
		padding: 1rem 1.25rem;
	}

	.btn:hover {
		
	}
	
	.btn:active, .btn:focus {
		border-color: inherit;
	}
	
	.btn:focus-visible {
		border-color: inherit;
		box-shadow: 0 0 0 .1rem var(--primary-tint-03);
	}

/*button with primary colors*/
.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--dark);
}

	.btn-primary:hover {
		background: var(--primary-tint-01);
		border-color: var(--primary-tint-01);
		color: var(--dark);
	}
	
	.btn-primary:active, .btn-primary:focus {
		background: var(--primary-tint-01)!important;
		border-color: var(--primary-tint-01)!important;
	}
	
	.btn-primary:focus-visible {
		border-color: var(--primary)!important;
		background: var(--primary-tint-03);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03)!important;
	}
	
.btn-outline-primary {
	background: none;
	border-color: var(--primary);
	color: var(--primary);
}

	.btn-outline-primary:hover {
		background: var(--primary);
		border-color: var(--primary);
	}
	
	.btn-outline-primary:active, .btn-primary:focus {
		background: var(--primary-shade-01)!important;
		border-color: var(--primary-shade-01)!important;
	}
	
	.btn-outline-primary:focus-visible {
		border-color: var(--primary);
		background: var(--primary-tint-03);
		color: var(--primary);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03)!important;
	}
	
/*** button with secondary colors ***/
.btn-secondary {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--dark);
}

	.btn-secondary:hover {
		background: var(--secondary-tint-01);
		border-color: var(--secondary-tint-01);
		color: var(--dark);
	}
	
	.btn-secondary:active, .btn-secondary:focus {
		background: var(--secondary-shade-01)!important;
		border-color: var(--secondary-shade-01)!important;
	}
	
	.btn-secondary:focus-visible {
		border-color: var(--secondary)!important;
		box-shadow: 0 0 0 .1rem var(--secondary-tint-03);
	}
	
.btn-outline-secondary {
	background: none;
	border-color: var(--secondary);
	color: var(--secondary);
}

	.btn-outline-secondary:hover {
		background: var(--secondary);
		border-color: var(--secondary);
	}
	
	.btn-outline-secondary:active, .btn-secondary:focus {
		background: var(--secondary-shade-01)!important;
		border-color: var(--secondary-shade-01)!important;
	}
	
	.btn-outline-secondary:focus-visible {
		border-color: var(--secondary);
		background: var(--secondary-tint-03);
		color: var(--secondary);
		box-shadow: 0 0 0 .1rem var(--secondary-tint-03)!important;
	}
	
/*** button with tertiary colors ***/
.btn-tertiary {
	background: var(--tertiary);
	border-color: var(--tertiary);
	color: var(--dark);
}

	.btn-tertiary:hover {
		background: var(--tertiary-tint-01);
		border-color: var(--tertiary-tint-01);
		color: var(--dark);
	}
	
	.btn-tertiary:active, .btn-tertiary:focus {
		background: var(--tertiary-shade-01)!important;
		border-color: var(--tertiary-shade-01)!important;
		color: var(--light);
	}
	
	.btn-tertiary:focus-visible {
		border-color: var(--tertiary)!important;
		box-shadow: 0 0 0 .1rem var(--tertiary-tint-03);
		color: var(--dark);
	}
	
.btn-outline-tertiary {
	background: none;
	border-color: var(--tertiary);
	color: var(--tertiary);
}

	.btn-outline-tertiary:hover {
		background: var(--tertiary);
		border-color: var(--tertiary);
		color: var(--light);
	}
	
	.btn-outline-tertiary:active, .btn-tertiary:focus {
		background: var(--tertiary-shade-01)!important;
		border-color: var(--tertiary-shade-01)!important;
		color: var(--light)!important;
	}
	
	.btn-outline-tertiary:focus-visible {
		border-color: var(--tertiary);
		background: var(--tertiary-tint-03);
		color: var(--tertiary);
		box-shadow: 0 0 0 .1rem var(--tertiary-tint-03)!important;
	}
	
/*** button with light colors ***/
.btn-light {
	background: var(--light);
	border-color: var(--light);
	color: var(--dark);
}

	.btn-light:hover {
		background: var(--light);
		border-color: var(--light);
	}
	
	.btn-light:active, .btn-light:focus {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
	}
	
	.btn-light:focus-visible {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
		box-shadow: 0 0 0 .1rem rgba(255,255,255,0.25)!important;
	}
	
.btn-outline-light {
	background: none;
	border-color: var(--light);
	color: var(--light);
}

	.btn-outline-light:hover {
		background: var(--light);
		border-color: var(--light)!important;
	}
	
	.btn-outline-light:active, .btn-light:focus {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
	}
	
	.btn-outline-light:focus-visible {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
		box-shadow: 0 0 0 .1rem rgba(255,255,255,0.25)!important;
	}
	
/*** button with dark colors ***/
.btn-dark {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--light);
}

	.btn-dark:hover {
		background: var(--dark);
		border-color: var(--dark);
	}
	
	.btn-dark:active, .btn-dark:focus {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
	}
	
	.btn-dark:focus-visible {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
		box-shadow: 0 0 0 .1rem rgba(0,0,0,0.25)!important;
	}
	
.btn-outline-dark {
	background: none;
	border-color: var(--dark);
	color: var(--dark);
}

	.btn-outline-dark:hover {
		background: var(--dark);
		border-color: var(--dark)!important;
	}
	
	.btn-outline-dark:active, .btn-dark:focus {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
	}
	
	.btn-outline-dark:focus-visible {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
		box-shadow: 0 0 0 .1rem rgba(0,0,0,0.25)!important;
	}

/***************************
WEBFORMS
****************************/
.form-control, .form-select {
	transition: 0.3s;
	padding: 0.75rem 1rem;
	background: var(--dark);
	border-color: var(--gray);
	color: var(--light);
	border-radius: 0.75rem;
}

	.form-control:focus, .form-select:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03);
		background: var(--darker);
		color: var(--light);
	}
	
	.form-control::placeholder {
		color: var(--gray);
	}

.form-check-input[type="checkbox"] {
	background-color: var(--dark);
}

.form-check-input[type="radio"] {
	background-color: var(--dark);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

	.form-check-input:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03)
	}

label {
	font-weight: 600;
}

/*************************
DESIGN ELEMENTS / HELPER CLASSES for STRUCTURE
**************************/
hr {
	opacity:1;
}

.heading-hr-wrap {
	display: flex;
	justify-content: start;
	align-items: center;
	column-gap: 0.5rem;
	text-align: left;
}

.heading-hr {
	display: inline-block;
	width: 30px;
	height: 5px;
	background: var(--secondary);
	border-color: var(-secondary);
}

/*** background + semi-transparent overlay ***/
.background { /* applied to parent div with background image */
	position:relative;
}

.text-overlay { /* applied to first child div with text */
	z-index: 3;
	position: relative;
}

.bg-overlay { /* applied to second child div to add gradient/overlay to parent image*/
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	background: rgba(0,0,0,0.2);
}

/*** min heights by screen resolution ***/
.vh-100 {
	min-height: 100vh;
}

.vh-75 {
	min-height: 75vh;
}

.vh-50 {
	min-height: 50vh;
}

.vh-25 {
	min-height: 25vh;
}

/***************************
CARDS - https://getbootstrap.com/docs/5.3/components/card/
****************************/
.card {
	color: inherit;
	background: none;
	border: 0;
	margin: 1rem 0;
}

	.card-link {
		text-decoration: none;
	}

	.card-img {
		transition: 0.3s;
		overflow: hidden;
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}
	
		.card-img img {
			transition: 0.3s;
		}
	
		.card-img:hover img {
			transform: scale(1.05);
		}

	.card-img-top {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}

	.card-body {
		
	}
	
	.card-footer {
		color: var(--gray);
	}
	
/***************************
LIST GROUPS - https://getbootstrap.com/docs/5.3/components/list-group/
****************************/
.list-group {
	background: none;
}

.list-group-item {
	background: none;
	color: var(--light);
}

.list-group-item.active {
	background: var(--primary);
	color: var(--light);
	border-color: var(--primary);
	box-shadow: none;
}
	
/***************************
ACCORDIONS - https://getbootstrap.com/docs/5.3/components/accordion/
****************************/
.accordion-button {
	background: var(--dark);
	border-color: var(--gray);
	color: var(--light);
	padding: 1.5rem 1.25rem;
	font-size: 1.25rem;
}

.accordion-button:focus {
	box-shadow: 0 0 0 .1rem var(--primary-shade-02)
}

.accordion-button:not(.collapsed) {
	background: var(--dark);
	color: var(--light);
}

	.accordion-button.collapsed::after, .accordion-button:not(.collapsed)::after { /*icon*/
	  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%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-.708z'/%3e%3c/svg%3e");
	}
	
.accordion-item { /*body*/
	background: none;
	color: var(--light);
}
	
/***************************
PAGINATION (used for views) - https://getbootstrap.com/docs/5.3/components/pagination
****************************/
.pagination .page-link {
	background: var(--dark);
	color: var(--light);
	border-color: var(--gray);
	padding: 0.5rem 1rem;
	transition: 0.3s;
}

	.pagination .page-link:hover {
		color: var(--gray);
	}

.page-link:focus {
	box-shadow: 0 0 0 .1rem var(--primary-tint-03);
}

/****************************
BADGES
*****************************/
.badge {
	border-radius: 25px;
	background: transparent!important;
	border: 2px solid var(--primary);
	text-decoration: none;
	color: var(--light);
}

/***************************
NAVIGATION - standard rail navigation
****************************/
/*** average desktop / tablet display ***/
.rail-navigation {
	position: sticky;
	z-index: 10000;
	top: 0;
	left: 0;
	height: 100vh;
	width: 75px;
	flex: 0 0 75px;
	background: var(--dark);
	box-shadow: 0 0.1rem 15px 0px rgba(0,0,0,0.25);
	border-right: 1px solid rgba(255,255,255,0.15);
}

	.rail-navigation .rail-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 75px;
		width: 75px;
		transition: 0.3s;
		color: var(--light);
		text-decoration: none;
		opacity: 0.7;
		gap: 0.2rem;
	}
	
	.rail-nav-offset { /*controls the content offset for the navbar*/
		margin-left: 75px;
	}
	
	.rail-navigation .rail-item:hover {
		opacity: 1;
	}
	
	.rail-navigation .rail-item svg {
		width: 20px;
		fill: var(--light);
		opacity: 0.7;
	}
	
	.rail-navigation .rail-item.active {
		opacity: 1;
	}
	
	.rail-navigation .rail-item svg {
		opacity: 1;
	}
	
	.rail-navigation .rail-item .rail-label {
		font-family: "Montserrat", "Jost", sans-serif;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 0.7rem;
	}
	
	.rail-navigation .rail-item.active svg {
		fill: var(--secondary);
	}
	
/*** extra large screen display ***/
@media (min-width: 1600px) {	
	.rail-navigation .rail-item svg {
		width: 30px;
	}
	
	.rail-navigation {
		width: 100px;
		flex-basis: 100px;
	}
	
	.rail-navigation .rail-item {
		height: 100px;
		width: 100px;
	}
	
	.rail-nav-offset { /*controls the content offset for the navbar*/
		margin-left: 0px;
	}
}
		
/*** mobile display ***/
@media (max-width: 640px) {
	.rail-navigation {
		top: inherit;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0.1rem 15px 5px rgba(0,0,0,0.25);
		border: 0;
		border-top: 1px solid rgba(255,255,255,0.15);
	}
	
	.rail-navigation .rail-item {
		flex-direction: column;
		align-items: center;
	}
	
	.rail-nav-offset { /*controls the content offset for the navbar*/
		margin-left: 0px;
		margin-bottom: 80px;
	}
}

/****************************
NAVIGATION POP UP MENU
*****************************/
.offcanvas-browse {
	margin-left: 75px;
	border-right: 1px solid rgba(255,255,255,0.15)!important;
	background: var(--darker);
	color: var(--light);
}

	.offcanvas-browse .offcanvas-header {
		background: var(--darker);
		border-bottom: 1px solid rgba(255,255,255,0.15);
	}
	
	.offcanvas-browse .accordion-button {
		background: none;
		padding: 0.75rem;
		opacity: 0.75;
		transition: 0.3s;
		font-family: "Inter", sans-serif;
		font-weight: 600;
	}
	
		.offcanvas-browse .accordion-button:hover {
			opacity: 1;
		}
	
	.offcanvas-browse .accordion,
	.offcanvas-browse .accordion-item,
	.offcanvas-browse .accordion-button:not(.collapsed)	{
		border: none!important;
		box-shadow: none!important;
	}
	
	.offcanvas-browse .accordion-link {
		text-decoration: none;
	}
	
		.offcanvas-browse .accordion-link:not(.collapsed)::after { /*icon*/
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%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-.708z'/%3e%3c/svg%3e");
			transform: rotate(-90deg);
		}
	
	.offcanvas-browse .accordion-body {
		padding: 0.5rem 0.5rem;
	}
	
	.offcanvas-browse a.nav-link {
		color: var(--light);
		font-style: italic;
		opacity: 0.75;
		transition: 0.3s;
		padding: 0.25rem 0.5rem;
	}
	
		.offcanvas-browse a.nav-link.active {
			opacity: 1;
		}
	
		.offcanvas-browse a.nav-link:hover {
			opacity: 1;
			margin-left: 0.25rem;
		}

/*** extra large screen display ***/
@media (min-width: 1600px) {	
	.offcanvas-browse {
		margin-left: 100px;
	}
}
		
/*** mobile display ***/
@media (max-width: 640px) {
	.offcanvas-browse {
		margin-left: 0;
	}
}


/***************************
FOOTER
****************************/


/*****************************
SLIDER
******************************/
.swiper {
	width: 100%;
	padding-bottom: 35px;
}

.swiper-button-next::after, .swiper-button-prev::after {
	color: var(--secondary);
}

.swiper-pagination-bullet {
	background: var(--gray);
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: var(--secondary);
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	
}

.content-slider {
  overflow: hidden;
  max-width: 100%;
}

/*****************************
ANIMATIONS - GENERAL
******************************/
.l1 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 900;
}

.neonText {
	  animation: flicker 5s infinite alternate;
}

	/* Flickering animation */
	@keyframes flicker {
	  0%, 18%, 22%, 25%, 53%, 57%, 100% {
		  text-shadow:
		  0 0 2px #fff,
		  0 0 4px #fff,
		  0 0 2px #fff,
		  0 0 20px var(--primary),
		  0 0 28px var(--primary),
		  0 0 35px var(--primary),
		  0 0 43px var(--primary),
		  0 0 55px var(--primary);
	  }
	  
	  20%, 24%, 55% {        
		  text-shadow: none;
	  }    
	}

.subcategory-browser .slider-row {
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* ==========================================================================
   SCROLL PROGRESS BAR
   ========================================================================== */

.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: transparent;
  z-index: 9999;
}

.scroll-progress-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0073e6, #00bfff);
  box-shadow: 0 0 10px rgba(0, 115, 230, 0.5);
  transition: width 0.1s ease-out;
}


/* ==========================================================================
   TABLE OF CONTENTS - BASE STYLES
   ========================================================================== */

.toc__title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc__item {
  margin: 0;
  padding: 0;
}

/* Indent nested headings */
.toc__item--h3 { padding-left: 0.75rem; }
.toc__item--h4 { padding-left: 1.5rem; }
.toc__item--h5 { padding-left: 2.25rem; }
.toc__item--h6 { padding-left: 3rem; }

.toc__link {
  display: block;
  padding: 0.4rem 0;
  color: #495057;
  text-decoration: none;
  font-size: 0.875rem;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: all 0.2s ease;
}

.toc__link:hover {
  color: #0073e6;
  border-left-color: #0073e6;
}

.toc__link.is-active {
  color: #0073e6;
  font-weight: 500;
  border-left-color: #0073e6;
  background: rgba(0, 115, 230, 0.05);
}


/* ==========================================================================
   TABLE OF CONTENTS - FIXED LEFT RAIL
   ========================================================================== */

.toc-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  z-index: 900;
  overflow: hidden;
}

.toc-rail__inner {
  padding: 2rem 1.5rem;
  height: 100%;
  overflow-y: auto;
}

.toc-rail__inner::-webkit-scrollbar {
  width: 4px;
}

.toc-rail__inner::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.toc-rail__inner::-webkit-scrollbar-track {
  background: transparent;
}

/* Rail-specific link styles */
.toc--rail .toc__link {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

/* Offset main content when rail is visible */
@media (min-width: 1200px) {
  body:has(.toc-rail) .rail-nav-offset {
    margin-left: 260px;
  }
}


/* ==========================================================================
   TABLE OF CONTENTS - MOBILE COLLAPSIBLE
   ========================================================================== */

.toc-wrapper {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.toc-wrapper--mobile {
  padding: 0;
  overflow: hidden;
}

.toc__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.toc__toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}

.toc__toggle:focus {
  outline: 2px solid #0073e6;
  outline-offset: -2px;
}

.toc__toggle-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.toc__toggle-icon::before,
.toc__toggle-icon::after {
  content: '';
  position: absolute;
  background: #333;
  border-radius: 1px;
  transition: transform 0.3s ease;
}

.toc__toggle-icon::before {
  width: 10px;
  height: 2px;
  top: 50%;
  left: 2px;
  transform: translateY(-50%) rotate(45deg);
}

.toc__toggle-icon::after {
  width: 10px;
  height: 2px;
  top: 50%;
  right: 2px;
  transform: translateY(-50%) rotate(-45deg);
}

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

.toc__toggle[aria-expanded="true"] .toc__toggle-icon::after {
  transform: translateY(-50%) rotate(45deg);
}

.toc--mobile {
  padding: 0 1.25rem 1.25rem;
}

.toc--mobile .toc__link {
  padding: 0.5rem 0.75rem;
}


/* ==========================================================================
   TABLE OF CONTENTS - FLOATING BAR
   ========================================================================== */

.toc-floating {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e9ecef;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Offset floating bar when rail is visible */
@media (min-width: 1200px) {
  body:has(.toc-rail) .toc-floating {
    left: 260px;
  }
}

.toc-floating__inner {
  position: relative;
}

.toc-floating__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
}

.toc-floating__toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}

.toc-floating__toggle:focus {
  outline: none;
}

.toc-floating__label {
  color: #6c757d;
  font-weight: 400;
  flex-shrink: 0;
}

.toc-floating__current {
  color: #333;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.toc-floating__icon {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.toc-floating__icon::before,
.toc-floating__icon::after {
  content: '';
  position: absolute;
  background: #6c757d;
  border-radius: 1px;
  transition: transform 0.3s ease;
}

.toc-floating__icon::before {
  width: 8px;
  height: 2px;
  top: 50%;
  left: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.toc-floating__icon::after {
  width: 8px;
  height: 2px;
  top: 50%;
  right: 1px;
  transform: translateY(-50%) rotate(-45deg);
}

.toc-floating__toggle[aria-expanded="true"] .toc-floating__icon::before {
  transform: translateY(-50%) rotate(-45deg);
}

.toc-floating__toggle[aria-expanded="true"] .toc-floating__icon::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Floating dropdown content */
.toc--floating {
  padding: 0.5rem 0 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

.toc--floating .toc__link {
  padding: 0.5rem 0.75rem;
}

/********************************
ARTICLES AND VIDEO STYLE
**********************************/
.author-byline {
	padding: 1rem;
	border-top: 1px solid var(--gray);
	border-bottom: 1px solid var(--gray);
	display: flex;
	column-gap: 1rem;
}

	.author-byline .author-img {
		max-width: 80px;
	}
	
		.author-byline .author-img img {
			border-radius: 100%;
		}
	
.affiliate-linker {
	background: var(--darker);
	padding: 1rem;
	border-top: 5px solid var(--primary);
}




/* Fix Homepage Slider Image Sizing */
.categories-slider .card-img {
    position: relative; /* Ensure ratio context */
    overflow: hidden;   /* Cut off anything sticking out */
}

/* Force the link to fill the ratio container */
.categories-slider .card-img a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Force the image to fit inside the link without stretching or zooming */
.categories-slider .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scales image to cover the box nicely */
    object-position: center;
}

/* --- CARD IMAGE SIZING FIXES (Slider & Grid) --- */

/* 1. Target both the Slider and the Latest Grid */
.categories-slider .card-img, 
.latest-grid .card-img {
    position: relative; /* Ensure ratio context */
    overflow: hidden;   /* Cut off anything sticking out */
}

/* 2. Force the link <a> to fill the ratio container */
.categories-slider .card-img a,
.latest-grid .card-img a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 3. Force the image to fit inside the link without stretching */
.categories-slider .card-img img,
.latest-grid .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scales image to cover the box nicely */
    object-position: center;
}


/* --- ADMIN TOOLBAR & RAIL FIXES (Final Z-Index Fix) --- */

/* --- DESKTOP (Vertical Rail) --- */
@media (min-width: 641px) {
    /* 0. Lay the rail and content out side-by-side with flex so the sticky
          rail doesn't reserve a tall empty 100vh block at the top. */
    #page-wrapper {
        display: flex;
        align-items: flex-start;
    }

    /* 1. Rail: 
       - Sticky and in normal flow, so the Gin toolbar's body padding pushes
         it (and the content) out of the way automatically - no manual offset.
       - Z-Index 1060: Above the Offcanvas (1050) and Backdrop (1040) 
    */
    body .rail-navigation {
        position: sticky;
        top: 0;
        left: 0;
        flex: 0 0 75px;
        z-index: 1060; 
    }

    /* 2. Browse Menu: 
       - Same position as Rail
       - Z-Index 1050: Standard Bootstrap level, clickable.
       - Padding Left: Pushes text to the right so it's not hidden by the Rail.
    */
    body .offcanvas-browse {
        top: var(--drupal-displace-offset-top, 0px) !important;
        left: var(--drupal-displace-offset-left, 0px) !important;
        height: calc(100% - var(--drupal-displace-offset-top, 0px)) !important;
        z-index: 1050; 
        padding-left: 75px; /* Width of the Rail */
    }

    /* 3. Content: flex column adjacent to the rail. No manual left offset is
          needed anymore - the toolbar's body padding displaces it via flex. */
    body .rail-nav-offset {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
    }
}

/* --- LARGE DESKTOP (Wider Rail) --- */
@media (min-width: 1600px) {    
    body .rail-navigation {
        flex-basis: 100px;
    }

    body .rail-nav-offset {
        margin-left: 0;
    }
    
    /* Adjust menu padding to match wider rail */
    body .offcanvas-browse {
		top: var(--drupal-displace-offset-top, 0px) !important;
		left: var(--drupal-displace-offset-left, 0px) !important;
		height: calc(100% - var(--drupal-displace-offset-top, 0px)) !important;
        padding-left: 100px;
    }
}

/* --- MOBILE (Horizontal Bottom Bar) --- */
@media (max-width: 640px) {
    /* 1. Rail: Stick to Bottom (fixed pins a bottom bar reliably; sticky cannot
          pin an element that sits at the top of a tall parent to the viewport bottom) */
    body .rail-navigation {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        z-index: 1060;
    }

    /* 2. Browse Menu: Full Screen Overlay */
    body .offcanvas-browse {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000; /* Nuclear option: Above everything on mobile */
        padding-left: 0; /* Reset padding */
    }

    /* 3. Content Padding */
    body .rail-nav-offset {
        margin-left: 0;
        padding-bottom: 80px; 
    }
}

/* --- ADMIN INTERFACE FIXES --- */
/* Force Drupal Admin Toolbar to sit above Bootstrap Offcanvas (1050) & Rail (1060) */
#toolbar-administration,
.gin-sidebar, 
.toolbar-bar {
    z-index: 2500 !important;
}

/* Ensure the toolbar tray (sub-menus) also sits high */
#toolbar-item-administration-tray {
    z-index: 2499 !important;
}


/* Force Drupal taxonomy links to look like Bootstrap Badges */
.category-badge-wrapper .field--name-field-category a {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: var(--light);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 25px;
    background: transparent;
    border: 2px solid var(--primary);
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.category-badge-wrapper .field--name-field-category a:hover {
    background: var(--primary);
    color: var(--dark);
}



/* --- SITE STATUS MESSAGES --- */
/* Keep the whole wrapper non-interactive so that even when a dismissed alert
   leaves the wrapper in the DOM, it never blocks clicks underneath. Only the
   visible alert box itself is clickable (e.g. for its dismiss button). */
body .alert-wrapper[data-drupal-messages] {
    position: fixed;
    top: calc(var(--drupal-displace-offset-top, 0px) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000 !important;
    max-width: min(90vw, 720px);
    pointer-events: none; /* wrapper does not intercept clicks */
}

body .alert-wrapper[data-drupal-messages] .alert {
    pointer-events: auto; /* the visible alert box is clickable */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}