/*
Theme Name: Network Fix Manual
Theme URI: https://networkfixmanual.com
Author: Network Fix Manual
Description: Lightweight troubleshooting knowledge-base theme.
Version: 1.6.1
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: network-fix-manual
*/
:root{--bg:#f7f8fb;--paper:#fff;--text:#172033;--muted:#667085;--line:#e7eaf0;--red:#b42318;--redbg:#fff3f3;--yellow:#8a4b00;--yellowbg:#fff9e8;--green:#166534;--greenbg:#effaf2;--blue:#1756a9;--bluebg:#f0f6ff}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text)}.wp-site-blocks{min-height:100vh}
.nfm-site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.admin-bar .nfm-site-header{top:32px}
.nfm-brand a{text-decoration:none}.nfm-tagline{color:var(--muted);font-size:.82rem}
.nfm-article-shell{padding:clamp(1.3rem,3vw,2.6rem) 20px 4rem}.nfm-post-header{background:linear-gradient(135deg,#fff,#f8fbff);border:1px solid var(--line);border-radius:24px;padding:clamp(1.4rem,3.5vw,2.6rem);box-shadow:0 10px 28px rgba(16,24,40,.07);margin-bottom:1.25rem}.nfm-post-header .wp-block-post-title{letter-spacing:-.035em;line-height:1.12}.nfm-post-meta{color:var(--muted);font-size:.85rem}
.nfm-toc{position:sticky;top:92px;border:1px solid var(--line);background:#fff;border-radius:16px;padding:1rem;box-shadow:0 4px 16px rgba(16,24,40,.04)}.admin-bar .nfm-toc{top:124px}.nfm-toc a{display:block;text-decoration:none;color:#475467;padding:.55rem .65rem;border-radius:9px;margin:.15rem 0}.nfm-toc a:hover{background:#f8fafc;color:#111827}.nfm-toc .diag{border-left:4px solid #eab308}.nfm-toc .evidence{border-left:4px solid #22c55e}.nfm-toc .solution{border-left:4px solid #3b82f6}.nfm-toc .security{border-left:4px solid #ef4444}
.nfm-quick-fix{background:#0f172a;color:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 12px 28px rgba(15,23,42,.16)}.nfm-quick-fix h2{color:#fff;margin-top:0}.nfm-quick-fix p{color:#dbe5f2}
.nfm-callout{border:1px solid var(--line);border-radius:16px;padding:1rem 1.15rem}.nfm-callout.warning{background:var(--redbg);border-color:#f0b7b4}.nfm-callout.warning strong:first-child{color:var(--red)}.nfm-callout.info{background:var(--bluebg);border-color:#adcaef}.nfm-callout.info strong:first-child{color:var(--blue)}
.nfm-page-map .wp-block-column{border:1px solid var(--line);border-radius:15px;padding:1rem}.nfm-page-map .diagnosis{background:var(--yellowbg)}.nfm-page-map .evidence{background:var(--greenbg)}.nfm-page-map .solutions{background:var(--bluebg)}.nfm-page-map .security{background:var(--redbg)}
.nfm-section{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-block:1.35rem;box-shadow:0 4px 18px rgba(16,24,40,.035)}.nfm-section-head{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}.nfm-section-body{padding:1.2rem 1.4rem 1.55rem}.nfm-section.diagnosis .nfm-section-head{background:var(--yellowbg)}.nfm-section.evidence .nfm-section-head{background:var(--greenbg)}.nfm-section.solutions .nfm-section-head{background:var(--bluebg)}.nfm-section.security .nfm-section-head{background:var(--redbg)}
.nfm-badge{display:inline-flex;border-radius:999px;padding:.34rem .65rem;font-size:.76rem;font-weight:800}.nfm-badge.real{color:var(--green);background:#dcfce7}.nfm-badge.tested{color:var(--blue);background:#dbeafe}.nfm-badge.diagnostic{color:var(--yellow);background:#fef3c7}
.wp-block-table{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}.wp-block-table table{min-width:700px}.wp-block-table th{background:#f8fafc;color:#475467}.wp-block-table th,.wp-block-table td{padding:.75rem .8rem;border-color:var(--line);vertical-align:top}
.wp-block-code{background:#111827;color:#f8fafc;border:0;border-radius:13px;padding:1rem 1.1rem;overflow:auto}.wp-block-code code{font-family:"Cascadia Code",Consolas,monospace;color:inherit}code:not(.wp-block-code code){background:#eef2f6;color:#111827;border-radius:5px;padding:.08em .35em}
.nfm-site-footer{border-top:1px solid var(--line);color:var(--muted);background:#fff}
@media(max-width:900px){.nfm-sidebar-column{display:none!important}.nfm-article-columns{display:block!important}}@media(max-width:620px){.admin-bar .nfm-site-header{top:46px}.nfm-page-map{display:block!important}.nfm-page-map .wp-block-column{margin-bottom:.65rem}.nfm-post-header,.nfm-section{border-radius:16px}}


/* ---------- Sticky article navigation (v1.1) ---------- */
.nfm-article-nav-wrap {
  position: sticky;
  top: 64px;
  z-index: 45;
  margin: 0 0 1.2rem;
}
.admin-bar .nfm-article-nav-wrap { top: 96px; }

.nfm-article-nav {
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .5rem;
  border: 1px solid var(--nfm-line, #e7eaf0);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16,24,40,.08);
}
.nfm-article-nav::-webkit-scrollbar { display:none; }

.nfm-article-nav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  padding: .58rem .78rem;
  border-radius: 10px;
  color: #475467;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 750;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nfm-article-nav a:hover { background:#f8fafc; color:#111827; }
.nfm-article-nav a.active {
  color:#111827;
  background:#eef2f6;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.06);
}
.nfm-article-nav a[data-target="diagnosis"].active { background:var(--nfm-yellow-bg, #fff9e8); color:var(--nfm-yellow, #8a4b00); }
.nfm-article-nav a[data-target="evidence"].active { background:var(--nfm-green-bg, #effaf2); color:var(--nfm-green, #166534); }
.nfm-article-nav a[data-target="solutions"].active { background:var(--nfm-blue-bg, #f0f6ff); color:var(--nfm-blue, #1756a9); }
.nfm-article-nav a[data-target="security"].active { background:var(--nfm-red-bg, #fff3f3); color:var(--nfm-red, #b42318); }

.nfm-article-columns { display:block !important; }
.nfm-content-column { width:100% !important; max-width:100% !important; flex-basis:100% !important; }
.nfm-sidebar-column { display:none !important; }

#quick-answer, #diagnosis, #evidence, #solutions, #security {
  scroll-margin-top: 150px;
}

@media (max-width: 782px) {
  .admin-bar .nfm-article-nav-wrap { top: 110px; }
  .nfm-article-nav-wrap { top: 64px; margin-inline: -4px; }
  .nfm-article-nav { border-radius:12px; padding:.4rem; }
  .nfm-article-nav a { font-size:.82rem; padding:.52rem .68rem; }
  #quick-answer, #diagnosis, #evidence, #solutions, #security { scroll-margin-top: 160px; }
}


/* ---------- Attached article navigation (v1.1.1) ---------- */
/* Make the site header height predictable so the article nav can sit directly beneath it. */
.nfm-site-header > .wp-block-group,
.nfm-site-header .alignwide {
  min-height: 74px;
}

/* Full-bleed sticky strip directly below the site header. */
.nfm-article-nav-wrap {
  position: sticky;
  top: 74px;
  z-index: 45;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 1.2rem !important;
  padding: 0 !important;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--nfm-line, #e7eaf0);
  border-bottom: 1px solid var(--nfm-line, #e7eaf0);
  box-shadow: 0 3px 12px rgba(16,24,40,.05);
}

.admin-bar .nfm-article-nav-wrap {
  top: 106px;
}

.nfm-article-nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: .45rem 20px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.nfm-article-nav a {
  border-radius: 8px;
}

/* Anchor sections below the two sticky bars. */
#quick-answer, #diagnosis, #evidence, #solutions, #security {
  scroll-margin-top: 150px;
}

@media (max-width: 782px) {
  .nfm-site-header > .wp-block-group,
  .nfm-site-header .alignwide {
    min-height: 66px;
  }

  .nfm-article-nav-wrap {
    top: 66px;
  }

  .admin-bar .nfm-article-nav-wrap {
    top: 112px;
  }

  .nfm-article-nav {
    padding: .4rem 12px;
  }

  #quick-answer, #diagnosis, #evidence, #solutions, #security {
    scroll-margin-top: 150px;
  }
}


/* ---------- Flush sticky article navigation (v1.1.2) ---------- */
/*
 * The site header scrolls away. Do not reserve its height above the article nav.
 * Logged-in WordPress users only need the admin toolbar offset.
 */
.nfm-article-nav-wrap {
  top: 0 !important;
}

.admin-bar .nfm-article-nav-wrap {
  top: 32px !important;
}

/* Keep anchored headings visible below the sticky navigation. */
#quick-answer, #diagnosis, #evidence, #solutions, #security {
  scroll-margin-top: 72px !important;
}

@media (max-width: 782px) {
  .nfm-article-nav-wrap {
    top: 0 !important;
  }

  .admin-bar .nfm-article-nav-wrap {
    top: 46px !important;
  }

  #quick-answer, #diagnosis, #evidence, #solutions, #security {
    scroll-margin-top: 78px !important;
  }
}


/* ---------- Dock-style article navigation (v1.2.0) ---------- */
.nfm-article-nav {
  align-items: center;
  padding-top: .72rem !important;
  padding-bottom: .72rem !important;
}

.nfm-article-nav a {
  position: relative;
  transform-origin: center center;
  transform: scale(var(--nfm-dock-scale, 1));
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
  will-change: transform;
}

/* Current reading position remains visibly larger even without mouse hover. */
.nfm-article-nav a.active {
  --nfm-dock-scale: 1.12;
  z-index: 3;
  font-weight: 850;
}

/* A small marker reinforces the current position without adding visual clutter. */
.nfm-article-nav a.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -7px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .7;
}

/* JS sets --nfm-hover-scale dynamically for the Dock proximity effect. */
.nfm-article-nav.is-dock-hovering a {
  transform: scale(var(--nfm-hover-scale, var(--nfm-dock-scale, 1)));
}

/* Keep active item slightly stronger when the pointer is elsewhere. */
.nfm-article-nav.is-dock-hovering a.active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nfm-article-nav a {
    transition: background .18s ease, color .18s ease !important;
    transform: none !important;
  }
  .nfm-article-nav a.active {
    font-weight: 850;
  }
}

@media (max-width: 782px) {
  /* On touch screens, use only persistent active-section magnification. */
  .nfm-article-nav a.active {
    --nfm-dock-scale: 1.08;
  }
  .nfm-article-nav {
    padding-top: .62rem !important;
    padding-bottom: .62rem !important;
  }
}


/* ---------- Crisp Dock navigation (v1.2.1) ---------- */
/*
 * Do not scale rendered text with transform. Magnify by changing the actual
 * font size so the browser re-rasterizes glyphs at the requested size.
 */
.nfm-article-nav a,
.nfm-article-nav.is-dock-hovering a {
  transform: none !important;
  will-change: auto !important;
  font-size: var(--nfm-nav-font-size, .86rem) !important;
  line-height: 1.15;
  transition:
    font-size .13s cubic-bezier(.2,.8,.2,1),
    padding .13s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* 25% persistent magnification for the current section. */
.nfm-article-nav a.active {
  --nfm-nav-font-size: 1.075rem; /* .86rem × 1.25 */
  padding-left: .9rem;
  padding-right: .9rem;
  font-weight: 850;
  z-index: 3;
}

/* JS dynamically writes --nfm-hover-font-size for mouse proximity. */
.nfm-article-nav.is-dock-hovering a {
  font-size: var(--nfm-hover-font-size, var(--nfm-nav-font-size, .86rem)) !important;
}

/* Keep the selected item crisp and readable while nearby items react. */
.nfm-article-nav.is-dock-hovering a.active {
  font-weight: 850;
}

@media (prefers-reduced-motion: reduce) {
  .nfm-article-nav a,
  .nfm-article-nav.is-dock-hovering a {
    transition: background .18s ease, color .18s ease !important;
  }
}

/* Touch devices keep the same 25% active-state emphasis without hover motion. */
@media (max-width: 782px) {
  .nfm-article-nav a {
    --nfm-nav-font-size: .82rem;
  }
  .nfm-article-nav a.active {
    --nfm-nav-font-size: 1.025rem; /* .82rem × 1.25 */
    padding-left: .78rem;
    padding-right: .78rem;
  }
}


/* ---------- Linked diagnostic UX (v1.3.0) ---------- */
.nfm-page-map .wp-block-column {
  padding: 0 !important;
  overflow: hidden;
}
.nfm-page-map a.nfm-map-link {
  display: block;
  min-height: 100%;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}
.nfm-page-map a.nfm-map-link:hover {
  filter: brightness(.985);
}
.nfm-page-map a.nfm-map-link strong {
  display: block;
  margin-bottom: .18rem;
}

.nfm-flow-table td:first-child,
.nfm-flow-table th:first-child {
  width: 72px;
  text-align: center;
}
.nfm-flow-table td:nth-child(3),
.nfm-flow-table td:nth-child(4) {
  min-width: 170px;
}
.nfm-flow-table a {
  font-weight: 750;
  text-decoration: none;
}
.nfm-flow-table a:hover {
  text-decoration: underline;
}
.nfm-flow-table .nfm-pass-link {
  color: #166534;
}
.nfm-flow-table .nfm-fail-link {
  color: #b42318;
}

.nfm-step-card {
  border-top: 1px solid var(--nfm-line, #e7eaf0);
  padding-top: 1.4rem;
  margin-top: 1.8rem;
}
.nfm-step-card:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.nfm-step-kicker {
  color: #667085;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.nfm-step-card h3 {
  margin-top: .2rem;
  margin-bottom: .75rem;
}
.nfm-why {
  color: #475467;
  margin-bottom: .8rem;
}

.nfm-decision-grid {
  gap: .75rem !important;
  margin-top: .9rem;
}
.nfm-pass-card,
.nfm-fail-card {
  border-radius: 14px;
  padding: 1rem !important;
  border: 1px solid;
}
.nfm-pass-card {
  background: #effaf2;
  border-color: #a9d9b6;
}
.nfm-fail-card {
  background: #fff3f3;
  border-color: #f0b7b4;
}
.nfm-pass-card strong:first-child {
  color: #166534;
}
.nfm-fail-card strong:first-child {
  color: #b42318;
}
.nfm-decision-grid p {
  margin-top: .35rem;
  margin-bottom: .35rem;
}
.nfm-action-link {
  display: inline-block;
  margin-top: .35rem;
  padding: .42rem .62rem;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255,255,255,.7);
}
.nfm-action-link:hover {
  text-decoration: underline;
}
.nfm-back-link {
  display: inline-block;
  margin-top: .7rem;
  font-weight: 750;
  text-decoration: none;
}
.nfm-back-link:hover {
  text-decoration: underline;
}

.nfm-evidence-table a,
.nfm-solution-table a {
  font-weight: 750;
  text-decoration: none;
}
.nfm-evidence-table a:hover,
.nfm-solution-table a:hover {
  text-decoration: underline;
}

.nfm-status-pass { color:#166534; font-weight:800; }
.nfm-status-fail { color:#b42318; font-weight:800; }
.nfm-status-note { color:#8a4b00; font-weight:800; }
.nfm-status-na { color:#667085; font-weight:750; }

#diag-step-1,#diag-step-2,#diag-step-3,#diag-step-4,#diag-step-5,
#diag-step-6,#diag-step-7,#diag-step-8,#diag-step-9,
#solution-step-1,#solution-step-2,#solution-step-3,#solution-step-4,#solution-step-5,
#solution-step-6,#solution-step-7,#solution-step-8,#solution-step-9,
#evidence-step-1,#evidence-step-2,#evidence-step-3,#evidence-step-4,#evidence-step-5,
#evidence-step-6,#evidence-step-7,#evidence-step-8,#evidence-step-9 {
  scroll-margin-top: 78px;
}

@media (max-width: 760px) {
  .nfm-decision-grid {
    display: block !important;
  }
  .nfm-pass-card,
  .nfm-fail-card {
    margin-bottom: .65rem;
  }
}


/* ---------- Strong step identity (v1.4.0) ---------- */

/* Matching step colors across Diagnosis and Solutions */
.nfm-step-card.nfm-step-tone-green {
  background: #f1fbf5;
  border: 1px solid #b9dfc7;
  border-left: 6px solid #59a873;
}
.nfm-step-card.nfm-step-tone-blue {
  background: #f2f7ff;
  border: 1px solid #bfd3ef;
  border-left: 6px solid #5f96d8;
}

.nfm-step-card {
  border-radius: 18px;
  padding: 1.25rem 1.35rem 1.35rem !important;
  margin: 1.15rem 0 !important;
  box-shadow: 0 4px 14px rgba(16,24,40,.035);
}

/* Remove the old thin divider treatment. */
.nfm-step-card:first-child {
  padding-top: 1.25rem !important;
}
.nfm-step-card + .nfm-step-card {
  margin-top: 1.15rem !important;
}

/* STEP badge becomes the dominant locator. */
.nfm-step-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 .55rem !important;
  padding: .38rem .72rem;
  border-radius: 999px;
  font-size: .9rem !important;
  font-weight: 900 !important;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}

.nfm-step-tone-green .nfm-step-kicker {
  color: #14532d;
  background: #d8f2e1;
  border: 1px solid #a6d4b5;
}
.nfm-step-tone-blue .nfm-step-kicker {
  color: #174a83;
  background: #dcecff;
  border: 1px solid #afcaeb;
}

/* Fix badge is even more explicit. */
.nfm-fix-step .nfm-step-kicker {
  border-radius: 9px;
  padding: .48rem .78rem;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}
.nfm-fix-step.nfm-step-tone-green .nfm-step-kicker {
  color: #0e4d29;
  background: #c8ead5;
}
.nfm-fix-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #123f72;
  background: #cfe2fa;
}

/* Make the actual STEP title the strongest text inside each card. */
.nfm-step-card h3.wp-block-heading {
  margin: .05rem 0 .85rem !important;
  font-size: clamp(1.3rem, 2vw, 1.62rem) !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  letter-spacing: -.018em;
  color: #172033;
}

.nfm-diagnostic-step .wp-block-code,
.nfm-fix-step .wp-block-code {
  margin-top: .8rem;
}

/* Secondary explanation should remain secondary. */
.nfm-step-card .nfm-why {
  margin-top: .75rem;
  color: #536176;
  font-size: .95rem;
}

/* Bottom continuation is intentionally quieter than the STEP title. */
.nfm-next-step-link {
  display: inline-flex;
  align-items: center;
  margin-top: .85rem;
  padding: .4rem .68rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  color: #344054;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(102,112,133,.18);
}
.nfm-next-step-link:hover {
  background: rgba(255,255,255,.9);
  text-decoration: underline;
}

/* Solution index: focus on fix and next action, not "retest". */
.nfm-solution-table th:last-child,
.nfm-solution-table td:last-child {
  min-width: 150px;
}

/* Slightly stronger visual separation between the section header and step cards. */
.nfm-section-body > .nfm-step-card:first-of-type {
  margin-top: 1.25rem !important;
}

@media (max-width: 700px) {
  .nfm-step-card {
    padding: 1rem 1rem 1.1rem !important;
    border-left-width: 5px;
  }

  .nfm-step-card h3.wp-block-heading {
    font-size: 1.28rem !important;
  }

  .nfm-step-kicker {
    font-size: .82rem !important;
  }
}


/* ---------- Semantic-safe step palette (v1.4.1) ---------- */
/*
 * Green and red are reserved for PASS / FAIL semantics.
 * Step backgrounds use non-semantic structural colors:
 * odd = mist blue, even = soft lavender-gray.
 */

/* Odd steps: Mist Blue */
.nfm-step-card.nfm-step-tone-green {
  background: #f4f8fc !important;
  border-color: #cbd9e7 !important;
  border-left-color: #7898b7 !important;
}
.nfm-step-tone-green .nfm-step-kicker {
  color: #35536d !important;
  background: #e3edf6 !important;
  border-color: #bfd0e0 !important;
}
.nfm-fix-step.nfm-step-tone-green .nfm-step-kicker {
  color: #2f4b64 !important;
  background: #d9e7f2 !important;
}

/* Even steps: Soft Lavender Gray */
.nfm-step-card.nfm-step-tone-blue {
  background: #f8f6fa !important;
  border-color: #ddd6e5 !important;
  border-left-color: #9b8aae !important;
}
.nfm-step-tone-blue .nfm-step-kicker {
  color: #5b4d6b !important;
  background: #eee9f3 !important;
  border-color: #d3c8df !important;
}
.nfm-fix-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #514261 !important;
  background: #e6deed !important;
}

/* Preserve semantic PASS / FAIL colors at higher visual priority. */
.nfm-pass-card {
  background: #effaf2 !important;
  border-color: #a9d9b6 !important;
}
.nfm-pass-card strong:first-child,
.nfm-status-pass,
.nfm-flow-table .nfm-pass-link {
  color: #166534 !important;
}

.nfm-fail-card {
  background: #fff3f3 !important;
  border-color: #f0b7b4 !important;
}
.nfm-fail-card strong:first-child,
.nfm-status-fail,
.nfm-flow-table .nfm-fail-link {
  color: #b42318 !important;
}

/* Ensure structural backgrounds remain visibly quieter than semantic cards. */
.nfm-step-card .nfm-pass-card,
.nfm-step-card .nfm-fail-card {
  box-shadow: 0 2px 8px rgba(16,24,40,.025);
}


/* ---------- Step-first visual hierarchy (v1.5.0) ---------- */

/*
 * STEP identity is now the strongest structural cue.
 * PASS/FAIL keep green/red semantics.
 * Alternating step colors use stronger non-semantic blue/lavender tones.
 */

/* Slightly stronger alternating card backgrounds */
.nfm-step-card.nfm-step-tone-green {
  background: #edf5fb !important;
  border-color: #b8cfe1 !important;
  border-left-color: #5e8eb5 !important;
}
.nfm-step-card.nfm-step-tone-blue {
  background: #f3eef8 !important;
  border-color: #d1c0df !important;
  border-left-color: #8c6ea6 !important;
}

/* Card padding lets the full-width STEP bar sit flush and strong */
.nfm-step-card {
  padding: 0 1.25rem 1.35rem !important;
  overflow: hidden;
}

/* Full-width STEP bar — same visual span the old command box had */
.nfm-step-card .nfm-step-kicker {
  display: flex !important;
  align-items: center;
  width: calc(100% + 2.5rem) !important;
  min-height: 52px;
  margin: 0 -1.25rem 1rem !important;
  padding: .72rem 1.25rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(16,24,40,.08);
}

/* Odd STEP bar: richer pastel blue */
.nfm-step-tone-green .nfm-step-kicker {
  color: #173f60 !important;
  background: #c9dff0 !important;
}

/* Even STEP bar: richer pastel lavender */
.nfm-step-tone-blue .nfm-step-kicker {
  color: #4b315f !important;
  background: #ddcdea !important;
}

/* Fix bars use same step color but stronger identity */
.nfm-fix-step.nfm-step-tone-green .nfm-step-kicker {
  color: #123b5b !important;
  background: #bdd8eb !important;
}
.nfm-fix-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #432954 !important;
  background: #d5c1e4 !important;
}

/* The step question/title stays strong, but below the STEP bar */
.nfm-step-card h3.wp-block-heading {
  margin: .15rem 0 .8rem !important;
  font-size: clamp(1.26rem, 1.85vw, 1.52rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
}

/*
 * Compact command block:
 * no longer spans the whole article when the command is short.
 * Long commands can still grow up to 100%.
 */
.nfm-diagnostic-step .wp-block-code,
.nfm-fix-step .wp-block-code {
  display: table !important;
  width: auto !important;
  min-width: min(420px, 55%) !important;
  max-width: 100% !important;
  margin: .8rem 0 .9rem !important;
  padding: .72rem 1rem !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.08);
}

.nfm-diagnostic-step .wp-block-code code,
.nfm-fix-step .wp-block-code code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Multi-line diagnostic commands need a little more room, but not full width */
.nfm-diagnostic-step .wp-block-code:has(code br),
.nfm-fix-step .wp-block-code:has(code br) {
  min-width: min(520px, 68%) !important;
}

/* Supporting explanation should not compete with the STEP bar */
.nfm-step-card .nfm-why {
  margin-top: .55rem !important;
  font-size: .93rem !important;
  color: #5c6878 !important;
}

/* Decision cards keep semantic colors and sit visually below the STEP identity */
.nfm-step-card .nfm-decision-grid {
  margin-top: 1rem !important;
}

/* Keep step transitions readable between cards */
.nfm-step-card + .nfm-step-card {
  margin-top: 1.45rem !important;
}

/* Mobile: step bar remains dominant; command blocks use full available width */
@media (max-width: 700px) {
  .nfm-step-card {
    padding: 0 .9rem 1rem !important;
  }

  .nfm-step-card .nfm-step-kicker {
    width: calc(100% + 1.8rem) !important;
    margin-left: -.9rem !important;
    margin-right: -.9rem !important;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
    min-height: 48px;
    font-size: .94rem !important;
  }

  .nfm-diagnostic-step .wp-block-code,
  .nfm-fix-step .wp-block-code {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* ---------- Unified STEP color system (v1.5.1) ---------- */
/*
 * RULE:
 * Odd STEP  = Mist Blue
 * Even STEP = Soft Lavender
 *
 * The same STEP number uses the same structural color in:
 * Diagnosis / Real Case / Solutions / Summary tables.
 * Green and red remain reserved for PASS / FAIL semantics.
 */

/* ---- Real Case detailed STEP cards use the same palette ---- */
.nfm-realcase-step.nfm-step-tone-green {
  background: #edf5fb !important;
  border: 1px solid #b8cfe1 !important;
  border-left: 6px solid #5e8eb5 !important;
}
.nfm-realcase-step.nfm-step-tone-blue {
  background: #f3eef8 !important;
  border: 1px solid #d1c0df !important;
  border-left: 6px solid #8c6ea6 !important;
}

.nfm-realcase-step.nfm-step-tone-green .nfm-step-kicker {
  color: #173f60 !important;
  background: #c9dff0 !important;
}
.nfm-realcase-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #4b315f !important;
  background: #ddcdea !important;
}

/* Real Case label stays distinguishable without stealing the STEP color meaning */
.nfm-realcase-step .nfm-step-kicker::before {
  content: "REAL CASE · ";
  font-weight: 850;
  opacity: .82;
}

/* ---- STEP tables: same alternating colors as the destination cards ---- */
.nfm-flow-table tbody tr:nth-child(odd),
.nfm-evidence-table tbody tr:nth-child(odd),
.nfm-solution-table tbody tr:nth-child(odd) {
  background: #edf5fb !important;
}

.nfm-flow-table tbody tr:nth-child(even),
.nfm-evidence-table tbody tr:nth-child(even),
.nfm-solution-table tbody tr:nth-child(even) {
  background: #f3eef8 !important;
}

/* Stronger STEP locator cell in every table */
.nfm-flow-table tbody tr:nth-child(odd) td:first-child,
.nfm-evidence-table tbody tr:nth-child(odd) td:first-child,
.nfm-solution-table tbody tr:nth-child(odd) td:first-child {
  background: #c9dff0 !important;
  border-left: 5px solid #5e8eb5 !important;
}

.nfm-flow-table tbody tr:nth-child(even) td:first-child,
.nfm-evidence-table tbody tr:nth-child(even) td:first-child,
.nfm-solution-table tbody tr:nth-child(even) td:first-child {
  background: #ddcdea !important;
  border-left: 5px solid #8c6ea6 !important;
}

.nfm-flow-table td:first-child a,
.nfm-evidence-table td:first-child a,
.nfm-solution-table td:first-child a {
  display: inline-block;
  color: #172033 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* Keep color association visible on hover/click target */
.nfm-flow-table tbody tr,
.nfm-evidence-table tbody tr,
.nfm-solution-table tbody tr {
  transition: filter .15s ease, box-shadow .15s ease;
}

.nfm-flow-table tbody tr:hover,
.nfm-evidence-table tbody tr:hover,
.nfm-solution-table tbody tr:hover {
  filter: saturate(1.08) brightness(.985);
  box-shadow: inset 0 0 0 1px rgba(23,32,51,.05);
}

/* Table headers stay neutral so row colors read as STEP identity */
.nfm-flow-table thead th,
.nfm-evidence-table thead th,
.nfm-solution-table thead th {
  background: #f8fafc !important;
}

/* In Real Case cards, keep status colors semantically dominant */
.nfm-realcase-step .nfm-status-pass { color:#166534 !important; }
.nfm-realcase-step .nfm-status-fail { color:#b42318 !important; }

/* Mobile: retain the step color at the left edge even when tables scroll */
@media (max-width: 700px) {
  .nfm-flow-table td:first-child,
  .nfm-evidence-table td:first-child,
  .nfm-solution-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
}


/* ==========================================================
   Category Theme System (v1.6.0)
   1) STEP label size = main issue title size
   2) Each category uses one hue with light/darker alternation
   ========================================================== */

/* ----------------------------------------------------------
   1. STEP label typography
   ---------------------------------------------------------- */
.nfm-step-card .nfm-step-kicker {
  font-size: clamp(1.26rem, 1.85vw, 1.52rem) !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  min-height: 58px;
}

/* Keep the issue title at exactly the same visual size */
.nfm-step-card h3.wp-block-heading {
  font-size: clamp(1.26rem, 1.85vw, 1.52rem) !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
}

/* ----------------------------------------------------------
   2A. DIAGNOSIS / TEST = warm pastel orange
   Odd step = slightly stronger
   Even step = lighter
   ---------------------------------------------------------- */
.nfm-diagnostic-step.nfm-step-tone-green {
  background: #fff4e3 !important;
  border-color: #efc88f !important;
  border-left-color: #d89032 !important;
}
.nfm-diagnostic-step.nfm-step-tone-green .nfm-step-kicker {
  color: #713d08 !important;
  background: #f6c977 !important;
}

.nfm-diagnostic-step.nfm-step-tone-blue {
  background: #fff9ef !important;
  border-color: #f0ddba !important;
  border-left-color: #e7b867 !important;
}
.nfm-diagnostic-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #75501f !important;
  background: #f8ddb0 !important;
}

/* Diagnosis summary table follows the same orange family */
.nfm-flow-table tbody tr:nth-child(odd) {
  background: #fff4e3 !important;
}
.nfm-flow-table tbody tr:nth-child(even) {
  background: #fff9ef !important;
}
.nfm-flow-table tbody tr:nth-child(odd) td:first-child {
  background: #f6c977 !important;
  border-left-color: #d89032 !important;
}
.nfm-flow-table tbody tr:nth-child(even) td:first-child {
  background: #f8ddb0 !important;
  border-left-color: #e7b867 !important;
}

/* ----------------------------------------------------------
   2B. REAL CASE = pastel green
   Odd step = slightly stronger
   Even step = lighter
   ---------------------------------------------------------- */
.nfm-realcase-step.nfm-step-tone-green {
  background: #eef9f1 !important;
  border-color: #b8dcc1 !important;
  border-left-color: #65a977 !important;
}
.nfm-realcase-step.nfm-step-tone-green .nfm-step-kicker {
  color: #174d29 !important;
  background: #bfe4c8 !important;
}

.nfm-realcase-step.nfm-step-tone-blue {
  background: #f6fbf7 !important;
  border-color: #d0e7d5 !important;
  border-left-color: #91c39d !important;
}
.nfm-realcase-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #315f3d !important;
  background: #d9eddc !important;
}

/* Real Case summary table follows the same green family */
.nfm-evidence-table tbody tr:nth-child(odd) {
  background: #eef9f1 !important;
}
.nfm-evidence-table tbody tr:nth-child(even) {
  background: #f6fbf7 !important;
}
.nfm-evidence-table tbody tr:nth-child(odd) td:first-child {
  background: #bfe4c8 !important;
  border-left-color: #65a977 !important;
}
.nfm-evidence-table tbody tr:nth-child(even) td:first-child {
  background: #d9eddc !important;
  border-left-color: #91c39d !important;
}

/* ----------------------------------------------------------
   2C. SOLUTIONS / FIX = pastel blue
   Odd step = slightly stronger
   Even step = lighter
   ---------------------------------------------------------- */
.nfm-fix-step.nfm-step-tone-green {
  background: #eef5fd !important;
  border-color: #b9d0eb !important;
  border-left-color: #5e93cc !important;
}
.nfm-fix-step.nfm-step-tone-green .nfm-step-kicker {
  color: #174675 !important;
  background: #bed8f2 !important;
}

.nfm-fix-step.nfm-step-tone-blue {
  background: #f6f9fd !important;
  border-color: #d1deed !important;
  border-left-color: #8eb4dc !important;
}
.nfm-fix-step.nfm-step-tone-blue .nfm-step-kicker {
  color: #345b82 !important;
  background: #d9e7f5 !important;
}

/* Solutions summary table follows the same blue family */
.nfm-solution-table tbody tr:nth-child(odd) {
  background: #eef5fd !important;
}
.nfm-solution-table tbody tr:nth-child(even) {
  background: #f6f9fd !important;
}
.nfm-solution-table tbody tr:nth-child(odd) td:first-child {
  background: #bed8f2 !important;
  border-left-color: #5e93cc !important;
}
.nfm-solution-table tbody tr:nth-child(even) td:first-child {
  background: #d9e7f5 !important;
  border-left-color: #8eb4dc !important;
}

/* Preserve semantic colors inside every category */
.nfm-pass-card {
  background: #effaf2 !important;
  border-color: #a9d9b6 !important;
}
.nfm-pass-card strong:first-child,
.nfm-status-pass,
.nfm-flow-table .nfm-pass-link {
  color: #166534 !important;
}

.nfm-fail-card {
  background: #fff3f3 !important;
  border-color: #f0b7b4 !important;
}
.nfm-fail-card strong:first-child,
.nfm-status-fail,
.nfm-flow-table .nfm-fail-link {
  color: #b42318 !important;
}

/* Mobile typography remains matched */
@media (max-width: 700px) {
  .nfm-step-card .nfm-step-kicker,
  .nfm-step-card h3.wp-block-heading {
    font-size: 1.28rem !important;
    line-height: 1.22 !important;
  }
}


/* ---------- Final reading-width polish (v1.6.1) ---------- */
/*
 * Do not hard-break English paragraphs.
 * Keep full-width tables/cards, but limit prose line length so the browser
 * wraps naturally across desktop and mobile.
 */
.nfm-step-card > p:not(.nfm-step-kicker),
.nfm-step-card .nfm-why,
.nfm-section-head > p,
.nfm-callout > p,
.nfm-quick-fix > p {
  max-width: 78ch;
}

.nfm-step-card > p:not(.nfm-step-kicker),
.nfm-step-card .nfm-why,
.nfm-section-head > p,
.nfm-callout > p {
  line-height: 1.68;
}

.nfm-step-card h3.wp-block-heading {
  max-width: 34ch;
}

/* Keep action/decision content compact while cards remain balanced. */
.nfm-pass-card p,
.nfm-fail-card p {
  max-width: 48ch;
}

@media (max-width: 700px) {
  .nfm-step-card > p:not(.nfm-step-kicker),
  .nfm-step-card .nfm-why,
  .nfm-section-head > p,
  .nfm-callout > p,
  .nfm-quick-fix > p,
  .nfm-step-card h3.wp-block-heading {
    max-width: none;
  }
}