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

/* Dark Sun - Post-apocalyptic desert world with a dying crimson sun */

:root {
  --primary-color: hsl(30, 70%, 50%);
  --secondary-color: hsl(25, 60%, 40%);
  --background-color: hsl(15, 20%, 10%);
  --text-color: hsl(35, 30%, 85%);
  --accent-color: hsl(45, 90%, 60%);
}

body { 
  /* Placeholder for background images - user will add imagery */
  background-image: url('./img/bg.webp');
  background-color: hsl(30, 20%, 12%);
  background-size: cover;
  background-attachment: fixed;
  font-size: 13pt;
  font-family: 'Crimson Text', Georgia, serif;
  color: hsl(35, 30%, 85%);
}

#nav-toc, #nav-main {
  background-color: color-mix(
    in hsl,
    var(--background-color),
    transparent
  );
}
article#main-content {
  background-color: transparent;
  padding: 0px;

}

article .sectionOuter {
  background: rgba(30, 20, 15, 0.9);
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid hsl(25, 60%, 25%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

article#main-content, #sidebarContent {
  font-size: 13pt;
  font-family: 'Crimson Text', Georgia, serif;
  color: hsl(35, 30%, 85%);
}

.content_right {
  padding-left: 20px;
}

dt {
  font-weight: bold;
  color: hsl(30, 70%, 60%);
}

td > p:first-of-type {
  margin: 0;
}

aside {
  background-color: hsla(15, 40%, 15%, 0.95);
  border-left: 3px solid hsl(20, 80%, 40%);
}

/* Headings - Ancient, weathered feel */
h1, h2, h3, h4, dt {
  font-family: 'Cinzel', 'Times New Roman', serif;
  color: hsl(30, 70%, 65%);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

h1 { 
  font-size: 200%; 
  color: hsl(20, 80%, 55%);
  border-bottom: 2px solid hsl(20, 60%, 35%);
  padding-bottom: 8px;
}

h2 { 
  font-size: 175%; 
  border-bottom: 1px solid hsl(25, 50%, 30%);
  color: hsl(25, 70%, 60%);
}

h3 { 
  font-size: 150%; 
  color: hsl(35, 60%, 55%);
}

h4 { 
  font-size: 125%;
  color: hsl(40, 50%, 60%);
}

/* Links - Fiery, sun-scorched glow */
article#main-content a, #sidebarContent a {
  color: hsl(35, 90%, 60%);
  text-shadow: 0 0 4px hsla(25, 100%, 50%, 0.4);
  transition: text-shadow 0.3s ease-out, color 0.3s ease-out;
  text-decoration: none;
}

article#main-content a:hover, #sidebarContent a:hover { 
  color: hsl(45, 100%, 70%);
  text-shadow: 0 0 8px hsl(30, 100%, 50%);
}

article#main-content a.inactive, #sidebarContent a.inactive {
  color: hsl(35, 50%, 60%);
}

article#main-content a.empty:hover, #sidebarContent a.empty:hover {
  color: hsl(50, 100%, 70%);
  text-shadow: 0 0 8px hsl(45, 100%, 60%);
}

.section {
  background: none;
  padding: 10px;
}

.sectionOuter {
  border-radius: 2px;
}

.sectionOuter h1 {
  padding: 10px 0 0 10px;
  border-bottom: 1px solid hsla(30, 60%, 40%, 0.6);
  margin-bottom: 10px;
}

/* Tables - Weathered parchment/stone tablet feel */
table {
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  background: hsla(30, 30%, 20%, 0.8);
  vertical-align: top;
  border: 1px solid hsl(25, 50%, 35%);
  margin: 0;
  padding: 6px 10px;
}

table th {
  background: hsl(15, 40%, 22%);
  color: hsl(35, 80%, 70%);
  text-align: left;
  font-family: 'Cinzel', serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 1px;
}

#content th a {
  color: hsl(40, 90%, 75%);
}

table tr:nth-child(odd) td { 
  background: hsla(25, 25%, 25%, 0.8); 
}

table tr:hover td {
  background: hsla(30, 40%, 28%, 0.9);
}

/* Utility classes */
.right {
  float: right;
  margin-left: 20px;
  max-width: 40%;
}

#sidebarContent .right {
  float: none;
  margin-left: 0;
  max-width: 100%;
}

#articleContent aside {
  background: rgba(20, 12, 8, 0.95);
  border: 1px solid hsl(20, 50%, 30%);
}

/* Blockquotes - Ancient prophecy/lore style */
blockquote {
  border-left: 4px solid hsl(25, 60%, 40%);
  background: hsla(30, 30%, 15%, 0.6);
  padding: 12px 20px;
  margin: 16px 0;
  font-style: italic;
  color: hsl(40, 30%, 75%);
}

/* Code/Pre - Obsidian tablet style */
code, pre {
  background: hsl(20, 20%, 10%);
  border: 1px solid hsl(25, 40%, 25%);
  color: hsl(35, 40%, 70%);
  font-family: 'Courier New', monospace;
}

pre {
  padding: 12px;
  overflow-x: auto;
}

code {
  padding: 2px 6px;
}

/* Lists */
ul, ol {
  margin-left: 20px;
}

li {
  margin-bottom: 4px;
}

/* Horizontal rule - Cracked earth */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(25, 50%, 35%), transparent);
  margin: 24px 0;
}

/* Selection highlight */
::selection {
  background: hsl(25, 70%, 35%);
  color: hsl(45, 100%, 90%);
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(20, 20%, 12%);
}

::-webkit-scrollbar-thumb {
  background: hsl(25, 40%, 30%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(25, 50%, 40%);
}