/* ---------- Base Colors & Fonts ---------- */
:root {
  --main-color: #333333;
  --second-color: #555555;
  --main-bg-color: #fefefe;
  --second-bg-color: #f9f9f9;
  --main-border-color: #ddd;
  --link-color: #af8500;
    --quote-bg-color: #f5f5f5;
    --orange: #d04a00;
    --green: #1d9700;
    --blue: #0064e4;
    --purple:#7f51d6;
    --footnote-color: #c7008b;
}

html {
  font-family: "Literata", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--main-color);
  background-color: var(--main-bg-color);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* ---------- Header ---------- */
header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--main-border-color);
  padding: 1rem 2rem;
  background-color: var(--main-bg-color);
  top: 0;
  z-index: 10;
}

.site-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.5rem;
}

#logo svg {
  width: 40px;
  height: 40px;
}

/* ---------- Horizontal Grid Container ---------- */
.grid-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* snap to each page */
  width: 100vw;
  height: 100vh;
  scroll-behavior: smooth;
}

.ds-grid {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

/* ---------- Pages ---------- */
.page {
  flex: 0 0 100vw; /* full viewport width */
  height: 100vh;   /* full viewport height */
  scroll-snap-align: start;
  overflow-y: auto; /* vertical scroll inside page */
  padding: 2rem;
  background-color: var(--second-bg-color);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page h1 + p,
.page h2 + p,
.page h3 + p,
.page h4 + p {
  text-indent: 0;
}
blockquote p {
  text-indent: 0;
}

/* Do NOT indent list items or paragraphs inside lists */
li p {
  text-indent: 0;
}

/* Do NOT indent code areas */
pre p,
code p {
  text-indent: 0;
}

/* Prevent indentation inside notes/outlines */
.ds-note p,
.outline-2 p {
  text-indent: 0;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

/* ---------- Paragraphs / Text ---------- */
p, li {
  margin: 0.5rem 0;
  font-size: 1rem;
  letter-spacing: normal;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s;
}

a.footref {
  color: var(--footnote-color); 

}

a.footnum {
  color: var(--footnote-color); 
}

a:hover {
  text-decoration: underline;
}

/* ---------- Notes / Outlines ---------- */
.ds-note, .outline-2 {
  background-color: var(--second-bg-color);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0; /* flat page look */
  box-shadow: none;
}

/* ---------- Blockquotes ---------- */
blockquote {
  font-style: italic;
  border-left: 4px solid var(--main-border-color);
  background-color: var(--quote-bg-color);
  padding: 1rem;
  margin: 1rem 0;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

table th, table td {
  border: 1px solid var(--main-border-color);
  padding: 0.5rem;
  text-align: left;
}

/* ---------- Flashcards ---------- */
.flashcard {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s ease;
}

.flashcard-header {
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flashcard-header::after {
  content: "▼";
  font-size: 0.8em;
  transition: transform 0.3s;
}

.flashcard-header.collapsed::after {
  transform: rotate(-90deg);
}

.flashcard-body {
  display: none;
  margin-top: 0.5rem;
}

/* ---------- Code / Pre ---------- */
code {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
}

pre {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
}

/* ---------- Images ---------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Footer ---------- */
footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--second-color);
  border-top: 1px solid var(--main-border-color);
  padding: 1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }

  .page {
    padding: 1rem;
  }
}
/* Preamble */
/* Make preamble sticky at top */
#preamble {
    position: sticky;
    top: 0;
    z-index: 1000;           /* sit above other content */
    background: #fff;        /* match background */
    padding: 0.5rem 1rem;    /* optional spacing */
    border-bottom: 1px solid #ddd;
}

/* Make inner container flex horizontally */
#preamble > .flex {
    display: flex;
    flex-direction: row;       /* all children in a row */
    align-items: center;       /* vertically center items */
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;           /* wrap on very small screens */
}

/* Make the menu horizontal */
.menu-main-container ul.menu {
    display: flex;
    flex-direction: row;
    list-style: none;          /* remove bullets */
    margin: 0;
    padding: 0;
    gap: 1rem;                 /* spacing between items */
}

