@charset "UTF-8";
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible !important; /* Keeps Android scrolling fix */
  position: relative !important;
  height: auto !important;
  scroll-behavior: smooth;
}

#news-section {
  padding-top: 50px; /* Keeps navbar from overlapping */
}

#news-section main {
  margin-top: 40px; /* Adjust this value based on navbar height */
}

.news-heading {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #1a3a6d;
  margin-bottom: 20px;
  width: 100%; /* Ensures it spans full width */
}

.news-heading h1 {
  font-family: "Orbitron", sans-serif;
  font-size: 28px;
  text-align: center;
  color: #00ccff; /* Neon blue */
  margin-bottom: 15px;
}

.news-heading p {
  font-size: 16px; /* Adjust to match standard body text */
  line-height: 1.6; /* Ensures good readability */
  text-align: center;
  max-width: 600px; /* Optional: Prevents text from stretching too wide */
  margin: 10px auto; /* Centers the paragraph */
}

#news-posts article {
  background: #f8f8f8;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#load-more {
  display: block;
  margin: 20px auto;
  text-align: center;
}

#news-sidebar {
  list-style: none;
  padding: 0;
}

#news-sidebar li {
  margin-bottom: 10px;
}

#news-sidebar a {
  text-decoration: none;
  font-weight: bold;
  color: #1a3a6d;
  transition: color 0.3s;
}

#recent-news-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 3px 0; /* 🔹 Reduce vertical spacing between items */
}

#recent-news-list a {
  text-decoration: none;
  color: #1a3a6d;
  font-size: 16px;
  display: flex;
  align-items: center;
}

#recent-news-list a strong {
  display: inline-block;
  width: 90px; /* Set fixed width for date */
  text-align: right; /* Align dates neatly */
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px; /* Space before title */
}

/* 🔥 Cooling gradient effect for dates */
#recent-news-list li:nth-child(1) a strong {
  color: #ff4500; /* 🔥 Hottest (recent) - Red-Orange */
  text-shadow: 0px 0px 8px rgba(255, 69, 0, 0.7); /* Soft glow */
  font-size: 15px; /* Slightly larger */
}

#recent-news-list li:nth-child(2) a strong {
  color: #ff6300; /* Slightly cooler */
  text-shadow: 0px 0px 6px rgba(255, 99, 0, 0.6); /* Subtle glow */
  font-size: 14.5px; /* Slightly larger */
}

#recent-news-list li:nth-child(3) a strong {
  color: #ff7f00;
} /* Warm Orange */
#recent-news-list li:nth-child(4) a strong {
  color: #ff9900;
} /* Sunset Orange */
#recent-news-list li:nth-child(5) a strong {
  color: #ffae00;
} /* Golden Orange */
#recent-news-list li:nth-child(6) a strong {
  color: #ffc300;
} /* Soft Gold */
#recent-news-list li:nth-child(7) a strong {
  color: #ffd700;
} /* Warm Yellow */
#recent-news-list li:nth-child(8) a strong {
  color: #ffeb00;
} /* Pale Yellow */
#recent-news-list li:nth-child(9) a strong {
  color: #fff200;
} /* Soft Yellow */
#recent-news-list li:nth-child(10) a strong {
  color: #ffff00;
} /* Almost White */
/* 🔥 Most recent (stronger hover glow) */
#recent-news-list li:nth-child(1) a strong,
#recent-news-list li:nth-child(2) a strong {
  transition: text-shadow 0.3s ease-out, transform 0.3s ease-out;
}

#recent-news-list li:nth-child(1) a strong:hover {
  text-shadow: 0px 0px 12px rgba(255, 69, 0, 0.9);
  transform: scale(1.05); /* Slightly enlarge */
}

#recent-news-list li:nth-child(2) a strong:hover {
  text-shadow: 0px 0px 10px rgba(255, 99, 0, 0.8);
  transform: scale(1.03); /* Slightly enlarge */
}

/* 🟠 Slight glow on hover for all dates */
#recent-news-list a strong {
  transition: color 0.3s ease-out, text-shadow 0.3s ease-out;
}

#recent-news-list a strong:hover {
  text-shadow: 0px 0px 6px rgba(255, 165, 0, 0.6); /* Subtle glow */
}

#news-sidebar a:hover {
  color: #00ccff;
}

/* Ensure uniform width and styling for both sections */
.sidebar-content {
  width: 100%; /* Ensures both blocks take the full sidebar width */
  padding: 15px;
  background: #f8f8f8; /* Light background to distinguish sidebar */
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* Adds spacing between elements */
  text-align: center;
}

