/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Color Variables */
:root {
  --main_accent_color: #670093;
  --main_grey: #383838;
  --text_color: #1d1d1d;
  --link_color: #450062;
  --light_bg: #f9f9f9;
  --table_header_bg: #670093;
  --table_header_color: #fff;
  --row_alt_bg: #f5f5f5;
}

/* Global Layout */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  color: var(--text_color);
  background-color: var(--light_bg);
  line-height: 1.6;
  padding-top: 12rem; /* Reduced from 15rem */
}

/* Mobile-first approach - smaller padding for mobile */
@media (max-width: 768px) {
  body {
    padding-top: 8rem; /* Much smaller for mobile */
  }
}

/* Header / Nav */
.menu {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  padding-top: 3rem; /* Reduced from 5rem */
  transition: background-color 0.3s, padding 0.3s, flex-direction 0.3s;
  z-index: 1000;
}

/* Mobile header adjustments */
@media (max-width: 768px) {
  .menu {
    padding: 1rem;
    padding-top: 2rem;
  }
}

.menu .header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.menu a {
  text-decoration: none;
}

.menu .header a {
  color: var(--main_accent_color);
  font-size: 2.5rem; /* Reduced from 3rem */
  transition: color 0.3s, font-size 0.3s;
}

/* Mobile header font size */
@media (max-width: 768px) {
  .menu .header a {
    font-size: 1.8rem;
  }
}

.menu .button-group {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Mobile button group */
@media (max-width: 768px) {
  .menu .button-group {
    gap: 0.3rem;
    margin-top: 0.5rem;
  }
}

.menu.scrolled {
  background-color: var(--main_accent_color);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
}

/* Mobile scrolled header - using wider breakpoint to catch more devices */
@media (max-width: 900px) {
  .menu.scrolled {
    flex-direction: column !important;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
  }
  
  .menu.scrolled .header-content {
    flex-direction: column !important;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  
  .menu.scrolled .header a {
    padding: 0.25rem 1rem;
    font-size: 1.3rem;
    text-align: center;
  }
  
  .menu.scrolled .button-group {
    margin-top: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.menu.scrolled .header-content {
  flex-direction: row;
  align-items: center;
}

.menu.scrolled .header a {
  color: #fff;
  font-size: 1.5rem;
  padding: 0 5rem;
}

.menu.scrolled .button-group {
  margin-top: 0;
}

.menu.scrolled .button-group button {
  background: #ffffff22;
  color: #fff;
}
/* Icon color change on scroll: filter to white */
.menu.scrolled .button-group button img {
  filter: brightness(0) saturate(100%) invert(1);
}

.button-group button {
  background: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--main_accent_color);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Mobile buttons */
@media (max-width: 768px) {
  .button-group button {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}

.button-group button img {
  height: 1rem;
  margin-right: 0.5rem;
  filter: none;
  transition: filter 0.3s;
}

.centered {
  padding: 0rem 1.25rem; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
}

/* Content Wrapper: bottom padding for footer */
.content-wrapper {
  flex: 1;
  padding-bottom: 4rem;
}

/* Main container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 2rem auto;
}

/* Mobile container */
@media (max-width: 768px) {
  .container {
    width: 95%;
    margin: 1rem auto;
  }
}

/* Text Wrapper for main paragraphs */
.text-wrapper {
  font-size: 1.125rem;
  max-width: 60rem;
  margin: 1rem auto;
  text-align: left;
  line-height: 1.7;
  color: var(--text_color);
}

/* Mobile text wrapper */
@media (max-width: 768px) {
  .text-wrapper {
    font-size: 1rem;
    margin: 0.5rem auto;
    padding: 0 1rem;
  }
}

/* Leaderboard Title */
.leaderboard-title {
  color: var(--link_color);
}

/* Mobile leaderboard title */
@media (max-width: 768px) {
  .leaderboard-title {
    font-size: 1.5rem;
    margin-top: 2rem;
  }
}

/* Leaderboard Table */
.table-container {
  margin: 2rem 0;
  overflow-x: auto; /* Allow horizontal scrolling on mobile */
}

/* Mobile table container */
@media (max-width: 768px) {
  .table-container {
    margin: 1rem 0;
    padding: 0 1rem;
  }
}

table#leaderboard {
  border-collapse: collapse;
  width: 100%;
  min-width: 800px; /* Ensure minimum width for readability */
}

table#leaderboard thead th {
  background: var(--table_header_bg);
  color: var(--table_header_color);
  position: relative;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

/* Mobile table headers */
@media (max-width: 768px) {
  table#leaderboard thead th {
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem;
  }
}

table#leaderboard thead th.sorting:after,
table#leaderboard thead th.sorting_asc:after,
table#leaderboard thead th.sorting_desc:after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
}

table#leaderboard thead th.sorting_asc:after {
  border-bottom-color: #fff;
}
table#leaderboard thead th.sorting_desc:after {
  border-top-color: #fff;
}

