:root {
  --background-color: #f5f0e1;
  --text-color: #3a2a1a;
  --header-background-color: #e8dfc4;
  --border-color: #d2b48c;
  --font-heading: "Cormorant Garamond", serif; /* elegant but legible */
  --font-body: "Lora", serif; /* readable for long text */
  --font-ui: "Open Sans", sans-serif; /* clean for nav and labels */
}

/* --- Body & Layout --- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* sticky footer support */
  margin: 0;
  background-color: var(--background-color);
  font-family: var(--font-family);
  color: var(--text-color);
  font-size: min(1.1rem, 3vw);
  line-height: 1.6;
}

#contentArea {
  flex: 1; /* main content grows to fill space */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: min(1rem, 3vw);
  padding: min(1rem, 3vw);
  align-content: start; /* aligns items to top when fewer cards */
  min-height: 0; /* important for flex layout */
}

/* --- Header --- */
header,
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--header-background-color, #e8dfc4);
  border-bottom: 2px solid var(--border-color, #d2b48c);
  padding: 1rem 2rem;
  box-sizing: border-box;
}

.header-icon {
  width: 50px;
  height: auto;
  margin-right: 1rem;
}

.header-title {
  flex: 1;
  text-align: center;
  font-family:
    "Cormorant Garamond", serif; /* legible historical font for the rest */
  font-size: clamp(1.5rem, 2.5vw, 2rem); /* responsive size */
  color: var(--text-color, #3a2a1a);
}

/* Fancy SLR letters */
.header-title .slr {
  font-family: "Mea Culpa", cursive;
  font-size: 2.5rem; /* adjust for large screens */
  letter-spacing: 0.15em; /* spacing between letters */
}

/* Responsive scaling */
@media (max-width: 768px) {
  .header-title .slr {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
  }
}

#modeToggle {
  background: none;
  border: 2px solid var(--border-color, #d2b48c);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  cursor: pointer;
  transition: all 0.3s ease;
}

#modeToggle:hover {
  background-color: #e8dfc4;
  transform: scale(1.05);
}

/* Dark Mode Header */
.dark-mode .site-header {
  background-color: #333;
}

.dark-mode .header-title,
.dark-mode .slr-logo {
  color: #f2f2f2;
}

.dark-mode #modeToggle {
  border-color: #888;
  color: #fff;
}

#modeToggle {
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: min(0.5rem, 2vw) min(1rem, 3vw);
  font-size: min(1.2rem, 4vw);
  margin-right: min(1rem, 3vw);
  cursor: pointer;
  transition: all 0.3s ease;
}

#modeToggle:hover {
  background-color: #e8dfc4;
  transform: scale(1.05);
}

/* --- Cards --- */
.card {
  background-color: #e2d6b3;
  border: 1px solid #d2b48c;
  border-radius: 5px;
  padding: min(1rem, 4vw);
  width: 100%;
  max-width: 400px; /* prevents cards from getting too wide */
  box-sizing: border-box;
  margin: 0 auto; /* centers card inside grid column */
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: min(0.4rem, 2vw);
  margin-top: min(0.5rem, 2vw);
}

.tag-badge {
  flex: 0 0 auto;
  background-color: #d0c2a8;
  color: #3a2a1a;
  border-radius: 3px;
  padding: min(0.3rem, 2vw) min(0.5rem, 3vw);
  font-size: min(0.9rem, 3vw);
  cursor: pointer;
}

.highlight {
  background-color: #cce0ff;
  padding: min(0.2rem, 1vw);
  border-radius: 3px;
}

#sidebarTagSearch {
  width: 100%; /* full width of sidebar */
  max-width: 100%; /* prevent overflow */
  padding: min(0.5rem, 2vw) min(0.8rem, 3vw);
  margin-bottom: min(1rem, 4vw);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: min(1rem, 3vw);
  text-align: left; /* ensures text inside is aligned left */
  display: block; /* ensures it stretches fully across */
}

/* --- Back to Top Button --- */
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: min(20px, 3vw);
  right: min(20px, 3vw);
  z-index: 99;
  border: 2px solid #d2b48c;
  outline: none;
  background-color: #f5f0e1;
  color: #3a2a1a;
  cursor: pointer;
  padding: min(10px, 2vw) min(16px, 4vw);
  border-radius: 10px;
  font-size: min(1rem, 3.5vw);
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

#backToTopBtn:hover {
  background-color: #e8dfc4;
  border-color: #c7a26a;
  transform: scale(1.05);
}

/* Dark Mode Back to Top */
.dark-mode #backToTopBtn {
  background-color: #333;
  border-color: #888;
  color: #fff;
}

.dark-mode #backToTopBtn:hover {
  background-color: #444;
  border-color: #aaa;
  transform: scale(1.05);
}

/* --- Dark Mode --- */
.dark-mode body {
  background-color: #1c1c1c;
  color: #f2f2f2;
}

.dark-mode .site-header {
  background-color: #333;
}

.dark-mode #sidebar {
  background-color: #2d2d2d;
}

