/* SOHO INSIDER flipbook — styles
   Upload to /wp-content/uploads/flipbook/flipbook.css

   Selectors are class-based so any number of flipbooks can live on a page.
   The root class is doubled on purpose (.sf-flipbook.sf-flipbook) to win
   against theme rules inside post content without resorting to !important. */

.sf-flipbook.sf-flipbook,
.sf-flipbook.sf-flipbook *,
.sf-flipbook.sf-flipbook *::before,
.sf-flipbook.sf-flipbook *::after { box-sizing: border-box; }

.sf-flipbook.sf-flipbook {
  /* Read back by flipbook.js and printed to the console alongside the plugin
     and script versions. If these three ever disagree, a file is stale. */
  --sf-css-version: "5.4.0";

  --sf-ink:      #14171a;
  --sf-ink-deep: #0b0d0f;
  --sf-ink-soft: #1e2328;
  --sf-paper:    #ffffff;
  --sf-line:     rgba(255,255,255,.16);
  --sf-text:     #e9e7e4;
  --sf-text-dim: rgba(233,231,228,.62);
  --sf-brand:    #cf281c;
  --sf-radius:   2px;
  --sf-tap:      44px;

  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1240px;
  /* In portrait (single page) the library animates a BACK flip through
     negative x — the incoming page starts a full page-width to the LEFT of
     the book and sweeps in. Clip anywhere on this chain and the back-flip
     animation is invisible while the forward one plays fine. */
  overflow: visible;
  font-family: "Spartan", "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--sf-text);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.sf-flipbook.sf-flipbook:focus-visible { box-shadow: 0 0 0 2px var(--sf-brand); }
.sf-flipbook.sf-flipbook [hidden] { display: none !important; }
.sf-flipbook.sf-flipbook p { margin: 0; }
.sf-flipbook.sf-flipbook img { border: 0; box-shadow: none; max-width: none; }

/* ---- Shell --------------------------------------------------------------- */
.sf-flipbook.sf-flipbook .sf-shell {
  position: relative;
  padding: clamp(10px, 2vw, 26px);
  background: radial-gradient(120% 90% at 50% 0%, var(--sf-ink-soft) 0%, var(--sf-ink) 70%);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  /* No clip here. clip-path creates a stacking context, and putting one on
     the shell trapped the contents drawer inside it — the control bar is a
     sibling with z-index:7 and painted straight over the top of it. The clip
     lives on .sf-stage instead, which wraps only the book. */
  overflow: visible;
}

/* NOTE: .sf-shell deliberately has no min-height rule. The loading-state
   height is set inline by JS and cleared the moment the book renders, so
   after load there is nothing here for the cascade to fight over. Height
   comes from syncHeight(), which measures a real page. */

/* ---- Loading state ------------------------------------------------------- */
.sf-flipbook.sf-flipbook .sf-loader {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  background: var(--sf-ink);
  transition: opacity .4s ease;
}
.sf-flipbook.sf-flipbook .sf-loader.is-gone { opacity: 0; pointer-events: none; }
.sf-flipbook.sf-flipbook .sf-loader-title {
  font-size: clamp(14px, 1.4vw, 18px); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.sf-flipbook.sf-flipbook .sf-loader-status {
  font-size: 12px; letter-spacing: .06em;
  color: var(--sf-text-dim); font-variant-numeric: tabular-nums;
}
.sf-flipbook.sf-flipbook .sf-meter {
  width: min(320px, 70%); height: 2px;
  background: var(--sf-line); overflow: hidden;
}
.sf-flipbook.sf-flipbook .sf-meter-fill {
  display: block; width: 0%; height: 100%;
  background: var(--sf-brand); transition: width .3s ease;
}

/* ---- Error state --------------------------------------------------------- */
.sf-flipbook.sf-flipbook .sf-error {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  padding: 28px; text-align: center; background: var(--sf-ink);
}
.sf-flipbook.sf-flipbook .sf-error-title { font-size: 15px; font-weight: 700; }
.sf-flipbook.sf-flipbook .sf-error-body {
  max-width: 46ch; font-size: 13px; line-height: 1.6;
  color: var(--sf-text-dim); word-break: break-word;
}

/* ---- Stage + book -------------------------------------------------------- */
/* Clipped horizontally, open vertically.
   Vertically the turning page's lifted corner must escape, or the forward flip
   shows black wedges in the corners. Horizontally it must not: in portrait the
   library starts a BACK flip a full page-width to the left of the book and
   travels in, which reads as the page sliding in from off-frame. Clipping the
   sides hides the approach so the page emerges at the book's edge.
   overflow can't express "one axis hidden, one visible" — set one to hidden and
   the other computes to auto, producing a scrollbar. clip-path can. */
.sf-flipbook.sf-flipbook .sf-stage {
  opacity: 0; margin: 0 auto; overflow: visible;
  clip-path: inset(-50% 0px);
  transition: opacity .45s ease;
}
.sf-flipbook.sf-flipbook .sf-stage.is-ready { opacity: 1; }
/* No touch-action here — the library sets pan-y on .stf__parent itself, and
   overriding it interferes with its swipe handling. In full screen the body
   scroll is already locked, so nothing can pan behind the book anyway. */
.sf-flipbook.sf-flipbook .sf-book { margin: 0 auto; overflow: visible; }

/* Do NOT set position or overflow here.
   StPageFlip writes the turning page's style with cssText and omits
   `position`, relying on its own .stf__item { position: absolute } — a rule
   at (0,1,0) that any scoped selector of ours outranks. Set position and the
   flipping page drops into normal flow and lands askew.
   Likewise `overflow` other than visible forces transform-style:preserve-3d
   to flat, which flattens the cover's 3D rotation.
   The resting pages get position:absolute inline from simpleDraw(); the
   turning page gets it from the class. Leave both alone. */
.sf-flipbook.sf-flipbook .sf-page {
  background: var(--sf-paper);
}
.sf-flipbook.sf-flipbook .sf-page img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--sf-paper);
  opacity: 0; transition: opacity .35s ease;
  -webkit-user-drag: none; user-select: none;
}
.sf-flipbook.sf-flipbook .sf-page.is-inked img { opacity: 1; }
.sf-flipbook.sf-flipbook .sf-page[data-density="hard"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* Paper before ink: what a page shows while it is still rendering. */
.sf-flipbook.sf-flipbook .sf-page-wait {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .3em;
  color: #c9c6c2; background: var(--sf-paper);
  transition: opacity .3s ease;
}
.sf-flipbook.sf-flipbook .sf-page-wait::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(207,40,28,.55), transparent);
  animation: sfSweep 1.4s linear infinite;
}
.sf-flipbook.sf-flipbook .sf-page.is-inked .sf-page-wait { opacity: 0; }
@keyframes sfSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---- Control bar --------------------------------------------------------- */
.sf-flipbook.sf-flipbook .sf-bar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: 8px; padding: 8px 10px;
  background: var(--sf-ink);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
}
.sf-flipbook.sf-flipbook .sf-bar-gap { flex: 1 1 auto; }

