/**
* i4S Lab IIT Mandi Website
* Main Stylesheet
* 
* This file contains all the styles for the website
* including layout, typography, colors, and responsive design.
*/

/* ======================================
  Table of Contents:
  1. Variables
  2. Global Styles
  3. Typography
  4. Preloader
  5. Navbar
  6. Hero Section
  7. Welcome Section
  8. Events Section
  9. Speakers Section
  10. Schedule Section
  11. Sponsors Section
  12. Team Section
  13. FAQs Section
  14. Registration Section
  15. Footer Section
  16. Back to Top Button
  17. Utilities
  18. Animations
  19. Responsive Styles
  ====================================== */

/* 1. Variables */
:root {
  --primary-color: #8b0000;
  --primary-light: rgba(139, 0, 0, 0.1);
  --secondary-color: #333;
  --accent-color: #f8f9fa;
  --text-color: #333;
  --text-muted: #6c757d;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --darker-color: #111;
  --border-color: #dee2e6;
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --transition: all 0.3s ease;
  --border-radius: 0.375rem;
  --font-family: "Roboto", sans-serif;
  --navbar-height: 76px;
}

/* 2. Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  line-height: 1.6;
  background-color: #fff;
  padding-top: 0;
}

a {
  text-decoration: none;
  color: var(--primary-color);
  transition: var(--transition);
}

a:hover {
  color: var(--secondary-color);
}

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

section {
  position: relative;
  padding: 4rem 0;
  width: 100%;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 3. Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-title {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 30px;
  text-align: center;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--primary-color);
}

.text-muted {
  color: var(--text-muted) !important;
}

/* 4. Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(139, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 5. Navbar */
.navbar {
  transition: var(--transition);
  padding: 10px 0;
  background-color: #fff;
  box-shadow: var(--shadow-sm);
  height: var(--navbar-height);
  position: relative;
  width: 100%;
}

.navbar-brand img {
  max-width: 93.76px;
  height: 32px;
  width: auto; /* Optional: ensures aspect ratio is preserved */
}

.navbar-scrolled {
  padding: 8px 0;
}

.logo-text {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.i4S-text {
  color: var(--primary-color);
}

.nav-link {
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  transition: var(--transition);
}

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

.navbar-toggler {
  border: none;
  padding: 0;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

/* Main content wrapper */
main {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Hero section adjustments */
.hero-section {
  position: relative;
  height: 80vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  margin-top: 0;
  padding-top: 0;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the entire section */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(
    0,
    0,
    0,
    0.5
  ); /* Slight overlay for better visibility of text */
}

.hero-content {
  position: relative;
  z-index: 1; /* Ensures text is on top */
}

/* 7. Welcome Section */
.welcome-content {
  text-align: justify;
  line-height: 1.8;
}

/* 8. Events Section */
.event-card {
  transition: var(--transition);
  border: none;
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow) !important;
}

.event-card img {
  height: 200px;
  object-fit: cover;
}

.event-card .card-title {
  font-weight: 600;
}

.event-card .card-footer {
  background-color: transparent;
  border-top: none;
  padding-top: 0;
}

.event-date {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 15px;
}

.event-location {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.event-location i {
  margin-right: 8px;
}

.event-time {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.event-time i {
  margin-right: 8px;
}

.event-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 1;
}

.status-upcoming {
  background-color: #28a745;
  color: white;
}

.status-ongoing {
  background-color: #8b0000;
  color: white;
}

.status-past {
  background-color: #6c757d;
  color: white;
}

/* 9. Speakers Section */
.speaker-card {
  transition: var(--transition);
  border: none;
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
}

.speaker-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow) !important;
}

.speaker-img {
  height: 200px;
  width: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
  border: 5px solid var(--light-color);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 1.5rem;
}

/* 10. Schedule Section */
.schedule-timeline {
  position: relative;
  padding-left: 30px;
}

.schedule-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: var(--primary-color);
}

.schedule-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.schedule-item::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-color);
  border: 4px solid white;
}

.schedule-time {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.nav-pills .nav-link.active {
  background-color: var(--primary-color);
}

.nav-pills .nav-link {
  color: var(--text-color);
}

/* 11. Sponsors Section */
.sponsor-item {
  transition: var(--transition);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--border-radius);
}