.dark-mode .card {
  background-color: #3a3a3a;
  border-color: #555;
}

.dark-mode .tag-badge {
  background-color: #666;
  color: #fff;
}

.dark-mode #modeToggle {
  border-color: #888;
  color: #fff;
}

.slr {
  transition: color 0.3s ease;
  color: #222;
}

.dark-mode .slr.s {
  color: #ffffff;
} /* S */
.dark-mode .slr.l {
  color: #ffffff;
} /* L */
.dark-mode .slr.r {
  color: #ffffff;
} /* R */

/* dark mode override */
.dark-mode .menu-home {
  color: #ffffff; /* or whatever light color fits your palette */
}
/* Light mode: normal link color */
#sidebar a {
  color: #3a2a1a; /* your current brownish tone */
  text-decoration: underline;
  transition: color 0.3s ease;
}

/* Dark mode: always blue */
.dark-mode #sidebar a {
  color: #66ccff; /* pick your preferred blue */
}

/* Optional hover effect for dark mode */
.dark-mode #sidebar a:hover {
  color: #99ddff; /* slightly lighter blue */
}

/* --- Footer --- */
.site-footer {
  text-align: center;
  padding: min(1rem, 3vw);
  background-color: var(--header-background-color);
  border-top: 2px solid var(--border-color);
  font-size: min(1rem, 3vw);
  color: var(--text-color);
}
/* Footer links in light mode */
.site-footer a {
  color: blue;
  text-decoration: underline;
}

/* Footer links in dark mode — force white */
.dark-mode .site-footer a {
  color: blue !important;
  text-decoration: underline;
}


.site-footer p {
  margin: 0;
}

/* Dark mode footer */
.dark-mode .site-footer {
  background-color: #333;
  color: #f2f2f2;
  border-color: #555;
}

.download-btn {
  background-color: #b5651d; /* rich bronze */
  color: #fff;
  border: 1px solid #8b4513;
  border-radius: 5px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: min(0.9rem, 3vw);
}

.download-btn:hover {
  background-color: #8b4513; /* darker bronze */
  transform: scale(1.05);
}

/* Dark mode styling with warmer tones */
.dark-mode .download-btn,
.modern-dark-mode .download-btn {
  background-color: #8b5a2b; /* warm dark bronze */
  color: #fff;
  border-color: #7a4920;
}

.dark-mode .download-btn:hover,
.modern-dark-mode .download-btn:hover {
  background-color: #704421; /* slightly darker on hover */
  border-color: #60391b;
}
/* Import Mea Culpa for SLR letters */
@import url("https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap");

/* Fancy SLR letters */
.header-title .slr {
  font-family: "Mea Culpa", cursive; /* fancy script */
  font-size: 2.5rem; /* adjust for large screens */
  letter-spacing: 0.15em; /* spacing between letters */
  color: #3a2a1a;
  line-height: 1;
  vertical-align: middle;
}

/* Responsive scaling for small screens */
@media (max-width: 768px) {
  .header-title .slr {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
  }
}

.header-title .slr {
  font-family: "Mea Culpa", cursive;
  font-size: 2.5rem;
  letter-spacing: 0.15em; /* general spacing */
}

.header-title .slr-middle {
  margin: 0 0.2em; /* adds extra space around the L */
}
/* ===========================
   MOBILE SIDEBAR DRAWER
   =========================== */

@media (max-width: 900px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background-color: var(--background-color);
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 9999;
  }

  /* When opened */
  body.sidebar-open #sidebar {
    transform: translateX(0);
  }

  /* Overlay */
  #mobileSidebarOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9998;
  }

  body.sidebar-open #mobileSidebarOverlay {
    display: block;
  }

  /* Show toggle button on mobile */
  .sidebar-toggle {
    display: block;
  }
}

/* Desktop: sidebar always visible, no drawer behavior */
@media (min-width: 901px) {
  #sidebar {
    position: static;
    width: 250px;
    transform: none !important;
    height: auto;
  }

  #mobileSidebarOverlay {
    display: none !important;
  }

  .sidebar-toggle {
    display: none;
  }
}
/* Shared styling for mode + sidebar buttons */
.mode-style {
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-color);
}

/* Hover */
.mode-style:hover {
  background-color: #e8dfc4;
  transform: scale(1.05);
}

/* Dark mode for both buttons */
.dark-mode .mode-style {
  background: none;
  border-color: #888;
  color: #fff;
}
/* Make sidebar toggle match the dark mode button */
#sidebarToggle {
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: min(0.5rem, 2vw) min(1rem, 3vw); /* same padding */
  font-size: min(1.2rem, 4vw);              /* same font size */
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: min(1rem, 3vw); /* optional spacing */
}

#sidebarToggle:hover {
  background-color: #e8dfc4;
  transform: scale(1.05);
}

/* Dark mode matching */
.dark-mode #sidebarToggle {
  border-color: #888;
  color: #fff;
}

.dark-mode #sidebarToggle:hover {
  background-color: #444;
}