/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* ============================================= */
/* THEME.CSS (BEIGE/SEPIA EDITION) - ONLY color, font, and background properties 
   NOW USING CSS VARIABLES (color1, color2, ... as requested)
   This is a completely separate theme from the previous purple one.
   Number of colors is different (13 colors + 3 fonts) to match this palette exactly.
   Edit the :root section below to instantly change the entire beige/sepia aesthetic!
   Fallback/non-theme colors (grays, whites, blacks, #2b2b2b, #ccc, #ddd, #555, #777, #fafafa, rgba neutrals, #fff) are kept in structure.css
   Load this AFTER structure.css
*/
/* ============================================= */

/* Theme Variables - numbered for this beige/sepia theme */
:root {
  /* Colors */
  --color1: #8b6f47;     /* Primary brown - headings, links, accents, section border */
  --color2: #d8cbb8;     /* Light beige borders / accents */
  --color3: #f7f3ed;     /* Body background */
  --color4: #fdfaf6;     /* Notice bar, footer, sections, gallery, moodboard, updates, cards */
  --color5: #f4eee6;     /* Sidebar background */
  --color6: #e9dfd2;     /* Footer link hover background */
  --color7: #efe6db;     /* Nav & TM button bg, era-info bg, section scrollbar thumb */
  --color8: #e0d2c0;     /* Nav hover background */
  --color9: #cbb89d;     /* Nav active background */
  --color10: #d4c2ff;    /* Update-item border (legacy purple - retained for exact match) */
  --color11: #faf7ff;    /* Stats box bg & horizontal scrollbar track (legacy) */
  --color12: #c1a3e2;    /* Era-info border (legacy) */
  --color13: #cdb9ff;    /* Horizontal scrollbar thumb (legacy) */

  /* Fonts */
  --font1: Georgia, serif;                    /* Body, recent-event, carousel buttons, info sections */
  --font2: Garamond, serif;                   /* Headings, nav, section headings */
  --font3: 'Courier New', monospace;          /* Button font */
}

body {
  font-family: var(--font1);
  background-color: var(--color3);
}
   
h1, h2, h3 {
  font-family: var(--font2);
  color: var(--color1);
}

.top-header {
  background: url('img/header.jpg') center/cover no-repeat;
}
.top-header h1 {
  font-family: var(--font2);
}
   
.page-notice-bar{
  background: var(--color4);
  border-color: var(--color2);
}
#noticeType{
  color: var(--color1);
}
   
.sidebar {
  background-color: var(--color5);
}
   
.site-footer {
  background: var(--color4);
  border-top-color: var(--color2);
}
.footer-title {
  color: var(--color1);
}
.footer-links a {
  color: var(--color1);
}
.footer-links a:hover {
  background: var(--color6);
}
button {
  background: var(--color4);
  border-color: var(--color2);
  font-family: var(--font3);
}
.gallery-item img {
  background: var(--color4);
  border-color: var(--color2);
}
.moodboard-item img {
  background: var(--color4);
  border-color: var(--color2);
}
.page-updates-box {
  background: var(--color4);
  border-color: var(--color2);
}
.update-item {
  border-bottom-color: var(--color10);
}
.update-date {
  color: var(--color1);
}
/* Nav links */
.horizontal-nav a {
  background-color: var(--color7);
  color: var(--color1);
  font-family: var(--font2);
}
.horizontal-nav a:hover {
  background-color: var(--color8);
}
.horizontal-nav a.active {
  background-color: var(--color9);
  color:#fff;
}
.horizontal-nav-container::-webkit-scrollbar-track {
  background: var(--color11);
}
.horizontal-nav-container::-webkit-scrollbar-thumb {
  background-color: var(--color13);
}
   
.section {
  background-color: var(--color4);
  border-top-color: var(--color1);
}
/* Heading on top border */
.section-heading {
  background-color: var(--color4);
  font-family: var(--font2);
  color: var(--color1);
}
.section-content::-webkit-scrollbar-thumb {
  background-color: var(--color7);
}
.recent-event-card {
  background-color: var(--color4);
  border-color: var(--color2);
  font-family: var(--font1);
}
.recent-event-card h3 {
  font-family: var(--font2);
  color: var(--color1);
}
.stats-box {
  background-color: var(--color11);
  border-color: var(--color2);
}
.time-machine-box{
  border-color: var(--color2);
  background:var(--color4);
}
/* top title */
.tm-header{
  border-bottom-color: var(--color2);
}
.era-info {
  background-color: var(--color7);
  border-color: var(--color12);
}
/* controls bar */
.tm-controls{
  border-top-color: var(--color2);
}
/* buttons */
.tm-controls button{
  background-color: var(--color7);
  border-color: var(--color2);
}
/* era label */
#currentEra{
  color: var(--color1);
}
.relationship-entry {
  border-left-color: var(--color2);
}
.relation-type {
  color: var(--color1);
}
.carousel-controls button {
  font-family: var(--font1);
}
.basic-info {
  font-family: var(--font1);
}
.stats-info {
  font-family: var(--font1);
}

/* (all other selectors have no theme properties and are omitted here for cleanliness while preserving overall format/order) */