/* -------------------------------------------------------------
   THELANGUAGEFELLOW.COM - ALL 23 SOBER THEMES (COMPREHENSIVE)
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   VARIED LITERARY & PHILOSOPHICAL MOVEMENT THEMES
   ------------------------------------------------------------- */

/* Theme: Keatsian Romanticism (Misty light-blue fog, lavender-slate, & blush) */
:root.theme-keats-romantic {
  --bg: #f0f3f6;                 /* Misty light-blue fog */
  --surface: #e1e6eb;            /* Soft damp paper */
  --text: #2c353f;               /* Deep slate-indigo */
  --text-muted: #687682;
  --cyan: #4e6d8c;               /* Slate blue */
  --pink: #d4a39b;               /* Soft blush rose highlight */
  --green: #99a390;              /* Faded willow */
  --orange: #cca585;             /* Warm wheat */
  --border: #ccd5db;
}

/* Theme: Baudelaire Decadence (Deep dark plum, absinthe-green, & gold) */
:root.theme-baudelaire-decadence {
  --bg: #150d0f;                 /* Rich dark-plum / velvet wine */
  --surface: #241419;
  --text: #e3cfca;               /* Warm faded cream */
  --text-muted: #8c6c6f;
  --cyan: #cca285;               /* Warm amber candlelight */
  --pink: #c4586e;               /* Pomegranate red highlight */
  --green: #7c8c6f;              /* Absinthe green */
  --orange: #cca285;             /* Burnished gold */
  --border: #361b22;
}

/* Theme: Persephone Pomegranate (Ashen volcanic dark & pomegranate) */
:root.theme-persephone-pomegranate {
  --bg: #151516;                 /* Volcanic ash / slate gray */
  --surface: #212124;
  --text: #e5e5eb;               /* Faded bone-white */
  --text-muted: #8e8e93;
  --cyan: #cca285;               /* Faded wheat */
  --pink: #a6243c;               /* Rich pomegranate highlight */
  --green: #87947c;              /* Asphodel sage */
  --orange: #cca285;             /* Charred gold */
  --border: #313136;
}

/* Theme: Bloomsbury Group (Virginia Woolf's artistic stucco & terracotta) */
:root.theme-bloomsbury-group {
  --bg: #eae7dc;                 /* Warm stucco plaster */
  --surface: #e2decb;
  --text: #2c3e50;               /* Soft slate blue */
  --text-muted: #78828c;
  --cyan: #4a7c59;               /* Painter's sage */
  --pink: #b85042;               /* Terracotta highlight */
  --green: #8f9e6d;              /* Muted olive */
  --orange: #d7a15c;             /* Mustard gold */
  --border: #cccbb9;
}

/* Theme: Kafkaesque Brutalist (Industrial raw-concrete & warning rust) */
:root.theme-kafkaesque-brutalist {
  --bg: #2e3033;                 /* Raw concrete gray */
  --surface: #3a3c40;
  --text: #e6e8eb;               /* Faded aluminum */
  --text-muted: #868a8f;
  --cyan: #adb5bd;               /* Cool lead */
  --pink: #f03e3e;               /* Stark warning red highlight */
  --green: #2f9e44;              /* Industrial green */
  --orange: #e67e22;             /* Corroded rust */
  --border: #4a4d52;
}

/* Theme: Metaphysical Poetry (Cosmic void-black & nebula violet) */
:root.theme-metaphysical-poetry {
  --bg: #05070f;                 /* Deep space void */
  --surface: #101424;            /* Starlight dark blue */
  --text: #d1d7e0;
  --text-muted: #52617a;
  --cyan: #4e8cc2;               /* Glowing ether blue */
  --pink: #9660c2;               /* Nebula violet highlight */
  --green: #548c7c;              /* Cosmic dust green */
  --orange: #cca585;             /* Starlight amber */
  --border: #1a2036;
}

/* -------------------------------------------------------------
   LITERARY & PHILOSOPHICAL RESEARCH THEMES
   ------------------------------------------------------------- */

/* Theme: Alexandrian Scroll (Ancient papyrus & charcoal ink light) */
:root.theme-alexandrian-scroll {
  --bg: #f5efdf;
  --surface: #eae1cf;
  --text: #2c251e;               /* Deep charcoal ink */
  --text-muted: #786d5e;
  --cyan: #556b2f;               /* Faded olive/sage green */
  --pink: #9c412d;               /* Burnt terracotta highlight */
  --green: #617a55;              /* Faded moss */
  --orange: #8d701a;             /* Aged bronze */
  --border: #d8cea4;
}

/* Theme: Cambridge Ivy (Scholarly deep forest & mahogany) */
:root.theme-cambridge-ivy {
  --bg: #08130f;                 /* Deep ivy green */
  --surface: #14211a;
  --text: #e0ebd5;               /* Pale cream-green */
  --text-muted: #687d6d;
  --cyan: #8ca090;               /* Spruce pine */
  --pink: #cca285;               /* Polished mahogany/amber */
  --green: #adbf97;              /* Soft willow */
  --orange: #dfac69;             /* Warm gold */
  --border: #203429;
}