/* List items inline */
.menu-main-container ul.menu li {
    display: inline-block;
}

/* Optional link styling */
.menu-main-container ul.menu li a {
    text-decoration: none;
    color: inherit;
    padding: 0.25rem 0.5rem;
}

/* Make text stay on right side */
#preamble p {
    margin-left: auto;        /* push to far right */
    white-space: nowrap;      /* prevent wrapping */
}

/* Ensure logo and nav are inline with each other */
#preamble span {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
/* Make postamble sticky at bottom */
#postamble {
    position: sticky;
    bottom: 0;
    z-index: 1000;             /* sit above other content */
    background: #fff;          /* match background */
    padding: 0.25rem 1rem;     /* slightly smaller than preamble */
    font-size: 0.875rem;       /* slightly smaller text */
    border-top: 1px solid #ddd;/* subtle separation */
    display: flex;
    flex-wrap: wrap;           /* wrap links if viewport is narrow */
    gap: 0.5rem;               /* spacing between links */
    align-items: center;       /* vertically center links */
}

/* Style links inside postamble */
#postamble a {
    text-decoration: none;
    color: inherit;
    padding: 0.125rem 0.25rem; /* slightly smaller padding */
}

/* Optional: reduce script impact layout */
#postamble script {
    display: none; /* script won’t affect visual layout */
}
#preamble img,
.site-branding img {
    height: 2rem;       /* adjust to match text size */
    width: auto;        /* maintain aspect ratio */
    vertical-align: middle; /* align with text */
}
h1 {
  color: var(--main-color);   /* orange-red */
}
h2 {
  color: var(--orange);   /* orange-red */
}

h3 {
  color: var(--green);   /* green */
}

h4 {
  color: var(--blue);   /* blue */
}

h5 {
  color: var(--purple);   /* purple */
}

/* ---------- Section spacing ---------- */

section, .outline-2, .outline-3, .outline-4 {
}

/* ---------- Unordered list bullet colors ---------- */

ul li::marker {
  color:  var(--second-color); 
}

ul ul li::marker {
  color: var(--main-color); /* dimmer for nested items */
}

/* ---------- Ordered list colors ---------- */

ol {
  color: var(--main-color); /* same green as H2 */
}

ol li::marker {
  font-weight: 600;
}

/* ---------- Checkbox list styling ---------- */

li input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 0.4em;
}

/* ---------- Blockquotes ---------- */

blockquote {
  border-left: 4px solid var(--main-border-color);
  background: var(--main-bg-color);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
}

/* ---------- Code blocks ---------- */

pre, code {
  background-color: var(--second-bg-color) !important;
  border: 1px solid var(--main-border-color);
  font-family: "IBM Plex Mono",  monospace;
}

pre {
  padding: 1rem;
  border-radius: 4px;
}

/* ---------- Example block (Org example) ---------- */

.example {
  background: var(--second-bg-color);
  border-left: 4px solid var(--main-border-color);
  padding: 1rem;
  font-family: "IBM Plex Mono", monospace;
}

/* ---------- Verse block ---------- */

.verse {
  font-style: italic;
  white-space: pre-wrap;
  margin-left: 1rem;
  color: var(--main-color);
}

/* ---------- Tables ---------- */

table {
  border: 1px solid var(--main-border-color);
  border-collapse: collapse;
  background: white;
}

table th {
  background: var(--second-bg-color);
  font-weight: 600;
}

table td, table th {
  border: 1px solid var(--main-border-color);
  padding: 0.4rem 0.6rem;
}

/* ---------- Org drawer styling ---------- */


/* ---------- Org keyword colors (TODO/DONE) ---------- */

.todo {
  color: #d10000;
  font-weight: bold;
}

.done {
  color: #006000;
  font-weight: bold;
}
/* ----------------------------
   Center the search form
---------------------------- */
/* Container for the entire search section */
#search-container {
    margin-left: 2rem;       /* indent everything */
    margin-bottom: 2rem;
}

