/* ================================================== */
/* === Global Readability for DARK Background === */
/* ================================================== */

#main.wrapper,
body {
  color: #ffffff; /* CHANGED: Default text to solid white */
}

#main.wrapper h1,
#main.wrapper h2,
#main.wrapper h3,
#main.wrapper h4,
#main.wrapper h5,
#main.wrapper h6,
h1, h2, h3, h4, h5, h6 {
  color: #ffffff; /* White for headings */
}

/* Keep accent color for h3 underline */
#main.wrapper h3::after {
  background-color: #e44c65;
}

#main.wrapper p {
  color: rgba(255, 255, 255, 0.9); /* Light grey for paragraphs */
}

#main.wrapper li {
  color: rgba(255, 255, 255, 0.9); /* Light grey for list items */
}

#main.wrapper a,
a {
  color: #a8d8f8; /* Slightly brighter blue for links */
}
#main.wrapper a:hover,
a:hover {
  color: #cceaff; /* Even lighter blue on hover */
}

#main.wrapper strong,
strong {
  color: #ffffff; /* White for strong text */
  font-weight: 600;
}

/* Table Styles */
#main.wrapper .table-wrapper {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15); /* Increased border opacity slightly */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2em;
}
#main.wrapper table { /* Apply to table inside wrapper */
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}
#main.wrapper th,
#main.wrapper td {
  color: rgba(255, 255, 255, 0.9); /* INCREASED Alpha for table cells */
  border-color: rgba(255, 255, 255, 0.2); /* Increased border opacity slightly */
  padding: 0.75em 1em; /* Ensure padding */
}
#main.wrapper th {
  color: #ffffff; /* White for table headers */
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: bold;
  text-align: left; /* Ensure alignment */
}

/* Code Block Styles */
#main.wrapper code { /* Inline code */
  background-color: rgba(255, 255, 255, 0.1);
  color: #e44c65; /* Slightly brighter green/lime */
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-size: 0.9em;
  margin: 0 0.1em;
  font-family: "Courier New", Courier, monospace;
}
#main.wrapper pre code { /* Code within pre blocks */
  background-color: transparent;
  color: inherit; /* Inherit color from pre */
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit; /* Inherit font */
  font-size: inherit; /* Inherit size */
  line-height: inherit; /* Inherit line height */
  white-space: inherit; /* Inherit wrap */
  word-wrap: inherit; /* Inherit wrap */
}
#main.wrapper pre { /* Preformatted text blocks */
  background-color: #282c34; /* Dark background consistent with Prism */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Increased border opacity */
  border-left: 4px solid #e44c65; /* Accent border */
  color: #c5c8c6; /* Brighter grey for pre text */
  padding: 1em;
  overflow-x: auto;
  border-radius: 4px;
  margin-bottom: 1.5em;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* List Markers */
#main.wrapper ol > li::before {
  background: #e44c65; /* Keep accent color */
  color: white;
}
#main.wrapper ul > li::before {
  color: #e44c65; /* Keep accent color */
}

/* Figure Styles */
.wrapper {
  padding: 6em 0 0em 0; /* Keep existing padding */
}
#main.wrapper figure {
  background-color: rgba(255, 255, 255, 0.04); /* Slightly brighter bg */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly brighter border */
  padding: 1em;
  border-radius: 8px;
  margin: 2.5em 0;
  text-align: center;
}
#main.wrapper figcaption {
  color: rgba(255, 255, 255, 0.85); /* Brighter caption */
  margin-top: 1em;
  font-size: 0.9em;
}
#main.wrapper figure img.responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}

/* ================================================== */
/* === About Page Enhancements === */
/* ================================================== */
#main.wrapper .container {
  padding-top: 3em;
  padding-bottom: 3em;
}
#main .container > section {
  padding: 2.5em 0;
  margin-bottom: 2.5em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
#main .container > section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
/* Scroll animation classes */
.scroll-animate-init {
    opacity: 0;
    transform: translateY(30px);
}
#main .container > section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

