/* JetBrains Mono is imported in index.html */

:root {
  --bg-color: #F5F5F5;
  --text-color: #171717;
  --link-color: #707070;
  --link-hover-color: #171717;
  --heading-color: #171717;
  --highlight-bg: #ffffd0;
}

[data-theme="dark"] {
  --bg-color: #262626;
  --text-color: #D4D4D4;
  --link-color: #A0A0A0;
  --link-hover-color: #ffffff;
  --heading-color: #D4D4D4;
  --highlight-bg: #3c4043;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s;
}

a:focus,
a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

body,
td,
th,
tr,
p,
a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; /* Increased from 15px */
  line-height: 1.6;
}

strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
}

h2 {
  margin: 0;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; /* Increased from 24px */
  color: var(--heading-color);
  padding-bottom: 10px;
}

/* Bio Link Styling */
.bio-text a {
  color: #48637f; /* Bluish grey */
}

[data-theme="dark"] .bio-text a {
  color: #A3B3C6; /* Light greyish blue */
}
.bio-text a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}
.paper-text {
  font-size: 12px; /* Authors smaller */
  line-height: 1.5;
}

.paper-text p {
  font-size: 14px; /* Description larger */
}

/* Light Mode Author Links */
.paper-text a {
  color: #404040;
}

/* Light Mode Paper Resource Links */
.paper-links a {
  color: #1b5e85; /* Even more bluish */
}

.paper-text em {
    font-size: 15px; /* Venue larger */
    font-style: italic;
}

[data-theme="dark"] .paper-text {
    color: #ffffff; /* Brighter white for authors */
}

[data-theme="dark"] .paper-text a {
    color: #ffffff; /* Brighter white for author links */
}

[data-theme="dark"] .paper-text p {
    color: #D4D4D4; /* Keep description grey */
}

[data-theme="dark"] .paper-text p a {
    color: #A0A0A0; /* Keep description links grey */
}

/* Ensure Author Links are Targeted correctly */
[data-theme="dark"] .paper-text > a:not(.papertitle) {
    color: #e0e0e0; /* Brighter but not pure white */
}

[data-theme="dark"] .paper-text strong {
    color: #ffffff; /* Current author bold white */
}

/* Resource links (dark blueish grey) */
[data-theme="dark"] .paper-links a {
    color: #A3B3C6 !important;
}
[data-theme="dark"] .paper-links a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

.papertitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px; /* Title larger */
  font-weight: 700;
  color: var(--heading-color);
}

.name {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px; /* Increased from 36px */
  font-weight: 700;
  color: var(--heading-color);
}

.one {
  width: 260px;
  height: 146px;
  position: relative;
}

/* Thumbnail Expansion on Hover */
.one img, .one video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
  transform-origin: right top; /* Scale from top right */
}

.one:hover img, .one:hover video {
  transform: scale(1.5);
  z-index: 10;
  position: relative;
  box-shadow: none;
}

.two {
  width: 260px;
  height: 146px;
  position: absolute;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

.fade {
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

span.highlight {
  background-color: var(--highlight-bg);
}

.colored-box {
  color: black; /* Keep black for this specific box if it's light */
  padding: 20px;
  display: inline-block;
  border-radius: 10px;
}

/* Header Buttons */
.header-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
  padding-top: 20px; /* Lower the buttons a bit */
}

.nav-btn {
  background: transparent;
  border: 1px solid #48637f; /* Bluish grey border */
  color: #48637f; /* Bluish grey text */
  padding: 8px 16px; /* Increased padding from 6px 12px */
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px; /* Increased font size from 14px */
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nav-btn:hover {
  background: #48637f;
  color: #fff;
  border-color: #48637f; /* Ensure border color matches background on hover to avoid dark border effect */
  text-decoration: none;
}

[data-theme="dark"] .nav-btn {
  border: 1px solid #777;
  color: #bbb;
}

[data-theme="dark"] .nav-btn:hover {
  background: #777;
  border-color: #777; /* Ensure border color matches background on hover */
}

/* Profile Photo Hover Effect */
.profile-container {
  position: relative;
  display: inline-block;
  /* Removed border-radius and overflow here to allow text below */
  text-align: left;
  width: 100%;
}

.profile-container img {
  border-radius: 0; 
  display: block;
  margin: 0; /* Align left */
  transition: opacity 0.3s;
  width: 100%;
  max-width: 100%; /* Allow to fill column to align bottom with text */
}

.click-splat-msg {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-color);
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  width: 100%;
}

.profile-container:hover .click-splat-msg {
  opacity: 1;
}


/* Override bgcolor attribute in dark mode */
tr[bgcolor="#ffffd0"] {
  background-color: var(--highlight-bg) !important;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  /* Global Layout */
  body {
    padding: 15px 10px;
    width: auto !important;
  }
  
  /* Flatten Tables */
  table, tbody, tr, td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    height: auto !important;
  }
  
  /* Reset Table Padding/Margins */
  td {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Header Controls */
  .header-controls {
    flex-wrap: wrap;
    gap: 15px; /* Increased gap */
    padding-top: 15px;
    margin-bottom: 25px;
  }
  
  /* Buttons on mobile */
  .nav-btn {
    padding: 10px 18px; /* Even larger tap targets */
    font-size: 16px;
  }

  /* Profile Section */
  .profile-container {
    max-width: 280px;
    margin: 0 auto 25px auto; /* Center profile image */
  }
  
  .bio-text {
    padding-bottom: 30px !important;
  }
  
  .name {
    text-align: center;
    font-size: 28px;
    margin-bottom: 15px;
  }
  
  .bio-text p {
    text-align: left;
  }

  /* Center social links */
  .bio-text p:last-child {
    text-align: center !important;
    line-height: 2.2;
    margin-top: 15px;
  }
  
  /* Research Heading */
  h2 {
    font-size: 24px;
    border-bottom: 1px solid var(--heading-color);
    margin-bottom: 25px;
    margin-top: 10px;
  }

  /* Project/Paper Items */
  /* Image Container */
  tr > td:first-child:not(.bio-text) {
    margin-bottom: 15px;
    text-align: center;
  }
  
  /* Adjust the thumbnail container */
  .one {
    width: 100%;
    max-width: 100%; /* Allow full width */
    height: auto; /* Allow height to adjust naturally */
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .one img, .one video {
    width: 100%;
    height: auto;
    object-fit: cover;
    transform-origin: center center; /* Reset origin */
    display: block;
  }
  
  /* Disable Hover Effects on Mobile */
  .one:hover img, .one:hover video {
    transform: none;
    z-index: auto;
  }
  
  .two {
    display: none !important; /* Hide overlay on mobile */
  }
  
  /* Paper Text */
  .paper-text {
    padding-bottom: 40px !important;
    border-bottom: 1px solid #333; /* Separator */
    margin-bottom: 20px !important;
    text-align: left !important;
  }
  
  /* Light mode separator */
  body:not([data-theme="dark"]) .paper-text {
    border-bottom: 1px solid #ddd;
  }
  
  /* Remove border from last item */
  tr:last-child .paper-text {
    border-bottom: none;
  }
  
  /* Ensure profile photo doesn't get the border bottom if it shares class (it doesn't, but good to be safe) */
  
  /* Extra adjustments for text readability */
  p, a, li {
    font-size: 16px;
  }
}