/* ============================================================
   Interactive name-list enhancement for Desire Marketing articles.
   Purely additive: uses the theme's own CSS custom properties so it
   inherits brand colours, fonts and radii. Nothing here restyles the
   header, sidebar, table of contents, footer or CTA banner.
   ============================================================ */

/* ---------------------------------------------- toolbar ---------------- */
.nx-tool{
  border:1px solid var(--dm-border,#3a3a3a);
  background:var(--dm-surface-2,#262626);
  border-radius:var(--dm-radius-lg,16px);
  padding:20px;
  margin:28px 0;
}
.nx-tool .nx-lead{
  font-family:var(--dm-font-heading,Poppins,system-ui,sans-serif);
  font-weight:600;font-size:16px;margin:0 0 4px;
}
.nx-tool .nx-sub{
  color:var(--dm-text-muted,#c3c3c3);font-size:14px;margin:0 0 16px;line-height:1.6;
}
.nx-row{display:flex;gap:10px;flex-wrap:wrap}
.nx-search{flex:1 1 240px;position:relative}
.nx-search input{
  width:100%;padding:12px 38px 12px 14px;
  border:1px solid var(--dm-border,#3a3a3a);border-radius:10px;
  background:var(--dm-bg,#1d1d1d);color:inherit;
  font:15px var(--dm-font-body,Inter,system-ui,sans-serif);outline:none;
}
.nx-search input::placeholder{color:#8a8a8a}
.nx-search input:focus{
  border-color:var(--dm-accent,#fe7c5d);
  box-shadow:0 0 0 3px rgba(254,124,93,.16);
}
.nx-search .nx-clr{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:var(--dm-text-muted,#c3c3c3);
  cursor:pointer;font-size:19px;line-height:1;padding:4px;
}
.nx-btn{
  border:1px solid var(--dm-border,#3a3a3a);
  background:var(--dm-bg,#1d1d1d);color:inherit;
  padding:11px 15px;border-radius:10px;cursor:pointer;
  font:500 14px var(--dm-font-body,Inter,system-ui,sans-serif);
  transition:.15s;white-space:nowrap;
}
.nx-btn:hover{border-color:var(--dm-accent,#fe7c5d);color:var(--dm-accent,#fe7c5d)}
.nx-btn.nx-primary{
  background:var(--dm-accent,#fe7c5d);border-color:var(--dm-accent,#fe7c5d);color:#1d1d1d;
}
.nx-btn.nx-primary:hover{opacity:.9;color:#1d1d1d}
.nx-btn.nx-on{
  background:rgba(254,124,93,.14);
  border-color:var(--dm-accent,#fe7c5d);color:var(--dm-accent,#fe7c5d);
}
.nx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.nx-chip{
  border:1px solid var(--dm-border,#3a3a3a);background:var(--dm-bg,#1d1d1d);
  color:var(--dm-text-muted,#c3c3c3);padding:6px 13px;border-radius:999px;
  font:14px var(--dm-font-body,Inter,system-ui,sans-serif);cursor:pointer;transition:.15s;
}
.nx-chip:hover{color:inherit}
.nx-chip.nx-on{
  background:var(--dm-accent,#fe7c5d);border-color:var(--dm-accent,#fe7c5d);
  color:#1d1d1d;font-weight:600;
}
.nx-meta{color:var(--dm-text-muted,#c3c3c3);font-size:13.5px;margin-top:13px}
.nx-meta strong{color:var(--dm-accent,#fe7c5d)}

/* generator */
.nx-gen{
  border-top:1px solid var(--dm-border,#3a3a3a);
  margin-top:18px;padding-top:16px;text-align:center;
}
.nx-gen .nx-out{
  font-family:var(--dm-font-heading,Poppins,system-ui,sans-serif);
  font-size:clamp(21px,4.2vw,29px);font-weight:700;letter-spacing:-.02em;
  margin:8px 0 14px;cursor:pointer;
}
.nx-gen .nx-out:hover{color:var(--dm-accent,#fe7c5d)}
.nx-gen .nx-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------- name lists ------------- */
/* the theme's <ul class="wp-block-list"> becomes a responsive card grid */
/* name lists may be <ul> or <ol> depending on the article — style both, and
   kill the list markers/counters so an <ol> renders as cards, not "1. 2. 3." */
.wp-block-list.nx-list{
  list-style:none !important;padding:0;
  /* the theme gives these headings margin-bottom:0, so the grid must carry
     its own top margin or the first row sits flush against the heading */
  margin:20px 0 8px;
  display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  counter-reset:none;
}
.wp-block-list.nx-list > li::marker{content:none}
.wp-block-list.nx-list > li{
  display:flex;align-items:center;gap:8px;margin:0;
  background:var(--dm-surface,#2e2e2e);
  border:1px solid var(--dm-border,#3a3a3a);
  border-radius:10px;padding:10px 10px 10px 14px;
  cursor:pointer;transition:.14s;user-select:none;
  list-style:none;
}
.wp-block-list.nx-list > li:hover{
  border-color:var(--dm-accent,#fe7c5d);transform:translateY(-1px);
}
.wp-block-list.nx-list > li.nx-hidden{display:none}
.nx-txt{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:15.5px;font-weight:500;
}
.nx-len{font-size:11px;color:#8a8a8a;font-variant-numeric:tabular-nums}
.nx-star{
  border:0;background:none;cursor:pointer;font-size:15px;padding:2px 4px;
  color:#5a5a5a;line-height:1;transition:.15s;
}
.nx-star:hover{color:var(--dm-accent,#fe7c5d);transform:scale(1.2)}
li.nx-saved{border-color:var(--dm-accent,#fe7c5d) !important}
li.nx-saved .nx-star{color:var(--dm-accent,#fe7c5d)}
li.nx-copied{border-color:#5fd68a !important}
li.nx-copied .nx-txt::after{content:" ✓ copied";color:#5fd68a;font-size:12px;font-weight:600}
.nx-txt mark{
  background:rgba(254,124,93,.18);color:var(--dm-accent,#fe7c5d);
  border-radius:3px;padding:0 2px;
}
.nx-count{
  font:500 12px var(--dm-font-body,Inter,system-ui,sans-serif);
  color:var(--dm-text-muted,#c3c3c3);background:var(--dm-surface,#2e2e2e);
  border:1px solid var(--dm-border,#3a3a3a);border-radius:999px;
  padding:3px 10px;margin-left:10px;vertical-align:middle;
}
.nx-empty{color:var(--dm-text-muted,#c3c3c3);font-size:14.5px;padding:6px 0 14px}
h3.nx-off,h3.nx-off + ul{display:none}

/* ---------------------------------------------- shortlist -------------- */
#nx-fab{
  position:fixed;right:22px;bottom:22px;z-index:1000;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.7);
}
#nx-fab .nx-n{
  background:#1d1d1d;color:var(--dm-accent,#fe7c5d);border-radius:999px;
  padding:1px 8px;font-size:12px;font-weight:700;margin-left:7px;
}
.nx-drawer{
  position:fixed;inset:0 0 0 auto;width:min(420px,100%);
  background:var(--dm-surface-2,#262626);
  border-left:1px solid var(--dm-border,#3a3a3a);
  z-index:1002;transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.nx-drawer.nx-open{transform:none}
.nx-drawer .nx-dhead{
  padding:18px;border-bottom:1px solid var(--dm-border,#3a3a3a);
  display:flex;align-items:center;justify-content:space-between;
}
.nx-drawer .nx-dhead h3{
  margin:0;font-size:17px;
  font-family:var(--dm-font-heading,Poppins,system-ui,sans-serif);
}
.nx-drawer .nx-dbody{flex:1;overflow:auto;padding:14px 18px}
.nx-drawer .nx-dfoot{
  padding:14px 18px;border-top:1px solid var(--dm-border,#3a3a3a);
  display:flex;gap:8px;flex-wrap:wrap;
}
.nx-sl{
  display:flex;align-items:center;gap:8px;padding:10px 0;
  border-bottom:1px solid var(--dm-border,#3a3a3a);
}
.nx-sl .nx-t{flex:1;font-weight:500;font-size:15px}
.nx-sl a{
  color:var(--dm-text-muted,#c3c3c3);font-size:12px;text-decoration:none;
  border:1px solid var(--dm-border,#3a3a3a);border-radius:6px;padding:3px 8px;
}
.nx-sl a:hover{color:var(--dm-accent,#fe7c5d);border-color:var(--dm-accent,#fe7c5d)}
.nx-sl .nx-x{
  border:0;background:none;color:var(--dm-text-muted,#c3c3c3);
  cursor:pointer;font-size:17px;
}
.nx-blank{color:var(--dm-text-muted,#c3c3c3);font-size:14.5px;text-align:center;padding:44px 10px}
.nx-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1001;display:none}
.nx-scrim.nx-open{display:block}

#nx-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--dm-accent,#fe7c5d);color:#1d1d1d;
  padding:11px 20px;border-radius:999px;
  font:600 14px var(--dm-font-body,Inter,system-ui,sans-serif);
  opacity:0;pointer-events:none;transition:.2s;z-index:1003;
}
#nx-toast.nx-show{opacity:1;transform:translate(-50%,0)}

.nx-kbd{
  border:1px solid var(--dm-border,#3a3a3a);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;font-size:12.5px;background:var(--dm-surface,#2e2e2e);
}

/* FAQ accordion CSS moved to assets/interactive/faq-accordion.css, loaded
   on every post now. Kept out of here to avoid shipping it twice. */

/* ---------------------------------------------- how-to steps ----------- */
ol.wp-block-list.nx-steps{
  list-style:none;counter-reset:nxstep;padding:0;margin:0 0 24px;
}
ol.wp-block-list.nx-steps > li{
  counter-increment:nxstep;
  position:relative;
  padding:0 0 20px 56px;
  margin:0;
}
ol.wp-block-list.nx-steps > li::before{
  content:counter(nxstep);
  position:absolute;left:0;top:-2px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(254,124,93,.14);
  color:var(--dm-accent,#fe7c5d);
  display:flex;align-items:center;justify-content:center;
  font:700 15px var(--dm-font-heading,Poppins,system-ui,sans-serif);
}
/* the vertical rail linking the steps */
ol.wp-block-list.nx-steps > li::after{
  content:"";position:absolute;left:17px;top:38px;bottom:2px;
  width:2px;background:var(--dm-border,#3a3a3a);
}
ol.wp-block-list.nx-steps > li:last-child::after{display:none}
ol.wp-block-list.nx-steps > li > strong{
  display:block;margin-bottom:2px;
  font-family:var(--dm-font-heading,Poppins,system-ui,sans-serif);
  font-weight:600;font-size:17px;
}
ol.wp-block-list.nx-steps > li ul{
  list-style:none;padding:0;margin:0;
  color:var(--dm-text-muted,#c3c3c3);
}
ol.wp-block-list.nx-steps > li ul li{margin:0}

@media (max-width:600px){
  #nx-fab{right:14px;bottom:14px}
  .wp-block-list.nx-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  ol.wp-block-list.nx-steps > li{padding-left:48px}
  ol.wp-block-list.nx-steps > li::before{width:32px;height:32px;font-size:14px}
  ol.wp-block-list.nx-steps > li::after{left:15px;top:34px}
}