/**
 * Additional styles for when JavaScript is disabled
 */

 /* 
  * Hero video starts with 0 opacity, and is transitioned to 1 with JavaScript, 
  * so we need to set it to 1 when JavaScript is disabled 
  */
.hero-video {
	opacity: 1;
}

/* Always blur the header when JavaScript is disabled */
.header-container {
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background-color: var(--bb-blur-bg);
}

/* Assume blurred header for all foreground styles when JavaScript is disabled */
.header-container .header-content nav a {
	color: #2c2c2c !important; /* Black when header is pinned on light background */
}

/* Hover effect for pinned header (light mode) when JavaScript is disabled */
.header-container .header-content nav a:hover {
	background-color: var(--bb-nav-hover-bg-pinned) !important;
}
  
/* In dark mode, keep nav text white even when pinned */
[data-bs-theme="dark"] .header-container .header-content nav a {
	color: #ffffff !important; /* Keep white in dark mode */
}

/* Show the nav buttons container when JavaScript is disabled, since the overflow requires JavaScript */

#navButtonsContainer {
	display: flex !important;
}

#navOverflowMenuContainer {
	display: none !important;
}