/* ========================================================================
   Ertius.net CSS - Application-specific styles for ertius.net
   Uses ertius-base.css for common styling
   Version: 0.1.0
   ======================================================================== */

/* ========================================================================
   Layout Override
   ======================================================================== */
body {
  max-width: 80ch;
}

/* ========================================================================
   Header
   ======================================================================== */
header {
  margin-bottom: 2em;
  border: 5px solid var(--color-border);
  padding: 0.25em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1em;
  font-weight: bold;
}

/* ========================================================================
   Lists with arrow bullets
   ======================================================================== */
ul {
  list-style-type: none;
}

/* Auto two-column layout for lists with 6+ items */
ul:has(> li:nth-child(6)) {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

li {
  position: relative;
  padding-left: 1.5em;
}

li:before {
  content: "→";
  position: absolute;
  left: 0;
}

/* ========================================================================
   Dark Mode
   ======================================================================== */
:root.dark {
  /* Base colors - warm dark theme */
  --color-bg: oklch(18% 0.005 30); /* #1c1917 warm dark */
  --color-text: oklch(91% 0.005 30); /* #e7e5e4 warm light */
  --color-text-muted: oklch(64% 0.008 30); /* #a8a29e warm medium */
  --color-text-subtle: oklch(50% 0.01 30); /* #78716c warm darker */
  --color-text-faint: oklch(37% 0.01 30); /* #57534e warm very dark */
  --color-primary: oklch(91% 0.005 30); /* light for dark mode */
  --color-primary-inverse: oklch(18% 0.005 30);
  --color-border: oklch(30% 0.008 30); /* #44403c warm medium-dark */
  --color-bg-hover: oklch(22% 0.005 30); /* #292524 slightly lighter */
  --color-bg-subtle: oklch(22% 0.005 30); /* for boxes */

  /* Links - light blue for visibility */
  --color-link: oklch(75% 0.12 240); /* #93c5fd light blue */
  --color-link-hover: oklch(70% 0.15 240); /* #60a5fa brighter blue */
}

:root.dark a {
  color: var(--color-link);
}

:root.dark a:hover {
  color: var(--color-link-hover);
}

/* Dark Mode Toggle Button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.theme-toggle:hover {
  opacity: 1;
}

/* Show sun in dark mode, moon in light mode */
:root .theme-icon-dark {
  display: none;
}

:root.dark .theme-icon-light {
  display: none;
}

:root.dark .theme-icon-dark {
  display: inline;
}