/* shouldiuse.ai Flipbook
   Scoped styles. Everything is prefixed with .suai-flipbook to avoid collisions
   with the Salient theme. */

.suai-flipbook-stage {
  --paper: #fbf6ec;
  --ink: #1a1208;
  --accent: #c4622d;
  --bg-floor: #d9cfbf;

  position: relative;
  /* Full-viewport breakout — JS will set the exact left offset at runtime so
     the stage always pins to viewport x=0 regardless of how Salient nests it.
     The defaults below are a reasonable fallback if JS hasn't run yet. */
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
  /* Fixed height so the page-size calculation is predictable across screen widths */
  min-height: 820px;
  height: 820px;
  background: linear-gradient(180deg, #c8baa2 0%, #b4a288 100%);
  padding: 24px 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* Small italic caveat that sits above the book inside the tan stage. */
.suai-flipbook-caveat {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(40, 25, 5, 0.72);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 14px;
  line-height: 1.5;
}
.suai-flipbook-caveat a {
  color: #6f3a17;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.suai-flipbook-caveat a:hover {
  color: #c4622d;
}

/* Hard ceiling on every page — even on very wide viewports the book stays
   pleasantly small instead of blowing up edge-to-edge. */
.suai-flipbook-stage .stf__item {
  max-width: 480px !important;
  max-height: 660px !important;
}
.suai-flipbook-stage .stf__parent {
  max-width: 1000px !important;
  /* Dynamically center the spread inside the full-viewport stage so the book
     bounding box always sits in the middle of the page no matter the screen size. */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* StPageFlip's inner block holds the actual page items — center it too so the
   absolutely-positioned items don't anchor to the left edge of the parent. */
.suai-flipbook-stage .stf__block {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* StPageFlip's wrapper sometimes computes height: 0, which lets content below
   leak into the same vertical strip. Force a real height so the book occupies
   its full slot in the stage. */
.suai-flipbook-stage .stf__wrapper {
  min-height: 660px !important;
  height: 660px !important;
}
.suai-flipbook-stage .stf__item img {
  max-width: 100%;
  max-height: 100%;
}

.suai-flipbook-stage * { box-sizing: border-box; }

.suai-flipbook-loading {
  color: #4a3a20;
  font-style: italic;
  font-family: "Playfair Display", Georgia, serif;
}

.suai-flipbook {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 30px 70px -10px rgba(40, 25, 5, 0.55),
    0 12px 30px -8px rgba(40, 25, 5, 0.4);
  border-radius: 6px;
}

/* Each page */
.suai-flipbook .page {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(120, 90, 50, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 90, 50, 0.06) 0%, transparent 60%);
  padding: 56px 56px 50px;
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.suai-flipbook .page.--right { padding-left: 70px; }
.suai-flipbook .page.--left  { padding-right: 70px; }

/* Spine-side shadow */
.suai-flipbook .page.--left::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 18px;
  background: linear-gradient(to right, transparent 0%, rgba(80, 55, 25, 0.12) 70%, rgba(80, 55, 25, 0.22) 100%);
  pointer-events: none;
}
.suai-flipbook .page.--right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  background: linear-gradient(to left, transparent 0%, rgba(80, 55, 25, 0.12) 70%, rgba(80, 55, 25, 0.22) 100%);
  pointer-events: none;
}

.suai-flipbook .page-content {
  flex: 1;
  overflow: hidden;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.suai-flipbook .page-content p {
  margin: 0 0 0.85em;
  color: var(--ink);
}
.suai-flipbook .page-content p:last-child { margin-bottom: 0; }

.suai-flipbook .chapter-tag {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 29, 16, 0.55);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(120, 90, 50, 0.18);
}
.suai-flipbook .chapter-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--ink);
}
.suai-flipbook .section-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.4rem;
  margin: 0 0 0.6em;
  color: var(--ink);
}
.suai-flipbook .dropcap::first-letter {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 3.2em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.08em 0 0;
  color: var(--ink);
  font-weight: 700;
}
.suai-flipbook .page-number {
  position: absolute;
  bottom: 18px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: rgba(42, 29, 16, 0.45);
  font-size: 0.8rem;
}
.suai-flipbook .page.--left  .page-number { left: 0; right: 70px; text-align: center; }
.suai-flipbook .page.--right .page-number { left: 70px; right: 0; text-align: center; }