.sponsor-logo {
  max-height: 100px;
  max-width: 100%;
  filter: grayscale(100%);
  transition: var(--transition);
}

.sponsor-item:hover .sponsor-logo {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* 12. Team Section */
/* Removed specific card styles like .faculty-card .img-fluid, .scholar-card .card-img-top etc. to prevent conflicts with people.php inline styles. All team card styling is now handled in people.php directly. */

/* 13. FAQs Section */
.accordion-button:not(.collapsed) {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.accordion-button:focus {
  box-shadow: none;
  border-color: var(--primary-light);
}

.accordion-item {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}

/* 14. Registration Section */
.form-label {
  font-weight: 500;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.25);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 15. Footer Section */
.footer-section {
  background-color: var(--dark-color);
  color: white;
  padding: 4rem 0 2rem;
}

.footer-section h5 {
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--primary-color);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transition: var(--transition);
}

.social-link:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
  color: white;
}

.footer-links a {
  color: white;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

.copyright-section {
  background-color: var(--darker-color);
  padding: 1rem 0;
}

/* 16. Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--secondary-color);
  color: white;
  transform: translateY(-3px);
}

/* 17. Utilities */
.bg-light {
  background-color: var(--light-color) !important;
}

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

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #700000;
  border-color: #700000;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Page header adjustments */
.page-header {
  position: relative;
  padding: 5rem 0;
  background-color: var(--primary-color);
  color: white;
  margin-top: 0;
}

.breadcrumb-item a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: white;
}

.breadcrumb-item.active {
  color: white;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
}

/* Card styling improvements */
.card {
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow);
}

/* 18. Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

/* Calendar styling for events page */
.calendar-container {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-nav {
  display: flex;
  align-items: center;
}

.calendar-nav button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--primary-color);
}

.calendar-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 15px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-day-header {
  text-align: center;
  font-weight: 600;
  padding: 10px;
}

.calendar-day {
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.calendar-day.today {
  background-color: var(--primary-light);
  font-weight: 600;
}

.calendar-day.has-event {
  background-color: rgba(40, 167, 69, 0.1);
}

.calendar-day.other-month {
  color: var(--text-muted);
  background-color: #f8f9fa;
}

.calendar-day-number {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.9rem;
}

.calendar-event-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: inline-block;
  margin-right: 3px;
}

/* 19. Responsive Styles */
@media (max-width: 1199.98px) {
  .hero-content h1 {
    font-size: 3rem;
  }
}

@media (max-width: 991.98px) {
  .hero-section {
    height: 60vh;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .team-img {
    height: 120px;
    width: 120px;
  }
}

@media (max-width: 767.98px) {
  .hero-section {
    height: 50vh;
    margin-top: 0;
    padding-top: 0;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .schedule-timeline {
    padding-left: 20px;
  }

  .schedule-item::before {
    left: -20px;
  }

  .team-img {
    height: 100px;
    width: 100px;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .calendar-day {
    padding: 2px;
  }

  .calendar-day-number {
    font-size: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .logo-text {
    font-size: 1.2rem;
  }

  .hero-section {
    height: 40vh;
    min-height: 400px;
    margin-top: 0;
    padding-top: 0;
  }

  .hero-content h1 {
    font-size: 1.75rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .calendar-day-header {
    font-size: 0.8rem;
    padding: 5px;
  }
}

.navbar-collapse {
  background-color: #fff;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.375rem;
    box-shadow: var(--shadow-sm);
    margin-top: 0.5rem;
  }
  
  .navbar-collapse .nav-link {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--border-color);
  }
  
  .navbar-collapse .nav-link:last-child {
    border-bottom: none;
  }
}

/* Announcements Marquee */
.announcement-marquee-container {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.announcement-marquee {
    display: flex; /* Ensures content lays out in a single line */
    padding-left: 100%; /* Start from outside the view */
    animation: marquee 30s linear infinite;
}

.announcement-marquee:hover {
    animation-play-state: paused;
}

.announcement-item {
    flex-shrink: 0; /* Prevents items from shrinking */
    display: inline-block;
    padding-right: 50px; /* Space between announcements */
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}