/* TODO Ensure this file is included on all pages (by build script) */

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,700;1,400;1,700\&display=swap');

body {  
  font-family: 'Literata', serif;  
}

a[href^="http"]:not([href*="map.thatvoid.com"]):not([href*="docs.google.com"])::after {  
  content: ' 🌍';  
  font-size: 0.8em;  
}

/* TODO Move to separate file and import here */

/* === Dark Mode Styles === */

/* Default (Light) Theme Variables */  
:root {  
  --bg-color: #ffffff;  
  --text-color: #222222;  
  --link-color: #007bff;  
  --link-hover-color: #0056b3;  
  --pre-bg-color: #f4f4f4;  
  --pre-text-color: #222222;  
  --pre-border-color: #dddddd;  
  --blockquote-bg-color: #f9f9f9;  
  --blockquote-border-color: #dddddd;  
  --blockquote-text-color: #666666;  
  --table-border-color: #dddddd;  
  --th-bg-color: #f2f2f2;  
  --edit-link-border-color: #eeeeee;  
  --edit-link-text-color: #555555;  
  --edit-link-anchor-color: #0366d6;  
  --toggle-button-bg-color: #ffffff;  
  --toggle-button-border-color: #cccccc;  
  --toggle-button-text-color: #222222;  
  --selection-bg-color: #007bff;  
  --selection-text-color: #ffffff;  
}

html[data-theme="dark"] {  
  --bg-color: #1a1a1a;  
  --text-color: #eeeeee;  
  --link-color: #82aaff;  
  --link-hover-color: #a9c7ff;  
  --pre-bg-color: #2a2a2a;  
  --pre-text-color: #eeeeee;  
  --pre-border-color: #444444;  
  --blockquote-bg-color: #2c2c2c;  
  --blockquote-border-color: #555555;  
  --blockquote-text-color: #bbbbbb;  
  --table-border-color: #555555;  
  --th-bg-color: #333333;  
  --edit-link-border-color: #333333;  
  --edit-link-text-color: #aaaaaa;  
  --edit-link-anchor-color: #82aaff;  
  --toggle-button-bg-color: #2c2c2c;  
  --toggle-button-border-color: #555555;  
  --toggle-button-text-color: #eeeeee;  
  --selection-bg-color: #82aaff;  
  --selection-text-color: #1a1a1a;  
}

/* General Body Styles */  
body {  
  background-color: var(--bg-color);  
  color: var(--text-color);  
  transition: background-color 0.3s ease, color 0.3s ease;  
}

/* Selection Styles */  
::selection {  
  background-color: var(--selection-bg-color);  
  color: var(--selection-text-color);  
}  
::-moz-selection { /* Firefox */  
  background-color: var(--selection-bg-color);  
  color: var(--selection-text-color);  
}

/* Links */  
a {  
  color: var(--link-color);  
}  
a:hover {  
  color: var(--link-hover-color);  
}

/* Headings */  
h1, h2, h3, h4, h5, h6 {  
  color: var(--text-color);  
}

/* Paragraphs */  
p {  
  margin-bottom: 1em;  
}

/* Preformatted Text / Code Blocks */  
pre {  
  background: var(--pre-bg-color);  
  border: 1px solid var(--pre-border-color);  
  color: var(--pre-text-color);  
}

/* Inline Code */  
code {  
  background: var(--pre-bg-color);  
  color: var(--pre-text-color);  
}  
pre code { /* Reset for code inside pre */  
  background: none;  
}

/* Blockquotes */  
blockquote {  
  border-left: 5px solid var(--blockquote-border-color);  
  background-color: var(--blockquote-bg-color);  
  color: var(--blockquote-text-color);  
}

/* Tables */  
th, td {  
  border: 1px solid var(--table-border-color);  
}  
th {  
  background-color: var(--th-bg-color);  
}

/* Horizontal Rule */  
hr {  
  border: 0;  
  border-top: 1px solid var(--table-border-color); /* Use table border for consistency */  
  margin: 2em 0;  
}

/* Edit Link Styling (from update.cjs) */  
.edit-link {  
  border-top: 1px solid var(--edit-link-border-color);  
  color: var(--edit-link-text-color);  
}  
.edit-link a {  
  color: var(--edit-link-anchor-color);  
}  
.edit-link a:hover {  
  text-decoration: underline;  
}

/* Dark Mode Toggle Button (if you move styles from inline) */  
#darkModeToggle {  
  position: fixed;  
  top: 10px;  
  right: 10px;  
  z-index: 1000;  
  border: 0;  
  color: var(--toggle-button-text-color); /* Emoji color */  
  border-radius: 4px;  
  padding: 0.3em 0.5em;  
  cursor: pointer;  
  font-size: 1.2em;  
  line-height: 1; /* Ensure emoji fits well */  
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;  
}  
#darkModeToggle:hover {  
  opacity: 0.8;  
}

/* Ensure html and body take full height for consistent background */  
html, body {  
  min-height: 100vh;  
}

/* NOTE Tried to remove all the stuff here that was not clearly mode color related*/