/* Background-render progress: a hairline across the top of the bar. */
.sf-flipbook.sf-flipbook .sf-build {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; overflow: hidden;
  transition: opacity .6s ease;
}
.sf-flipbook.sf-flipbook .sf-build.is-done { opacity: 0; }
.sf-flipbook.sf-flipbook .sf-build-fill {
  display: block; width: 0%; height: 100%;
  background: rgba(207,40,28,.75); transition: width .4s ease;
}

.sf-flipbook.sf-flipbook .sf-counter {
  min-width: 76px; padding: 0 6px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-align: center; font-variant-numeric: tabular-nums;
  color: var(--sf-text-dim);
  background: transparent; border: 0; cursor: pointer;
  transition: color .18s ease;
}
.sf-flipbook.sf-flipbook .sf-counter:hover { color: var(--sf-text); }
.sf-flipbook.sf-flipbook .sf-counter--static { cursor: default; }
.sf-flipbook.sf-flipbook .sf-counter:focus-visible { outline: 2px solid var(--sf-brand); outline-offset: 2px; }

.sf-flipbook.sf-flipbook .sf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--sf-tap); min-width: var(--sf-tap);
  padding: 0 14px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--sf-text); background: transparent;
  border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.sf-flipbook.sf-flipbook .sf-btn:hover { border-color: var(--sf-brand); color: #fff; }
.sf-flipbook.sf-flipbook .sf-btn:active { background: rgba(255,255,255,.06); }
.sf-flipbook.sf-flipbook .sf-btn:focus-visible { outline: 2px solid var(--sf-brand); outline-offset: 2px; }
.sf-flipbook.sf-flipbook .sf-btn[disabled] { opacity: .3; cursor: default; border-color: var(--sf-line); }
.sf-flipbook.sf-flipbook .sf-btn--solid { background: var(--sf-brand); border-color: var(--sf-brand); color: #fff; }
.sf-flipbook.sf-flipbook .sf-btn--solid:hover { color: #fff; }
.sf-flipbook.sf-flipbook .sf-btn--icon { padding: 0; font-size: 22px; line-height: 1; letter-spacing: 0; }
.sf-flipbook.sf-flipbook .sf-lbl-tight { display: none; }

/* ---- Contents drawer ----------------------------------------------------- */
.sf-flipbook.sf-flipbook .sf-thumbs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  max-height: 72%;
  display: flex; flex-direction: column;
  background: rgba(11,13,15,.96);
  border-top: 1px solid var(--sf-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: sfRise .28s ease;
}
@keyframes sfRise { from { transform: translateY(12%); opacity: 0; } to { transform: none; opacity: 1; } }

.sf-flipbook.sf-flipbook .sf-thumbs-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--sf-line);
}
.sf-flipbook.sf-flipbook .sf-thumbs-title {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sf-text-dim);
}
.sf-flipbook.sf-flipbook .sf-thumbs-grid {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px; padding: 12px;
}
.sf-flipbook.sf-flipbook .sf-thumb {
  position: relative; display: block; padding: 0;
  background: #2a2f34; border: 1px solid transparent; border-radius: var(--sf-radius);
  cursor: pointer; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.sf-flipbook.sf-flipbook .sf-thumb:hover { border-color: var(--sf-brand); transform: translateY(-2px); }
.sf-flipbook.sf-flipbook .sf-thumb.is-current { border-color: var(--sf-brand); }
.sf-flipbook.sf-flipbook .sf-thumb:focus-visible { outline: 2px solid var(--sf-brand); outline-offset: 2px; }
.sf-flipbook.sf-flipbook .sf-thumb img {
  display: block; width: 100%; height: auto;
  opacity: 0; transition: opacity .3s ease; background: var(--sf-paper);
}
.sf-flipbook.sf-flipbook .sf-thumb.is-inked img { opacity: 1; }
.sf-flipbook.sf-flipbook .sf-thumb-num {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 0; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-align: center; color: var(--sf-text);
  background: rgba(11,13,15,.72);
}
.sf-flipbook.sf-flipbook .sf-thumb-pad { display: block; width: 100%; padding-top: 129%; }
.sf-flipbook.sf-flipbook .sf-thumb.is-inked .sf-thumb-pad { display: none; }

/* ---- Exit button (full screen only) -------------------------------------- */
.sf-flipbook.sf-flipbook .sf-close {
  display: none; position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 7;
  align-items: center; justify-content: center;
  width: var(--sf-tap); height: var(--sf-tap);
  font-size: 16px; color: var(--sf-text);
  background: rgba(11,13,15,.7);
  border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  cursor: pointer; transition: opacity .25s ease, border-color .18s ease;
}
.sf-flipbook.sf-flipbook .sf-close:hover { border-color: var(--sf-brand); }

/* ---- Full screen --------------------------------------------------------- */
.sf-flipbook.sf-flipbook.sf-immersive {
  position: fixed; inset: 0; z-index: 2147483000;
  max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  background: var(--sf-ink-deep);
}
.sf-flipbook.sf-flipbook.sf-immersive .sf-shell {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0; background: var(--sf-ink-deep);
  padding:
    calc(10px + env(safe-area-inset-top))
    calc(10px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    calc(10px + env(safe-area-inset-left));
}
.sf-flipbook.sf-flipbook.sf-immersive .sf-stage { width: 100%; }
.sf-flipbook.sf-flipbook.sf-immersive .sf-close { display: inline-flex; }
.sf-flipbook.sf-flipbook.sf-immersive .sf-bar {
  position: absolute; left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 7; width: auto; max-width: calc(100% - 20px); margin: 0;
  background: rgba(11,13,15,.88);
  border: 1px solid var(--sf-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .3s ease;
}
.sf-flipbook.sf-flipbook.sf-immersive .sf-bar-gap { display: none; }

/* Contents sits above the controls in full screen, not behind them. */
.sf-flipbook.sf-flipbook.sf-immersive .sf-thumbs {
  left: 10px; right: 10px;
  bottom: calc(var(--sf-bar-h, 56px) + 24px + env(safe-area-inset-bottom));
  max-height: 62%;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
}
.sf-flipbook.sf-flipbook.sf-immersive.sf-chrome-off .sf-bar,
.sf-flipbook.sf-flipbook.sf-immersive.sf-chrome-off .sf-close { opacity: 0; pointer-events: none; }
.sf-flipbook.sf-flipbook:fullscreen { max-width: none; }

/* ---- Zoom overlay -------------------------------------------------------
   Scoped to its own id, not to .sf-flipbook.sf-flipbook, because the layer is moved to
   <body> when opened — an Elementor section with a transform on it creates a
   containing block that would otherwise break position: fixed.
   -------------------------------------------------------------------------- */
.sf-zoom-layer.sf-zoom-layer, .sf-zoom-layer.sf-zoom-layer * , .sf-zoom-layer.sf-zoom-layer *::before, .sf-zoom-layer.sf-zoom-layer *::after { box-sizing: border-box; }
.sf-zoom-layer.sf-zoom-layer {
  --sf-ink-deep: #0b0d0f;
  --sf-line: rgba(255,255,255,.16);
  --sf-text: #e9e7e4;
  --sf-text-dim: rgba(233,231,228,.62);
  --sf-brand: #cf281c;
  --sf-radius: 2px;

  position: fixed; inset: 0; z-index: 2147483100;
  display: flex; flex-direction: column;
  background: #000; color: var(--sf-text);
  font-family: "Spartan", "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.sf-zoom-layer.sf-zoom-layer[hidden] { display: none !important; }
.sf-zoom-layer.sf-zoom-layer p { margin: 0; }
.sf-zoom-layer.sf-zoom-layer img { border: 0; box-shadow: none; max-width: none; }

.sf-zoom-layer.sf-zoom-layer .sf-zoom-scroll {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  /* No align-items / justify-content here on purpose: centring a flex item
     with justify-content makes the overflow on the leading edge unreachable.
     margin:auto on the image centres it AND keeps both edges scrollable. */
  display: flex;
}
.sf-zoom-layer.sf-zoom-layer .sf-zoom-img {
  /* flex-shrink must be 0. Without it the flex container shrinks a 220%-wide
     image straight back down to 100% and there is nothing left to scroll. */
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
  background: #fff;
  cursor: zoom-in;
  -webkit-user-drag: none; user-select: none;
}
.sf-zoom-layer.sf-zoom-layer .sf-zoom-img.is-zoomed { cursor: zoom-out; }
.sf-zoom-layer.sf-zoom-layer .sf-zoom-wait {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sf-text-dim);
}
.sf-zoom-layer.sf-zoom-layer .sf-zoom-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--sf-ink-deep); border-top: 1px solid var(--sf-line);
}
.sf-zoom-layer.sf-zoom-layer .sf-zoom-hint {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  padding: 7px 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sf-text-dim); background: rgba(11,13,15,.85);
  border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  transition: opacity .4s ease; pointer-events: none;
}
.sf-zoom-layer.sf-zoom-layer .sf-zoom-hint.is-gone { opacity: 0; }