#main h3 {
  font-size: 1.75em;
  margin-bottom: 1em;
  position: relative;
  padding-bottom: 0.5em;
}
#main h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background-color: #e44c65;
  transition: width 0.3s ease;
}
#main h3:hover::after {
  width: 80px;
}
#main h4 {
  font-size: 1.3em;
  margin-top: 2em;
  margin-bottom: 0.8em;
}
#main p {
  line-height: 1.8;
  margin-bottom: 1.5em;
}
#main ol,
#main ul {
  margin-left: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1em;
}
#main li {
  padding-bottom: 0.8em;
  position: relative;
}
#main ol {
  list-style: none;
  counter-reset: section-counter;
}
#main ol > li::before {
  counter-increment: section-counter;
  content: counter(section-counter);
  background: #e44c65;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  width: 1.8em;
  height: 1.8em;
  display: inline-block;
  text-align: center;
  line-height: 1.8em;
  margin-right: 0.8em;
  font-size: 0.9em;
  position: absolute;
  left: -2.8em;
  top: 0;
}
#main ul {
  list-style: none;
}
#main ul > li::before {
  content: "\f00c"; /* Checkmark icon */
  font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is linked */
  font-weight: 900;
  color: #e44c65;
  margin-right: 0.8em;
  position: absolute;
  left: -1.8em;
  top: 0.1em;
  font-size: 1em;
}
/* Specific list icon overrides */
#navigation-button > li::before,
.gallery-container > div::before /* Prevent list styles on gallery cards if they were LIs */ {
  content: "" !important;
  display: none !important;
}
#goals ul > li::before {
  content: "\f140"; /* Target icon */
}
#tradeoffs ol > li::before {
  content: counter(section-counter); /* Keep numbered style */
}
#tradeoffs ul > li::before {
  content: "\f0eb"; /* Lightbulb icon */
}

/* Button Styles */
.button.primary.icon.code-link,
.button.primary.icon.data-link {
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.button.primary.icon.code-link:hover,
.button.primary.icon.data-link:hover {
  background-color: #d63a53;
  transform: translateY(-2px);
}

/* Remove default icons/pseudo-elements from specific action buttons */
ul.actions li a.button::before,
ul.actions li a.button::after,
ul.actions li a.button .icon, /* Target potential <i> or <span> with .icon class */
ul.actions li a.button > i /* Target direct child <i> tags */ {
  display: none !important;
  content: none !important; /* Specifically for pseudo-elements */
  margin: 0 !important; /* Remove spacing */
  padding: 0 !important; /* Remove padding */
  width: 0 !important; /* Collapse width */
  line-height: 0 !important; /* Collapse line height */
  vertical-align: initial !important; /* Reset alignment */
  border: none !important; /* Remove potential borders */
}

/* Header Nav Height */
#header nav {
  height: auto;
}

/* Meet the Team Section Styling */
#meet-the-team {
  padding: 4em 0;
  background: #2e3141; /* Matches the course info section */
  color: #fff;
  text-align: center;
}

#meet-the-team .major h2 {
  font-size: 2.5em;
  margin-bottom: 0.5em;
  color: #fff;
}

#meet-the-team .major p {
  font-size: 1.2em;
  color: #ccc;
  margin-bottom: 2em;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
  justify-items: center;
  align-items: center;
}

.team-member {
  background: #3a3d4f; /* Slightly lighter than the section background */
  border: 1px solid #444;
  border-radius: 8px;
  padding: 1.5em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.team-member img {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 50%;
  margin-bottom: 1em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.team-member h3 {
  font-size: 1.5em;
  color: #fff;
  margin-bottom: 0.5em;
}

.team-member p {
  font-size: 1em;
  color: #ccc;
  margin: 0;
}

/* ================================================== */
/* === Sticky Sidebar Navigation (About Page) === */
/* ================================================== */

/* Adjust page wrapper when sidebar is present */
#page-wrapper.with-sidebar {
  position: relative;
}

/* Sidebar container */
#sidebar {
  position: fixed;
  left: 0;
  top: 0; /* Start at the very top */
  width: 250px; /* Slightly wider */
  height: 100vh;
  background-color: #1f212b; /* Darker, matching footer example */
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2em 1.5em; /* More padding */
  padding-top: 6em; /* INCREASED: More space below fixed header */
  overflow-y: auto;
  z-index: 9999; /* Below header (10000), above overlay */
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
}

/* Adjust main content area when sidebar is visible */
#main.with-sidebar > .container {
  margin-left: 250px; /* Match sidebar width */
  max-width: calc(100% - 250px); /* Adjust max-width */
  padding-left: 3em; /* More space between sidebar and content */
  padding-right: 2em; /* Keep right padding */
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}

