/* Import Google Fonts */
/* This loads the Roboto font family from Google's servers */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* ============================================================================
   BASIC PAGE STYLING
   ============================================================================ */

/* Style the entire body of the webpage */
body {
  font-family: 'Roboto', sans-serif;  /* Set the font to Roboto, with sans-serif as backup */
  background-color: #000000;          /* Set background color to black */
  color: #ffffff;                     /* Set text color to white */
  margin: 0;                          /* Remove default spacing around the body */
  padding: 0;                         /* Remove default internal spacing */
}

/* ============================================================================
   HEADER STYLING
   ============================================================================ */

/* Style the header section at the top of the page */
header {
  display: flex;                      /* Use flexbox layout for flexible positioning */
  justify-content: space-between;     /* Spread items evenly across the header */
  align-items: center;                /* Center items vertically */
  padding: 24px 40px;                 /* Add 24px top/bottom, 40px left/right spacing inside */
  border-bottom: 1px solid #444;      /* Add a dark gray line at the bottom */
  font-size: 18px;                    /* Set font size to 18 pixels */
}

/* Style the left section of the header (institution name) */
header .left {
  color: #bbb;                        /* Set text color to light gray */
}

/* Style the center section of the header (main title) */
header .center {
  font-weight: 400;                   /* Set font weight to normal (not bold) */
  text-align: center;                 /* Center the text horizontally */
}

/* Style the span element inside the center section (subtitle) */
header .center span {
  font-size: 12px;                    /* Make this text smaller (12 pixels) */
  color: #aaa;                        /* Set text color to medium gray */
}

/* Style links in the right section of the header */
header .right a {
  color: #ffffff;                     /* Set link color to white */
  text-decoration: none;              /* Remove the underline from links */
  font-weight: 400;                   /* Set font weight to normal */
}

/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

/* Style the main content area */
main {
  max-width: 800px;                   /* Limit the maximum width to 800 pixels */
  margin: 60px auto;                  /* Add 60px top/bottom margin, center horizontally */
  padding: 0 20px;                    /* Add 20px left/right padding, no top/bottom */
}

/* ============================================================================
   PROJECT TITLE STYLES
   ============================================================================ */

/* Style the project year/date */
.project-meta {
  font-size: 14px;                    /* Set font size to 14 pixels */
  color: #aaa;                        /* Set text color to light gray */
  margin-bottom: 8px;                 /* Add 8 pixels of space below this element */
}

/* Style the main project title (regular sections) */
.project-title {
  font-size: 24px;                    /* Set font size to 24 pixels (larger) */
  font-weight: 400;                   /* Set font weight to normal (not bold) */
  margin-bottom: 20px;                /* Add 20 pixels of space below this element */
  margin-top: 20px;                   /* Add 20 pixels of space above this element */
  color: #ae78f0;
}

/* Style for the main title (Research Foundations + Project Outline) */
.project-title-main {
  font-size: 32px;                    /* Set font size to 32 pixels (larger than regular titles) */
  font-weight: 400;                   /* Set font weight to normal (not bold) */
  margin-bottom: 20px;                /* Add 20 pixels of space below this element */
  margin-top: 20px;                   /* Add 20 pixels of space above this element */
  color: #8dd1da;                        /* Set text color to light gray */
  text-align: center;
}

/* Style for Network Graph Visualization title (subsection) */
.project-title-subsection {
  font-size: 18px;                    /* Set font size to 18 pixels (smaller than regular titles) */
  font-weight: 400;                   /* Set font weight to normal (not bold) */
  margin-bottom: 4px;                 /* Add 4 pixels of space below this element */
  margin-top: 20px;                   /* Add 20 pixels of space above this element */
  color: #ccc;                        /* Set text color to light gray */
  margin-left: 20px;                  /* Add 20 pixels of space to the left (indentation) */
}

/* Style the project subtitle */
.project-subtitle {
  font-size: 20px;                    /* Set font size to 16 pixels */
  color: #aaa;                        /* Set text color to light gray */
  margin-bottom: 24px;                /* Add 24 pixels of space below this element */
}

/* ============================================================================
   CONTENT STYLING
   ============================================================================ */

/* Style for section content (Lorem ipsum text) */
.section-content {
  margin-left: 20px;                  /* Add 20 pixels of space to the left (indentation) */
  margin-bottom: 20px;                /* Add 20 pixels of space below this element */
  font-size: 16px;                    /* Set font size to 16 pixels */
  line-height: 1.6;                   /* Set space between lines to 1.6 times the font size */
  color: #ddd;                        /* Set text color to light gray */
}

