/**
 * ourboox-book.css
 * Ourboox · Book Stylesheet
 * Design tokens & element reference
 *
 * Usage: wrap all book content in a .obx-book-content container.
 * All content styles are scoped to .obx-book-content so native HTML elements
 * rendered by Tiptap are styled automatically — no classes required
 * on individual elements.
 *
 * Sections:
 *  01 Foundation  — tokens (custom properties)
 *  02 Headings
 *  03 Body & emphasis
 *  04 Lists
 *  05 Quotes
 *  06 Images
 *  07 Specials    — section break, page number
 *
 * Reader-only sections (08–13) live in ourboox-reader.css.
 *
 * Deferred (not in scope):
 *  - .book-lead     (lead/opening paragraph variant)
 *  - .book-dropcap  (drop cap variant)
 *  - .book-pullquote (pull quote block)
 */


/* ==========================================================================
   01 FOUNDATION — tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:wght@400;700;800&display=swap');

:root {
  /* --- Type stack --- */
  --book-font: Lora, Georgia, 'Times New Roman', serif;

  /* --- Type scale --- */
  --book-h1-size: 36px;
  --book-h1-lh:   1.2;
  --book-h1-w:    600;

  --book-h2-size: 26px;
  --book-h2-lh:   1.3;
  --book-h2-w:    600;

  --book-h3-size: 19px;
  --book-h3-lh:   1.4;
  --book-h3-w:    700;

  --book-lead-size: 19px;
  --book-lead-lh:   1.55;
  --book-lead-w:    500;

  --book-body-size: 17px;
  --book-body-lh:   1.75;
  --book-body-w:    400;

  --book-caption-size: 14px;
  --book-caption-lh:   1.5;

  --book-pull-size: 22px;
  --book-pull-lh:   1.45;

  /* --- Ink & accent --- */
  --book-fg:            #374151;
  --book-fg-strong:     #1F2937;
  --book-fg-soft:       #6B7280;
  --book-accent:        #3B82F6;
  --book-accent-dark:   #2563EB;
  --book-accent-border: #BFDBFE;
  --book-page-bg:       #FAFAF9;
  --book-rule:          #E5E7EB;

  /* --- Layout --- */
  --book-page-pad: 56px;
}

.obx-book-content {
  /*background-color: var(--book-page-bg);*/
  padding: var(--book-page-pad);
  box-sizing: border-box;
}


/* ==========================================================================
   02 HEADINGS
   ========================================================================== */

.obx-book-content h1 {
  margin: 0;
  font-family: var(--book-font);
  font-size: var(--book-h1-size);       /* 36px */
  line-height: var(--book-h1-lh);       /* 1.2  */
  font-weight: var(--book-h1-w);        /* 600  */
  color: var(--book-fg-strong);
  letter-spacing: -0.005em;
}

.obx-book-content h2 {
  margin: 0;
  font-family: var(--book-font);
  font-size: var(--book-h2-size);       /* 26px */
  line-height: var(--book-h2-lh);       /* 1.3  */
  font-weight: var(--book-h2-w);        /* 600  */
  color: var(--book-fg-strong);
  letter-spacing: -0.003em;
}

.obx-book-content h3 {
  margin: 0;
  font-family: var(--book-font);
  font-size: var(--book-h3-size);       /* 19px */
  line-height: var(--book-h3-lh);       /* 1.4  */
  font-weight: var(--book-h3-w);        /* 700  */
  color: var(--book-fg-strong);
}


/* ==========================================================================
   03 BODY & EMPHASIS
   ========================================================================== */

.obx-book-content p {
  margin: 0;
  font-family: var(--book-font);
  font-size: var(--book-body-size);     /* 17px */
  line-height: var(--book-body-lh);     /* 1.75 */
  font-weight: var(--book-body-w);      /* 400  */
  color: var(--book-fg);
}

.obx-book-content p:empty {
  min-height: 1em;
}

.obx-book-content p + p {
  margin-top: 18px;
}

.obx-book-content strong,
.obx-book-content b {
  font-weight: 700;
  color: var(--book-fg-strong);
}

.obx-book-content em,
.obx-book-content i {
  font-style: italic;
}

.obx-book-content a {
  color: var(--book-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.obx-book-content a:hover {
  color: var(--book-accent-dark);
}


/* ==========================================================================
   04 LISTS
   ========================================================================== */

.obx-book-content ul,
.obx-book-content ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: list;
}

.obx-book-content ul li,
.obx-book-content ol li {
  font-family: var(--book-font);
  font-size: var(--book-body-size);     /* 17px */
  line-height: var(--book-body-lh);     /* 1.75 */
  color: var(--book-fg);
  padding-left: 28px;
  position: relative;
}

.obx-book-content ul li + li,
.obx-book-content ol li + li {
  margin-top: 8px;
}

/* Unordered — 6px brand-blue bullet */
.obx-book-content ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: calc(var(--book-body-lh) * 0.5em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--book-accent);
}

/* Ordered — brand-blue tabular numerals, 22px gutter */
.obx-book-content ol li {
  counter-increment: list;
}

.obx-book-content ol li::before {
  content: counter(list) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--book-accent);
  font-variant-numeric: tabular-nums;
  width: 22px;
  text-align: right;
}


/* ==========================================================================
   05 QUOTES
   ========================================================================== */

.obx-book-content blockquote {
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--book-accent);
  font-family: var(--book-font);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--book-fg-strong);
  font-weight: 400;
}

.obx-book-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 14px;
  color: var(--book-fg-soft);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.obx-book-content blockquote cite::before {
  content: '— ';
}


/* ==========================================================================
   06 IMAGES
   ========================================================================== */

.obx-book-content figure {
  margin: 0;
}

.obx-book-content figure > div {
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
          linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(96,165,250,0.08) 50%, rgba(191,219,254,0.30) 100%),
          linear-gradient(180deg, #DCE7F5 0%, #F2F7FE 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.obx-book-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.obx-book-content figcaption {
  margin: 12px 0 0 0;
  font-family: var(--book-font);
  font-style: italic;
  font-size: var(--book-caption-size);  /* 14px */
  line-height: var(--book-caption-lh);  /* 1.5  */
  color: var(--book-fg-soft);
  text-align: center;
}


/* ==========================================================================
   07 SPECIALS — section break, page number
   ========================================================================== */

/* Three-dot section break — still requires .book-break markup,
   as there is no native HTML equivalent */
.obx-book-content .book-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px auto;
}

.obx-book-content .book-break .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--book-accent);
  opacity: 0.85;
}

.obx-book-content .book-break .dot:nth-child(2) {
  opacity: 1;
  transform: scale(1.2);
}

/* Centred page number — anchors to bottom of a relative parent */
.obx-book-content .book-pageno {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--book-font);
  font-size: 13px;
  color: var(--book-fg-soft);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}