/* Sidebar Navigation List */
.sidebar-nav h4 {
  color: #e44c65; /* Accent color */
  margin-top: 0; /* Remove default top margin */
  margin-bottom: 1.2em;
  font-size: 1.2em; /* Slightly larger */
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 0.6em;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 0.4em; /* Increased space between links */
  padding-bottom: 0;
}
/* Remove default list markers from sidebar nav */
.sidebar-nav ul > li::before {
    display: none !important; /* Ensure no other list styles interfere */
    content: none !important;
}

.sidebar-nav a {
  display: block;
  padding: 0.7em 1em; /* Increased padding */
  color: rgba(255, 255, 255, 0.75); /* Slightly brighter inactive text */
  text-decoration: none;
  border-radius: 5px; /* Slightly more rounded */
  transition: background-color 0.2s ease, color 0.2s ease, border-left 0.2s ease;
  font-size: 0.95em; /* Slightly larger font */
  border-left: 4px solid transparent; /* Indicator for active state */
}

.sidebar-nav a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-left: 4px solid rgba(232, 90, 79, 0.5); /* Subtle border on hover */
}

/* Active link style */
.sidebar-nav a.active {
  background-color: rgba(232, 90, 79, 0.15);
  color: #ffffff;
  font-weight: 600;
  border-left: 4px solid #e44c65; /* Highlight with accent color */
}

/* Responsive: Hide sidebar on smaller screens */
@media screen and (max-width: 980px) {
  #sidebar {
    display: none; /* Hide sidebar */
  }

  #main.with-sidebar > .container {
    margin-left: 0; /* Reset margin */
    max-width: 100%; /* Allow content full width */
    padding-left: 1em; /* Reset padding */
    padding-right: 1em;
  }
   /* Ensure page wrapper padding is removed if header hides on mobile */
   #page-wrapper {
       /* This padding adjustment depends on whether #header is fixed on mobile */
       /* If header IS fixed on mobile, keep JS calculation or set fixed value */
       /* If header is NOT fixed on mobile, set padding-top: 0; */
       /* Assuming header is NOT fixed on mobile based on template behavior */
       padding-top: 0 !important;
   }
   #header {
       /* Assuming header is NOT fixed on mobile */
       position: absolute !important;
   }
}

/* ================================================== */
/* === End Sidebar Styles === */
/* ================================================== */

/* ================================================== */
/* === Gantt Chart Styles === */
/* ================================================== */

.gantt-chart-container {
  margin: 2em 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1.5em;
  overflow-x: auto; /* Allow horizontal scrolling on small screens */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.gantt-header,
.gantt-row {
  display: flex;
  align-items: stretch; /* Make columns equal height */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5em 0;
}
.gantt-header {
  border-bottom-width: 2px; /* Thicker border for header */
  border-bottom-color: rgba(255, 255, 255, 0.2);
  padding-bottom: 0.8em;
  margin-bottom: 0.8em;
  font-weight: bold;
  position: sticky; /* Keep header visible when scrolling horizontally */
  top: 0; /* Stick to the top of the container */
  background-color: rgba(46, 49, 65, 0.9); /* Match theme bg, slightly opaque */
  z-index: 10; /* Above rows */
}
.gantt-row:last-child {
  border-bottom: none;
}

.gantt-task-header,
.gantt-task-name {
  flex: 0 0 35%; /* Fixed width for task name column */
  padding-right: 1em;
  word-wrap: break-word;
  color: #ffffff; /* White text for tasks */
  font-size: 0.95em;
  display: flex; /* Center text vertically */
  align-items: center;
}
.gantt-task-header {
    font-size: 1em;
}

.gantt-weeks-header,
.gantt-weeks {
  flex: 1 1 auto; /* Take remaining space */
  display: flex;
  justify-content: space-around; /* Distribute weeks evenly */
}

.gantt-weeks-header span {
  flex: 1; /* Each week number takes equal space */
  text-align: center;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.7);
  min-width: 40px; /* Minimum width for readability */
}

