/* css/global.css */
@import url('https://fonts.cdnfonts.com/css/cat-frankendeutsch');

/* Global Styles */
body {
  font-family: 'Raleway', sans-serif;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Navbar */
/* A dark, translucent gradient that remains darker than the banners */
.navbar { 
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
  position: relative;
  z-index: 1030;
}
.navbar-brand, .nav-link {
  color: #fff !important;
}
.nav-link:hover {
  color: #dcdcdc !important;
}

.navbar-brand {
  font-family: 'CAT FrankenDeutsch', sans-serif;
  font-size: 25px;
}

/* Dropdown menu styling */
.dropdown-menu {
  z-index: 1040;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}


/* Footer */
/* Base footer styling with a gray gradient background */
.site-footer {
  text-align: center;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(135deg, rgba(60,60,60,0.9), rgba(30,30,30,0.9));
  background-size: cover;
  background-position: center;
  contain: layout style paint;
  margin-top: auto;
}

/* Container for footer content to align logo and info */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  contain: layout;
}

/* Logo styling */
.footer-logo img {
  max-width: 150px;
  margin-bottom: 0.5rem;
  contain: content;
  will-change: auto;
}

/* Footer information text */
.footer-info p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  contain: layout style;
}

/* Styling for links */
.footer-info a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.2s ease-out;
  will-change: color;
}

.footer-info a:hover {
  color: #ccc;
}

/* Performance optimization: Hide elements with display:none instead of toggling */
.d-none {
  display: none !important;
}

/* Optimize list rendering for large lists */
.list-group {
  contain: content;
}

.list-group-item {
  contain: content;
  break-inside: avoid;
}

/* Optimize card rendering */
.card {
  contain: content;
}

/* Reduce repaints on input */
input, textarea, select {
  will-change: border-color;
  transition: border-color 0.2s ease-out;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #094399;
}

/* Button optimization */
.btn {
  will-change: background-color, color;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
  contain: layout style paint;
}

/* Container optimization */
.container {
  contain: layout;
}