/* ==========================================================================
   NEMA X — Catalogue Viewer
   A dedicated, isolated PDF.js integration for the three Publications PDF
   editions (Turkish/English/Arabic) — scoped entirely to
   template-catalogue-viewer.php (inc/setup.php gates the enqueue by
   is_page_template()) and loaded on no other page. Reuses tokens.css only
   (not the full system.css component library, deliberately — this page
   never uses the site nav/footer/hero/etc.), so its own focus-visible and
   reveal-adjacent rules are declared locally below.
   ========================================================================== */

html, body{ height:100%; margin:0; }

.nemax-pdfv-body{ background:var(--paper); overscroll-behavior:none; }

.pdfv{
  display:flex; flex-direction:column;
  height:100vh; height:100svh; /* svh first would be overridden by vh in old browsers; declared in this order so the modern unit wins where supported */
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  overflow:hidden; /* the viewer owns the whole viewport — no page-level scroll, no horizontal overflow */
}

.pdfv :focus-visible{ outline:2px solid var(--stamp); outline-offset:3px; }

/* ---- Header — extremely minimal: brand / current edition / actions ---- */
.pdfv-bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--s-3) var(--s-5);
  padding:var(--s-4) var(--edge);
  border-bottom:1px solid var(--line);
}
.pdfv-brand{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--ink); text-decoration:none; unicode-bidi:plaintext;
}
.pdfv-brand-sep{ color:var(--ink-soft); opacity:.6; }
.pdfv-brand-sub{ color:var(--ink-soft); }
.pdfv-brand:hover .pdfv-brand-mark,
.pdfv-brand:focus-visible .pdfv-brand-mark{ color:var(--stamp); }

.pdfv-title{
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink-soft); unicode-bidi:plaintext;
}

.pdfv-actions{ display:flex; align-items:center; gap:var(--s-5); }
.pdfv-action{
  position:relative;
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.pdfv-action::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; width:0;
  background:var(--stamp); transition:width var(--i2) var(--ease-instrument);
}
.pdfv-action:hover::after, .pdfv-action:focus-visible::after{ width:100%; }
.pdfv-action:hover, .pdfv-action:focus-visible{ color:var(--stamp); }

/* ---- Stage — the PDF page itself is the whole visual focus ----
   overflow:auto (not hidden) + the canvas wrap's own margin:auto below is
   the standard cross-browser-safe way to get BOTH behaviours from one
   rule: centred with room to spare (the common case, Fit Page), and fully
   pannable/scrollable to every edge once zoomed past the viewport, with
   no dead/inaccessible area — flex's own align/justify-content:center
   does not reliably allow scrolling to a starting edge that centring has
   pushed off-screen, `margin:auto` centring does. */
.pdfv-stage{
  flex:1 1 auto; min-height:0; position:relative;
  display:flex;
  padding:var(--s-6) var(--edge);
  overflow:auto;
}
.pdfv-canvas-wrap{
  display:flex; flex:0 0 auto; margin:auto; max-width:100%; max-height:100%;
  box-shadow:0 0 0 1px var(--line); /* a hairline page edge, not a drop shadow */
}
/* Manual zoom only: the invisible prev/next click zones would otherwise
   scroll along with the now-pannable page and land somewhere unpredictable
   — the visible ‹ › buttons in the bottom bar keep working regardless. */
.pdfv-stage.is-zoomed .pdfv-zone{ pointer-events:none; }
.pdfv-canvas-wrap canvas{
  display:block; max-width:100%; max-height:100%; /* belt-and-suspenders: JS always computes a correct per-page Fit size, this just guarantees the canvas can never visually overflow the stage even so */
  /* Canvas 2D's own `direction` defaults to "inherit" from this element's
     CSS `direction` — under an RTL page (html[dir="rtl"], the Arabic
     site), that silently applies RTL bidi shaping to PDF.js's fillText()
     calls and visibly corrupts plain Latin/mixed-script page text (letters
     dropped/reordered) despite the PDF content itself never changing.
     Forcing ltr here is a rendering-correctness fix, not a design choice —
     it has nothing to do with which language edition (TR/EN/AR) is open.
  */
  direction:ltr;
}

.pdfv-zone{
  position:absolute; top:0; bottom:0; width:33%;
  background:transparent; border:none; padding:0; margin:0; cursor:pointer; z-index:1;
}
.pdfv-zone--prev{ left:0; }
.pdfv-zone--next{ right:0; }