/* Theme: Gothic Romance (Shelley/Brontë stormy dark & rose) */
:root.theme-gothic-romance {
  --bg: #101114;                 /* Stormy night slate */
  --surface: #1b1c22;
  --text: #e1e2e6;
  --text-muted: #787c8a;
  --cyan: #9eaec4;               /* Steel blue */
  --pink: #c48fa2;               /* Faded gothic rose highlight */
  --green: #8ba196;              /* Faded heather */
  --orange: #cca285;             /* Faint candlelight */
  --border: #2a2c35;
}

/* Theme: Byzantine Gold (Imperial purple & burnished brass) */
:root.theme-byzantine-gold {
  --bg: #0d0912;                 /* Deep royal plum background */
  --surface: #191122;
  --text: #e5daeb;
  --text-muted: #7b6b8f;
  --cyan: #9d80c2;               /* Soft lavender */
  --pink: #cca285;               /* Byzantine burnished gold */
  --green: #8ba395;              /* Muted jade */
  --orange: #df9a5c;             /* Antique copper */
  --border: #2b1c3b;
}

/* Theme: Scribe Monochrome (High-contrast pure ink & paper light) */
:root.theme-scribe-monochrome {
  --bg: #faf9f5;                 /* Warm book-page white */
  --surface: #f0eee4;
  --text: #0a0a0a;               /* Absolute black iron-gall ink */
  --text-muted: #666666;
  --cyan: #4a5568;               /* Slate charcoal */
  --pink: #991b1b;               /* Academic editorial crimson */
  --green: #065f46;              /* Scholarly green */
  --orange: #854d0e;              /* Walnut wood */
  --border: #d1cdc0;
}
:root {
  /* Default Fallback: Scholarly Parchment (Warm Academic Light) */
  --bg: #fdfbf7;
  --surface: #f6f3ea;
  --surface-hover: #e7e1d5;
  --text: #241e17;        /* Obsidian Charcoal Text */
  --text-muted: #786e64;  /* Warm Gray for details */
  --cyan: #4e6557;        /* Forest Pewter Accent */
  --pink: #9a3412;        /* Rustic Clay Highlight */
  --green: #166534;       /* Academic Ivy Green */
  --orange: #ad7a1a;      /* Muted Gold */
  --border: #e6dfd3;      /* Soft Low-Contrast Border */
  
  /* Typography Variables */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'EB Garamond', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* --- LIGHT & SEPIA CLASSICAL THEMES --- */

:root.theme-scholarly-parchment {
  --bg: #fdfbf7;
  --surface: #f6f3ea;
  --text: #241e17;
  --text-muted: #786e64;
  --accent: #8b1e0f;
  --border: #e6dfd3;
  --orange: #ad7a1a;
  --pink: #9c413c;
}

:root.theme-vintage-newsprint {
  --bg: #f5f0e6;
  --surface: #eae3d2;
  --text: #2b261f;
  --text-muted: #736a5e;
  --cyan: #596b61;
  --pink: #9c413c;
  --green: #617a55;
  --orange: #ad7a1a;
  --border: #d2c5b1;
}

:root.theme-winter-parchment {
  --bg: #f5f6f8;
  --surface: #e7eaee;
  --text: #1e2229;
  --text-muted: #6b7280;
  --cyan: #4b5563;
  --pink: #9f1239;
  --green: #065f46;
  --orange: #92400e;
  --border: #cbd5e1;
}

:root.theme-desert-plateau {
  --bg: #fdf5eb;
  --surface: #f2e5d5;
  --text: #30251c;
  --text-muted: #827263;
  --cyan: #73685c;
  --pink: #bf5b45;
  --green: #77855e;
  --orange: #b3832b;
  --border: #e3d1c1;
}

:root.theme-ash-minimal {
  --bg: #fafafa;
  --surface: #ededed;
  --text: #202020;
  --text-muted: #6a6a6a;
  --cyan: #405060;
  --pink: #803040;
  --green: #306040;
  --orange: #705020;
  --border: #d8d8d8;
}

:root.theme-classic-editorial {
  --bg: #fcfaf2;
  --surface: #f2efe1;
  --text: #1c1c15;
  --text-muted: #787869;
  --cyan: #3a4f48;
  --pink: #801c1c;
  --green: #2e4f2a;
  --orange: #8a5a1a;
  --border: #ded9c3;
}

:root.theme-sage-mist {
  --bg: #f5f6f3;
  --surface: #e5e8e1;
  --text: #242b22;
  --text-muted: #687364;
  --cyan: #4e5c4c;
  --pink: #965349;
  --green: #55734c;
  --orange: #8c6841;
  --border: #ced4c7;
}

:root.theme-ancient-parchment {
  --bg: #ebdcb9;
  --surface: #d4cca2;
  --text: #332817;
  --text-muted: #7a6b4c;
  --cyan: #524330;
  --pink: #9c3a21;
  --green: #475e3c;
  --orange: #875d21;
  --border: #bfb28c;
}

/* --- SOBER DARK & SLATE THEMES --- */

:root.theme-oxford-library {
  --bg: #0f121a;
  --surface: #1a1f2c;
  --text: #d1d7e0;
  --text-muted: #7a8799;
  --accent: #cca285;
  --border: #262d3d;
  --orange: #fed7aa;
  --pink: #fca5a5;
}

:root.theme-oxford-bronze {
  --bg: #12110e;
  --surface: #1b1915;
  --text: #e6e0d8;
  --text-muted: #8a8276;
  --cyan: #c2b29a;
  --pink: #d49b80;
  --green: #99a389;
  --orange: #e0ac69;
  --border: #2e2922;
}

:root.theme-forest-canopy {
  --bg: #0d1310;
  --surface: #16211b;
  --text: #dce8e1;
  --text-muted: #687d74;
  --cyan: #8ca095;
  --pink: #bfa19c;
  --green: #adbf97;
  --orange: #cca78d;
  --border: #25362c;
}

:root.theme-ocean-trench {
  --bg: #060a12;
  --surface: #111824;
  --text: #ced5e0;
  --text-muted: #5a6878;
  --cyan: #7391a8;
  --pink: #9eaec4;
  --green: #879e85;
  --orange: #bfa693;
  --border: #1c2838;
}

:root.theme-carbon-minimal {
  --bg: #151515;
  --surface: #222222;
  --text: #dddddd;
  --text-muted: #777777;
  --cyan: #999999;
  --pink: #bbbbbb;
  --green: #888888;
  --orange: #aaaaaa;
  --border: #333333;
}

:root.theme-terracotta-clay {
  --bg: #1c1512;
  --surface: #2b201a;
  --text: #ebdcd5;
  --text-muted: #8c746c;
  --cyan: #bd8f82;
  --pink: #cf9d84;
  --green: #9fa688;
  --orange: #cca285;
  --border: #3c2d28;
}

:root.theme-coffeehouse-warm {
  --bg: #14100e;
  --surface: #211b18;
  --text: #e6ded8;
  --text-muted: #8a7d76;
  --cyan: #bca89f;
  --pink: #c48d80;
  --green: #99a38f;
  --orange: #cca285;
  --border: #332824;
}

:root.theme-boreal-aurora {
  --bg: #081013;
  --surface: #122024;
  --text: #cbd9db;
  --text-muted: #5b7478;
  --cyan: #799fa6;
  --pink: #96a2b8;
  --green: #a3bfa1;
  --orange: #cca985;
  --border: #20343a;
}

:root.theme-charcoal-velvet {
  --bg: #16161a;
  --surface: #222229;
  --text: #e1e1e6;
  --text-muted: #707080;
  --cyan: #8f8fa3;
  --pink: #c0a9b0;
  --green: #8fa393;
  --orange: #cca385;
  --border: #31313b;
}

:root.theme-imperial-indigo {
  --bg: #0a0a14;
  --surface: #141426;
  --text: #d1d1eb;
  --text-muted: #68688c;
  --cyan: #8c8cc2;
  --pink: #c299b0;
  --green: #8ca395;
  --orange: #cca285;
  --border: #262645;
}

:root.theme-rust-steel {
  --bg: #15181a;
  --surface: #222729;
  --text: #dee2e3;
  --text-muted: #6f787a;
  --cyan: #8b9ca1;
  --pink: #ba8b7c;
  --green: #8ba18b;
  --orange: #c29a74;
  --border: #323b3f;
}

:root.theme-obsidian-glass {
  --bg: #050505;
  --surface: #121212;
  --text: #eaeaea;
  --text-muted: #555555;
  --cyan: #526f8c;
  --pink: #ba6d52;
  --green: #5f805a;
  --orange: #c29a53;
  --border: #222222;
}

:root.theme-boreal-night {
  --bg: #040b0d;
  --surface: #0c1b1f;
  --text: #c4d5d9;
  --text-muted: #4d6569;
  --cyan: #648f94;
  --pink: #968494;
  --green: #849684;
  --orange: #cca585;
  --border: #152e33;
}

:root.theme-botanical-herbarium {
  --bg: #111612;
  --surface: #1b241c;
  --text: #dae3db;
  --text-muted: #738075;
  --cyan: #8ca690;
  --pink: #c2989c;
  --green: #a3bf99;
  --orange: #c7a97b;
  --border: #28362b;
}

:root.theme-eink-graphite {
  --bg: #1c1c1e;
  --surface: #2c2c2e;
  --text: #e5e5ea;
  --text-muted: #8e8e93;
  --accent: #d1d1d6;
  --border: #3a3a3c;
  --orange: #fafafa;
  --pink: #cbd5e1;
}

/* -------------------------------------------------------------
   GLOBAL TYPOGRAPHY, BACKGROUND & ELEMENT STYLING
   ------------------------------------------------------------- */

/* Forces the root document tag to update background on theme change */
html {
  background-color: var(--bg) !important;
}

body {
  background-color: var(--bg) !important;  
  color: var(--text) !important;             
  font-family: var(--font-sans) !important;
  margin: 0;
  padding: 0;
  padding-top: 2.5rem !important;            /* Pushes the layout away from the top edge */
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s, color 0.25s;

  /* Enforces the Flexbox Sticky Footer structure */
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Force headings to adapt to active theme variables */
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
  transition: color 0.25s;
}

/* -------------------------------------------------------------
   REFINED TYPOGRAPHY SCALE (CSP-COMPLIANT SYSTEM FONTS)
   ------------------------------------------------------------- */

.table > ul {
  list-style-type: none; /* Removes the bullets */
  padding: 0;            /* Removes default left indentation */
  margin: 0;             /* Removes default top/bottom spacing */
}


/* Main Site Logo Link Sizing (Dominant Brand Anchor) */
.navBarDivContainerNav > a {
  color: var(--accent) !important;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.6rem !important;   /* Scaled up for prominent brand visibility */
  letter-spacing: -0.03em;        /* Snug, elegant letter spacing */
}

/* Regular Navbar list links (Subordinate links) */
.navBarDivContainerNav ul li a {
  color: var(--text) !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem !important;  /* Kept at standard clean interface size */
}

/* Base Body settings */
body {
  background-color: var(--bg) !important;  
  color: var(--text) !important;             
  font-family: var(--font-sans) !important;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  padding-top: 2.5rem !important;
  -webkit-font-smoothing: antialiased;
}

/* Monospace Code font sizing */
pre, code, .mono-text, #fetchOutputHere, #formValue p {
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;   /* Slightly scaled down for clean monospace alignment */
}