.gantt-week {
  flex: 1; /* Each week block takes equal space */
  min-width: 40px; /* Match header min-width */
  height: 1.8em; /* Height of the bar */
  margin: 0 1px; /* Tiny space between weeks */
  background-color: rgba(255, 255, 255, 0.08); /* Default week background */
  border-radius: 3px;
  transition: background-color 0.2s ease;
  position: relative; /* For potential tooltips */
}

.gantt-week.completed {
  background-color: rgb(0, 167, 0); /* Accent color for completed */
  cursor: help; /* Indicate tooltip might be available */
}

/* Optional: Simple Tooltip on Hover for Completed */
.gantt-week.completed::after {
  content: attr(data-task); /* Use data-task attribute for text */
  position: absolute;
  bottom: 110%; /* Position above the block */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 20; /* Above other elements */
}

.gantt-week.completed:hover::after {
  opacity: 1;
  visibility: visible;
}
.gantt-week.current {
  background-color: rgb(0, 167, 0); /* Accent color for completed */
  cursor: help; /* Indicate tooltip might be available */
}

/* Optional: Simple Tooltip on Hover for Completed */
.gantt-week.current::after {
  content: attr(data-task); /* Use data-task attribute for text */
  position: absolute;
  bottom: 110%; /* Position above the block */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 20; /* Above other elements */
}

.gantt-week.current:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Responsive: Make task name smaller on very small screens if needed */
@media screen and (max-width: 480px) {
    .gantt-task-header,
    .gantt-task-name {
        flex-basis: 30%; /* Slightly less space for task name */
        font-size: 0.85em;
    }
    .gantt-weeks-header span,
    .gantt-week {
        min-width: 30px; /* Smaller week blocks */
    }
    .gantt-week.completed::after {
        font-size: 0.75em; /* Smaller tooltip */
    }
}

/* ================================================== */
/* === End Gantt Chart Styles === */
/* ================================================== */


