/**
 * flipbook.css  —  v3
 * Florentis Learning — Flipbook Lesson Styles
 *
 * Key structural changes from v2:
 * - .fl-fb-leaf is a SIBLING of .fl-fb-book (inside .fl-fb-stage), not a child.
 *   This means it is NOT clipped by overflow:hidden on the book.
 *   JS positions it via getBoundingClientRect to exactly overlay the book.
 * - Cover mode: left page fills 100% of book width. Right page is display:none.
 * - Prompt panel slides in over the right page (overflow:hidden clips it to the page).
 * - All selectors scoped to fl-fb-* / fl-flipbook-* — zero collision with other engines.
 */

/* ── Hide WordPress page title on flipbook pages ────────────────────────────
   The fl-flipbook-page body class is added by FlipbookShortcode::body_class()
   whenever a ?book= parameter is present. The book already shows its own title
   in the toolbar, so the WP page heading is redundant.
   Targets the most common theme heading selectors — covers Astra, GeneratePress,
   Kadence, OceanWP, and most other themes. ──────────────────────────────────── */

.fl-flipbook-page .entry-title,
.fl-flipbook-page .page-title,
.fl-flipbook-page h1.page-header,
.fl-flipbook-page .page-header,
.fl-flipbook-page .wp-block-post-title {
  display: none !important;
}

/* ── Container ───────────────────────────────────────────────────────────────── */

.fl-flipbook-container {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 8px 24px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Loading (shown before JS init) ─────────────────────────────────────────── */

.fl-flipbook-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 0;
  color: #999;
  font-size: 0.9rem;
  gap: 12px;
}

.fl-flipbook-loading-spinner {
  width: 34px; height: 34px;
  border: 3px solid #e0ddd6;
  border-top-color: #5a7e2f;
  border-radius: 50%;
  animation: fl-fb-spin 0.75s linear infinite;
}

.fl-flipbook-container[data-fl-initialized="1"] .fl-flipbook-loading { display: none; }

/* ── Toolbar ─────────────────────────────────────────────────────────────────── */

.fl-fb-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Brand group: logo + lesson title */
.fl-fb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
}

.fl-fb-logo {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.fl-fb-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a5e28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  /* Subtle separator between logo and title */
  padding-left: 8px;
  border-left: 1px solid #d0d8b8;
}

.fl-fb-progress {
  flex: 1;
  height: 5px;
  background: #e4e8dc;
  border-radius: 3px;
  overflow: hidden;
}

.fl-fb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7aa33b, #4e6e28);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

/* Fullscreen button */
.fl-fb-fs-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #444;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.fl-fb-fs-btn:hover { background: #f5f8ee; border-color: #7aa33b; }
.fl-fb-fs-btn:focus-visible { outline: 2px solid #7aa33b; outline-offset: 2px; }

/* SVG icon swap: show enter normally, exit only in fullscreen */
.fl-fb-fs-btn .icon-exit  { display: none; }
.fl-fb--fs .fl-fb-fs-btn .icon-enter { display: none; }
.fl-fb--fs .fl-fb-fs-btn .icon-exit  { display: block; }

/* ── Fullscreen overlay ───────────────────────────────────────────────────────── */

.fl-fb--fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  padding: 12px 24px 16px !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  background: #ede8e0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.fl-fb--fs .fl-fb-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;   /* room for nav arrows */
}

/* In fullscreen, JS sets explicit px width/height on .fl-fb-book via _scaleBook().
   Pages must fill those dimensions — height:100% needs to cascade correctly. */
.fl-fb--fs .fl-fb-page {
  height: 100% !important;
}

.fl-fb-no-scroll { overflow: hidden !important; }

/* ── Stage ────────────────────────────────────────────────────────────────────── */

.fl-fb-stage {
  position: relative;   /* ← leaf is positioned relative to this */
  perspective: 2600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Book ─────────────────────────────────────────────────────────────────────── */

.fl-fb-book {
  position: relative;
  display: flex;
  overflow: hidden;     /* clips page content cleanly */
  box-shadow: 0 4px 6px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.16);
  border-radius: 2px 5px 5px 2px;
  background: #fff;
  transform-style: preserve-3d;
}

