/* ניקיתי 2026 — base theme styles.
   RTL-native (direction:rtl + logical properties) — theme.css is NEVER paired with a
   theme-rtl.css swap (see inc/enqueue.php). Component-level styling (header/footer,
   single, archive, etc.) is built out in later milestones; this file carries only the
   site-wide foundation: reset, RTL base, focus/skip-link accessibility, and defensive
   .entry-content prose so legacy Elementor-authored posts read well immediately. */

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  direction: rtl;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select {
  font: inherit;
  color: inherit;
}
a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
a:hover {
  color: var(--cobalt-deep);
}

/* ---------- Headings ----------
   Hard rule (CLAUDE.md): the serif (--font-display) is used at >=22px ONLY. h1–h3 sit at
   or above that floor at every breakpoint by construction (see tokens.css scale), so they
   default to the display face. Anything smaller — compact card titles, panel labels,
   chips, the wordmark — must use .font-display-small explicitly instead of a raw heading. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-display);
  margin: 0 0 var(--space-4);
  color: var(--navy);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: var(--tracking-display-small);
  color: var(--navy);
  margin: 0 0 var(--space-3);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
}

/* Utility for anything under the 22px serif floor — compact titles, chips, wordmark. */
.font-display-small {
  font-family: var(--font-display-small);
  font-weight: 900;
  letter-spacing: var(--tracking-display-small);
}
.card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-card-title);
  line-height: 1.15;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* ---------- Skip link ----------
   First focusable element on every template, jumps to #main. Positioned off-screen with
   clip-path rather than left:-9999px — a fixed negative-left offset causes a site-wide
   horizontal overflow in RTL (lesson carried over from lizlol-theme-2026). */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: var(--space-3);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-card);
  font-weight: 700;
  text-decoration: none;
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}
.skip-link:focus {
  clip-path: none;
  overflow: visible;
  white-space: normal;
}

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Defensive .entry-content prose ----------
   Long-form is the product (CLAUDE.md: "do not tighten it"). This is the baseline that
   makes even an unstyled legacy Elementor paste read as a coherent article — the
   PHP-side hygiene (inc/compat.php) handles structural cleanup; this handles typography. */
.entry-content {
  max-width: var(--measure-max);
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--navy);
}
.entry-content > * + * {
  margin-block-start: var(--space-5);
}
.entry-content h2 {
  margin-block-start: var(--space-8);
}
.entry-content h3 {
  margin-block-start: var(--space-6);
}
.entry-content ul, .entry-content ol {
  padding-inline-start: var(--space-6);
  padding-inline-end: 0;
}
.entry-content li + li {
  margin-block-start: var(--space-2);
}
.entry-content img {
  border-radius: var(--radius-card);
}
.entry-content blockquote {
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 2.5px solid var(--cobalt);
  color: var(--ink-soft);
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}
.entry-content a {
  color: var(--cobalt);
}

/* ---------- Cards (foundation only — full component build in later milestones) ---------- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-min);
  transition: box-shadow var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }
}

@media (min-width: 768px) {
  .card {
    padding: var(--card-pad-max);
  }
}

/* ---------- Buttons ---------- */
.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-meta-min);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}
.nk-btn--cobalt {
  background: var(--cobalt);
  color: var(--on-cobalt-text);
  box-shadow: var(--shadow-cta-glow);
}
.nk-btn--cobalt:hover {
  background: var(--cobalt-deep);
  color: var(--on-cobalt-text);
}

.nk-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.nk-icon-btn:hover {
  background: var(--sky-soft);
}

/* ---------- Header / masthead ---------- */
.nk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  transition: box-shadow var(--duration-hover) var(--ease-standard);
}
.nk-header.is-stuck {
  box-shadow: var(--shadow-card);
}
.nk-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.nk-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nk-wordmark {
  position: relative;
  color: var(--navy);
  font-size: 22px;
}
.nk-wordmark__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-start: 2px;
  border-radius: 50%;
  background: var(--yellow);
  vertical-align: super;
}

.nk-nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
.nk-nav a {
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-meta-min);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.nk-nav a:hover,
.nk-nav a[aria-current="page"] {
  color: var(--cobalt);
  border-color: var(--cobalt);
}

.nk-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nk-burger {
  display: inline-flex;
}
.nk-theme-toggle__icon--moon {
  display: none;
}
.nk-theme-toggle[aria-pressed="true"] .nk-theme-toggle__icon--sun {
  display: none;
}
.nk-theme-toggle[aria-pressed="true"] .nk-theme-toggle__icon--moon {
  display: block;
}