/* Cover page */
.suai-flipbook .page.--cover {
  padding: 0;
  background: #1a1208;
  overflow: hidden;
}
.suai-flipbook .page.--cover img {
  width: 100%;
  height: 100%;
  /* Show the entire cover — no top/bottom cropping. */
  object-fit: contain;
  object-position: center;
  display: block;
}
/* Title page — centered block with tighter, more deliberate spacing */
.suai-flipbook .page.--title {
  padding: 56px 48px 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.suai-flipbook .page.--title .title-eyebrow {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: rgba(42, 29, 16, 0.55);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin: 0 0 22px;
}
.suai-flipbook .page.--title h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.85rem;
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.suai-flipbook .page.--title .title-rule {
  height: 1px;
  width: 52px;
  background: rgba(120, 90, 50, 0.4);
  margin: 18px 0;
}
.suai-flipbook .page.--title .title-sub {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--accent);
  font-size: 1.05rem;
  margin: 0 0 28px;
}
.suai-flipbook .page.--title .title-author {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--ink);
  margin: 0;
}
.suai-flipbook .page.--title .title-imprint {
  margin-top: 36px;
  padding-top: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: rgba(42, 29, 16, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

/* Back cover */
.suai-flipbook .page.--back-cover {
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.suai-flipbook .page.--back-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Side arrows — hidden by default since the bottom controls bar already
   provides prev/next. */
.suai-flipbook-arrow {
  display: none !important;
}

/* Bottom controls */
.suai-flipbook-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(40, 25, 5, 0.85);
  color: #f5ede0;
  padding: 8px 16px;
  border-radius: 999px;
  z-index: 5;
}
.suai-flipbook-ctl-btn {
  background: transparent;
  color: #f5ede0;
  border: 1px solid rgba(245, 237, 224, 0.3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: -apple-system, sans-serif;
}
.suai-flipbook-ctl-btn:hover { background: rgba(245, 237, 224, 0.15); }
.suai-flipbook-ctl-btn:disabled { opacity: 0.35; cursor: default; }
.suai-flipbook-info {
  font-size: 0.85rem;
  color: rgba(245, 237, 224, 0.85);
  min-width: 90px;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
}

/* Mobile */
@media (max-width: 820px) {
  .suai-flipbook-stage { padding: 16px 12px 80px; min-height: 660px; height: 660px; }
  .suai-flipbook-caveat { font-size: 0.82rem; margin-bottom: 10px; padding: 0 8px; }
  .suai-flipbook-arrow { display: none; }
  .suai-flipbook .page { padding: 36px 28px 40px; font-size: 0.96rem; line-height: 1.65; }
  .suai-flipbook .page.--right { padding-left: 28px; }
  .suai-flipbook .page.--left  { padding-right: 28px; }
  .suai-flipbook .chapter-title { font-size: 1.7rem; }
  .suai-flipbook .page.--title h1 { font-size: 1.6rem; }
}

/* Hide the original WordPress post content if the flipbook is present.
   The flipbook auto-mode embeds it itself. */
body.suai-flipbook-active .container.main-content > .row > p,
body.suai-flipbook-active .container.main-content > .row > h1,
body.suai-flipbook-active .container.main-content > .row > h2,
body.suai-flipbook-active .container.main-content > .row > h3,
body.suai-flipbook-active .container.main-content > .row > h4,
body.suai-flipbook-active .container.main-content > .row > ul,
body.suai-flipbook-active .container.main-content > .row > ol {
  display: none;
}

/* Strip Salient theme chrome around the stage so the flipbook is the only visible
   element in the page area. The container's tan background and 60/80px padding
   were creating empty rectangles above and below the book. */
body.suai-flipbook-active .container.main-content {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.suai-flipbook-active #breadcrumbs,
body.suai-flipbook-active .breadcrumbs,
body.suai-flipbook-active p#breadcrumbs.yoast {
  display: none !important;
}
/* Salient sometimes draws a decorative top band on chapter pages — flatten it
   and blend its cream background into the stage's tan so there's no visible seam
   between the header and the start of the book. */
body.suai-flipbook-active .container-wrap,
body.suai-flipbook-active .ocm-effect-wrap,
body.suai-flipbook-active.suai-flipbook-active {
  padding-top: 0 !important;
  background: #c8baa2 !important;
}
/* Salient styles the .row containing the chapter content to look like book pages
   (cream background + spine gradient). On flipbook chapters that styling shows
   above and below our actual flipbook — strip just the background, leave the
   row's padding/margin alone so its grid alignment isn't broken. */
body.suai-flipbook-active .container.main-content > .row {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}