/* Centre spine shadow — hidden in cover mode (no split page) */
.fl-fb-book::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,.02), rgba(0,0,0,.10));
  pointer-events: none;
  z-index: 4;
}

.fl-fb-book--cover::after {
  display: none;
}

/* ── Pages ────────────────────────────────────────────────────────────────────── */

.fl-fb-page {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #fafaf7;
}

.fl-fb-page--left  { border-right: 1px solid #e0ddd6; }
.fl-fb-page--right { background: #fff; }

/* ── Cover mode ───────────────────────────────────────────────────────────────── */
/* In cover mode the JS sets the book to half its spread width (one portrait page).
   The left page fills it naturally. The right page is hidden. */

.fl-fb-book--cover .fl-fb-page--left {
  width: 100%;
  border-right: none;
}

.fl-fb-book--cover .fl-fb-page--right {
  display: none;
}

/* Shadow on the right edge — makes it look like a stack of pages */
.fl-fb-book--cover::before {
  content: '';
  position: absolute;
  top: 2px; right: -4px; bottom: 2px;
  width: 6px;
  background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,.0));
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  z-index: 10;
}

/* Cover opening animation — left page swings left */
.fl-fb-book--opening .fl-fb-page--left {
  transform-origin: right center;
  animation: fl-fb-cover-swing 0.55s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes fl-fb-cover-swing {
  0%   { transform: rotateY(0deg);    }
  45%  { transform: rotateY(-88deg);  }
  100% { transform: rotateY(-180deg); opacity: 0; }
}

/* Cover image + title */
.fl-fb-cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-color: #d8d0c4;  /* fallback while image loads */
}

.fl-fb-cover-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(72, 100, 35, 0.86);
  backdrop-filter: blur(3px);
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}