/* Small  Metadata text */
small, .postedByWhen {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
}

/* -------------------------------------------------------------
   UNIFIED CENTER-COLUMN PAGE LAYOUT (ALL PAGES)
   ------------------------------------------------------------- */

/* 1. Force a consistent 1100px max-width on all page layout containers */
.outerContainer,
.container,
.mainDiv,
.divContainerHeader,
.divContainer,
.xContainer,
.mainContainer {
  width: 100% !important;         /* Forces the container to occupy 100% width, stopping any content shrinkage */
  max-width: 1100px !important;   /* Constrains it strictly to the same 1100px column as your logo */
  margin-left: auto !important;   /* Centers the column perfectly */
  margin-right: auto !important;  /* Centers the column perfectly */
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 2. Configure vertical spacing (top/bottom margins) for page layouts */
.outerContainer,
.divContainerHeader,
.mainDiv,
.xContainer {
  margin-top: 3rem !important;
  margin-bottom: 2rem !important;
}

.outerContainer{
  margin-top:1rem !important;
}

/* Adjust spacing specifically for content columns */
.divContainerHeader {
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
}

.divContainer {
  margin-bottom: 4rem !important;
}

/* -------------------------------------------------------------
   STRUCTURAL RESETS (PREVENTS COLLAPSES & NESTED BOXES)
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   STRUCTURAL RESETS (PREVENTS COLLAPSES & NESTED BOXES)
   ------------------------------------------------------------- */

/* Removed layout containers from this list to prevent margin-centering overrides */
.navBarDiv,
.navBarDivContainer,
.theme-selector-group,
.divPageLinks,
.table,
.copyrightLine,
footer div {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Explicitly strip background, borders, and shadows from main wrappers without touching margins */
.outerContainer,
.container,
.mainDiv,
.divContainer,
.divContainerHeader,
.xContainer,
.mainContainer {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* -------------------------------------------------------------
   NO BOXES AT ALL - HIGH-SPECIFICITY FLAT LAYOUT
   ------------------------------------------------------------- */

/* Prefixed with 'body' to force-override other stylesheets (e.g., index.css, messages.css) */
body .quotebox, 
body .message, 
body .postPageArticle,
body .divContainer,
body .divContainerHeader,
body #apiResponse,
body #divIDAsNeeded > div {
  border: none !important;
  background-color: transparent !important;
  
  /* Longhand overrides: Protects left/right auto margins and 24px side paddings */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 1.8rem !important;
  margin-bottom: 1.8rem !important;
  
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.25s ease;
}

body .quotebox {
  font-family: var(--font-serif) !important;
  font-size: 1.25rem !important;
  font-style: italic !important;
  margin: 2rem 0 !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
}
/* -------------------------------------------------------------
   GLOBAL BUTTON STYLING
   ------------------------------------------------------------- */

button, 
.btn, 
.button,
input[type="button"],
input[type="submit"] {
  cursor: pointer;
  background-color: var(--accent) !important;
  color: var(--bg) !important;                  
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 8px 16px !important;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s !important;
}

button:hover, 
.btn:hover, 
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: var(--orange) !important;   
  border-color: var(--orange) !important;
  color: var(--bg) !important;
}

button:active, 
.btn:active, 
.button:active {
  transform: scale(0.98);
}

/* -------------------------------------------------------------
   GLOBAL FORM FIELDS
   ------------------------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-family: var(--font-sans) !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
}

/* -------------------------------------------------------------
   GLOBAL FONTS & LINKS
   ------------------------------------------------------------- */

pre, code, .mono-text, #fetchOutputHere, #formValue p {
  font-family: var(--font-mono) !important;
  font-size: 0.95rem;
}