/* ================================================== */
/* === Styles for Diagram WITHIN CAROUSEL === */
/* ================================================== */
.carousel-container { position: relative; width: 100%; margin: 3em 0; background: #12121d; border-radius: 0; padding: 2.5rem; min-height: 700px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); border: none; border-top: 1px solid rgba(45, 140, 255, 0.2); border-bottom: 1px solid rgba(45, 140, 255, 0.2); box-sizing: border-box; height: 1000px; }
.carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: transform 0.6s ease, opacity 0.6s ease; transform: translateX(100%); display: flex; justify-content: center; align-items: center; padding: 2rem; box-sizing: border-box; }
.carousel-slide.active { position: relative; visibility: visible; opacity: 1; transform: translateX(0%); z-index: 1; }
.carousel-slide.slide-left { transform: translateX(-100%); }
.carousel-slide.slide-right { transform: translateX(100%); }
.carousel-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 1.5rem; box-sizing: border-box; max-width: 1200px; margin: 0 auto; }
.carousel-full-image { display: block; width: auto; height: auto; max-width: 90%; max-height: 85%; object-fit: contain; border-radius: 16px; box-shadow: 0 0 20px rgba(45, 140, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.carousel-slide:nth-child(2) .carousel-full-image { max-width: 80%; max-height: 75%; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(45, 140, 255, 0.7); color: white; border: none; font-size: 2rem; width: 50px; height: 50px; line-height: 45px; text-align: center; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.carousel-btn.next { right: 1.5rem; z-index: 9999 !important; }
.carousel-btn.prev { left: 1.5rem; }
.carousel-btn:hover { background-color: #2d8cff; transform: translateY(-50%) scale(1.1); }

/* Diagram specific styles */
.carousel-slide .diagram-wrapper { position: relative; overflow: visible; background: linear-gradient(to bottom, #1a1a2e, #12121d); padding: 2rem; border-radius: 12px; min-height: 600px; width: 100%; height: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-sizing: border-box; border: 1px solid rgba(45, 140, 255, 0.15); }
.carousel-slide .diagram-wrapper #arrow-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.carousel-slide .diagram-wrapper #ur5 { position: absolute; top: 2rem; left: 2rem; z-index: 2; order: unset; margin-bottom: unset; padding: 0; background: none; border: none; text-align: center; }
.carousel-slide .diagram-wrapper #ur5 img { width: 150px; height: auto; margin-bottom: 0.5rem; transition: filter 0.3s ease; }
.carousel-slide .diagram-wrapper #ur5.active-glow img { filter: drop-shadow(0 0 10px #2d8cff) brightness(1.2); }
.carousel-slide .diagram-wrapper .quad-cluster { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 1rem; justify-items: center; align-items: center; width: fit-content; max-width: 600px; position: absolute; top: 10rem; right: 5rem; padding: 1.5rem; background: rgba(30, 30, 46, 0.5); border-radius: 15px; border: 1px solid rgba(45, 140, 255, 0.2); order: unset; flex-direction: unset; z-index: 2; }
.carousel-slide .diagram-wrapper #quadrupedImg { grid-column: 1 / span 2; grid-row: 1; width: 200px; height: auto; z-index: 2; transition: transform 0.1s ease-out; transform: scaleX(-1); margin-bottom: 1rem; }
.carousel-slide .diagram-wrapper #quadStatus { grid-column: 1 / span 2; grid-row: 2; margin-top: 0; color: white; font-weight: 500; font-size: 1em; background-color: rgba(0, 0, 0, 0.5); padding: 0.5em 0.8em; border-radius: 6px; border: 1px solid rgba(45, 140, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); text-align: center; }
.carousel-slide .diagram-wrapper #imu-plot { grid-column: 1; grid-row: 3; }
.carousel-slide .diagram-wrapper #camera-pose { grid-column: 2; grid-row: 3; }
.carousel-slide .diagram-wrapper .block { background: rgba(30, 30, 46, 0.8); color: #ffffff; padding: 1.2rem 1.5rem; border-radius: 10px; min-width: 200px; width: 100%; max-width: 250px; text-align: center; font-weight: 500; font-size: 0.95rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); border: 1px solid #2d8cff; z-index: 2; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; box-sizing: border-box; margin: 0; }
.carousel-slide .diagram-wrapper .block:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 20px rgba(45, 140, 255, 0.5); }
.carousel-slide .diagram-wrapper .animated-plot canvas, .carousel-slide .diagram-wrapper .animated-camera-plot canvas { border-radius: 8px; background: #1e1e2a; border: 1px solid #2d8cff; box-shadow: inset 0 0 5px rgba(45, 140, 255, 0.3); display: block; margin: 0.8rem auto 0.6rem; width: 90%; max-width: 220px; height: 90px; box-sizing: border-box; }
.carousel-slide .diagram-wrapper .label { color: #eee; font-size: 0.9rem; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); margin-top: 0.3rem; }
.carousel-slide .diagram-wrapper #arrow-canvas text { fill: #ddd; font-size: 12px; font-weight: 400; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }

/* ================================================== */
/* === Course Info Styles === */
/* ================================================== */
#course-info { padding: 3em 0 !important; background: #2e3141; color: rgba(255, 255, 255, 0.8); }
#course-info h2 { color: #ffffff; }
#course-info p { color: rgba(255, 255, 255, 0.8); }

/* ================================================== */
/* === Banner Adjustments === */
/* ================================================== */
#banner .content { background-color: rgba(46, 49, 65, 0.85); padding: 2em; border-radius: 8px; }
#banner header h2 { font-size: 2.5em; color: #ffffff; }
#banner p { color: rgba(255, 255, 255, 0.9); }
/* ================================================== */
/* === Landing Page Enhancements === */
/* ================================================== */

/* --- Banner Animations --- */
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeInDelay {
  0% { opacity: 0; }
  50% { opacity: 0; } /* Start fade after delay */
  100% { opacity: 1; }
}
@keyframes scaleIn {
   0% { opacity: 0; transform: scale(0.9); }
   100% { opacity: 1; transform: scale(1); }
}

#banner .content h2.animate-pop-in {
  animation: popIn 0.8s 0.2s ease-out forwards;
  opacity: 0; /* Start hidden */
}

#banner .content p.animate-fade-in-delay {
  animation: fadeInDelay 1.2s 0.5s ease-out forwards;
   opacity: 0; /* Start hidden */
}

#banner .image.animate-scale-in {
  animation: scaleIn 0.8s 0.4s ease-out forwards;
  opacity: 0; /* Start hidden */
}
#banner .image img {
    border-radius: 8px; /* Optional: Rounded corners for banner image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- Course Info Section Styling --- */
#course-info {
  background: #2a2d3a; /* Slightly different dark shade */
  color: rgba(255, 255, 255, 0.9);
  padding: 5em 0; /* More padding */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#course-info h2 {
  color: #ffffff;
}
#course-info p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}
#course-info strong {
    color: #e44c65; /* Accent color for labels */
}

/* ================================================== */
/* === Landing Page Enhancements === */
/* ================================================== */

/* --- Banner Animations --- */
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeInDelay {
  0% { opacity: 0; }
  50% { opacity: 0; } /* Start fade after delay */
  100% { opacity: 1; }
}
@keyframes scaleIn {
   0% { opacity: 0; transform: scale(0.9); }
   100% { opacity: 1; transform: scale(1); }
}

/* Apply animations to banner elements */
#banner .content h2 {
  animation: popIn 0.8s 0.2s ease-out forwards;
  opacity: 0; /* Start hidden */
}
#banner .content p {
  animation: fadeInDelay 1.2s 0.5s ease-out forwards;
   opacity: 0; /* Start hidden */
}
#banner .image { /* Target the span containing the image */
  animation: scaleIn 0.8s 0.4s ease-out forwards;
  opacity: 0; /* Start hidden */
  display: inline-block; /* Needed for transform */
}
#banner .image img {
    border-radius: 8px; /* Optional: Rounded corners for banner image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- Course Info Section Styling --- */