.fl-fb-cover-title {
  display: block;
  font-size: clamp(1rem, 4cqi, 1.65rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.fl-fb-cover-sub {
  display: block;
  font-size: clamp(0.62rem, 2cqi, 0.8rem);
  color: rgba(255,255,255,.82);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Story spread ─────────────────────────────────────────────────────────────── */

.fl-fb-story-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-color: #ede9e2;   /* warm fallback while image loads */
}

.fl-fb-story-img--empty { background-color: #eeebe2; }

.fl-fb-story-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 26px 52px;
  box-sizing: border-box;
}

.fl-fb-story-text {
  white-space: pre-line;
  font-size: clamp(0.9rem, 3cqi, 1.28rem);
  line-height: 1.7;
  color: #1f2937;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0;
}

.fl-fb-page-num {
  position: absolute;
  bottom: 13px; right: 16px;
  font-size: 0.7rem;
  color: #c4c0b7;
  font-family: Georgia, serif;
}

/* ── Prompt button + panel ────────────────────────────────────────────────────── */
/*
 * Both the button and the panel live on .fl-fb-page--left (the image page).
 * The panel slides UP from the bottom, covering only the lower portion of the image.
 * The text (right) page is never touched.
 * Panel height is ~40% of the page — shows question without hiding the whole illustration.
 */

.fl-fb-prompt-btn {
  position: absolute;
  bottom: 14px; left: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(90,126,47,.5);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 15;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform 0.15s, background 0.15s;
}
.fl-fb-prompt-btn:hover  { transform: scale(1.1); background: #eaf5d4; }
.fl-fb-prompt-btn--on    { background: #5a7e2f; border-color: #3d5920; }
.fl-fb-prompt-btn--on:hover { transform: scale(1.05); }

/* Panel: compact card, slides up from the bottom of the LEFT (image) page.
   Covers roughly the bottom 42% — the illustration top half stays visible. */
.fl-fb-prompt-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42%;
  background: rgba(237, 248, 218, 0.97);
  border-top: 3px solid #7aa33b;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 12px;
  box-sizing: border-box;
  z-index: 20;
  /* Slides up from below */
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
}

.fl-fb-prompt-panel--open {
  transform: translateY(0);
}

.fl-fb-prompt-x {
  align-self: flex-end;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(90,126,47,.15);
  border: none;
  color: #3a5e10;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 6px;
  flex-shrink: 0;
  transition: background 0.13s;
}
.fl-fb-prompt-x:hover { background: rgba(90,126,47,.28); }

.fl-fb-prompt-text {
  font-size: clamp(0.78rem, 2.4cqi, 1rem);
  line-height: 1.55;
  color: #1e3808;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0;
  flex: 1;
  display: block;
  white-space: pre-line;
  overflow-y: auto;
}

/* ── Audio button ─────────────────────────────────────────────────────────────── */

.fl-fb-audio-btn {
  position: absolute;
  top: 11px; right: 11px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: 1.5px solid rgba(90,126,47,.38);
  color: #5a7e2f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0,0,0,.09);
  transition: background 0.14s, transform 0.14s;
}
.fl-fb-audio-btn:hover { background: #e8f0d5; transform: scale(1.08); }
.fl-fb-audio-btn--on   { background: #7aa33b; color: #fff; border-color: #5a7e2f; }
.fl-fb-audio-btn--on svg { animation: fl-fb-pulse 1s ease-in-out infinite; }

/* ── Navigation arrows ────────────────────────────────────────────────────────── */

.fl-fb-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #d2cec6;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 30;
  box-shadow: 0 2px 8px rgba(0,0,0,.11);
  transition: background 0.14s, box-shadow 0.14s, transform 0.14s;
}
.fl-fb-nav:hover:not(:disabled) {
  background: #f0f5e6;
  box-shadow: 0 3px 14px rgba(0,0,0,.17);
  transform: translateY(-50%) scale(1.07);
}
.fl-fb-nav:focus-visible { outline: 3px solid #7aa33b; outline-offset: 2px; }
.fl-fb-nav:disabled { opacity: 0; pointer-events: none; }
.fl-fb-nav--prev { left: -22px; }
.fl-fb-nav--next { right: -22px; }

/* ── Page label ───────────────────────────────────────────────────────────────── */

.fl-fb-page-label {
  text-align: center;
  font-size: 0.74rem;
  color: #aaa;
  margin-top: 10px;
  letter-spacing: 0.03em;
}

/* ── Flip leaf ────────────────────────────────────────────────────────────────── */
/*
 * The leaf is OUTSIDE the book, a sibling inside .fl-fb-stage.
 * ALL geometry (top, left, width, height, transform-origin) is set by JS
 * via _positionLeaf(dir) — no CSS positioning classes needed.
 * Only the animation keyframes live here.
 */

.fl-fb-leaf {
  position: absolute;  /* relative to .fl-fb-stage */
  display: none;       /* hidden until animation */
  pointer-events: none;
  transform-style: preserve-3d;
  z-index: 50;
}

.fl-fb-leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fafaf7;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fl-fb-leaf-b {
  transform: rotateY(180deg);
  background: #fff;
}

/* Forward turn: leaf starts at -20deg (set inline by JS peek), animates to -180deg */
.fl-fb-leaf--fwd {
  animation: fl-fb-turn-fwd 0.46s cubic-bezier(.4,0,.2,1) forwards;
}

/* Backward turn: leaf starts at +20deg (set inline by JS peek), animates to 0 via 180deg */
.fl-fb-leaf--bwd {
  animation: fl-fb-turn-bwd 0.46s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes fl-fb-turn-fwd {
  0%   { transform: rotateY(-20deg);  }
  100% { transform: rotateY(-180deg); }
}
@keyframes fl-fb-turn-bwd {
  0%   { transform: rotateY(20deg);  }
  100% { transform: rotateY(180deg); }
}

/* Shadow overlay during turn */
.fl-fb-leaf--fwd .fl-fb-leaf-a::after,
.fl-fb-leaf--bwd .fl-fb-leaf-b::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,.18) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Quiz ─────────────────────────────────────────────────────────────────────── */

.fl-fb-book--quiz .fl-fb-page--left,
.fl-fb-book--quiz .fl-fb-page--right { overflow-y: auto; }

.fl-fb-qpanel {
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 100%; box-sizing: border-box;
}

.fl-fb-qtitle {
  font-size: clamp(0.82rem, 3cqi, 1.05rem);
  font-weight: 700; color: #2d5a0e; margin: 0;
}

.fl-fb-qblock { display: flex; flex-direction: column; gap: 4px; }

.fl-fb-qtext {
  font-size: clamp(0.7rem, 2.1cqi, 0.86rem);
  color: #1f2937; margin: 0; font-weight: 600; line-height: 1.4;
}

.fl-fb-qchoices { display: flex; flex-direction: column; gap: 3px; }

.fl-fb-qchoice {
  background: #f2f5eb; border: 1.5px solid #d2d8c0; border-radius: 6px;
  padding: 5px 9px; font-size: clamp(0.66rem, 1.9cqi, 0.78rem);
  color: #333; text-align: left; cursor: pointer;
  transition: background 0.13s, border-color 0.13s; line-height: 1.3;
}
.fl-fb-qchoice:hover:not(:disabled) { background: #e5f0d0; border-color: #7aa33b; }
.fl-fb-qchoice--ok  { background: #d0f2c4 !important; border-color: #4caf50 !important; color: #155215 !important; }
.fl-fb-qchoice--bad { background: #fde4e4 !important; border-color: #e53935 !important; color: #a01414 !important; }

.fl-fb-qfb { font-size: clamp(0.6rem, 1.6cqi, 0.7rem); font-weight: 600; }
.fl-fb-qfb--ok  { color: #2a7c2a; }
.fl-fb-qfb--bad { color: #c22; }

.fl-fb-score { margin-top: auto; padding-top: 10px; }
.fl-fb-score-box {
  background: linear-gradient(135deg, #e4f5d0, #ecf8db);
  border: 1.5px solid #7aa33b; border-radius: 10px;
  padding: 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.fl-fb-score-n { font-size: clamp(1rem, 4cqi, 1.45rem); font-weight: 700; color: #376012; }
.fl-fb-score-m { font-size: clamp(0.65rem, 1.9cqi, 0.8rem); color: #4e6e28; font-weight: 600; }

/* ── Animations ───────────────────────────────────────────────────────────────── */

@keyframes fl-fb-spin  { to { transform: rotate(360deg); } }
@keyframes fl-fb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ── Reduced motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fl-fb-leaf--fwd,
  .fl-fb-leaf--bwd,
  .fl-fb-book--opening .fl-fb-page--left { animation: none !important; transform: none !important; }
  .fl-fb-progress-fill, .fl-fb-prompt-panel { transition: none; }
}

/* ── Mobile ( < 520px ) — single column layout ────────────────────────────────── */

@media (max-width: 520px) {
  .fl-fb-book {
    flex-direction: column;
    height: auto !important;
  }
  .fl-fb-page { width: 100%; height: auto !important; }
  .fl-fb-page--left { height: 62vw !important; border-right: none; border-bottom: 1px solid #e0ddd6; }
  .fl-fb-page--right { min-height: 130px; }
  .fl-fb-story-wrap { position: relative; padding: 16px 14px 40px; }
  .fl-fb-book--cover .fl-fb-page--left { width: 100% !important; height: 74vw !important; }
  .fl-fb-book--cover .fl-fb-page--right { display: none !important; }
  .fl-fb-book--quiz { flex-direction: column; }
  .fl-fb-book--quiz .fl-fb-page--left,
  .fl-fb-book--quiz .fl-fb-page--right { width: 100%; height: auto !important; min-height: 0; }
  /* Disable flip on mobile — too disorienting in vertical layout */
  .fl-fb-leaf { display: none !important; }
  .fl-fb-nav--prev { left: -10px; }
  .fl-fb-nav--next { right: -10px; }
}