pre {
  white-space: pre-wrap !important;       /* Forces standard line wrapping inside pre tags */
  word-break: break-word !important;      /* Prevents long words from breaking container boundaries */
}

.literary-block, .metaphor-text, .quotebox {
  font-family: var(--font-serif) !important;
  font-size: 1.15rem;
  line-height: 1.5;
  font-style: italic;
}

a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

a:hover {
  text-decoration: underline;
  color: var(--orange);
}

small {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------
   HEADER, NAVIGATION & FOOTER SPECS
   ------------------------------------------------------------- */

#logo h3 {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
  padding: 20px;
  margin: 0;
  border-radius: 6px;
  font-size: 2.2rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
}

#logo h3 a {
  color: var(--bg) !important;
}

#navigation {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 0;
}

/* Align navigation elements with the centered content column */
.navBarDivContainerNav {
  max-width: 1100px;
  margin: 0 auto !important;               /* Reverted back to center alignment */
  padding: 0 24px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Enforce accent sizing on brand text logo */
.navBarDivContainerNav > a {
  color: var(--accent) !important;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.5rem !important;
  letter-spacing: -0.03em;
}

/* Regular Navbar list links */
.navBarDivContainerNav ul li a {
  color: var(--text) !important;
  font-family: var(--font-sans);
  font-weight: 500;
}

.navBarDivContainerNav ul li a:hover {
  color: var(--orange) !important;
}

/* Selector Group Info Text */
.theme-selector-group span {
  color: var(--text-muted) !important;
}

/* --- THEMATIC FOOTER --- */
.footer, footer {
  background-color: var(--bg) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border) !important;
  padding: 30px 24px !important;
  
  /* Centers the footer and pushes it to the bottom of the viewport on short pages */
  margin: 0 auto !important;               /* Reverted back to center alignment */
  margin-top: auto !important;               /* The auto-push mechanism remains active */
  
  max-width: 1100px !important;
  width: 100% !important;
  font-family: var(--font-sans);
}