/* Mobile area rail — always visible under the top bar on mobile only. */
.nk-arearail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0 var(--gutter) var(--space-3);
  scrollbar-width: none;
}
.nk-arearail::-webkit-scrollbar {
  display: none;
}
.nk-arearail a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-meta-min);
  text-decoration: none;
}
.nk-arearail a[aria-current="page"] {
  background: var(--cobalt);
  color: var(--on-cobalt-text);
}

/* Mobile hamburger panel */
.nk-mobile-panel {
  display: none;
  flex-direction: column;
  padding: var(--space-2) var(--gutter) var(--space-4);
  border-top: 1px solid var(--sky-soft);
}
.nk-header[data-panel-open="true"] .nk-mobile-panel {
  display: flex;
}
.nk-mobile-panel a {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--sky-soft);
}

/* Search panel — dropdown under the header, closed by default. */
.nk-searchpanel {
  display: none;
  border-top: 1px solid var(--sky-soft);
  background: var(--paper);
}
.nk-header[data-search-open="true"] .nk-searchpanel {
  display: block;
}
.nk-searchpanel__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  color: var(--ink-soft);
}
.nk-searchpanel__input {
  flex: 1;
  min-height: var(--touch-target);
  border: 0;
  background: transparent;
  font-size: var(--fs-input-min);
  color: var(--navy);
}
.nk-searchpanel__input:focus {
  outline: none;
}

@media (min-width: 768px) {
  .nk-nav {
    display: flex;
  }
  .nk-burger {
    display: none;
  }
  .nk-arearail {
    display: none;
  }
  .nk-mobile-panel {
    display: none !important;
  }
}

/* ---------- Newsletter / Instagram rail (template-parts/newsletter-rail.php) ---------- */
.nk-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-pad-min) var(--space-6);
  margin-block: var(--space-7);
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
}
.nk-rail__kicker {
  color: var(--cobalt);
  font-size: 13px;
  margin: 0 0 var(--space-1);
}
.nk-rail__title {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
}
.nk-rail__cta {
  flex: 0 0 auto;
}
.nk-rail__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--cobalt);
  color: var(--on-cobalt-text);
  font-weight: 700;
  text-decoration: none;
}
.nk-rail__cta:hover {
  background: var(--cobalt-deep);
  color: var(--on-cobalt-text);
}

/* ---------- Footer ---------- */
.nk-footer {
  background: var(--surface-dark);
  color: var(--on-dark);
  /* Extra bottom room on mobile: the guide's TOC is a position:fixed bottom sheet, and
     without this its collapsed handle sits on top of the last line of the footer. */
  padding-block: var(--space-9) calc(var(--space-9) + var(--touch-target));
  margin-top: var(--space-9);
}
@media (min-width: 1180px) {
  .nk-footer {
    padding-block: var(--space-9);
  }
}
.nk-footer .nk-wordmark {
  color: var(--on-dark);
}
.nk-ft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-block-end: var(--space-7);
}
.nk-ft-brand p {
  color: var(--on-dark-soft);
  max-width: 40ch;
  margin-block-start: var(--space-3);
}
.nk-ft-col__h {
  font-weight: 900;
  color: var(--on-dark);
  margin-block-end: var(--space-3);
}
.nk-ft-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nk-ft-col a {
  color: var(--on-dark-soft);
  text-decoration: none;
}
.nk-ft-col a:hover {
  color: var(--on-dark);
}
.nk-ft-credit {
  padding-block-start: var(--space-5);
  border-top: 1px solid rgba(247, 245, 238, .12);
  color: var(--on-dark-soft);
  font-size: var(--fs-meta-min);
}

@media (min-width: 768px) {
  .nk-ft-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

/* =========================================================================
   GUIDE TEMPLATE (template-parts/single/guide.php)
   ========================================================================= */

/* ---------- Header ---------- */
.nk-guide__head {
  padding-block: var(--space-7) var(--space-6);
}
.nk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta-min);
  color: var(--ink-soft);
  margin-block-end: var(--space-4);
}
.nk-crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.nk-crumbs a:hover {
  color: var(--cobalt);
}
.nk-guide__title {
  max-width: 18ch;
  margin-block-end: var(--space-4);
}
.nk-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-meta-min);
  color: var(--ink-soft);
}
.nk-byline__who {
  font-weight: 900;
  letter-spacing: var(--tracking-display-small);
  color: var(--navy);
}
.nk-byline__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Meta chips ---------- */
.nk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.nk-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--navy);
  font-size: var(--fs-meta-min);
  font-weight: 700;
}
/* The difficulty chip carries an explanatory tooltip — the dotted underline is what tells
   the reader it is there at all. */
