/* ============================================================
   I CHING BOOK STYLES — ONLINE-SAFE (Helix/Bootstrap friendly)
   Based on i-ching.css
   ============================================================ */

#iching-book{
  font-family: "Times New Roman", Georgia, serif;
  line-height: 1.3;

  /* Bottom breathing room that "can’t lose" */
  padding-bottom: 20px;
  display: flow-root; /* prevents float-collapse issues */
}

#iching-book p{ margin-bottom: 1em; }
#iching-book li{ margin-bottom: 0.3em; }

#iching-book h1,
#iching-book h2,
#iching-book h3{ line-height: 1.15; }

#iching-book sup{ line-height: 1; }  /* footnote markers */


/* ============================================================
   TOGGLES — style7 (I Ching footnote boxes)
   (In-flow float box: pushes/wraps text; not an overlay)
   ============================================================ */

#iching-book .jf_typo_toggle.style7{
  float: right;
  position: static;          /* ensure no overlay behavior */
  margin: 0 0 12px 18px;     /* space from surrounding text */
}

/* Trigger (inline styles can still override as needed) */
#iching-book .jf_typo_toggle.style7 > .trigger{
  background-color: #1a7bb9;
  width: 22px;
  float: right;
  text-align: left;
  line-height: 25px;         /* tightens visual join with container */
  position: relative;
  bottom: -2px;
}

/* Toggle container typography + padding */
#iching-book .jf_typo_toggle.style7 > .container{
  line-height: 1.3;
  padding: 5px 6px;
  background: #fff;
  border: 2px solid #1a7bb9;       /* border color and width */
  width: clamp(16rem, 60vw, 22rem);
  max-width: min(350px, calc(100vw - 70px));  /* best guard */
  box-sizing: border-box;
  overflow-wrap: anywhere;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  float: right;
}

/* Stabilize accordion bodies: prevents float collapse and content clipping */
#iching-book .container.iching-acc-body::after{
  content: "";
  display: block;
  clear: both;
}

/* Tighten list spacing inside toggle boxes */
#iching-book .jf_typo_toggle.style7 .container ul{
  margin: 3px 0 0 0 !important;
  padding-left: 28px;
}

#iching-book .jf_typo_toggle.style7 .container ul.jf-chrome-typo-list.icon li{
  position: relative;
  margin-bottom: 0.1em;   /* Provide a controlled, smaller indent for the icon itself */
  padding-left: 22px;     /* controlled indent for icon */
}

/* Nudge the list icon inside toggles */
#iching-book .jf_typo_toggle.style7 .container ul.jf-chrome-typo-list.icon span.icon{
  top: 0px !important;    /* 0–2px as needed */
}

/* Inside style7 toggles, don’t double-indent JFChrome icon lists */
#iching-book .jf_typo_toggle.style7 .container ul.jf-chrome-typo-list.icon{
  margin: 3px 0 0 0 !important;
  padding-left: 0 !important;    /* KEY: remove extra padding */
}

/* END TOGGLE RULES */

/* ============================================================
   CONDITIONAL COLLISION FIX (KEEP)
   If a style7 toggle (±) is nested inside a style2 accordion,
   style2 trigger rules can override the toggle trigger and break
   the ± icon lane / alignment. This restores style7 behavior.
   ============================================================ */
#iching-book .jf_typo_accord.style2 .jf_typo_toggle.style7 .trigger{
  display: block !important;
  align-items: initial !important;
  padding: 0 0 0 25px !important;
  line-height: 24px !important;
  min-height: 24px !important;
  font-size: 14px !important;
  font-weight: normal !important;
}

/* ============================================================
   ACCORDION — Lines (style2) text + lead lines
   ============================================================ */

#iching-book ul.jf-chrome-typo-list.icon.line-lead span.lead-line{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-size: 1.05em;
  line-height: 1.05;
  font-weight: 500;
}

#iching-book ul.line-lead li{ margin-bottom: 4px; }
#iching-book ul.line-lead li:last-child{ margin-bottom: 8px; }

/* Variant lede line for a) / b) cases */
#iching-book .lead-line-ab{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-size: 1.05em;
  line-height: 1.35;   /* was 1.05 — too tight at >=250% zoom */
  font-weight: 500;
  display: block !important;
  margin-left: 0em !important;
  text-indent: -1.2em !important;
}
/* Follow-on line(s) under a): indented, no marker */
#iching-book .lead-line-ab-sub{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-size: 1.05em;
  line-height: 1.35;
  font-weight: 500;
  display: block !important;
  margin-left: 1.0em !important;   /* indent to match after the a)/b) marker */
  text-indent: -1.0em !important;
}

#iching-book .jf_typo_accord.style2 .acc-text{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-size: 0.85em;
  line-height: 1.3;
}

/* Optional: if you are using a special trigger class on line accordions */
#iching-book .jf_typo_accord.style2 .trigger{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-weight: 600;
  margin: 10px 0px 5px 0px;
}

/* ONLINE-SAFE:
   Never target Bootstrap's .container generically.
   Accordion bodies must opt in via class="container iching-acc-body"
   to avoid layout bleed and Bootstrap collisions. */
#iching-book .container.iching-acc-body{
  margin-bottom: 5px;
  border: 2px solid #1a7bb9;
  box-sizing: border-box;
  width: 100%;
}


/* ============================================================
   JUDGMENT / IMAGE lead lines (larger lede style)
   ============================================================ */

#iching-book ul.jf-chrome-typo-list.icon.judgment-lead span.lead-line{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-size: 1.1em;
  line-height: 1.1;
  font-weight: 500 !important;
}

#iching-book .minor-header{
  font-size: 1.12em;          /* subtle lift */
  line-height: 1.15;
  font-style: italic;         /* keep continuity with source */
  font-weight: 500;           /* same weight family as body */
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  margin-left: 28px;
}

/* ============================================================
   BLOCKQUOTES — book typography + hanging opening quote
   ============================================================ */

#iching-book blockquote.blockquote-1{
  font-family: "Noto Serif","Times New Roman",Georgia,serif;
  font-size: 0.9em;
  line-height: 1.3;
}

#iching-book blockquote.blockquote-1 p{
  margin-left: 0;
  padding-left: 0.50em; /* room for hanging quote */
  text-indent: -0.50em; /* pull quote into margin */
}

#iching-book blockquote.blockquote-1 p + p{
  padding-left: 0;
  text-indent: 0;
}

/* ============================================================
   RULER ICONS — outline + fill matching trigger background
   ============================================================ */

#iching-book .ruler-marker{
  display:inline-block;
  width:0.85em;
  height:0.85em;
  margin:0 0.25em;
  background:#ECECEC;  /* trigger background fill */
  border:1px solid #000;
  vertical-align:-0.08em;
  box-sizing:border-box;
}

#iching-book .ruler-marker.governing{ border-radius: 50% !important; }
#iching-book .ruler-marker.constituting{ border-radius: 0 !important; }


/* ============================================================
   TAB LAYOUT TWEAKS
   ============================================================ */

/* Default desktop pull (reading comfort) */
#iching-book .tab_content-style10{
  margin-top: -17px;
  margin-right: -35px;
  line-height: 130%;
}
#iching-book [id$="-4-style10"]{ margin-right: -30px; }

/* Small Caps span */
#iching-book .sc{
  font-size: 0.88em;
  letter-spacing: 0.04em;
}

/* ============================================================
   END I CHING BOOK STYLES
   END i-ching-4.css
   ============================================================ */