/* Search heading */
#search-container h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #111;
}

/* Form layout */
#search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Search input */
#search-input {
    flex: 1;
    max-width: 400px;
    min-width: 180px;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    background-color: #fff;
    color: #111;
}

/* Go button */
#search-btn {
    padding: 0.45rem 1rem;
    background-color: #fff;
    border: 1px solid #555;
    border-radius: 2px;
    color: #111;
    cursor: pointer;
    font-weight: 500;
}

/* Checkboxes */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    font-family: monospace;
    cursor: pointer;
    user-select: none;
    margin-right: 1rem;
}

.checkbox-label input {
    display: none; /* hide default checkbox */
}

.checkbox-label span {
    display: inline-block;
    width: 20px;
    text-align: center;
    border: 1px solid #111;
    margin-right: 0.3rem;
}

.checkbox-label input:checked + span::after {
    content: "X";
    font-weight: bold;
}

/* Search results container */
/* Search results container */
#results {
    margin-left: 2rem;  /* match form indentation */
    margin-right: 2rem;
}

/* Individual search result */
.search-result {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
}

/* Result title link */
.search-result a {
    text-decoration: underline;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111;
}

/* Match type and score */
.search-result .match-info {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.25rem;
}

/* Snippet styled like a quote block */
/* Snippet styled like a quote block */
.search-result .snippet {
    margin-top: 0.5rem;
    margin-left: 1.5rem;       /* slight indentation from the rest of the content */
    padding: 0.5rem 1rem;      /* uniform padding */
    border-left: 3px solid #ccc;
    color: #222;
    font-style: italic;
    background-color: #f9f9f9;
    border-radius: 2px;
    max-width: 90%;
    /* remove pre-wrap so HTML line breaks render normally */
}
/* Pagination container */
#pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;  /* align left with indentation */
    margin-left: 2rem;           /* match results/form indentation */
    margin-top: 1rem;
    flex-wrap: wrap;
    font-family: monospace;
}

/* Pagination buttons as brackets */
.pagination-btn {
    cursor: pointer;
    border: 1px solid black;
    padding: 2px 8px;
    background-color: white;
    color: black;
    font-weight: bold;
    border-radius: 2px;
    font-family: monospace;
}

.pagination-btn:hover {
    background-color: black;
    color: white;
}

/* Range info (like [Showing 1-10 of 42]) */
.pagination-range {
    margin-right: 1rem;
    font-family: monospace;
    font-weight: bold;
}
/* ============================
   MOBILE LAYOUT FIX
   Shrink preamble + postamble
   ============================ */
@media (max-width: 640px) {

  /* --- PREAMBLE (top) --- */
  #preamble {
      position: sticky;
      top: 0;
      padding: 0.25rem 0.5rem;
      border-bottom: 1px solid #ddd;
      background: #fff;
      max-height: 2.2rem;       /* compact bar */
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
  }

  #preamble > .flex {
      flex-wrap: nowrap;
      gap: 0.5rem;
  }

  #preamble img {
      height: 1.5rem !important;
  }

  .menu-main-container ul.menu {
      gap: 0.5rem;
  }

  #preamble p {
      font-size: 0.8rem;
      margin-left: 0;
  }

  /* --- POSTAMBLE (bottom) --- */
  #postamble {
      position: sticky;
      bottom: 0;
      padding: 0.2rem 0.5rem;
      font-size: 0.75rem;
      max-height: 2rem;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      border-top: 1px solid #ddd;
      background: #fff;
  }

  #postamble a {
      padding: 0.1rem 0.2rem;
      font-size: 0.75rem;
  }
}
/* Hide the main footer list by default if you want a clean look */
#footnotes {
    display: none; 
}

/* The Popup Styling */
.footnote-popup {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 15px;
    border-radius: 8px;
    max-width: 300px;
    z-index: 1000;
    font-size: 14px;
    line-height: 1.4;
}