#footer-flexbox, .copyrightLine {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;  /* Aligns footer lines elegantly with logo start edge */
  list-style: none !important;             
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

#footer-flexbox li, .copyrightLine li {
  list-style-type: none !important;        
  margin: 0 20px 0 0 !important;           
  padding: 0 !important;
}

.footerlink {
  color: var(--text-muted) !important;
  font-weight: 500;
}

.footerlink:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* -------------------------------------------------------------
   EXERCISE BOOK & QUIZ THEME INTEGRATION (FLAT & RESOLVED)
   ------------------------------------------------------------- */

/* 1. Bulletproof Fixed Bottom Control Panel (Never shifts or jumps) */
body .controlpanel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;               /* Sits safely on top of all other elements */
  background-color: var(--surface) !important; /* Retains surface background to block scrolling text */
  border-top: 1px solid var(--border) !important;
  padding: 15px 24px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.12) !important;
  
  /* Force-aligns the outer container itself */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

body #control1 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;     /* Centers the buttons on all screen sizes */
  align-items: center !important;
  gap: 8px !important;                     /* Uniform spacing between navigation keys */
  width: 100% !important;
  max-width: 1100px !important;            /* Aligns button bounds to your main 1100px column */
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Adds bottom padding so scrollable content is never covered by the fixed bar */
body, 
body .CONTENT,
body #question-box {
  padding-bottom: 95px !important;
}

