/* ================ */
/* 1. BASE IMPORTS  */
/* ================ */
@import "navbar.css";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ================ */
/* 3. BASE STYLES   */
/* ================ */
body {
  margin: 2em 5em;
  padding: 0;
  font-family: "Noto Serif", Georgia, serif;
  font-size: 1em;
  color: #333;
  background-color: #E6E6E6;
}

#content {
  max-width: 45em;
  margin: 1em auto;
  border: 1px solid navy;
  background: #FFF;
  padding: 1em 6em;
}

a { 
  text-decoration: none; 
}

/* ================ */
/* 4. TYPOGRAPHY    */
/* ================ */
h1, h2, h3, h4, h5, p.divider {
  color: navy;
  text-align: center;
  font-family: "Noto Sans", Verdana, sans-serif;
}

.new, dt.bold, p.divider, p.large {
  font-weight: 700;
}

p.large {
  font-size: 1.5em;
  text-align: center;
}

p.divider {
  margin-top: 2.5em;
  margin-bottom: 2em;
}

.subtitle {
  text-align: center;
  color: navy;
}

.changed {
  font-style: italic;
  color: maroon;
}

.small { font-size: .9em; }

span.small {
  font-variant: small-caps;
  font-size: 1em;
}

span.smallcaps {
  font-variant: small-caps;
  font-size: 1.1em;
  color: maroon;
}

.new {
  font-size: 0.75em;
  font-family: "Noto Sans", Verdana, sans-serif;
  color: #ff2f92;
  margin-left: 1em;
}

.obfuscated-word {
    letter-spacing: 0.15em;
    white-space: nowrap;
    display: inline-block;
}
		        
.dots {
    letter-spacing: 0.2em;
    margin: 0 0.1em;
}

/* ================ */
/* 5. LAYOUT        */
/* ================ */
/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-stretch {
  align-items: stretch;
}


/* Specific Flex Layouts */

.flex-container {
  display: flex;
  justify-content: center; /* Centers the group horizontally */
  align-items: center;
  gap: 2rem; /* Space between items (replace with your preferred value) */
}

.flex-container > div,
.flex-box > div,
.flex-center > div,
.flex-poetry > div {
  margin: 1rem;
  padding: 0 1.5rem;
  font-size: 0.8rem;
}

.flex-container > div {
  text-align: center;
  
}

.flex-box > div {
  background-color: #f1f1f1;
  width: 20rem;
  text-align: left;
}

/* Dedicated Poem Flexbox - No Paragraph Spacing */
.flex-poem {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 36em; /* Optimal line length for poetry */
}

.flex-poem > div {
  text-align: left; 
  padding: 0 1rem;
  line-height: 1.45; /* Adjust if needed */
}

.flex-center > div {
  background-color: #fff;
  width: 10rem;
  text-align: left;
}

.flex-three > div {
  width: 10rem;
  margin: 1rem;
  text-align: center;
  font-size: 1rem;
}

.flex-arrow {
  flex: 0;
}

.flex-arrow a {
  font-size: 2.5em;
  text-decoration: none;
  color: navy;
}

.flex-arrow a:hover { 
  color: silver; 
}

/* Columns */
.columns {
  columns: 100px 2;
}

/* ================ */
/* 6. COMPONENTS    */
/* ================ */
/* Text Alignment */
.textcenter { text-align: center; }
.textright { text-align: right; }

/* Spacing Utilities */
.top { padding-top: 1.5em; }
.pad { padding: 0 2em; }
.smallpad { padding: 0 1em; }