.nk-chip__tip {
  border-block-end: 1px dotted currentColor;
  cursor: help;
}

/* ---------- Layout ---------- */
.nk-guide__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
.nk-guide__body {
  min-width: 0; /* lets wide children (tables, pre) scroll instead of stretching the grid */
  max-width: var(--measure-max);
}
.nk-guide__body > * {
  margin-block-end: var(--space-7);
}

/* ---------- Table of contents ----------
   Mobile: a bottom sheet, collapsed to a handle. Desktop (>=1180): a sticky rail in the
   inline-start column, which is where it sits in the DOM too — so the visual order and the
   keyboard order are the same at every width, in both directions. */
.nk-toc {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 90;
  background: var(--surface-card);
  border-start-start-radius: var(--radius-card-lg);
  border-start-end-radius: var(--radius-card-lg);
  box-shadow: 0 -6px 24px rgba(19, 31, 74, .12);
}
.nk-toc__handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  min-height: var(--touch-target);
  padding-inline: var(--gutter);
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 900;
  letter-spacing: var(--tracking-display-small);
  cursor: pointer;
}
.nk-toc__handle::after {
  content: "▲";
  font-size: 11px;
  transition: transform var(--duration-hover) var(--ease-standard);
}
.nk-toc[data-nk-open="true"] .nk-toc__handle::after {
  transform: rotate(180deg);
}
.nk-toc__h {
  display: none;
}
.nk-toc__nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-hover) var(--ease-standard);
}
.nk-toc[data-nk-open="true"] .nk-toc__nav {
  max-height: 55vh;
  overflow-y: auto;
}
.nk-toc__list {
  margin: 0;
  padding: 0 var(--gutter) var(--space-5);
  list-style: none;
  counter-reset: nk-toc;
}
.nk-toc__list li {
  counter-increment: nk-toc;
}
.nk-toc__list a {
  display: block;
  padding-block: var(--space-2);
  /* The marker rail sits on the inline-start (right in RTL), per the visual language. */
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--baby);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-meta-min);
}
.nk-toc__list a:hover {
  color: var(--cobalt);
}
.nk-toc__list a[aria-current="true"] {
  border-inline-start-color: var(--cobalt);
  color: var(--cobalt);
  font-weight: 700;
}

@media (min-width: 1180px) {
  .nk-guide__layout {
    grid-template-columns: 240px 1fr;
  }
  .nk-toc {
    position: sticky;
    top: 96px;
    inset-inline: auto;
    inset-block-end: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .nk-toc__handle {
    display: none;
  }
  .nk-toc__h {
    display: block;
    margin: 0 0 var(--space-3);
    font-weight: 900;
    letter-spacing: var(--tracking-display-small);
    color: var(--navy);
  }
  .nk-toc__nav {
    max-height: none;
    overflow: visible;
  }
  .nk-toc__list {
    padding: 0;
  }
}

/* ---------- Quick answer ----------
   The ONE card that gets a visible border (2.5px cobalt) — everything else on the site is
   borderless with a shadow. That is deliberate: it reads as "special". */
.nk-quick {
  border: 2.5px solid var(--cobalt);
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  padding: var(--card-pad-max);
}
.nk-quick__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}
.nk-quick__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
}
.nk-quick__copy {
  flex: 0 0 auto;
  min-height: 36px;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cobalt);
  /* Cobalt fill + white text: --on-cobalt-text never flips in dark mode, so this stays
     readable when the palette inverts. Do not swap it for --paper. */
  color: var(--on-cobalt-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.nk-quick__copy:hover {
  background: var(--cobalt-deep);
}
.nk-quick__copy.is-copied {
  background: var(--fresh);
}
.nk-quick__list {
  margin: 0;
  padding-inline-start: var(--space-5);
}
.nk-quick__list li + li {
  margin-block-start: var(--space-3);
}
.nk-quick__list li::marker {
  color: var(--cobalt);
}

/* ---------- Trust strip ---------- */
.nk-trust {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  border-inline-start: 3px solid var(--cobalt);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-min) var(--card-pad-max);
  font-size: var(--fs-meta-min);
  color: var(--ink-soft);
}
.nk-trust__row {
  margin: 0;
}
.nk-trust__row + .nk-trust__row {
  margin-block-start: var(--space-2);
}
.nk-trust__row strong {
  color: var(--navy);
}

