/**
 * CostPlusDB Theme
 *
 * Based on The Monospace Web by Oskar Wickström
 * https://github.com/owickstrom/the-monospace-web
 *
 * Strict black and white theme
 */

/* Override to strict black and white */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --text-color-alt: #666666;
  --background-color-alt: #eeeeee;
  --border-thickness: 2px;
}

/* Dark mode: white text on black background */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --text-color: #ffffff;
    --text-color-alt: #aaaaaa;
    --background-color-alt: #111111;
  }
}

html {
  background: var(--background-color);
}

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

a:link, a:visited {
  color: var(--text-color);
}

/* Utility classes */
.hidden {
  display: none;
}

.text-center {
  text-align: center;
}

/* Pages Section - Simple Navigation */
.pages-section {
  text-align: center;
  margin: calc(var(--line-height) * 2) 0;
}

.pages-section h2 {
  margin-bottom: calc(var(--line-height) * 1.5);
}

.nav-simple {
  display: inline-block;
  text-align: left;
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 1.8;
  white-space: pre;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.nav-simple a {
  color: var(--text-color);
  text-decoration: underline;
}

.nav-simple a:hover {
  text-decoration: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .nav-simple {
    font-size: 14px;
    overflow-x: auto;
  }

  /* Center the pages section heading */
  .pages-section h2 {
    text-align: center;
  }

  /* Make centered figures/boxes scrollable if needed */
  figure {
    overflow-x: auto;
    margin: calc(var(--line-height) * 2) 0;
  }

  /* Ensure centered pre blocks don't break layout */
  figure pre {
    min-width: max-content;
  }

  /* Make tables scrollable on mobile */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
  .nav-simple {
    font-size: 12px;
  }

  /* Reduce CTA font size slightly on very small screens */
  p[style*="font-size: 1.5rem"] {
    font-size: 1.2rem !important;
  }
}

/* Navigation styling */
nav ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}