*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	width: 100%;
}

/* Static background on its own fixed layer behind the page.
   background-attachment: fixed is ignored by iOS Safari, which stretches the
   image over the whole scrolling page instead. */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	/* Fallback for older browsers */
	background-image: url('../img/forest-background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Modern browsers will load the WebP version instead */
@supports (background-image: url('../img/forest-background.webp')) {
	body::before {
		background-image: url('../img/forest-background.webp');
	}
}

/* Customize the popover container */
.transparent-popover {
	/* 1. Make background semi-transparent white (0.8 transparency) */
	--bs-popover-bg: #5456b340 !important;

	/* 2. Soften or remove the border */
	--bs-popover-border-color: #5456b3 !important;

	/* 3. Change text color if needed */
	--bs-popover-body-color: white !important;

	/* Optional: Add a trendy frosted-glass blur effect behind it */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* The global overflow-x rule clips the arrow, which sits outside the popover box */
.transparent-popover,
.transparent-popover .popover-arrow {
	overflow: visible;
}

/* Customize the popover header specifically */
.transparent-popover .popover-header {
	/* 3. Change text color if needed */
	color: white !important;
	background-color: transparent !important;
	border-bottom: 1px solid #5456b3 !important;
}

/* Customize the small arrow pointing to the image */
.transparent-popover {
	--bs-popover-arrow-border: #5456b3 !important;
}

.bg-body-tertiary-custom {
	background-color: #00000080;
}
.navbar-brand {
	color: white;
	margin: 0 auto;
	white-space: normal;
	text-align: center;
}

.row {
	max-width: 600px;
	padding-top: 2em;
	margin: 0 auto;
}

.myCollapseGroup {
	margin: 0 auto;
}

.footer {
	background-color: black !important;
	color: white !important;
}

/* 1. BASE STATE (Keeps your clean custom variables) */
.btn.btn-custom {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: #585d92;
	color: var(--bs-btn-color) !important;
	background-color: var(--bs-btn-bg) !important;
}

/* 2. INITIAL HOVER STATE (Forces color before any clicks) */
.btn.btn-custom:hover {
	background: #20c6cd !important;
	background-color: #20c6cd !important;
	background-image: none !important; /* Strips Bootstrap's variable transition mask */
	border-color: #20c6cd !important;
	color: #ffffff !important;
}

/* 3. POST-TOGGLE ACTIVE STATES (Keeps the color working after clicks) */
.btn.btn-custom:focus,
.btn.btn-custom:active,
.btn.btn-custom[aria-expanded='true'] {
	background: #419a9d !important;
	background-color: #2ca6ab !important;
	border-color: #20c6cd !important;
	color: #ffffff !important;
	box-shadow: none !important; /* Clears Bootstrap's blue focus glow ring */
}

.card.card-body {
	background-color: #00000080;
	color: white;
}

/* Base styles for the logo */
.header-logo,
.main-center-logo {
	display: block;
	margin: auto;
	width: 100%;
	/* Forces the SVG to fill its container up to its max-width */
	height: auto;
	/* Maintains the perfect 1:1 square aspect ratio */
	max-width: clamp(180px, 50vw, 240px);
	/* Scales with screen width: 180px on small phones up to 240px from ~480px wide */
	transition: max-width 0.3s ease;
	/* Smooth scaling when resizing screens */
}

/* White and pupil of the logo's eye, moved by js/main.js to follow the mouse */
.logo-sclera,
.logo-pupil {
	transition: transform 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.logo-sclera,
	.logo-pupil {
		transition: none;
	}
}

/* Tablet Layout (Screens wider than 768px) */
@media (min-width: 768px) {
	.navbar-brand {
		font-size: 1em;
	}
}

/* Re-enables visibility cleanly once this stylesheet has finished loading and parsing */
html {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease-in;
}