table#leaderboard thead th.sorting:hover:after {
  border-bottom-color: rgba(255,255,255,0.7);
}

table#leaderboard tbody td,
table#leaderboard tbody th {
  padding: 1.5rem 0.75rem;
  text-align: right;
  font-size: 0.9rem;
}

/* Mobile table cells */
@media (max-width: 768px) {
  table#leaderboard tbody td,
  table#leaderboard tbody th {
    padding: 1rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* Alternate row backgrounds */
#leaderboard tbody tr:nth-child(odd) {
  background-color: white;
}
#leaderboard tbody tr:nth-child(even) {
  background-color: var(--row_alt_bg);
}

table#leaderboard.dataTable thead th.sorting_asc,
table#leaderboard.dataTable thead th.sorting_desc {
  background-image: none !important;
}

/* Catchphrase */
.catchphrase {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--main_accent_color);
  text-align: center;
  margin-bottom: 2rem;
}

/* Mobile catchphrase */
@media (max-width: 768px) {
  .catchphrase {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
  }
}

/* Figures & Images */
figure {
  margin: 2rem 0;
  text-align: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

/* Mobile figures */
@media (max-width: 768px) {
  figure {
    margin: 1rem 0;
    padding: 0.25rem;
  }
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  padding: 2rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: block;
  margin: auto;
}

/* Mobile images */
@media (max-width: 768px) {
  figure img {
    padding: 1rem;
  }
}

figure img.standard {
  width: 60rem;
  height: 25rem;
  object-fit: contain;
}

figure img.standard-small {
  width: 45rem;
}

/* Mobile image sizes - make them responsive */
@media (max-width: 768px) {
  figure img.standard {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  figure img.standard-small {
    width: 100%;
    max-width: 100%;
  }
}

figcaption {
  font-size: 1rem;
  max-width: 60rem;
  margin: 0.5rem auto;
  text-align: left;
  color: #555;
}

/* Mobile figcaption */
@media (max-width: 768px) {
  figcaption {
    font-size: 0.9rem;
    padding: 0 1rem;
    max-width: 100%;
  }
}

.citation {
  background-color: #333;
  color: white;
  font-family:'Courier New', Courier, monospace;
  font-size: 0.9rem;
  padding: 1rem;
  margin: 2rem;
  margin-top: 0rem;
  border-radius: 0.4rem;
  overflow-x: auto; /* Allow horizontal scrolling for long citations */
}

/* Mobile citation */
@media (max-width: 768px) {
  .citation {
    font-size: 0.7rem;
    padding: 0.8rem;
    margin: 1rem;
  }
}

.bibtex-entry {
  display: grid;
  grid-template-columns: min-content auto 1fr;
  column-gap: 0.75rem;
}

/* Mobile bibtex - stack vertically for better readability */
@media (max-width: 768px) {
  .bibtex-entry {
    display: block;
  }
  
  .bibtex-field {
    display: block;
    margin-bottom: 0.2rem;
  }
  
  .bibtex-label {
    display: inline;
    margin-left: 1rem;
  }
  
  .bibtex-equals {
    display: inline;
  }
  
  .bibtex-value {
    display: inline;
    word-break: break-all;
  }
}

.bibtex-field {
  display: contents;
}

.bibtex-label {
  grid-column: 1;
  white-space: nowrap;
  margin-left: 1rem;
}

.bibtex-equals {
  grid-column: 2;
}

.bibtex-value {
  grid-column: 3;
  white-space: pre-wrap;
  word-break: break-word;
}

.indent {
  display: inline-block;
  text-indent: 20px;
}

.bibtex-end {
  grid-column: 1 / span 3;
  margin-left: 0;
}

/* Footer */
.footer-container {
  width: 100%;
  background: var(--main_grey);
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  z-index: 500;
}

.footer-container a {
  color: white;
  text-decoration: none;
}

/* Responsive grid for figures */
@media (min-width: 768px) {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}