/* 2. Flat Design Reset: Force-removes all card backgrounds, borders, and shadows on test pages */
body #question-box,
body .questionheader,
body .containerStart,
body #startBtnImg,
body #textSummary,
body .container,
body .questionpage,
body .divOuterMost,
body .divLevel3,
body #etype1,
body #wmtypeX,
body #MCQSCC,
body #pickType,
body #inputType,
body #gapfill,
body #matchBox,
body #divLevel2,
body .divLevel2 {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 3. Style inputs, table rows, and fields on the quiz page */
body #inputField,
body #wordsTable tr,
body #adjectivesTable tr,
body .tableRow,
body .titleField,
body .contentField {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Style the quiz table headers with the active theme accent */
body .tableHeader, 
body .tableHeader th {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
  font-weight: 700;
}

/* Modals backdrop styling */
body .modal {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
/* Center Blog Posts on blog page */
.blogContainer:not(.filledInButton):not(.outLinedButton){
	display: flex;
	flex-direction: column;
	width: 100% !important;             /* Forces the post block to occupy 100% column width */
	align-self: flex-start !important;  /* Aligns the container itself to the left */
	align-items: flex-start !important; /* Force-aligns all lines inside the post to the left */
}
/* -------------------------------------------------------------
   UNIVERSAL LEFT-ALIGNED BLOG COLUMN RESET (ALL THEMES)
   ------------------------------------------------------------- */

/* 1. Force all blog posts, articles, and content blocks to be full-width and left-aligned */
body article,
body .postContent,
body .blogContainer,
body .mainContainer > article,
body .xContainer > article,
body .mainContainer > div,
body .xContainer > div {
  width: 100% !important;             /* Prevents short posts from shrinking */
  max-width: 1100px !important;       /* Syncs width with your main column */
  align-self: flex-start !important;  /* Aligns the containers to the left */
  align-items: flex-start !important; /* Aligns content inside them to the left */
  border: none !important;
  background-color: transparent !important;
}

/* 2. Force all headings, paragraphs, links, and text inside blog posts to left-align */
body article *,
body .postContent *,
body .blogContainer * {
  text-align: left !important;        /* Overrides any database-centered content styles */
}

/* 3. Keep post code containers and pre blocks cleanly flat and unbordered */
body .mainContainer .postContent > pre,
body .xContainer .postContent > pre {
  border: none !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
}

/* -------------------------------------------------------------
   COMPREHENSIVE BLOG COLUMN & POST REALIGNMENT
   ------------------------------------------------------------- */

/* 1. Target the left-hand column inside your blog main container directly */
body .mainContainer > *:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-self: flex-start !important;
  align-items: flex-start !important; /* Force-aligns the inner blocks to the left */
  width: 100% !important;
  max-width: 1100px !important;       /* Syncs width with the main site column */
  border: none !important;
  background-color: transparent !important;
}

/* 2. Target each individual blog post card inside the left column */
body .mainContainer > *:first-child > article,
body .mainContainer > *:first-child > .postContent,
body .mainContainer > *:first-child > div {
  width: 100% !important;
  align-self: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  border: none !important;
  background-color: transparent !important;
}

/* 3. Force-override any inline database styles, headings, or centered paragraphs */
body .mainContainer #postTitle,
body .mainContainer .postContent,
body .mainContainer .postContent p,
body .mainContainer .postContent div,
body .mainContainer .postContent span,
body .mainContainer .postContent a,
body .mainContainer .abouttext {
  text-align: left !important;       /* Forces left-alignment on titles and text lines */
}

/* Ensure post content list items and containers don't have clunky double-borders */
body .mainContainer .postContent > pre {
  border: none !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
}
/* -------------------------------------------------------------
   BLOG INDEX ALIGNMENT (FORCE FLEX-START & SPACE PROTECTION)
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   UNIVERSAL LEFT-ALIGNED BLOG COLUMN RESET (RESPONSIVE & SLIDER-SAFE)
   ------------------------------------------------------------- */

/* 1. Force the parent flex containers to align contents cleanly and disable inner scrollbars */
body .mainContainer,
body .xContainer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important; /* Stops the browser from distributing space on the left */
  gap: 40px !important;                    /* Adds a comfortable gap between the posts and the sidebar */
  overflow: visible !important;           /* Prevents container-level scrollbars */
}

/* 2. Responsive Column: Left-aligns the list and allows dynamic scaling to prevent sliders */
body .mainContainer > *:first-child,
body .xContainer > *:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-self: flex-start !important;
  align-items: flex-start !important;
  flex: 1 !important;                     /* Dynamically shares space with the sidebar */
  width: auto !important;                 /* Replaced rigid 100% width to prevent horizontal overflow */
  max-width: 750px !important;            /* Controls the post content width on wider screens */
  border: none !important;
  background-color: transparent !important;
}
/* 3. Force all headings, paragraphs, and links inside the posts to left-align */
body .mainContainer article,
body .mainContainer .postContent,
body .mainContainer .postContent p,
body .mainContainer .postContent div,
body .mainContainer .postContent span,
body .mainContainer .postContent a,
body .xContainer article,
body .xContainer .postContent,
body .xContainer .postContent p,
body .xContainer .postContent div,
body .xContainer .postContent span,
body .xContainer .postContent a {
  text-align: left !important;
}
/* -------------------------------------------------------------
   FORCE LIGHT TEXT ON BUTTONS FOR ALL DARK THEMES
   ------------------------------------------------------------- */

