:root {
  --dark-purple: #3a0057;
  --light-purple: #660099;
  --red: #D7263D;
  --white: #FFFFFF;
  --green: #558B6E;
  --black: #000000;
}

@font-face {
  font-family: 'RoundStyle';
  src: url('../fonts/RoundStyle-Book.ttf') format('truetype');
}

body,
html {
  margin: 0;
  padding: 0;
  background-color: var(--black);
  color: var(--white);
  font-family: "Georgia", serif;
}

h1 {
  font-family: "RoundStyle", sans-serif;
}

/* Optional background image for selected pages */
.page-with-bg {
  /* Fallback solid background */
  background-color: var(--black);
  /* Top layer: 50% black overlay for mobile, Bottom layer: background image */
  background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url('../images/bg.webp');
  background-position: left center;
  background-attachment: fixed;
}

/* Use fixed attachment, darker overlay, and center positioning on larger screens */
@media (min-width: 768px) {
  .page-with-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url('../images/bg.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

.navbar {
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border-color: var(--white);
}

.navbar-collapse {
  background-color: var(--dark-purple);
  opacity: 0.9;
}

.nav-link {
  color: var(--white) !important;
}

.nav-item {
  font-family: "RoundStyle";
  font-size: xx-large;
  margin: 0 1rem;
  /* Add horizontal spacing between nav items */
}

.bg-body-tertiary {
  background-color: var(--dark-purple) !important;
}

/* Make success buttons use the site's green palette */
.btn-success {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
  color: var(--white) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #476f5b !important; /* slightly darker green */
  border-color: #476f5b !important;
  color: var(--white) !important;
}

.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  background-color: #3f6251 !important;
  border-color: #3f6251 !important;
  color: var(--white) !important;
}

.btn-success.disabled, .btn-success:disabled {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}

footer {
  height: 100px;
  background-color: var(--dark-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

footer a {
  text-decoration: none;
  border: none;
  outline: none;
  display: inline-block;
}

.footer-content {
  padding: 20px;
  text-align: center;
}

.container {
  padding-top: 80px;
}

@media (max-width: 1350px) {
  .nav-item {
    /* use a responsive font-size smaller than xx-large but scaling with viewport */
    font-size: clamp(0.9rem, 0.9rem + 0.4vw, 1.25rem);
    margin: 0 0.75rem;
  }

  /* scale the brand/logo down responsively (overrides the inline height attribute) */
  .navbar-brand img {
    height: clamp(40px, 3.0vw, 56px);
    width: auto;
    display: block;
  }

  /* allow the navbar to be a little shorter on narrower viewports */
  .navbar {
    height: clamp(64px, 6.0vw, 80px);
  }
}

/* Remove underlines from linked badges and common link states where styled as components */
a.badge,
a.badge:hover,
a.badge:focus,
a.badge:active,
a.badge:visited {
  text-decoration: none !important;
}

/* Lazy loading image improvements */
img[loading="lazy"] {
  /* Smooth transition when image loads */
  transition: opacity 0.3s ease-in-out;
}

/* Ensure images maintain aspect ratio during loading */
.card-img-top[loading="lazy"] {
  min-height: 200px;
  object-fit: cover;
}