/* Style the input field inside the signup form */
#inline-subscribe-form input {
  width: 100%; /* Ensures it matches the sidebar width */
  max-width: 250px; /* Prevents it from becoming too wide */
  margin: 0 auto; /* Centers it inside the container */
}

/* Style the signup button to match */
#inline-subscribe-form button {
  width: 100%; /* Makes button full-width inside form */
  max-width: 250px;
  display: block;
  margin: 10px auto;
}

.news-article {
  display: flex;
  align-items: flex-start; /* Align image and text to the top */
  gap: 20px; /* Adds space between image and text */
}

.news-image {
  width: 200px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  max-width: 200px; /* Adjust from 250px to 200px */
  border-radius: 5px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); /* Softer shadow */
}

.news-text {
  flex: 1; /* Allows the text to take up remaining space */
}

.news-content img, .newsletter-content img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
  max-height: 250px !important;
  width: auto !important; /* Prevents forced stretching */
  margin: 10px 0;
  border-radius: 5px;
}

.news-content p img {
  max-width: 50%; /* Limits inline images to 50% of the paragraph width */
  height: auto;
  display: inline;
  vertical-align: middle; /* Keeps inline with text */
}

.news-article img {
  max-width: 300px; /* Limits large article images */
  height: auto;
  display: block;
  margin: 10px auto;
}

.toggle-links {
  margin-top: 10px;
  font-size: 14px;
}

.toggle-links a {
  color: #1a3a6d;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.toggle-links a:hover {
  color: #00ccff;
}

@media (max-width: 768px) {
  /* Ensure no horizontal scrolling */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible !important;
    position: relative !important; /* Ensure elements can still be positioned correctly */
    height: auto !important;
    scroll-behavior: smooth;
  }
  [id]::before {
    content: "";
    display: block;
    height: 60px; /* Adjust based on navbar height */
    margin-top: -60px; /* Offset to prevent navbar overlap */
  }
  .container, .row, .news-article, .news-text {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .row {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  /* Fix Jump to section width */
  aside.col-md-4 {
    order: -1; /* Moves Recent News to the top */
    width: 100%; /* Ensures sidebar doesn't overextend */
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 15px;
    box-sizing: border-box;
  }
  .sidebar-flex-wrapper {
    display: flex;
    flex-direction: column;
  }
  #signup-block {
    order: -1;
  }
  #recent-posts-block {
    order: 0;
  }
  .sidebar-content {
    transition: all 0.3s ease-in-out;
  }
  .col-md-8 {
    order: 2; /* Moves news posts below Recent News */
  }
  .news-text {
    text-align: left; /* Keep text readable and natural */
    width: 100%;
    max-width: 90%; /* Ensures good spacing */
  }
  .news-image {
    max-width: 100%; /* Ensure image never exceeds the width of its container */
    width: auto; /* Allows natural scaling */
    height: auto;
    display: block;
    margin: 0 auto 10px auto; /* Adds spacing below image */
    object-fit: contain; /* Prevents distortion */
  }
  /* Reset all margins & paddings to avoid overflow */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Ensure news text stays beneath the image */
  .news-article {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Ensures stacking */
    align-items: center; /* Centers content properly */
    justify-content: center;
  }
  /* Sidebar content fix */
  .sidebar-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 15px;
    box-sizing: border-box;
    text-align: center;
  }
  #recent-news-list {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    list-style: none; /* Removes default bullets */
  }
  /* Each list item remains structured */
  #recent-news-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keep everything left-aligned */
    gap: 2px; /* 🔹 Reduce space between date & text */
    padding: 6px 0; /* 🔹 Reduce vertical spacing between items */
  }
  /* Style the date - bold and left-aligned */
  #recent-news-list a strong {
    font-size: 14px;
    font-weight: bold;
    color: #d9534f; /* Keeps date color distinctive */
    display: block; /* Forces it onto its own line */
    text-align: left; /* Ensures left alignment */
  }
  /* Style the news title */
  #recent-news-list a {
    text-decoration: none;
    color: #1a3a6d;
    font-size: 16px;
    line-height: 1.4;
    text-align: left; /* Ensures text is aligned left */
    display: block; /* Forces text to its own line */
  }
}
/* 🔹 Prevent recent news titles overflowing with ellipsis */
#recent-news-list li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
}