/* assets/styles.css */

/* 1. Dark mode variables + fallback */
:root {
  --bg-color:    #111111;
  --text-color:  #eeeeee;
  --link-color:  #4eaaff;
  --accent-color:#ff8c00;
  --border-color:#333333;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color:    #ffffff;
    --text-color:  #111111;
    --link-color:  #1e90ff;
    --accent-color:#ff6600;
    --border-color:#dddddd;
  }
}

/* 2. Global resets & layouts */
body {
  margin: 0;
  padding: 0;
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;

  /* 20px → 18px (–10%) */
  font-size: 18px;       /* ~1.125rem */
}

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

/* Headings */
h1 { font-size: 2.7rem;      }  /* ~43px (3rem → 2.7rem) */
h2 { font-size: 2.25rem;     }  /* ~36px (2.5rem → 2.25rem) */
h3 { font-size: 1.8rem;      }  /* ~29px (2rem → 1.8rem) */
h4 { font-size: 1.575rem;    }  /* ~25px (1.75rem → 1.575rem) */
h5 { font-size: 1.35rem;     }  /* ~22px (1.5rem → 1.35rem) */
h6 { font-size: 1.125rem;    }  /* ~18px (1.25rem → 1.125rem) */

/* 3. Center and pad content */
.site-content {
  max-width: 1000px;
  margin: 2rem 0 2rem 8rem;
  padding: 0 1rem;
}

/* 4. Header & navigation */
.site-header {
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  margin-bottom: 2rem;
}
.site-header .site-title a {
  color: var(--accent-color);
  /* 2.25rem → 2.025rem */
  font-size: 2.025rem;    /* ~32px */
  font-weight: bold;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  display: inline-block;
  margin-right: 1rem;
}
nav ul li a {
  /* 1.25rem → 1.125rem */
  font-size: 1.125rem;    /* ~18px */
}

/* datasets page tweaks */
.datasets {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
.datasets th,
.datasets td {
  padding: 0.8rem 1.2rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  /* 1.2rem → 1.08rem */
  font-size: 1.08rem;     /* ~17px */
}
.datasets th {
  background: var(--accent-color);
  color: var(--bg-color);
}

/* 5. Posts list */
.post-list {
  list-style: none;
  padding: 0;
}
.post-list li {
  margin-bottom: 1.5rem;
}
.post-list li a {
  color: var(--link-color);
  /* 1.75rem → 1.575rem */
  font-size: 1.575rem;    /* ~25px */
  font-weight: bold;
}

/* 6. Blockquotes */
blockquote {
  border-left: 4px solid var(--accent-color);
  margin: 1.5rem 0;
  padding-left: 1rem;
  color: var(--text-color);
  opacity: 0.8;
  /* 1.5rem → 1.35rem */
  font-size: 1.35rem;     /* ~22px */
}

/* 7. Code blocks */
pre {
  background: #222;
  color: #ddd;
  padding: 1rem;
  overflow-x: auto;
  border-radius: 4px;
  /* 1.25rem → 1.125rem */
  font-size: 1.125rem;    /* ~18px */
}

/* 8. DataTables (Models page) */
table.dataTable {
  background: none !important;
}
table.dataTable thead {
  background: var(--accent-color);
}
table.dataTable thead th {
  color: var(--bg-color) !important;
  font-weight: bold;
  padding: 0.6em 0.8em;
}
table.dataTable tbody tr:nth-child(odd) {
  background: var(--bg-color);
}
table.dataTable tbody tr:nth-child(even) {
  background: var(--border-color);
}
table.dataTable tbody td {
  color: var(--text-color);
  /* 1.1rem → 0.99rem */
  font-size: 0.99rem;     /* ~16px */
  padding: 0.4em 0.6em;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--accent-color);
  padding: 0.2em 0.4em;
}

/* Active filter button highlight */
#sensor-filters button.active,
#rep-filters button.active {
  background: var(--accent-color);
  color: var(--bg-color);
  border-color: var(--accent-color);
}

/* Compact & left-aligned Models table */
#models-table.dataTable {
  /* 1.1rem → 0.99rem */
  font-size: 0.99rem;     /* ~16px */
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}

/* 9. References / Bibliography */
.bibliography,
.bibliography ol {
  /* 1.4rem → 1.26rem */
  font-size: 1.26rem;     /* ~20px */
  margin-left: 0;
  padding-left: 1.2rem;
  text-align: left;
}
.bibliography li {
  margin-bottom: 0.8rem;
}

/* float the profile photo to the right of the About Me text */
.about-me-photo {
  float: right;
  width: 380px;
  margin: 0 0 1.5rem 1.5rem;
}
.about-me-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}