/* ---------- Images ---------- */
.nk-hero,
.nk-inner,
.nk-step__fig {
  margin: 0;
}
.nk-hero img,
.nk-inner img,
.nk-step__fig img {
  inline-size: 100%;
  border-radius: 12px;
}
/* Ties the AI-generated images to the palette so they don't read as foreign stock. */
.nk-inner {
  padding: var(--space-3);
  background: var(--sky-soft);
  border-radius: var(--radius-card);
}
.nk-inner__cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-3);
  font-size: 13px;
  color: var(--ink-soft);
}
.nk-inner__ai {
  font-style: italic;
  opacity: .85;
}
.nk-pull {
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--yellow);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.35;
  color: var(--navy);
}
.nk-pull p {
  margin: 0;
}

/* ---------- Callout boxes ---------- */
.nk-box {
  border-radius: var(--radius-card);
  padding: var(--card-pad-min) var(--card-pad-max);
  border-inline-start: 4px solid var(--baby);
  background: var(--sky-soft);
}
.nk-box__h {
  margin: 0 0 var(--space-2);
  font-weight: 900;
  letter-spacing: var(--tracking-display-small);
  color: var(--navy);
}
.nk-box__body > :last-child {
  margin-block-end: 0;
}
.nk-box--tip {
  border-inline-start-color: var(--yellow);
}
.nk-box--know {
  border-inline-start-color: var(--cobalt);
}
/* Warnings and common-mistake boxes use the DARKENED alert for text/border — #E5484D does
   not clear contrast on a light ground, which is why --alert-text exists at all. */
.nk-box--warning,
.nk-box--mistake {
  border-inline-start-color: var(--alert-text);
}
.nk-box--warning .nk-box__h,
.nk-box--mistake .nk-box__h {
  color: var(--alert-text);
}

/* ---------- Toolbox ----------
   A dark block in BOTH themes, so it reads --surface-dark (which is a real dark surface in
   light mode and stays dark in dark mode) — never --navy, which is ink and inverts. */
.nk-toolbox {
  background: var(--surface-dark);
  border-radius: var(--radius-card-lg);
  padding: var(--card-pad-max);
  color: var(--on-dark);
}
.nk-toolbox__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.nk-toolbox__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--on-dark);
}
.nk-toolbox__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 28px;
  height: 28px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--yellow);
  /* Yellow fill needs DARK text. --navy is ink and flips to near-white in dark mode, which
     would put white on yellow — so this is the one re-scoped token CLAUDE.md calls out. */
  color: var(--on-light-navy);
  font-weight: 900;
  font-size: 13px;
}
.nk-toolbox__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.nk-toolbox__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.nk-toolbox__list li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--yellow);
  font-weight: 900;
}

/* ---------- Steps + work mode ---------- */
.nk-steps__h {
  margin-block-end: var(--space-5);
}
.nk-work {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  margin-block-end: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-dark);
  color: var(--on-dark);
}
.nk-work__bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(247, 245, 238, .18);
  overflow: hidden;
}
.nk-work__fill {
  display: block;
  block-size: 100%;
  background: var(--fresh);
  transition: inline-size var(--duration-hover) var(--ease-standard);
}
.nk-work__count {
  margin: 0;
  font-weight: 900;
  font-size: var(--fs-meta-min);
}
.nk-work__reset {
  min-height: 32px;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(247, 245, 238, .14);
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.nk-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}
.nk-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  transition: opacity var(--duration-hover) var(--ease-standard);
}
.nk-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px is the touch-target floor, and these are the primary tap targets of work mode. */
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  border: 0;
  border-radius: 50%;
  background: var(--cobalt);
  color: var(--on-cobalt-text);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-standard);
}
.nk-step__title {
  margin: 0 0 var(--space-2);
  font-size: 22px;
}
.nk-step__text > :last-child {
  margin-block-end: 0;
}
.nk-step__fig {
  margin-block-start: var(--space-4);
}
/* Done: the number goes green with a check, the whole card recedes. */
.nk-step[data-nk-done="true"] {
  opacity: .55;
}
.nk-step[data-nk-done="true"] .nk-step__num {
  background: var(--fresh);
}
.nk-step[data-nk-done="true"] .nk-step__num span {
  display: none;
}
.nk-step[data-nk-done="true"] .nk-step__num::after {
  content: "✓";
}