.sf-zoom-layer.sf-zoom-layer .sf-zbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--sf-text); background: transparent;
  border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.sf-zoom-layer.sf-zoom-layer .sf-zbtn:hover { border-color: var(--sf-brand); color: #fff; }
.sf-zoom-layer.sf-zoom-layer .sf-zbtn:focus-visible { outline: 2px solid var(--sf-brand); outline-offset: 2px; }
.sf-zoom-layer.sf-zoom-layer .sf-zbtn[disabled] { opacity: .3; cursor: default; border-color: var(--sf-line); }
.sf-zoom-layer.sf-zoom-layer .sf-zbtn--solid { background: var(--sf-brand); border-color: var(--sf-brand); color: #fff; }
.sf-zoom-layer.sf-zoom-layer .sf-zbtn--icon { padding: 0; font-size: 22px; line-height: 1; letter-spacing: 0; }
.sf-zoom-layer.sf-zoom-layer .sf-zcounter {
  min-width: 72px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-align: center; font-variant-numeric: tabular-nums; color: var(--sf-text-dim);
}

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 640px) {
  .sf-flipbook.sf-flipbook .sf-shell { padding: 6px; }
  .sf-flipbook.sf-flipbook .sf-lbl-wide { display: none; }
  .sf-flipbook.sf-flipbook .sf-lbl-tight { display: inline; }
  .sf-flipbook.sf-flipbook .sf-btn { padding: 0 11px; font-size: 12px; }
  .sf-flipbook.sf-flipbook .sf-counter { min-width: 58px; font-size: 11px; letter-spacing: .05em; }
  .sf-flipbook.sf-flipbook .sf-bar { gap: 4px; padding: 6px; }
  .sf-flipbook.sf-flipbook .sf-bar-gap { flex: 0 1 auto; }
  .sf-flipbook.sf-flipbook .sf-thumbs-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; padding: 10px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .sf-flipbook.sf-flipbook .sf-shell { padding: 5px; }
  .sf-flipbook.sf-flipbook .sf-thumbs { max-height: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-flipbook.sf-flipbook .sf-meter-fill, .sf-flipbook.sf-flipbook .sf-stage, .sf-flipbook.sf-flipbook .sf-bar,
  .sf-flipbook.sf-flipbook .sf-close, .sf-flipbook.sf-flipbook .sf-loader, .sf-flipbook.sf-flipbook .sf-page img,
  .sf-flipbook.sf-flipbook .sf-thumbs { transition: none; animation: none; }
  .sf-flipbook.sf-flipbook .sf-page-wait::after { animation: none; }
  .sf-zoom-layer.sf-zoom-layer .sf-zoom-hint { transition: none; }
}