.pdfv-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--ink-soft); pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .pdfv-loading-label{ animation:pdfv-pulse 1.6s ease-in-out infinite; }
}
@keyframes pdfv-pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

.pdfv-error{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-4); text-align:center; padding:var(--edge);
}
.pdfv-error-message{
  font-family:var(--f-body); font-size:15px; line-height:var(--lh-body); color:var(--ink-soft); max-width:44ch;
}
.pdfv-error-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-5); }
.pdfv-error-cta{
  position:relative;
  font-family:var(--f-mono); font-size:12px; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.pdfv-error-cta::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; width:0;
  background:var(--stamp); transition:width var(--i2) var(--ease-instrument);
}
.pdfv-error-cta:hover::after, .pdfv-error-cta:focus-visible::after{ width:100%; }
.pdfv-error-cta:hover, .pdfv-error-cta:focus-visible{ color:var(--stamp); }

/* ---- Bottom bar — page navigation (centred) + secondary zoom cluster.
   direction:ltr is deliberate and NOT a translation gap: page-turn
   direction must always follow the PDF's real, fixed page order (Page 1
   stays Page 1), never mirror just because the interface text direction is
   RTL — same principle rtl.css already applies to other spatial/functional
   systems (the Hero category rail, both globes, project galleries). Only
   the header above (plain informational text) mirrors normally. ---- */
.pdfv-bottom{
  flex:0 0 auto; direction:ltr;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--s-4); padding:var(--s-3) var(--edge);
  border-top:1px solid var(--line);
}
.pdfv-bottom-spacer{ justify-self:end; }

.pdfv-zoom{
  justify-self:start; display:flex; align-items:center; gap:var(--s-3);
  opacity:.6; transition:opacity var(--i2) var(--ease-instrument);
}
.pdfv-zoom:hover, .pdfv-zoom:focus-within{ opacity:1; }
.pdfv-zoom button{
  background:none; border:none; padding:10px; margin:-10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-tight); color:var(--ink-soft);
  cursor:pointer; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.pdfv-zoom button:hover, .pdfv-zoom button:focus-visible{ color:var(--stamp); }

/* The Fit-toggle button: fixed width regardless of "67%"/"100%"/"300%"/
   "FIT" so it never nudges the − / + buttons beside it. The desktop-only
   hover hint is an absolutely-positioned overlay swapped in over a
   visibility:hidden (not display:none) copy of the real value, so nothing
   ever reflows when it appears or disappears. */
#pdfvZoomReset{ position:relative; min-width:52px; }
@media (hover:hover) and (pointer:fine){
  #pdfvZoomReset:hover .pdfv-zoom-value{ visibility:hidden; }
  #pdfvZoomReset::after{
    content:"FIT"; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-tight); color:var(--stamp);
    opacity:0; pointer-events:none;
  }
  #pdfvZoomReset:hover::after{ opacity:1; }
}

.pdfv-nav{
  justify-self:center; display:flex; align-items:center; gap:var(--s-4);
}
.pdfv-navbtn{
  background:none; border:none; padding:10px 14px; margin:-10px 0;
  font-family:var(--f-body); font-size:20px; line-height:1; color:var(--ink);
  cursor:pointer; min-width:44px; min-height:44px;
}
.pdfv-navbtn:hover, .pdfv-navbtn:focus-visible{ color:var(--stamp); }
.pdfv-navbtn:disabled{ color:var(--line); cursor:default; }

.pdfv-pagecount{
  font-family:var(--f-mono); font-size:12px; letter-spacing:var(--ls-tight);
  color:var(--ink); unicode-bidi:plaintext;
}

/* ---- Mobile — significantly simpler, but the − % + zoom cluster stays
   (native pinch-to-zoom also remains available; the viewport meta tag
   does not disable it) — just demoted below the page nav, same quiet
   secondary treatment as on desktop, not visually enlarged. ---- */
@media (max-width:639px){
  .pdfv-bar{ padding:var(--s-3) var(--s-4); }
  .pdfv-brand-sub{ display:none; } /* "NEMA X" mark alone is enough context on a small screen */
  .pdfv-stage{ padding:var(--s-4) var(--s-3); }
  .pdfv-bottom{
    grid-template-columns:1fr; justify-items:center; gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
  }
  .pdfv-nav{ order:1; }
  .pdfv-zoom{ order:2; }
  .pdfv-bottom-spacer{ display:none; }
}

@media (max-width:359px){
  .pdfv-title{ display:none; } /* brand + actions + page nav stay; the edition name is also on the Publications card the visitor just came from */
}