/* Uses style2 from theme, but ensure text is readable */
#course-info {
  /* background: #2a2d3a; */ /* Already set inline, but good for reference */
  color: rgba(255, 255, 255, 0.9);
  padding: 5em 0; /* More padding */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#course-info h2 {
  color: #ffffff;
}
#course-info p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}
#course-info strong {
    color: #e44c65; /* Accent color for labels */
}

/* --- Meet the Team Section Styling --- */
#meet-the-team {
    padding: 6em 0; /* More padding */
    background-color: #1f212b; /* Match footer background */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Add separator */
}

.team-grid {
  display: grid;
  /* Create 3 columns on medium screens and up, 1 on small */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5em; /* Space between team members */
  margin-top: 3em;
}

.team-member {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 2em;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(138, 7, 94, 0.2); /* Subtle blue glow */
}

.team-image-container {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Circular image */
    overflow: hidden;
    margin: 0 auto 1.5em auto; /* Center image */
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.team-member img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure image covers the circle */
}

.team-member h3 {
  margin-bottom: 0.5em;
  font-size: 1.4em;
  color: #ffffff;
}
/* Remove default underline from h3 if present */
.team-member h3::after {
    display: none;
}

.team-member p {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1em;
}

.team-member a {
  color: #a8d8f8; /* Link color */
  text-decoration: none;
  border-bottom: 1px dotted rgba(168, 216, 248, 0.5);
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.team-member a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Style for email icon link */
.team-member a.icon {
    border-bottom: none; /* Remove underline from icon link */
    font-size: 1.5em; /* Make icon slightly larger */
    margin-top: 0.5em;
    display: inline-block;
    color: rgba(255, 255, 255, 0.7); /* Match footer icon color */
}
.team-member a.icon:hover {
    color: #ffffff; /* White on hover */
}
.team-member a.icon .label { /* Hide the text label for the icon */
    display: none;
}

/* --- Scroll Animation Classes --- */
.scroll-animate-init {
    opacity: 0;
    transform: translateY(40px); /* Start slightly lower */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
/* Target specific sections for animation */
#main .container > section.animate-in, /* Sections on other pages */
#course-info.animate-in,
#meet-the-team.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* Add delay for staggered effect */
#meet-the-team.animate-in {
    transition-delay: 0.1s;
}

/* ================================================== */
/* === End Landing Page Enhancements === */
/* ================================================== *//* ================================================== */
/* === Footer Adjustments === */
/* ================================================== */
.md-footer { background-color: #1f212b; color: rgba(255, 255, 255, 0.7); padding: 2em 0; font-size: 0.9em; }
.md-footer a { color: #b0dfff; }
.md-footer a:hover { color: #ffffff; }
.md-footer-meta { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5em; margin-top: 1.5em; }
.md-footer-meta__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.md-copyright { text-align: left; color: rgba(255, 255, 255, 0.6); }
.md-social { text-align: right; }
.md-social__link { display: inline-block; margin-left: 0.8em; color: rgba(255, 255, 255, 0.7); }
.md-social__link svg { width: 1.5em; height: 1.5em; fill: currentColor; vertical-align: middle; }
.md-social__link:hover { color: #ffffff; }
.md-grid { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; }

/* ================================================== */
/* === Tab Styles === */
/* ================================================== */
.tab { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 20px; }
.tab button { background-color: transparent; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 1em; color: rgba(255, 255, 255, 0.7); border-bottom: 3px solid transparent; }
.tab button:hover { background-color: rgba(255, 255, 255, 0.05); color: #ffffff; }
.tab button.active { color: #e85a4f; border-bottom: 3px solid #e85a4f; }
.tabcontent { display: none; padding: 20px 12px; border-top: none; animation: fadeEffect 0.6s; }
.tabcontent.active-content { display: block; }

/* ================================================== */
/* === Gallery Styles (Cards & Expansion) === */
/* ================================================== */
/* --- Featured Video --- */
.featured-video-section { margin-bottom: 3em; padding-bottom: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.featured-video-section .major { margin-left: auto; margin-right: auto; max-width: 90%; }
.featured-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 1.5em; background-color: #222; }
.featured-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.featured-video-description { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 1em; color: rgba(255, 255, 255, 0.85); font-size: 1em; line-height: 1.6; }


/* --- Gallery Container --- */
.gallery-container { display: flex; flex-wrap: wrap; gap: 2em; justify-content: center; margin-top: 2em; padding: 0; list-style: none; }

/* --- Base Gallery Card --- */
.gallery-card { flex: 0 1 calc(50% - 1em); max-width: 600px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; overflow: hidden; background-color: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; cursor: pointer; transform: translate(0, 0) scale(1); transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out, width 0.35s ease-in-out, height 0.35s ease-in-out, top 0.35s ease-in-out, left 0.35s ease-in-out; }
.gallery-card:not(.card-expanded):hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); }

/* --- Card Media Area --- */
.card-media-container { position: relative; padding-bottom: 65%; height: 0; overflow: hidden; background-color: #222; }
.card-media-container iframe, .card-media-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; object-fit: cover; }
.card-media-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; object-fit: contain; background-color: #1a1a1a; }

/* --- Drive Link Placeholder --- */
.card-drive-link-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.08); color: #ccc; text-decoration: none; font-size: 1.1em; text-align: center; padding: 1em; transition: background-color 0.2s ease; pointer-events: none; }
.card-drive-link-placeholder .icon { font-size: 2.5em; margin-bottom: 0.5em; }

/* --- Card Content Area --- */
.card-content { padding: 1.5em; flex-grow: 1; display: flex; flex-direction: column; }
.card-content h4 { margin-top: 0; margin-bottom: 0.7em; font-size: 1.25em; color: #e85a4f; }
.card-content p { font-size: 0.95em; color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin-bottom: 1.2em; flex-grow: 1; }
.card-content .button { margin-top: auto; align-self: flex-start; padding: 0.6em 1.4em; font-size: 0.9em; pointer-events: auto; }

/* --- Expansion Overlay --- */
.card-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.35s ease-in-out, visibility 0s linear 0.35s; cursor: pointer; }
.card-overlay.active { opacity: 1; visibility: visible; transition-delay: 0s; }

/* --- Expanded Card State --- */
.gallery-card.card-expanded { position: fixed; top: 50%; left: 50%; width: 90vw; height: 90vh; max-width: 1400px; max-height: 95vh; transform: translate(-50%, -50%); z-index: 1000; overflow-y: auto; cursor: default; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.gallery-card.card-expanded .card-media-container { height: calc(100% - 80px); min-height: 70%; padding-bottom: 0; background-color: #111; }
.gallery-card.card-expanded .card-media-container img, .gallery-card.card-expanded .card-media-container iframe { object-fit: contain; }
.gallery-card.card-expanded .card-content { padding: 1em 1.5em; flex-grow: 0; flex-shrink: 0; height: auto; overflow-y: auto; background-color: rgba(40, 40, 55, 0.95); }

/* --- Close Button --- */
.card-close-btn { position: absolute; top: 10px; right: 15px; width: 35px; height: 35px; background-color: rgba(40, 40, 40, 0.8); color: #fff; border: none; border-radius: 50%; font-size: 20px; line-height: 35px; text-align: center; cursor: pointer; z-index: 1001; transition: background-color 0.2s ease; display: none; opacity: 0.8; }
.gallery-card.card-expanded .card-close-btn { display: block; }
.card-close-btn:hover { background-color: rgba(232, 90, 79, 0.9); opacity: 1; }

/* --- Prevent Body Scroll --- */
body.no-scroll { overflow: hidden; }

/* ================================================== */
/* === Sticky Header Styles === */
/* ================================================== */
#header {
  position: fixed; /* Stick to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000; /* Ensure it's above everything */
  transition: background-color 0.3s ease-in-out;
  /* background-color: transparent; */ /* Start transparent */
}

#header.scrolled {
  background: rgba(30, 32, 40, 0.95); /* Dark semi-transparent background */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: fixed !important;
}
#page-wrapper {
  padding-top: 4.5em; /* Default fallback - JS should override */
}
#header.scrolled nav > ul > li > a {
    color: rgba(255, 255, 255, 0.8);
}
#header.scrolled nav > ul > li > a:hover {
    color: #ffffff;
}
#header.scrolled #logo a {
     color: #ffffff;
}
#header.scrolled .button.primary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
#header.scrolled .button.primary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
}


/* ================================================== */
/* === Responsive Adjustments (Combined) === */
/* ================================================== */
@media screen and (max-width: 768px) {
  /* Gallery */
  .gallery-card { flex: 0 1 95%; max-width: 95%; }
  .card-media-container { padding-bottom: 56.25%; }
  .gallery-card.card-expanded { width: 95vw; height: 90vh; }

  /* Diagram */
  .carousel-container { padding: 1.5rem 0; min-height: auto; height: auto; }
  .carousel-content { padding: 1rem; max-width: 100%; height: auto; }
  .carousel-slide { padding: 1rem; }
  .carousel-full-image { max-width: 90%; max-height: 80%; }
  .carousel-slide:nth-child(2) .carousel-full-image { max-width: 85%; max-height: 75%; }
  .carousel-slide .diagram-wrapper { padding: 1.5rem 1rem; min-height: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 1.5em; }
  .carousel-slide .diagram-wrapper #arrow-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
  .carousel-slide .diagram-wrapper #ur5 { position: static; order: 1; margin-bottom: 0; width: fit-content; }
  .carousel-slide .diagram-wrapper #ur5 img { width: 120px; }
  .carousel-slide .diagram-wrapper .quad-cluster { position: static; order: 2; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; width: 90%; max-width: 400px; padding: 1rem; margin: 0; background: rgba(30, 30, 46, 0.5); border-radius: 15px; border: 1px solid rgba(45, 140, 255, 0.2); z-index: 2; }
  .carousel-slide .diagram-wrapper #quadrupedImg { width: 150px; margin-bottom: 0.5rem; }
  .carousel-slide .diagram-wrapper #quadStatus { margin-top: 0.5rem; color: white; font-weight: 500; font-size: 1em; background-color: rgba(0, 0, 0, 0.5); padding: 0.5em 0.8em; border-radius: 6px; border: 1px solid rgba(45, 140, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); text-align: center; }
  .carousel-slide .diagram-wrapper #imu-plot { order: 3; width: 80%; max-width: 300px; margin: 0; }
  .carousel-slide .diagram-wrapper #camera-pose { order: 4; width: 80%; max-width: 300px; margin: 0; }
  .carousel-slide .diagram-wrapper #imuCanvas, .carousel-slide .diagram-wrapper #cameraCanvas { display: none; }
  .carousel-slide .diagram-wrapper #imu-plot, .carousel-slide .diagram-wrapper #camera-pose { min-height: 80px; display: flex; align-items: center; justify-content: center; background: rgba(30, 30, 46, 0.9); }
  .carousel-slide .diagram-wrapper #imu-plot .label, .carousel-slide .diagram-wrapper #camera-pose .label { margin-top: 0; font-size: 1em; }
  .carousel-btn { width: 40px; height: 40px; font-size: 1.5rem; line-height: 36px; }
  .carousel-btn.next { right: 1rem; }
  .carousel-btn.prev { left: 1rem; }
}

/* Simple fade effect */
@keyframes fadeEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}