/* ============================================================
   questsnpc.css — "Quests by NPC" zone pages.

   Opt-in via $page_styles (loads AFTER eqr.css, so it uses the
   palette vars and can override the shell where needed). Every
   rule is scoped under .qnpc-page to stay clear of the shell.

   This sheet IS the house style for the page type. There is
   deliberately no shared PHP template: these pages vary too much
   between zones, so each page owns its own markup/loop and simply
   uses the classes below. Adhere to this class vocabulary and any
   zone — 1 map or 5, 8 givers or 60 — comes out looking the same.

   STRUCTURE (the "by map" layout)
     .qnpc-page
       .qnpc-head            title + count summary
       .qnpc-note            optional per-zone prose (order rules etc.)
       .qnpc-chains          quest chain flows
         .qc-row > .qc-lab + .qc-node + .qc-arr / .qc-or
       .qnpc-key             legend for the tags below
       .qnpc-map             ONE section per map image
         .qm-head            "Map 1" + giver count   (no descriptive caption)
         .qm-body            grid: sticky map | giver cards
           .qm-fig           the map (eq-zoom lightbox target)
           .qm-givers        card grid
             .gv             one quest giver
               .gv-top       marker swatch + role label (above) + name
               .gv-quests    the giver's quests

   Marker swatches: the little coloured box/button images in
   expacimages/ are the SAME markers already drawn on the map jpg,
   so a card just shows its marker image — no pin coordinates to
   maintain. Cards with no marker fall back to a neutral dot.
   ============================================================ */