/* Targets the button structures under all active dark themes to enforce light text */
:root.theme-oxford-library button, :root.theme-oxford-library .btn, :root.theme-oxford-library .button, :root.theme-oxford-library .random-btn, :root.theme-oxford-library .prev-btn, :root.theme-oxford-library .next-btn,
:root.theme-oxford-bronze button, :root.theme-oxford-bronze .btn, :root.theme-oxford-bronze .button, :root.theme-oxford-bronze .random-btn, :root.theme-oxford-bronze .prev-btn, :root.theme-oxford-bronze .next-btn,
:root.theme-forest-canopy button, :root.theme-forest-canopy .btn, :root.theme-forest-canopy .button, :root.theme-forest-canopy .random-btn, :root.theme-forest-canopy .prev-btn, :root.theme-forest-canopy .next-btn,
:root.theme-ocean-trench button, :root.theme-ocean-trench .btn, :root.theme-ocean-trench .button, :root.theme-ocean-trench .random-btn, :root.theme-ocean-trench .prev-btn, :root.theme-ocean-trench .next-btn,
:root.theme-carbon-minimal button, :root.theme-carbon-minimal .btn, :root.theme-carbon-minimal .button, :root.theme-carbon-minimal .random-btn, :root.theme-carbon-minimal .prev-btn, :root.theme-carbon-minimal .next-btn,
:root.theme-terracotta-clay button, :root.theme-terracotta-clay .btn, :root.theme-terracotta-clay .button, :root.theme-terracotta-clay .random-btn, :root.theme-terracotta-clay .prev-btn, :root.theme-terracotta-clay .next-btn,
:root.theme-coffeehouse-warm button, :root.theme-coffeehouse-warm .btn, :root.theme-coffeehouse-warm .button, :root.theme-coffeehouse-warm .random-btn, :root.theme-coffeehouse-warm .prev-btn, :root.theme-coffeehouse-warm .next-btn,
:root.theme-boreal-aurora button, :root.theme-boreal-aurora .btn, :root.theme-boreal-aurora .button, :root.theme-boreal-aurora .random-btn, :root.theme-boreal-aurora .prev-btn, :root.theme-boreal-aurora .next-btn,
:root.theme-charcoal-velvet button, :root.theme-charcoal-velvet .btn, :root.theme-charcoal-velvet .button, :root.theme-charcoal-velvet .random-btn, :root.theme-charcoal-velvet .prev-btn, :root.theme-charcoal-velvet .next-btn,
:root.theme-imperial-indigo button, :root.theme-imperial-indigo .btn, :root.theme-imperial-indigo .button, :root.theme-imperial-indigo .random-btn, :root.theme-imperial-indigo .prev-btn, :root.theme-imperial-indigo .next-btn,
:root.theme-rust-steel button, :root.theme-rust-steel .btn, :root.theme-rust-steel .button, :root.theme-rust-steel .random-btn, :root.theme-rust-steel .prev-btn, :root.theme-rust-steel .next-btn,
:root.theme-obsidian-glass button, :root.theme-obsidian-glass .btn, :root.theme-obsidian-glass .button, :root.theme-obsidian-glass .random-btn, :root.theme-obsidian-glass .prev-btn, :root.theme-obsidian-glass .next-btn,
:root.theme-boreal-night button, :root.theme-boreal-night .btn, :root.theme-boreal-night .button, :root.theme-boreal-night .random-btn, :root.theme-boreal-night .prev-btn, :root.theme-boreal-night .next-btn,
:root.theme-botanical-herbarium button, :root.theme-botanical-herbarium .btn, :root.theme-botanical-herbarium .button, :root.theme-botanical-herbarium .random-btn, :root.theme-botanical-herbarium .prev-btn, :root.theme-botanical-herbarium .next-btn,
:root.theme-eink-graphite button, :root.theme-eink-graphite .btn, :root.theme-eink-graphite .button, :root.theme-eink-graphite .random-btn, :root.theme-eink-graphite .prev-btn, :root.theme-eink-graphite .next-btn,
:root.theme-academic-sage button, :root.theme-academic-sage .btn, :root.theme-academic-sage .button, :root.theme-academic-sage .random-btn, :root.theme-academic-sage .prev-btn, :root.theme-academic-sage .next-btn,
:root.theme-eink-slate button, :root.theme-eink-slate .btn, :root.theme-eink-slate .button, :root.theme-eink-slate .random-btn, :root.theme-eink-slate .prev-btn, :root.theme-eink-slate .next-btn,
:root.theme-cambridge-ivy button, :root.theme-cambridge-ivy .btn, :root.theme-cambridge-ivy .button, :root.theme-cambridge-ivy .random-btn, :root.theme-cambridge-ivy .prev-btn, :root.theme-cambridge-ivy .next-btn,
:root.theme-gothic-romance button, :root.theme-gothic-romance .btn, :root.theme-gothic-romance .button, :root.theme-gothic-romance .random-btn, :root.theme-gothic-romance .prev-btn, :root.theme-gothic-romance .next-btn,
:root.theme-byzantine-gold button, :root.theme-byzantine-gold .btn, :root.theme-byzantine-gold .button, :root.theme-byzantine-gold .random-btn, :root.theme-byzantine-gold .prev-btn, :root.theme-byzantine-gold .next-btn,
:root.theme-baudelaire-decadence button, :root.theme-baudelaire-decadence .btn, :root.theme-baudelaire-decadence .button, :root.theme-baudelaire-decadence .random-btn, :root.theme-baudelaire-decadence .prev-btn, :root.theme-baudelaire-decadence .next-btn,
:root.theme-persephone-pomegranate button, :root.theme-persephone-pomegranate .btn, :root.theme-persephone-pomegranate .button, :root.theme-persephone-pomegranate .random-btn, :root.theme-persephone-pomegranate .prev-btn, :root.theme-persephone-pomegranate .next-btn,
:root.theme-kafkaesque-brutalist button, :root.theme-kafkaesque-brutalist .btn, :root.theme-kafkaesque-brutalist .button, :root.theme-kafkaesque-brutalist .random-btn, :root.theme-kafkaesque-brutalist .prev-btn, :root.theme-kafkaesque-brutalist .next-btn,
:root.theme-metaphysical-poetry button, :root.theme-metaphysical-poetry .btn, :root.theme-metaphysical-poetry .button, :root.theme-metaphysical-poetry .random-btn, :root.theme-metaphysical-poetry .prev-btn, :root.theme-metaphysical-poetry .next-btn {
  color: #ffffff !important;               /* Forces a crisp, highly readable white text */
}
/* -------------------------------------------------------------
   FORCE DARK TEXT ON BUTTONS FOR ALL LIGHT/SEPIA THEMES
   ------------------------------------------------------------- */

