/* Custom styles to complement Bootstrap 5 */
:root {
  --csda-red: #F60000;
  --csda-hover: #ed17d0;
  --max-width: 960px;
  
  /* Font Stack Options - Uncomment ONE of these to change the font */
  
  /* Option 1: Modern Professional */
  /*--main-font: 'Open Sans', 'Segoe UI', Roboto, -apple-system, sans-serif;*/
  
  /* Option 2: Traditional Business */
   --main-font: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  
  /* Option 3: Clean and Crisp */
  /* --main-font: 'Inter', 'Helvetica Neue', Arial, sans-serif; */
  
  /* Option 4: Balanced Hybrid */
  /* --main-font: 'Noto Sans', 'Liberation Sans', Arial, sans-serif; */
  
  /* Option 5: Classic Refined */
  /*--main-font: 'Crimson Pro', 'Palatino Linotype', 'Book Antiqua', serif;*/ 
}

body {
  font-family: var(--main-font);
  font-size: 16px;
}

/* Container width constraint */
.container {
  max-width: var(--max-width) !important;
}

/* Navbar styles */
.navbar-csda {
  background-color: var(--csda-red);
}

.navbar-csda .navbar-toggler {
  border-color: rgba(255,255,255,0.8);
}

.navbar-csda .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-csda .nav-link {
  color: white !important;
  padding: 0.5rem 1rem !important;
}

.navbar-csda .nav-link:hover {
  background-color: var(--csda-hover);
}

/* Center navbar items */
.navbar-nav {
  margin: 0 auto;
}

/* CSDA Notice Banner styling */
.csda-banner {
  background-color: #FFCCCC;
  border: 2px solid #ff0000;
  border-radius: 8px;
  margin: 2rem auto;
  padding: 1rem 1rem 0.5rem 1rem;
  width: 80%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.banner-content {
  position: relative;
  overflow: hidden;
}

.banner-logo {
  float: left;
  max-width: 171px;
  margin: 0 1.5rem 0.5rem 0;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Ensure text doesn't start too high */
.banner-content h4 {
  margin-top: 0;
  padding-top: 0;
}

/* Card styling */
.main-menu-card {
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.main-menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.main-menu-image {
  width: 75px;
  height: auto;
  object-fit: contain;
}

.logo-section img {
  max-width: 100%;
  height: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-logos {
    text-align: center;
  }
  
  .header-logos img {
    margin: 10px auto;
  }

  .csda-banner {
    width: 95%;
    margin: 1rem auto;
  }
  
  .csda-banner img {
    max-width: 120px; /* Smaller image on mobile */
  }
}