/* ---------- page head ---------- */
.qnpc-page .qnpc-head{margin:2px 0 16px}
.qnpc-page .qnpc-head .h{color:var(--gold2);font-size:22px;font-weight:bold;line-height:1.1;margin:0}
.qnpc-page .qnpc-head .sum{color:#9a978d;font-size:11.5px;margin-top:7px}
.qnpc-page .qnpc-head .sum b{color:#c8c4ba;font-weight:bold}

.qnpc-page .qnpc-note{color:#c8c4ba;font-size:12.5px;line-height:1.65;margin:0 0 16px;max-width:900px}
.qnpc-page .qnpc-note a{color:var(--gold)}
.qnpc-page .qnpc-note + .qnpc-note{margin-top:-8px}

/* ---------- quest chains ----------
   Standardized with the quests-by-name pages: mirrors questlist.css's
   .ql-chains / .ql-chain / .ql-any look — a box with a left gold accent bar, the
   label WHITE on its own line, gold pill nodes, grey arrows, and the any-order
   branch in a dashed pill group. Keep these values in sync with questlist.css.
   Label stays white, not gold: gold is reserved for links, and a gold heading
   sitting above a row of gold quest links would read as clickable. */
.qnpc-page .qnpc-chains{background:#121210;border:1px solid #2a2818;border-left:3px solid var(--gold);
  border-radius:0;padding:16px 18px;margin:0 0 26px}
.qnpc-page .qc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qnpc-page .qc-row + .qc-row{margin-top:14px;padding-top:14px;border-top:1px solid #2a2818}
.qnpc-page .qc-lab{color:var(--txt);font-size:10px;font-weight:bold;text-transform:uppercase;
  letter-spacing:.9px;flex-basis:100%;margin-bottom:2px}
.qnpc-page .qc-node{display:inline-block;color:var(--gold2);font-size:12.5px;font-weight:bold;
  background:#1a1710;border:1px solid #3a3422;border-radius:15px;padding:5px 13px;
  text-decoration:none;line-height:1.4}
.qnpc-page .qc-node:hover{background:#241f12;border-color:#6a5c34;color:#f0d98a;text-decoration:none}
.qnpc-page .qc-arr{color:#6b6b64;line-height:1;display:inline-flex;align-items:center;flex-shrink:0}
.qnpc-page .qc-arr i{font-size:15px}
.qnpc-page .qc-any{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;
  border:1px dashed #3a3422;border-radius:18px;padding:5px 10px}
.qnpc-page .qc-any-tag,.qnpc-page .qc-or{color:#9a978d;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.6px;display:inline-flex;align-items:center;gap:4px}

/* ---------- legend ---------- */
.qnpc-page .qnpc-key{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 22px}
.qnpc-page .qnpc-key .k{display:inline-flex;align-items:center;gap:7px;background:#131311;
  border:1px solid #2a2818;border-radius:20px;padding:5px 12px 5px 9px;font-size:11px;color:#c8c4ba}
.qnpc-page .qnpc-key .k i{color:var(--gold);font-size:12px}

/* quest annotations */
.qnpc-page .q-tag{display:inline-flex;align-items:center;gap:3px;border-radius:5px;padding:1px 6px;
  font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:.4px;line-height:1.6;white-space:nowrap}
.qnpc-page .q-tag i{font-size:10px}
.qnpc-page .q-quick{background:rgba(93,202,138,.13);color:#5dca8a;border:1px solid rgba(93,202,138,.38)}
.qnpc-page .q-first{background:rgba(224,107,107,.12);color:#e06b6b;border:1px solid rgba(224,107,107,.38)}

/* ---------- one section per map ---------- */
.qnpc-page .qnpc-map{margin:0 0 30px}
.qnpc-page .qm-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;
  padding-bottom:9px;border-bottom:1px solid #2a2516}
.qnpc-page .qm-head .mno{color:var(--gold2);font-size:16px;font-weight:bold}
.qnpc-page .qm-head .cc{color:#9a978d;font-size:11px}

.qnpc-page .qm-body{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;align-items:start}
/* The top nav is position:sticky;top:0 with height --navh, so the sticky map must come to
   rest BELOW it rather than sliding underneath. --navh is defined in eqr.css :root and is
   the same offset the rail and rightcol use, so this tracks the nav automatically. */
.qnpc-page .qm-figwrap{position:sticky;top:calc(var(--navh, 52px) + 14px)}
.qnpc-page .qm-fig{display:block;border:1px solid #2a2818;border-radius:12px;overflow:hidden;
  background:#0e0e10;position:relative;line-height:0}
.qnpc-page .qm-fig img{display:block;width:100%;height:auto}
.qnpc-page .qm-fig .zoom{position:absolute;top:8px;right:8px;background:rgba(10,10,12,.72);
  border:1px solid #2a2a2e;color:#cfcfca;border-radius:6px;font-size:10px;line-height:1.5;
  padding:3px 7px;display:inline-flex;align-items:center;gap:4px}
.qnpc-page .qm-fig:hover{border-color:#6a5c34}
.qnpc-page .qm-fig:hover .zoom{color:#f0d98a;border-color:#6a5c34}

/* ---------- giver cards ---------- */
.qnpc-page .qm-givers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;align-items:start}
.qnpc-page .gv{background:var(--panel);border:1px solid #262418;border-radius:12px;padding:14px 15px 12px}
.qnpc-page .gv-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.qnpc-page .gv-mark{flex:0 0 auto;min-width:20px;height:20px;margin-top:2px;display:flex;
  align-items:center;justify-content:center}
.qnpc-page .gv-mark img{max-width:20px;max-height:20px;display:block;border-radius:3px}
.qnpc-page .gv-mark .nomark{width:12px;height:12px;border-radius:50%;background:#3a3422;
  border:1px solid #564d2e;display:block}
/* numbered box swatch — matches the dynamic content map's numbered pins (the same
   look as eq-map's .eqmap-marker--numbered / the quest .qmark). Set a giver's field
   'num' => N (instead of a 'mark' image) so the card's number lines up with the
   numbered marker at that giver's location on the interactive map. Grows for 2 digits
   because .gv-mark is now min-width, not a fixed 20px. */
.qnpc-page .gv-num{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;background:#2c2c2c;border:2px solid #c8c4ba;
  border-radius:6px;color:#fff;font:bold 12px/1 Verdana,Arial,sans-serif;
  box-shadow:0 1px 2px rgba(0,0,0,.5)}
/* .gv-id / .gv-role / .gv-name are spans in the markup, so they MUST be forced to block —
   otherwise the role label flows inline with the name instead of sitting above it. */
.qnpc-page .gv-id{min-width:0;display:block}
.qnpc-page .gv-role{display:block;color:#9a978d;font-size:9px;font-weight:bold;letter-spacing:1.3px;
  text-transform:uppercase;line-height:1.4;margin-bottom:4px}
.qnpc-page .gv-name{display:block;color:#f3f3f1;font-size:14px;font-weight:bold;line-height:1.3;overflow-wrap:break-word}
.qnpc-page .gv-name .alt{color:#9a978d;font-weight:normal;font-size:12px}

.qnpc-page .gv-quests{list-style:none;margin:0;padding:0}
.qnpc-page .gv-quests li{display:flex;align-items:baseline;gap:8px;padding:6px 0;
  border-top:1px solid #201d13;font-size:12.5px;line-height:1.45}
.qnpc-page .gv-quests li:first-child{border-top:0}
.qnpc-page .gv-quests a{color:var(--gold);overflow-wrap:break-word;min-width:0}
.qnpc-page .gv-quests .q-tag{margin-left:auto;flex:0 0 auto}
/* a giver with a long list (the Alsa Thel droplet NPCs) goes two-up so the card stays compact */
.qnpc-page .gv-quests.two{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.qnpc-page .gv-quests.two li{border-top:0;padding:4px 0}
.qnpc-page .gv-wide{grid-column:1/-1}

/* ---------- interactive content map (optional) ----------
   When a dynamic map is authored for the page (generic content-map feature), it
   replaces the static thumbnail inside the sticky .qm-figwrap column. The container
   is themed by eq-map.css + quest-maps.css; this only spaces stacked views and lets
   the map fill the column. It expands to a full lightbox via the widget's control. */
.qnpc-page .qnpc-dynmap{display:flex;flex-direction:column;gap:12px}
.qnpc-page .qnpc-dynmap .eqmap-container{margin:0;width:100%;min-height:300px}

/* ---------- mid-content ad breathing room ---------- */
.qnpc-page .qnpc-ad{margin:0 0 26px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .qnpc-page .qm-body{grid-template-columns:1fr}
  .qnpc-page .qm-figwrap{position:static;max-width:360px}
  .qnpc-page .gv-quests.two{grid-template-columns:1fr}
}
@media(max-width:520px){
  .qnpc-page .qnpc-head .h{font-size:19px}
  .qnpc-page .qm-givers{grid-template-columns:1fr}
  .qnpc-page .gv-quests li{flex-wrap:wrap}
  .qnpc-page .gv-quests .q-tag{margin-left:0}
}