/* Targets the button structures under all active light/sepia themes to enforce dark text */
:root.theme-scholarly-parchment button, :root.theme-scholarly-parchment .btn, :root.theme-scholarly-parchment .button, :root.theme-scholarly-parchment .random-btn, :root.theme-scholarly-parchment .prev-btn, :root.theme-scholarly-parchment .next-btn,
:root.theme-vintage-newsprint button, :root.theme-vintage-newsprint .btn, :root.theme-vintage-newsprint .button, :root.theme-vintage-newsprint .random-btn, :root.theme-vintage-newsprint .prev-btn, :root.theme-vintage-newsprint .next-btn,
:root.theme-winter-parchment button, :root.theme-winter-parchment .btn, :root.theme-winter-parchment .button, :root.theme-winter-parchment .random-btn, :root.theme-winter-parchment .prev-btn, :root.theme-winter-parchment .next-btn,
:root.theme-desert-plateau button, :root.theme-desert-plateau .btn, :root.theme-desert-plateau .button, :root.theme-desert-plateau .random-btn, :root.theme-desert-plateau .prev-btn, :root.theme-desert-plateau .next-btn,
:root.theme-ash-minimal button, :root.theme-ash-minimal .btn, :root.theme-ash-minimal .button, :root.theme-ash-minimal .random-btn, :root.theme-ash-minimal .prev-btn, :root.theme-ash-minimal .next-btn,
:root.theme-classic-editorial button, :root.theme-classic-editorial .btn, :root.theme-classic-editorial .button, :root.theme-classic-editorial .random-btn, :root.theme-classic-editorial .prev-btn, :root.theme-classic-editorial .next-btn,
:root.theme-sage-mist button, :root.theme-sage-mist .btn, :root.theme-sage-mist .button, :root.theme-sage-mist .random-btn, :root.theme-sage-mist .prev-btn, :root.theme-sage-mist .next-btn,
:root.theme-ancient-parchment button, :root.theme-ancient-parchment .btn, :root.theme-ancient-parchment .button, :root.theme-ancient-parchment .random-btn, :root.theme-ancient-parchment .prev-btn, :root.theme-ancient-parchment .next-btn,
:root.theme-alexandrian-scroll button, :root.theme-alexandrian-scroll .btn, :root.theme-alexandrian-scroll .button, :root.theme-alexandrian-scroll .random-btn, :root.theme-alexandrian-scroll .prev-btn, :root.theme-alexandrian-scroll .next-btn,
:root.theme-scribe-monochrome button, :root.theme-scribe-monochrome .btn, :root.theme-scribe-monochrome .button, :root.theme-scribe-monochrome .random-btn, :root.theme-scribe-monochrome .prev-btn, :root.theme-scribe-monochrome .next-btn,
:root.theme-keats-romantic button, :root.theme-keats-romantic .btn, :root.theme-keats-romantic .button, :root.theme-keats-romantic .random-btn, :root.theme-keats-romantic .prev-btn, :root.theme-keats-romantic .next-btn,
:root.theme-bloomsbury-group button, :root.theme-bloomsbury-group .btn, :root.theme-bloomsbury-group .button, :root.theme-bloomsbury-group .random-btn, :root.theme-bloomsbury-group .prev-btn, :root.theme-bloomsbury-group .next-btn {
  color: #1c1917 !important;               /* Forces a crisp, highly readable dark-charcoal text */
}
/* -------------------------------------------------------------
   STABLE HEADER-TO-CONTENT SPACING GAP
   ------------------------------------------------------------- */

/* Forces a spacious, readable 3.5rem vertical gap below the header navigation line */
body #testDivX{
  margin-top: 3.5rem !important; /* Pushes the entire layout block down from the header */
}
/* -------------------------------------------------------------
   ALL POSTS SIDEBAR - NO BULLETS & HOVER STYLES
   ------------------------------------------------------------- */

/* Strips all standard bullet-point markers from the sidebar list */
body .blogIndex ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 0 !important;
}

body .blogIndex li {
  list-style-type: none !important;
  margin-bottom: 8px !important;    /* Comfortable vertical line-spacing */
  padding: 0 !important;
}

body .blogIndex a {
  color: var(--text-muted) !important;
  font-size: 0.95rem !important;
  font-family: var(--font-sans);
  transition: color 0.15s ease;
}

body .blogIndex a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}