/* GGI flipbook reader (html/js/flipbook-reader.js). Loaded only on magazine
   issue pages that have a flipbook ($page_css in inc/init.php).
   Every colour has a .dark override. */

.fb-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.fb-modal[hidden] { display: none; }

.fb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}
.dark .fb-backdrop { background: rgba(0, 0, 0, .75); }

.fb-shell {
  position: absolute;
  inset: 2vh 2vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: #eef0f3;
  color: #0f172a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.dark .fb-shell {
  background: #0b0b0c;
  color: #f1f5f9;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  outline: 1px solid rgba(148, 163, 184, .14);
}
.fb-shell:fullscreen { inset: 0; border-radius: 0; }
@media (max-width: 767px) {
  .fb-shell { inset: 0; border-radius: 0; }
}

/* ---------- top bar ---------- */
.fb-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem .5rem 1.1rem;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.dark .fb-bar {
  background: #141416;
  border-bottom-color: rgba(148, 163, 184, .16);
}
.fb-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: calc(.95rem * var(--ggi-text-scale, 1));
}
.fb-counter {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: calc(.85rem * var(--ggi-text-scale, 1));
  color: #475569;
}
.dark .fb-counter { color: #94a3b8; }
.fb-actions { display: flex; gap: .25rem; flex: 0 0 auto; }

.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .55rem;
  color: #334155;
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.fb-btn:hover { background: #f1f5f9; color: #0f172a; }
.fb-btn.is-active { background: #e0ecf8; color: var(--ggi-blue, #005EAF); }
.fb-btn:focus-visible { outline: 2px solid var(--ggi-blue, #005EAF); outline-offset: 1px; }
.dark .fb-btn { color: #cbd5e1; }
.dark .fb-btn:hover { background: rgba(148, 163, 184, .14); color: #fff; }
.dark .fb-btn.is-active { background: rgba(10, 111, 201, .25); color: #8cc4ff; }
.dark .fb-btn:focus-visible { outline-color: #8cc4ff; }

/* ---------- stage + book ---------- */
.fb-main { position: relative; flex: 1 1 auto; min-height: 0; }
.fb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.fb-stage.fb-zoomed {
  display: block;
  overflow: auto;
  cursor: grab;
  touch-action: auto;
}
.fb-stage.fb-zoomed .fb-book { margin: 28px auto; }
.fb-stage.fb-dragging { cursor: grabbing; }

.fb-book {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  perspective: 2600px;
  transition: transform .65s cubic-bezier(.45, .05, .25, 1);
}
.fb-stage.fb-zoomed .fb-book { transition: none; }
@media (prefers-reduced-motion: reduce) { .fb-book { transition: none; } }
.fb-slot { position: relative; flex: 0 0 auto; }

.fb-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  background-size: 100% 100%;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .18);
}
.dark .fb-page { background-color: #1c1c1f; box-shadow: 0 6px 28px rgba(0, 0, 0, .6); }
.fb-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-user-drag: none;
}
.fb-page--loaded img { opacity: 1; }
.fb-page--error::after {
  content: "This page couldn\2019t load";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: #64748b;
  background: #f8fafc;
}
.dark .fb-page--error::after { color: #94a3b8; background: #18181b; }
.fb-page--blank { background: transparent !important; box-shadow: none !important; }

/* spine shading on spreads */
.fb-book--spread .fb-slot--left .fb-page::after,
.fb-book--spread .fb-slot--right .fb-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6%;
  pointer-events: none;
}
.fb-book--spread .fb-slot--left .fb-page::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, .16), transparent);
}
.fb-book--spread .fb-slot--right .fb-page::after {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .16), transparent);
}
.fb-book--spread .fb-page--blank::after { display: none; }

/* page turn */
.fb-leaf {
  position: absolute;
  top: 0;
  z-index: 5;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.45, .05, .25, 1);
}
.fb-leaf--right { transform-origin: left center; }
.fb-leaf--left { transform-origin: right center; }
.fb-leaf--right.fb-leaf--turn { transform: rotateY(-180deg); }
.fb-leaf--left.fb-leaf--turn { transform: rotateY(180deg); }
.fb-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fb-face--back { transform: rotateY(180deg); }
.fb-face .fb-page img { opacity: 1; }

/* non-flip transitions */
@keyframes fb-in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fb-in-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fb-in-fade { from { opacity: 0; } to { opacity: 1; } }
.fb-in-next { animation: fb-in-next .28s ease-out; }
.fb-in-prev { animation: fb-in-prev .28s ease-out; }
.fb-in-fade { animation: fb-in-fade .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .fb-leaf { transition: none; }
  .fb-in-next, .fb-in-prev, .fb-in-fade { animation: none; }
}

/* ---------- clickable areas ---------- */
.fb-links { position: absolute; inset: 0; z-index: 2; }
.fb-link {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.fb-link:hover,
.fb-link:focus-visible,
.fb-hint .fb-link {
  background: rgba(0, 94, 175, .12);
  box-shadow: inset 0 0 0 2px rgba(0, 94, 175, .75);
  outline: none;
}
.dark .fb-link:hover,
.dark .fb-link:focus-visible,
.dark .fb-hint .fb-link {
  background: rgba(140, 196, 255, .14);
  box-shadow: inset 0 0 0 2px rgba(140, 196, 255, .85);
}

/* ---------- side arrows ---------- */
.fb-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
  transition: background-color .15s ease, transform .15s ease;
}
.fb-nav:hover { background: #ffffff; transform: scale(1.06); }
.fb-nav:focus-visible { outline: 2px solid var(--ggi-blue, #005EAF); outline-offset: 2px; }
.fb-nav[hidden] { display: none; }
.fb-nav-prev { left: .75rem; }
.fb-nav-next { right: .75rem; }
.dark .fb-nav { background: rgba(30, 30, 34, .92); color: #f1f5f9; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.dark .fb-nav:hover { background: #2a2a2f; }
.dark .fb-nav:focus-visible { outline-color: #8cc4ff; }
@media (max-width: 639px) {
  .fb-nav { width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; opacity: .85; }
  .fb-nav-prev { left: .35rem; }
  .fb-nav-next { right: .35rem; }
}

/* ---------- bottom slider ---------- */
.fb-foot {
  padding: .55rem 1.1rem .7rem;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}
.dark .fb-foot { background: #141416; border-top-color: rgba(148, 163, 184, .16); }
.fb-scrub {
  width: 100%;
  accent-color: var(--ggi-blue, #005EAF);
  cursor: pointer;
}
.dark .fb-scrub { accent-color: #8cc4ff; }

/* ---------- thumbnails ---------- */
.fb-thumbs {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow-y: auto;
  padding: 1.25rem;
  background: rgba(238, 240, 243, .97);
}
.dark .fb-thumbs { background: rgba(11, 11, 12, .97); }
.fb-thumbs[hidden] { display: none; }
.fb-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 1rem .75rem;
}
.fb-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .3rem;
  border-radius: .5rem;
  background: transparent;
  color: #475569;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.fb-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 0.72;
  object-fit: cover;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
}
.fb-thumb:hover { background: rgba(15, 23, 42, .06); color: #0f172a; }
.fb-thumb.is-current { background: #e0ecf8; color: var(--ggi-blue, #005EAF); font-weight: 700; }
.fb-thumb:focus-visible { outline: 2px solid var(--ggi-blue, #005EAF); }
.dark .fb-thumb { color: #94a3b8; }
.dark .fb-thumb img { background: #1c1c1f; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.dark .fb-thumb:hover { background: rgba(148, 163, 184, .1); color: #f1f5f9; }
.dark .fb-thumb.is-current { background: rgba(10, 111, 201, .25); color: #8cc4ff; }
.dark .fb-thumb:focus-visible { outline-color: #8cc4ff; }