/* ---------- FAQ ----------
   Answers stay in the DOM at all times (SEO); collapsing is done with a grid-row trick
   rather than [hidden] so it animates without a layout jump. */
.nk-faq__h {
  margin-block-end: var(--space-5);
}
.nk-faq__item {
  border-block-end: 1px solid var(--sky-soft);
}
.nk-faq__qh {
  margin: 0;
  font-family: var(--font-body);
}
.nk-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  inline-size: 100%;
  min-height: var(--touch-target);
  padding-block: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: var(--tracking-display-small);
  font-size: 17px;
  text-align: start;
  cursor: pointer;
}
.nk-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--cobalt);
  font-size: 22px;
  line-height: 1;
}
.nk-faq__item[data-nk-open="true"] .nk-faq__q::after {
  content: "−";
}
.nk-faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-hover) var(--ease-standard);
}
.nk-faq__item[data-nk-open="false"] .nk-faq__a {
  grid-template-rows: 0fr;
}
.nk-faq__a > * {
  overflow: hidden;
  min-height: 0;
}
/* Collapsed answers stay in the DOM (SEO) but must leave the ACCESSIBILITY tree, or a
   screen-reader user hears every answer regardless of what they opened. visibility:hidden
   does both; the delay lets the row collapse finish before it blinks out. */
.nk-faq__item[data-nk-open="false"] .nk-faq__a > * {
  margin-block: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--duration-hover);
}
.nk-faq__item[data-nk-open="true"] .nk-faq__a > * {
  visibility: visible;
  transition: visibility 0s;
}
.nk-faq__a p {
  margin-block-start: 0;
  padding-block-end: var(--space-4);
  color: var(--ink-soft);
}

/* ---------- Sources ---------- */
.nk-sources {
  background: var(--sky-soft);
  border-radius: var(--radius-card);
  padding: var(--card-pad-min) var(--card-pad-max);
}
.nk-sources__h {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 22px;
}
.nk-sources__list {
  margin: 0;
  padding-inline-start: var(--space-5);
  font-size: var(--fs-meta-min);
}
.nk-sources__list li + li {
  margin-block-start: var(--space-2);
}

/* ---------- Related ---------- */
.nk-related__h {
  margin-block-end: var(--space-5);
}
.nk-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.nk-related__grid .card-title a {
  color: var(--navy);
  text-decoration: none;
}
@media (min-width: 680px) {
  .nk-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Ad slots ----------
   Only ever rendered when ads are switched on (they are paused site-wide right now). The
   min-height is set inline from the token so the space is reserved BEFORE the unit loads. */
.nk-ad {
  display: block;
  inline-size: 100%;
}
@media (max-width: 767px) {
  .nk-ad--inline {
    min-height: var(--ad-slot-mobile) !important;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nk-toc__nav,
  .nk-toc__handle::after,
  .nk-work__fill,
  .nk-faq__a,
  .nk-step {
    transition: none;
  }
}

/* =========================================================================
   FRONT PAGE (front-page.php)
   ========================================================================= */

.nk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero band ----------
   Flat --sky field with the one allowed hero gradient: a soft diagonal
   "wipe streak" (low-opacity white-on-blue, simulating a wiped surface). */
.nk-hero-band {
  position: relative;
  background: var(--sky);
  background-image: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 52%, transparent 64%);
  padding-block: var(--space-8) var(--space-9);
}
.nk-hero-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-block-end: var(--space-8);
}
.nk-hero-band__fig img {
  inline-size: 100%;
  border-radius: var(--radius-card-lg);
}
.nk-hero-band__kicker {
  display: inline-block;
  color: var(--cobalt-deep);
  text-decoration: none;
  margin-block-end: var(--space-3);
}
.nk-hero-band__title {
  margin: 0;
  color: var(--navy);
}