/* Images */
.imgcenter, .scale-image {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.scale-image {
  width: auto;
  max-width: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.centered-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.FloatRight { float: right; }
.FloatLeft { float: left; }
.imageright { float: right; }
.image-wrapper { position: relative; }

/* Tables */

table {
  margin: 0 auto;
}

table.jewels, td.jewels-ob { vertical-align: top; }
table.jewels { 
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

td.jewels-ob, td.nowrap, td.pad, td.smallpad { white-space: nowrap; }

td.noborder {
  padding: 0 1em;
  border: none;
}

td.pad {
  padding: 0 2em;
  width: 33%;
}

td.smallpad {
  padding: 0 1em;
}

td.date { 
  padding-right: 2em;
  text-align: right;
}

td.number {
  padding: 0 1em;
  text-align: right;
}

td.numbers {
  padding-right: 1em;
  padding-left: 2em;
  text-align: right;
}

td.sum {
  padding-right: 1em;
  padding-left: 2em;
  text-align: right;
}

td.quote { 
  padding-left: 2em;
  text-align: right;
}

td.index {
  padding: 0 .5em;
}

td.jewels, td.jewels-ob, td.text {
  padding: 0 1em;
}

td.text {
  padding-bottom: 1em;
  text-align: left;
  vertical-align: text-top;
}

/* ================ */
/* LISTS - ORIGINAL CLASSES WITH DESCRIPTIONS */
/* ================ */

/* Unordered Lists */
ul.a { list-style-type: circle; }    /* Hollow circles */
ul.b { list-style-type: disc; }     /* Filled circles (default bullet) */
ul.c { list-style-type: square; }   /* Filled squares */

/* Ordered Lists - Numbering Systems */
ol.f { list-style-type: decimal; }          /* 1, 2, 3 (Western numbers) */
ol.g { list-style-type: decimal-leading-zero; } /* 01, 02, 03 (with leading zero) */

/* Western Alphabetic/Roman Styles */
ol.n { list-style-type: lower-alpha; }      /* a, b, c (lowercase letters) */
ol.o { list-style-type: lower-greek; }      /* α, β, γ (Greek letters) */
ol.p { list-style-type: lower-latin; }      /* Same as lower-alpha */
ol.q { list-style-type: lower-roman; }      /* i, ii, iii (lowercase Roman) */
ol.r { list-style-type: upper-alpha; }      /* A, B, C (uppercase letters) */
ol.s { list-style-type: upper-latin; }      /* Same as upper-alpha */
ol.t { list-style-type: upper-roman; }      /* I, II, III (uppercase Roman) */

/* Special Cases */
ol.u { list-style-type: none; }             /* No markers (commonly used) */
ol.v { list-style-type: inherit; }          /* Inherits from parent element */

/* List Item Spacing */
ol p, ul p { 
  margin-bottom: 0; 
}

li {
  margin: 0.75em 0;  /* Consistent vertical spacing */
}
ol p, ul p { 
  margin-bottom: 0; 
}

li {
  margin: 0.75em 0;
}

/* Special Text Blocks */
.poetry {
  margin: 0 3em 0 6em;
  line-height: 1.45em;
}

.quote {
  margin: 1em 2.5em;
  line-height: 1.45em;
}

.review {
  margin: 0 2em;
  font-weight: normal;
  font-style: normal;
  color: navy;
}

p.rubric, span.rubric {
  font-weight: normal;
 /* font-style: italic;*/
  color: red;
}

p.rubric {
  margin: 0 1em;
}

span.rubric {
  margin: 0 0.4em;
}

.hang {
  padding-left: 3em;
  text-indent: -3em;
}

.hang-lodge {
  padding-left: 2em;
  text-indent: -2em;
}

/* ================ */
/* 7. FORM ELEMENTS */
/* ================ */
body form input.st-search-input {
  color: green;
  font-weight: 700;
  font-variant: small-caps;
}

/* ================ */
/* 8. FOOTNOTES     */
/* ================ */
.footnote-back { 
  margin-left: 0.5em; 
}

.footnote-ref { 
  font-size: 0.8rem; 
}

ol#footnotes {
  font-size: 1em;
  margin-left: 0;
}

/* ================ */
/* 9. ANIMATIONS    */
/* ================ */
/* 
@keyframes highfade {
  0% { background-color: none; }
  20% { background-color: yellow; }
  100% { background-color: none; }
}

a:target, 
ol#footnotes li:target, 
ol#footnotes2 li:target, 
ol#footnotes3 li:target, 

sup a:target {
  animation: highfade 3s ease-in-out 1;
  border: 0;
  outline: 0;
}
 */


@keyframes highfade {
  0% { background-color: none; }
  20% { background-color: yellow; }
  100% { background-color: none; }
}

a:target, 
ol#footnotes li:target, 
ol#footnotes2 li:target, 
ol#footnotes3 li:target, 
sup a:target,
.footnote:target {
  animation: highfade 3s ease-in-out 1;
  border: 0;
  outline: 0;


/* ================ */
/* 10. MISC         */
/* ================ */
hr.short {
  width: 60%;
  margin: 2em auto;
  color: silver;
  height: 1px;
}

/* 
#copyright {
  color: navy;
  text-align: center;
  font-size: 0.8em;
}
 */

#copyright {
  clear: both;
  display: block;
  color: navy;
  text-align: center;
  font-size: 0.8em;
}

.copyright {text-align: center; color: navy; font-size: 0.8em;}

#title { font-size: 1.6rem; }

.caption, .disclaim, td.grid, th { 
  text-align: center; 
}

.caption {
  color: navy;
  font-size: small;
  margin: 0 10em;
}

td.grid { width: 1.1em; }

/* Color Classes */
.blue { color: #009; }
.maroon { color: maroon; }
.lightblue { color: #3D07FF; }
.red { color: red; }
.crimson { color: crimson; }
.green { color: #4e8f00; }
.purple { color: purple; }
.disclaim { color: maroon; }

/* Journal Specific */
.journal a:hover {
  color: #999;
  border-top: 1px solid #009;
  border-bottom: 1px solid #009;
  background-color: #fff;
}

/* Tippy CSS */

.tippy-tooltip.light-theme {
  background-color: #fff;
  color: #333;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 
.tippy-tooltip.light-theme[data-placement^='top'] .tippy-arrow {
  border-top-color: #fff;
}
.tippy-tooltip.light-theme[data-placement^='bottom'] .tippy-arrow {
  border-bottom-color: #fff;
 */

/* Unique color and hover effects for each class */
.info-r { color: #ff0000; } /* Your existing red */
.info-b { color: #0000ff; } /* Your existing blue */
.info-d { color: #d46b08; } /* DeepSeek orange */
.info-g { color: #007F00; } /* Green */

/* Shared hover/focus effects (applies to all) */
[class^="info-"]:hover,
[class^="info-"]:focus {
  opacity: 1;
  text-shadow: 0 0 2px currentColor; /* Uses each class's color */
}