.section-content strong,
.section-content b {
  color: #8dd1da;                     /* Set bold text color to cyan */
  font-weight: normal;                /* Remove bold effect, keep only the color */
}

/* ============================================================================
   NETWORK GRAPH STYLING
   ============================================================================ */

/* Style the D3 container for the network graph */
#d3-container-2 {
  width: 100%;                        /* Make the container take full width */
  height: 400px;                      /* Set the height to 400 pixels */
  margin: 20px 0;                     /* Add 20px top/bottom margin */
  margin-left: 20px;                  /* Add 20px left margin (indentation) */
  border: 1px solid #444;             /* Add a dark gray border around the container */
  border-radius: 4px;                 /* Add slightly rounded corners */
  background-color: #222;             /* Set background color to dark gray */
}

/* Style tooltips (popup information when hovering over graph nodes) */
.tooltip {
  position: absolute;                  /* Position the tooltip absolutely so we can place it anywhere */
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
  color: black;                       /* Black text color */
  padding: 8px;                       /* Add 8px of spacing inside the tooltip */
  border-radius: 4px;                 /* Add slightly rounded corners */
  font-size: 12px;                    /* Small font size */
  pointer-events: none;               /* Don't let the tooltip interfere with mouse events */
  opacity: 0;                         /* Start invisible */
}

/* ============================================================================
   RESPONSIVE DESIGN (for mobile devices)
   ============================================================================ */

/* Mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  main {
    margin: 40px auto;                /* Reduce top/bottom margin for mobile */
    padding: 0 15px;                  /* Reduce left/right padding for mobile */
  }
  
  header {
    padding: 16px 20px;               /* Reduce header padding for mobile */
    flex-direction: column;           /* Stack header items vertically on mobile */
    gap: 10px;                        /* Add space between header items */
  }
  
  #d3-container-2 {
    height: 300px;                    /* Reduce graph height for mobile */
  }
}

/* ============================================================================
   VIDEO PLAYER STYLING
   ============================================================================ */

.video-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 10px auto; /* 居中显示 */
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid #444;
  background-color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

/* Mobile responsive for video */
@media (max-width: 768px) {
  .video-container {
    max-width: 100%;
    border-radius: 6px;
    border-width: 1px;
  }
}

/* ============================================================================
   NETWORK GRAPH STYLING
   ============================================================================ */

#network-container {
  width: 100%;
  aspect-ratio: 1.3;
  margin: 20px auto;
  border: 2px solid #444;
  border-radius: 8px;
  background-color: #111;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

#network-container:active {
  cursor: grabbing;
}

.network-node {
  position: absolute;
  padding: 6px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 85px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  user-select: none;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}

.network-node.center {
  background-color: rgba(64, 185, 181, 0.9);
  color: #000;
  border: 3px solid rgba(64, 185, 181, 0.9);
  font-weight: 700;
  font-size: 13px;
  width: 100px;
  height: 100px;
  z-index: 10;
}

.network-node.child {
  background-color: rgba(52, 7, 64, 0.9);
  color: #ddd;
  border: 2px solid #555;
  font-weight: 700;
}

.network-node.category {
  background-color: rgba(52, 7, 64, 0.9);
  color: #ddd;
  border: 2px solid #555;
  font-size: 11px;
  font-weight: 700;
}

.network-node.grandchild {
  background-color: rgba(136, 80, 156, 0.6);
  color: #ccc;
  border: 1px solid #555;
  font-size: 10px;
  width: 70px;
  height: 70px;
}

.network-node:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(141, 209, 218, 0.3);
}

.network-node.center:hover {
  background-color: rgba(64, 185, 181, 0.9);
  box-shadow: 0 4px 16px rgba(141, 209, 218, 0.5);
}

.network-node.child:hover {
  background-color: rgba(74, 10, 80, 0.9);
  border-color: #8dd1da;
}

.network-node.category:hover {
  background-color: rgba(74, 10, 80, 0.9);
  border-color: #8dd1da;
}

.network-node.grandchild:hover {
  background-color: rgba(136, 80, 156, 0.6);
  border-color: #8dd1da;
}

.network-connection {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #8dd1da, #555);
  transform-origin: left center;
  z-index: 1;
  opacity: 0.6;
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  background-color: #222;
  margin: 5% auto;
  padding: 30px;
  border: 2px solid #444;
  border-radius: 12px;
  width: 80%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Custom scrollbar for modal content */
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: #222;
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 4px;
  border: 1px solid #333;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: #111;
}

/* Firefox scrollbar styling */
.modal-content {
  scrollbar-width: thin;
  scrollbar-color: #000 #222;
}

.modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 15px;
}

.modal-close:hover {
  color: #8dd1da;
}

#modal-title {
  color: #8dd1da;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: 0;
}

#modal-body {
  color: #ddd;
  line-height: 1.6;
  font-size: 16px;
}

#modal-body strong {
  color: #fff;
}

#modal-body img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 6px;
}

#modal-body .video-container {
  margin: 15px 0;
}

/* Rhetorical Arguments Network Graph */
#rhetorical-network-container {
  width: 100%;
  aspect-ratio: 1;
  margin: 20px auto;
  border: 2px solid #444;
  border-radius: 8px;
  background-color: #111;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

#rhetorical-network-container:active {
  cursor: grabbing;
}

.rhetorical-node {
  position: absolute;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  user-select: none;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}

.rhetorical-node.center {
  background-color: rgba(64, 185, 181, 0.9);
  color: #000;
  border: 3px solid rgba(64, 185, 181, 0.9);
  font-weight: 700;
  font-size: 13px;
  width: 140px;
  height: 40px;
  z-index: 10;
}

.rhetorical-node.category {
  background-color: rgba(52, 7, 64, 0.9);
  color: #ddd;
  border: 2px solid #555;
  font-size: 11px;
  font-weight: 700;
  width: 140px;
  height: 40px;
}

.rhetorical-node.grandchild {
  background-color: rgba(136, 80, 156, 0.6);
  color: #ccc;
  border: 1px solid #555;
  font-size: 9px;
  width: 100px;
  height: 15px;
}

.rhetorical-node:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(141, 209, 218, 0.3);
}

.rhetorical-node.center:hover {
  background-color: rgba(64, 185, 181, 0.9);
  box-shadow: 0 4px 16px rgba(141, 209, 218, 0.5);
}

.rhetorical-node.category:hover {
  background-color: rgba(74, 10, 80, 0.9);
  border-color: #8dd1da;
}

.rhetorical-node.grandchild:hover {
  background-color: rgba(136, 80, 156, 0.6);
  border-color: #8dd1da;
}

.rhetorical-connection {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #8dd1da, #555);
  transform-origin: left center;
  z-index: 1;
  opacity: 0.6;
}

/* Mobile responsive for network */
@media (max-width: 768px) {
  #network-container {
    aspect-ratio: 1;
    margin: 15px auto;
  }
  
  .network-node {
    font-size: 10px;
    padding: 5px;
    width: 70px;
    height: 70px;
  }
  
  .network-node.center {
    font-size: 11px;
    width: 80px;
    height: 80px;
  }
  
  .network-node.child {
    font-size: 9px;
    width: 70px;
    height: 70px;
  }
  
  .network-node.category {
    font-size: 9px;
    width: 70px;
    height: 70px;
  }
  
  .network-node.grandchild {
    font-size: 8px;
    width: 60px;
    height: 60px;
  }
  
  #rhetorical-network-container {
    aspect-ratio: 2.8;
    margin: 15px auto;
  }
  
  .rhetorical-node {
    font-size: 9px;
    padding: 6px 8px;
  }
  
  .rhetorical-node.center {
    font-size: 10px;
    width: 120px;
    height: 35px;
  }
  
  .rhetorical-node.category {
    font-size: 9px;
    width: 120px;
    height: 35px;
  }
  
  .rhetorical-node.grandchild {
    font-size: 8px;
    width: 90px;
    height: 25px;
  }
  
  .modal-content {
    width: 90%;
    margin: 10% auto;
    padding: 20px;
  }
  
  #modal-title {
    font-size: 20px;
  }
  
  #modal-body {
    font-size: 14px;
  }
}

/* ============================================================================
   CHALLENGE SECTION STYLING
   ============================================================================ */

.challenge-list {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.challenge-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.challenge-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.challenge-item span {
  flex: 1;
  color: #ddd;
  font-size: 16px;
  line-height: 1.6;
}

.visual-representation-list {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.visual-representation-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.visual-representation-icon {
  width: 24px;
  flex-shrink: 0;
}

.visual-representation-item span {
  flex: 1;
  color: #ddd;
  font-size: 16px;
  line-height: 1.6;
}

/* Mobile responsive for challenge section */
@media (max-width: 768px) {
  .challenge-list {
    margin-left: 15px;
    gap: 15px;
  }
  
  .challenge-item {
    gap: 12px;
  }
  
  .challenge-icon {
    width: 20px;
    height: 20px;
  }
  
  .challenge-item span {
    font-size: 14px;
  }
}