@media (min-width: 768px) {
  .nk-hero-band__inner {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ---------- Section head ---------- */
.nk-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}
.nk-sectionhead__title {
  margin: 0;
}
.nk-sectionhead__all {
  flex: 0 0 auto;
  color: var(--cobalt);
  font-weight: 700;
  font-size: var(--fs-meta-min);
  text-decoration: none;
  white-space: nowrap;
}
.nk-sectionhead__all:hover {
  color: var(--cobalt-deep);
}

/* ---------- Grids ---------- */
.nk-grid3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 680px) {
  .nk-grid3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .nk-grid3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nk-fp-section {
  padding-block: var(--space-8);
}

/* ---------- Foam divider ----------
   The one recurring section-transition motif (CLAUDE.md): a straight seam (the
   section's own background edge) plus a small centered cluster of circles in the
   NEXT section's color, sitting on the seam. Used at most twice per page. */
.nk-foam {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * var(--space-6));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nk-foam svg {
  inline-size: 200px;
  block-size: 40px;
}

/* =========================================================================
   ARCHIVE / TAG (archive.php, tag.php)
   ========================================================================= */
.nk-archive {
  padding-block: var(--space-7) var(--space-9);
}
.nk-archive__head {
  margin-block-end: var(--space-7);
}
.nk-archive__desc {
  max-width: var(--measure-max);
  color: var(--ink-soft);
  margin-block-start: var(--space-3);
}
.nk-archive__empty {
  color: var(--ink-soft);
  padding-block: var(--space-7);
}

/* Generic pill link — reused by search's zero-state area list and the 404 quick links. */
.nk-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-meta-min);
  text-decoration: none;
}
.nk-pill:hover {
  background: var(--baby);
}

/* =========================================================================
   SEARCH (search.php)
   ========================================================================= */
.nk-search {
  padding-block: var(--space-7) var(--space-9);
}
.nk-search__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}
.nk-search__form input[type="search"] {
  flex: 1 1 240px;
  min-height: var(--touch-target);
  min-width: 0;
  padding-inline: var(--space-4);
  border: 1px solid var(--baby);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--navy);
  font-size: var(--fs-input-min);
}
.nk-search__field select {
  min-height: var(--touch-target);
  padding-inline: var(--space-3);
  border: 1px solid var(--baby);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--navy);
  font-size: var(--fs-meta-min);
}
.nk-search__count {
  margin: 0 0 var(--space-6);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}
.nk-search__count b {
  color: var(--navy);
}
.nk-search__zero {
  padding-block: var(--space-6);
}
.nk-search__suggest {
  font-weight: 700;
}
.nk-search__suggest a {
  color: var(--cobalt);
}
.nk-search__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

/* =========================================================================
   404 (404.php)
   ========================================================================= */
.nk-404 {
  padding-block: var(--space-9);
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
}
.nk-404__bubble {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-5);
}
.nk-404__num {
  color: var(--baby);
  font-size: 72px;
  margin: 0;
  line-height: 1;
}
.nk-404__title {
  margin-block: var(--space-3) var(--space-3);
}
.nk-404__lede {
  color: var(--ink-soft);
  margin-block-end: var(--space-6);
}
.nk-404__form {
  display: flex;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}
.nk-404__form input[type="search"] {
  flex: 1;
  min-height: var(--touch-target);
  min-width: 0;
  padding-inline: var(--space-4);
  border: 1px solid var(--baby);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--navy);
  font-size: var(--fs-input-min);
}
.nk-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* =========================================================================
   PRODUCT TEST — comparison table (template-parts/single/product-test.php)
   ========================================================================= */
.nk-scores__h {
  margin: 0 0 var(--space-4);
}
.nk-scores__scroll {
  overflow-x: auto; /* wide tables scroll inside their own container, never the page */
}
.nk-scores__table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.nk-scores__table th,
.nk-scores__table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-block-end: 1px solid var(--sky-soft);
}
.nk-scores__table th {
  background: var(--sky-soft);
  font-weight: 900;
  font-size: var(--fs-meta-min);
}
.nk-scores__table tbody tr:nth-child(even) {
  background: var(--sky-soft);
}
.nk-scores__table tbody tr:last-child td {
  border-block-end: 0;
}

/* =========================================================================
   LISTICLE — numbered items (template-parts/single/listicle.php)
   ========================================================================= */
.nk-list__h {
  margin-block-end: var(--space-5);
}
.nk-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}
.nk-listitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}
.nk-listitem__num {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  border-radius: 50%;
  background: var(--cobalt);
  color: var(--on-cobalt-text);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 18px;
}
.nk-listitem__title {
  margin: 0 0 var(--space-2);
  font-size: 22px;
}
.nk-listitem__text > :last-child {
  margin-block-end: 0;
}
.nk-listitem__fig {
  margin-block-start: var(--space-4);
}
.nk-listitem__fig img {
  inline-size: 100%;
  border-radius: 12px;
}