/* Style for inline page number notation */
.page-marker {
  float: right;
  font-size: 0.8em;
  color: #999;
}

/* Optional: pad source blocks uniformly */
.source-text {
  background: none;
  border: 1px solid #ccc;
  padding: 12px;
}

/* Optional: style commentary panels */
.commentary {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 12px;
}

/* Optional: ensure fluid layout spacing behaves predictably */
.jf_fluid.no_paddings .col-1-3,
.jf_fluid.no_paddings .col-2-3 {
  box-sizing: border-box;
  padding: 6px; /* adjust as needed */
}

/* ====== Phrase-by-Phrase Paraphrase Styling ====== */
/* Styles <dl class="phrase-paraphrase"> with bold phrases (dt) and spaced paraphrases (dd) */

.phrase-paraphrase dt {
  padding-left: .5em;
  text-indent: -.3em;
  font-weight: bold;         /* Emphasize original phrase */
  color: #111;               /* Dark gray/black for strong visibility */
  margin-top: 8px;          /* Add spacing above each phrase */
}

.phrase-paraphrase dd {
  margin-bottom: 5px;        /* Add spacing below each paraphrase */
  margin-left: .5em;            /* Align left flush with phrase */
}

.phrase-paraphrase {
  margin-bottom: 0;
}

/* Compact, readable sentence structure lines */
.sentence-structure-compact .structure-line {
  display: block;
  margin-bottom: -.75em;  /* Adds spacing between Q&A lines */
  line-height: 1.4;       /* Slightly relaxed vertical rhythm */
}
/* Optional improvement for container */
.sentence-structure-compact {
  margin: -5px 0px 10px 0px;   /* Pulls block into balanced visual spacing */
  padding-left: 5px;             /* Optional: slight indent from border */
}

/* ===== Scoped Styling for Semantic Summary Blockquotes ===== */
/* Reduces font size for blockquotes only when class="semantic-summary" is present */

.blockquote-1.semantic-summary {
  font-size: .75rem;           /* Smaller, more compact text */
  line-height: 1.5;            /* Improved readability */
  padding-left: 1.0em;         /* Preserve space after magenta stripe */
  border-left: 5px solid #882255;  /* Retain styling */
  margin: -1em 0 .2em 0;               /* Consistent spacing */
}

/* <ul> style preset */
.toggled-ul {
  margin: 10px 0px 2px 15px;
}

/* style8 clone of style7 */
.jf_typo_toggle.style8 {
  display: flex;
  justify-content: flex-end; /* keeps button pinned to right */
  flex-wrap: wrap;
  align-items: flex-start;
}

.jf_typo_toggle.style8 .trigger {
  display: inline-block;
  background: #2A7B99;
  color: #fff;
  box-shadow: none;
  border-radius: 2px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  position: relative;
  padding: 0 20px 0 25px;
  min-width: max-content;
}

.jf_typo_toggle.style8 .container {
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  padding: 5px 5px 0px 5px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.jf_typo_toggle.style8 .trigger:before,
.jf_typo_toggle.style8 .trigger:after {
  content: '';
  position: absolute;
  background: #fff;
}

.jf_typo_toggle.style8 .trigger:before {
  width: 9px;
  height: 1px;
  top: 50%;
  left: 9px;
}

.jf_typo_toggle.style8 .trigger:after {
  width: 1px;
  height: 9px;
  top: 8px;
  left: 13px;
}

.jf_typo_toggle.style8 .trigger i {
  display: none;
  background-image: url(../images/typo/jf_typo_plus_white.png);
}

.jf_typo_toggle.style8 .trigger:hover {
  background: #2A7B99;
}

.jf_typo_toggle.style8 .trigger.active {
  background: #2A7B99;
}

.jf_typo_toggle.style8 .trigger.active i {
  background-image: url(../images/typo/jf_typo_minus_white.png);
}

.jf_typo_toggle.style8 .trigger.active:after {
  display: none;
}

.jf_typo_toggle.style8 .container p:last-child {
  margin-bottom: 0;
}

/* Tighten paragraph spacing in Source Text */
.module.source-text p {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  line-height: 1.5;
}

/* Scroll in Mega-Paragraphs for Source Text */
.module.source-text.long-paragraph {
  font-size: 0.85em;
  line-height: 1.4em;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Optional Scroll for Long Summary Blocks */
.module.commentary.long-paragraph {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Reduced font size in Large-Paragraphs for Source Text */
.module.source-text.medium-paragraph {
  font-size: 0.92em;
  line-height: 1.5em;
}

/* Small Caps Font for Source Text */
.small-caps {
  font-variant: small-caps;
  font-weight: 500;          /* Medium weight for visual density */
  font-size: 1em;         
  letter-spacing: 0.03em;    /* Just enough room between caps */
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-shadow: 0.02em 0 black;
}

/* ============================================
   Source and Summary Text Styling (Finalized)
   ============================================ */

/* Source Text Default Styles (layout + spacing) */
.module.source-text {
  font-size: 0.95em;
  line-height: 1.5;
  font-weight: 500;                /* Medium weight for visual density */
  text-shadow: 0.01em 0 black;
}

/* Summary Text Default Styles (layout + spacing) */
.module.summary-text {
  font-size: 1em;
  line-height: 1.6;
}

/* Optional Font Class for Source (serif font stack) */
.text-style3-serif {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Optional Font Class for Summary (CCC standard green) */
.text-style3-green {
  color: #336633;                 /* Adjust this hex value to match CCC theme */
  font-family: 'Jost', 'Inter', sans-serif; /* Fallbacks included */
}

/* ============================================
   Glossary term styling
   ============================================ */

/* Underline for glossary terms */
.glossary-term {
  border-bottom: 1px dotted #6e6e6e;
  cursor: help;
  position: relative;
  color: inherit;
}

/* Tooltip box */
#glossary-tooltip {
  display: none;
  position: absolute;
  max-width: 250px;
  background: #f4f4f4;
  color: #000;
  padding: 8px 10px;
  font-size: 0.85em;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
  z-index: 9999;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
  opacity: 0;
}

/* Show when active */
#glossary-tooltip[style*="display: block"] {
  opacity: 1;
}