/*
Theme Name: NX Core — Hebrew RTL Newsroom
Description: מנוע חדשות כללי בעברית — core + מותג לפי אתר (skin/).
Version: 4.6.4
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain:      nx
*/

:root {
  /* --- Base surfaces --- */
  --bg: #09090d;
  --bg-plate: #090a10;
  --surface: #111118;
  --surface-2: #181822;
  --surface-3: #222230;
  --media-plate: #000;
  --border: var(--tint-007);
  --border-focus: color-mix(in srgb, var(--color-accent) 55%, transparent);

  /* --- Text ramp --- */
  --white: #ffffff;
  --text: #f4f5f8;
  --text-2: #e2e8f0;
  --text-4: #d7dae2;
  --text-6: #cbd5e1;
  --soft: #c0c5d2;
  --muted: #8e94a5;

  /* --- Accent ramp — derived from the skin's --color-accent, not from a hue.
         Rebranding is one value in skin/tokens.css. --- */
  --accent-deep-1: color-mix(in srgb, var(--color-accent) 18%, #0b0a14);
  --accent-deep-2: color-mix(in srgb, var(--color-accent) 62%, #0b0a14);
  --accent-700:    color-mix(in srgb, var(--color-accent) 70%, #0b0a14);
  --accent-600:    color-mix(in srgb, var(--color-accent) 85%, #0b0a14);
  --accent:        var(--color-accent);
  --accent-400:    color-mix(in srgb, var(--color-accent) 78%, #ffffff);
  --accent-2:      var(--color-accent-2, color-mix(in srgb, var(--color-accent) 70%, #ffffff));
  --accent-300:    color-mix(in srgb, var(--color-accent) 55%, #ffffff);
  --accent-200:    color-mix(in srgb, var(--color-accent) 35%, #ffffff);
  --accent-100:    color-mix(in srgb, var(--color-accent) 18%, #ffffff);
  --accent-soft:   color-mix(in srgb, var(--color-accent) 14%, transparent);
  --on-accent: #0b0b0f;

  /* --- Semantic --- */
  --green: #22c55e;
  --green-400: #4ade80;
  --green-300: #34d399;
  --green-600: #16a34a;
  --orange: #f97316;
  --orange-400: #fb923c;
  --blue-400: #60a5fa;
  --red-600: #dc2626;
  --red-400: #f87171;
  --red-300: #fb7185;
  --whatsapp: #25d366;

  --radius: 14px;
  --font-site: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-site);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--white); }

img { max-width: 100%; height: auto; }

/* Form controls do not inherit the page font by default, which is how raw Arial
   buttons kept appearing inside the cards. Font-family only — components still
   control their own size and weight. */
button, input, select, textarea { font-family: inherit; }

.container {
  --nx-layout-gutter: clamp(16px, 3vw, 44px);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--nx-layout-gutter);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--accent);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 8px;
}
.skip-link:focus { inset-inline-start: 8px; color: var(--white); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  width: 100%;
  background: var(--plate-086);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.site-header .container.header-inner {
  max-width: none;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-start {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex: none;
  text-decoration: none;
}
.brand:hover { color: var(--white); }

.brand-text {
  background: linear-gradient(135deg, var(--white) 40%, var(--accent-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Channel navigation: stories strip + sidebar list ---------- */
/* Reading pages: sticky channel strip under the header. Desktop feed pages
   use the sidebar channel list instead; mobile compacts this into a menu. */
.ch-strip-wrap {
  position: sticky;
  top: 60px;
  z-index: 99;
  background: var(--plate-088);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.ch-strip {
  display: flex;
  gap: 14px;
  padding: 10px clamp(16px, 3vw, 44px) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.ch-strip::-webkit-scrollbar { display: none; }

.ch-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  flex: none;
  text-decoration: none;
}
.ch-story-ring {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 2.5px;
  border-radius: 50%;
  background: var(--tint-014);
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 180ms ease, box-shadow 180ms ease;
}
.ch-story:hover .ch-story-ring { transform: translateY(-2px) scale(1.04); }
/* Unseen updates — glowing ring, set by js/channels.js from localStorage */
.ch-story.has-new .ch-story-ring {
  background: linear-gradient(135deg, var(--ch), var(--accent-2));
  box-shadow: 0 0 14px -4px var(--ch);
  animation: ringPulse 2.4s ease-in-out infinite;
}
.ch-story.is-active .ch-story-ring {
  background: var(--ch);
  box-shadow: 0 0 12px -3px var(--ch);
}
.ch-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--surface-2);
  color: var(--ch);
}
.ch-avatar .i { width: 21px; height: 21px; }
.ch-story-name {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--muted);
}
.ch-story.is-active .ch-story-name { color: var(--white); font-weight: 700; }

/* Compact mobile channel menu: horizontal RTL links, icon on the right.
   The links themselves are native anchors, so touch and keyboard behavior
   remain intact; the scroller only constrains horizontal navigation. */
@media (max-width: 768px) {
  .ch-strip-wrap { top: 60px; }
  .ch-strip {
    gap: 4px;
    min-height: 44px;
    padding: 4px 10px;
    scroll-snap-type: none;
    scroll-padding-inline: 10px;
  }
  .ch-story {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    width: auto;
    min-width: max-content;
    max-width: 145px;
    height: 36px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    scroll-snap-align: start;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .ch-story:hover,
  .ch-story:focus-visible {
    background: var(--tint-005);
    border-color: var(--border);
  }
  .ch-story:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
  }
  .ch-story.is-active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--ch) 34%, transparent);
  }
  .ch-story-ring {
    width: 28px;
    height: 28px;
    padding: 2px;
    flex: none;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ch) 18%, var(--surface-2));
  }
  .ch-story:hover .ch-story-ring { transform: none; }
  .ch-avatar {
    border: 0;
    border-radius: 7px;
  }
  .ch-avatar .i { width: 16px; height: 16px; }
  .ch-story-name {
    max-width: 102px;
    color: var(--soft);
    font-size: 12px;
    line-height: 1;
  }
  .ch-story.is-active .ch-story-name { color: var(--white); }
}

/* Desktop sidebar channel list (the platform-style rail) */
.ch-list { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }
.ch-row {
  height: 34px;
  padding-inline: 10px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--soft);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ch-row:hover {
  background: var(--tint-005);
  color: var(--white);
  transform: translateX(-2px);
}
.ch-row.is-active {
  background: var(--accent-soft);
  color: var(--white);
  font-weight: 700;
}
.ch-row-mark {
  display: flex;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ch);
}
.ch-row-mark .i { width: 16px; height: 16px; }
.ch-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-row-new {
  display: none;
  flex: none;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 13%, transparent);
  color: var(--accent-2);
  font: 700 10px/1.35 var(--font-data, sans-serif);
  white-space: nowrap;
}
.ch-row.has-new .ch-row-new { display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .ch-row.has-new .ch-row-new { animation: pulseGlow 2.2s infinite ease-in-out; }
}
/* Group rhythm: the separator and its heading together must read as one
   block, not as a hole in the list. Tight margins keep the rail scannable
   while still marking where one group ends. */
.ch-row-sep { height: 1px; margin: 7px 8px 5px; background: var(--border); }
.ch-group {
  margin: 0 0 2px;
  padding-inline: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* A long group (82 companies) must not become a 3000px scroll: the tail is
   rendered but folded away, and a filter box reaches every entry by name. */
.ch-row.is-collapsed { display: none; }
.ch-row[hidden] { display: none; }

.ch-filter {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2px 0 6px;
}
.ch-filter .search-icon {
  position: absolute;
  inset-inline-start: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--muted);
  pointer-events: none;
}
.ch-filter-input {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--tint-007);
  background: var(--tint-0035);
  color: var(--white);
  font-family: inherit;
  font-size: 12px;
  padding-inline: 28px 30px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ch-filter-input::placeholder { color: var(--muted); }
.ch-filter-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: var(--tint-006);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 13%, transparent);
}
.ch-filter-input::-webkit-search-cancel-button { filter: invert(0.6); }

.ch-more,
.ch-less {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  margin-top: 2px;
  padding-inline: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.ch-more:hover,
.ch-less:hover {
  background: var(--tint-005);
  color: var(--white);
}
.ch-more::after,
.ch-less::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
  transition: rotate 180ms ease;
}
.ch-more::after { rotate: 135deg; }
.ch-less::after { rotate: 225deg; }

.ch-empty {
  margin: 4px 0 2px;
  padding-inline: 10px;
  font-size: 12px;
  color: var(--muted);
}
.ch-empty[hidden] { display: none; }

/* Swipe between channel feeds (js/channels.js — RTL: right drag = next feed).
   The sheet follows the finger (JS inline styles), then either springs back or
   slides fully out (JS inline); the next feed slides in via html.ns-slide-*,
   stamped before first paint by an inline script in header.php. */
html.ns-slide-next #main { animation: nsEnterNext 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards; /* releases after run: inline follow() must win */ }
html.ns-slide-prev #main { animation: nsEnterPrev 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
/* App owns horizontal drags inside content: kills the first-scroll race where the
   browser latches a native scroll and ignores our preventDefault (WebKit). Vertical
   pan + pinch-zoom stay native. .ch-strip lives OUTSIDE #main -> unaffected. */
#main { touch-action: pan-y pinch-zoom; }
/* Translating #main must never grow the document scroll area: in RTL the leftward
   overflow is scrollable, so the whole page (header+strip) panned under the finger =
   the site "danced". Clip it — .ch-strip keeps its own inner scroller. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* Stop the sticky bars re-blurring #main on every drag frame (frame drops). */
body.ns-dragging .site-header,
body.ns-dragging .ch-strip-wrap { backdrop-filter: none; -webkit-backdrop-filter: none; }

@keyframes nsEnterNext {
  from { transform: translateX(-14%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes nsEnterPrev {
  from { transform: translateX(14%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Desktop parity: a mouse drag owns the sheet the way a touch does — no text
   selection while dragging, grabbing cursor, same spring/commit logic. */
body.ns-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.ns-dragging #main { cursor: grabbing; }

/* Strip = the mobile channel switcher (bubbles); the sidebar channel list is
   desktop-only and hidden on mobile. On desktop the strip is hidden everywhere —
   channels are navigated from the rail. */
@media (max-width: 1100px) {
  .ch-list-widget { display: none; }
}
@media (min-width: 1101px) {
  .ch-strip-wrap { display: none; }
}
@media (max-width: 782px) {
  .ch-strip-wrap { top: 60px; }
}

.header-end {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  flex: none;
}

/* Search: inline on wide screens. On phones it collapses into a button that opens
   the field as a panel under the header (rules in the max-width:680px block). */
.search-toggle { display: none; }
.header-search { display: contents; }

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px;
  transition: width 200ms ease;
}
.search-form .search-icon {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.search-form input[type="search"] {
  width: 100%;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--tint-008);
  background: var(--tint-004);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  padding-inline: 34px 38px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.search-form input[type="search"]::placeholder { color: var(--muted); }
.search-form input[type="search"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: var(--tint-007);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}


/* ---------- Feed toolbar & Segmented Filter Tabs ---------- */

.feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.feed-toolbar-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tint-003);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 12px;
}

.feed-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: all 160ms ease;
}
.feed-tab .tab-icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.feed-tab:hover {
  color: var(--white);
  background: var(--tint-005);
}
.feed-tab.is-active {
  color: var(--white);
  background: var(--surface-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--tint-008);
}
.feed-tab.is-active .tab-icon {
  color: var(--accent-300);
}


/* ---------- Layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: var(--nx-layout-gutter);
  align-items: start;
  margin-top: 4px;
}

/* RTL grid tracks run right-to-left: track 1 = channels rail (right edge),
   track 2 = feed (center), track 3 = social/widgets rail (left edge) — the
   platform dashboard: navigation right, conversation + games left. */
/* The primary channels rail owns the far-right track for the full layout.
   The content area occupies tracks 2-3: the feed and secondary rail form the
   historical 70/30 split on row 2. */
.main-column { grid-column: 2; grid-row: 2; min-width: 0; }
/* The homepage "today" component sits on row 1 across the content tracks
   (feed + secondary rail), beside the channels rail which spans both rows. */
.layout > #view { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
/* TODAY and the feed/sidebar share one column, so drop the gutter between them. */
/* Breathing room between TODAY and the feed/sidebar below it. */
.layout:has(> #view) { row-gap: clamp(20px, 3.4vw, 40px); }
/* Reserve TODAY's rendered height before its script fills #view, so the feed
   below does not jump when the component appears (CLS). */
.layout > #view { min-height: clamp(564px, 79.2vh, 984px); }
@media (max-width: 1100px) { .layout > #view { min-height: clamp(552px, 81.6vh, 768px); } }
.rail-right  { grid-column: 1; grid-row: 1 / span 2; }
.rail-left   { grid-column: 3; grid-row: 2; }

/* Archive pages (category / entity): the title block is the first row across
   the content tracks, so the feed and the left rail start on the same line
   below it, like the homepage. The channels rail keeps its full height. */
.layout > .feed-head { grid-column: 2 / 4; grid-row: 1; min-width: 0; margin-bottom: 4px; }
/* Archive header (channel/entity/search): one tight unit — breadcrumb, title, note. */
.feed-head { gap: 8px; }
.feed-head > .reading-breadcrumbs { margin-bottom: 0; }
.feed-head > .feed-title { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.feed-head > .feed-note { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.layout:has(> .feed-head) > .main-column { grid-row: 2; }
.layout:has(> .feed-head) > .rail-left  { grid-row: 2; }

/* Sticky rails keep the social-dashboard chrome in view while the feed
   scrolls; overflow is scrollable but the scrollbar stays invisible. */
.rail-right,
.rail-left {
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  scrollbar-width: none;
}
.rail-right::-webkit-scrollbar,
.rail-left::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- Feed cards ---------- */

.feed { padding-block: 4px 40px; }

/* ---------- Feed Continuation (single.php) ---------- */
.feed-continue { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }
.feed-continue-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
.feed-continue-title { margin: 0; font-size: 19px; font-weight: 800; color: var(--white); display: inline-flex; align-items: center; gap: 10px; }
.feed-continue-more { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; transition: color 140ms ease; }
.feed-continue-more:hover { color: var(--accent-2); text-decoration: underline; }

/* .card-social is the single card source of truth (card.php). The legacy .card rule
   was fully overridden by it and has been removed; the hover lives with the card
   definition below — this is the ONLY .card-social:hover rule in the file. */
.card-social:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}


/* ---------- Social Post Cards ---------- */

.card-social {
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-08) 100%);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 15px 18px 11px;
  margin-top: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), inset 0 1px 0 var(--tint-0025);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   DOPAMINE DESIGN SYSTEM — Plaktiv / FOMO UX
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography: Quiet hierarchy ─────────────────────────────── */
.social-timestamp { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ── Engagement: subtle counts, color only on hover ──────────── */
.action-count { font-size: 12.5px; font-weight: 600; color: var(--soft); transition: color 160ms ease; }
.action-likes:hover { color: var(--green); }
.action-comments:hover { color: var(--accent); }
.action-views:hover { color: var(--accent-2); }

/* ── Micro-interactions: restrained feedback ─────────────────── */
.social-more-toggle:hover { color: var(--accent); }
.social-action-btn:hover { color: var(--accent); }
.feed-tab:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── Card depth: Premium feel ────────────────────────────────── */
.card-social:hover .social-thumbnail {
  transform: scale(1.02);
}

/* ── Engagement bar separator ───────────────────────────────── */
.social-actions-bar {
  border-top: 1px solid var(--border);
  transition: border-color 180ms ease;
}
.card-social:hover .social-actions-bar {
  border-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* ── Mobile: compact but still touch-friendly ─────────────────
   Only rules whose base sits ABOVE this block survive here; everything whose
   base is defined later lives in the trailing mobile block at the file end. */
@media (max-width: 768px) {
  .card-social {
    padding: 13px 14px 9px;
    border-radius: 12px;
  }
  .feed-tab { min-height: 42px; padding: 10px 16px; }
}

/* ── Micro-animation: Card entrance ──────────────────────────── */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-social {
  animation: card-enter 220ms ease-out backwards;
}

/* Social Header */
.social-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.social-header-meta { margin-bottom: 7px; }
.social-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  min-width: 0;
}
.social-meta-term {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--term) 35%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--term) 9%, transparent);
  color: var(--term);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.social-meta-term:hover { color: var(--term); border-color: color-mix(in srgb, var(--term) 65%, transparent); }
.social-meta-separator { color: var(--muted); font-size: 11px; }
/* Term-driven avatar colors (any channel taxonomy; --term set per card). */
.social-avatar.has-term {
  background: color-mix(in srgb, var(--term) 15%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--term) 40%, transparent);
  color: var(--term);
}

.social-timestamp {
  font-size: 11px;
  color: var(--muted);
}


/* Social Body */
.social-body {
  margin-bottom: 9px;
}
.social-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.28;
}
.social-title a {
  color: var(--white);
  text-decoration: none;
  transition: color 140ms ease;
}
.social-title a:hover {
  color: var(--accent);
}
.social-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-4);
}
/* Rich body text — the post's own formatting (bold, links, lists, quotes),
   lightly retuned for the card. The preview is trimmed at a word budget by
   nx_card_text(); no line-clamp — copy is never cut invisibly mid-line. */
.social-text p { margin: 0 0 7px; }
.social-text p:last-child { margin-bottom: 0; }
.social-text strong, .social-text b { color: var(--text); font-weight: 700; }
.social-text a {
  color: var(--accent-200);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-200) 45%, transparent);
  text-underline-offset: 2px;
}
.social-text a:hover { color: var(--accent-2); text-decoration-color: currentColor; }
.social-text ul, .social-text ol { margin: 0 0 9px; padding-inline-start: 1.35em; }
.social-text li { margin: 3px 0; }
.social-text li::marker { color: var(--muted); }
.social-text blockquote {
  margin: 0 0 9px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--border);
  color: var(--soft);
}
.social-text h2, .social-text h3, .social-text h4, .social-text h5, .social-text h6 {
  margin: 2px 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.social-text code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--tint-006);
  font-size: 0.92em;
}
/* Inline "עוד / פחות" toggle. Unstyled it falls back to the browser's grey button. */
.social-more-toggle {
  margin-inline-start: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-200);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
.social-more-toggle:hover { color: var(--white); }

/* ── Comment composer & show/hide toggle ──────────────────────────────────────
   These shipped with no CSS at all, so the browser rendered raw grey buttons and
   the avatar stretched to full width. They are styled here to match the card. */
.social-comment-composer {
  /* Flat row — the boxed frame around the composer doubled up with the input
     pill and read as a box around the comments; only the pill is a container. */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.composer-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-600), var(--accent-400));
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.composer-placeholder {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--tint-0045);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.composer-placeholder:hover { background: var(--tint-008); color: var(--text-6); }

.social-toggle-comments {
  /* Text link, not a full-width boxed bar — one action doesn't need a container. */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 8px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--accent-200);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: color 160ms ease;
}
.social-toggle-comments:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Only one label may show. Driven by the aria-expanded the script already sets. */
.toggle-collapse { display: none; }
.social-toggle-comments[aria-expanded="true"] .toggle-expand { display: none; }
.social-toggle-comments[aria-expanded="true"] .toggle-collapse { display: inline; }
.vote-count { font-family: inherit; }

/* Social Media (Embed or Image) */
.social-media-wrap {
  margin: 10px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-plate);
}
.social-thumbnail-link:hover .social-thumbnail {
  transform: scale(1.03);
}

.social-embed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--media-plate);
}
.social-embed-frame iframe,
.social-embed-frame video,
.social-embed-frame lite-youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Vertical Shorts: frame 9:16, centred, capped so it stays a phone-shaped card. */
.social-embed-frame.nx-embed-video--shorts {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
/* TikTok facade keeps the official embed/v2 ratio so the click swap is seamless. */
.social-embed-frame.nx-embed-video--tiktok {
  aspect-ratio: 666 / 739;
}
/* Generic provider embeds (oEmbed safety net) — plain blocks, kept inside the box. */
.nx-social-embed--generic {
  display: block;
  text-align: center;
}
.nx-social-embed--generic > *:first-child {
  margin-top: 0;
}
.nx-social-embed--generic iframe {
  max-width: 100% !important;
  border: 0;
}
.social-embed-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-has-embed {
  border-color: var(--tint-006);
}

/* ── Inline social embeds (post body) ─────────────────────────────────────────
   Bare URL lines in the content become rich embeds (core/embeds.php). The
   blockquote forms are the no-JS fallback; platform scripts turn them into live
   cards. No link previews: anything without a reliable embed stays plain text. */
.nx-embed-hero { margin-bottom: 8px; }
.nx-social-embed { margin: 28px 0; display: flex; justify-content: center; }
.nx-social-embed blockquote { margin: 0; padding: 0; border: 0; background: none; }
.nx-social-embed iframe, .nx-social-embed twitter-widget, .nx-social-embed blockquote { max-width: 100% !important; }
.nx-social-embed--x, .nx-social-embed--x blockquote { max-width: 550px; width: 100%; margin-left: auto; margin-right: auto; }
.reading-content .nx-embed-video { margin: 28px 0; border-radius: 16px; overflow: hidden; }

@media (max-width: 560px) {
  .nx-social-embed--x, .nx-social-embed--x blockquote { max-width: 100%; }
}

/* Social Actions Bar */
.social-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}
.social-actions-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.social-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms ease;
  /* the vote controls are <button>, not <a>: strip UA chrome so they match the anchors */
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.social-action-btn svg { width: 15px; height: 15px; opacity: 0.85; }
.social-action-btn:hover {
  color: var(--accent);
}
.action-likes:hover { color: var(--green-300); }
.action-likes.is-voted, .action-likes.is-voted svg { color: var(--green-300); }
.action-dislikes.is-voted, .action-dislikes.is-voted svg { color: var(--red-400); }
.action-comments:hover { color: var(--blue-400); }
.action-views:hover { color: var(--accent-300); }

.social-actions-right {
  display: flex;
  align-items: center;
}
.social-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 11px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: var(--accent-300);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 160ms ease;
  white-space: nowrap;
}
.social-read-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Social Comments Thread Preview */
.social-comments-thread {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comments-list-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Collapse contract. The script already tags rows past the preview limit with
   `.is-hidden` and flips `.is-expanded` on the thread — but neither class had a
   single CSS rule, so every comment rendered at once and the "show more" button
   changed only its own label. */
.social-comment-row.is-hidden { display: none; }
.social-comments-thread.is-expanded .social-comment-row.is-hidden { display: flex; }
.comment-mini-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-bubble {
  /* flat — no per-comment box, just text flow */
}
.comment-bubble-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 0;
}
.comment-bubble-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.comment-bubble-time {
  font-size: 10.5px;
  color: var(--muted);
}
.comment-bubble-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-6);
  margin: 0;
  word-break: break-word;
}

.social-quick-reply-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease;
  margin-inline-start: auto;
}
.social-quick-reply-prompt:hover {
  color: var(--accent);
}

.social-no-comments {
  padding: 4px 0;
}
.social-first-comment-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease;
}
.social-first-comment-link:hover {
  color: var(--accent);
}
/* Reply action row */
.comment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline-start: 1px;
  margin-top: 3px;
}
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 6px;
  transition: all 140ms ease;
}
.comment-reply-btn:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.comment-reply-btn svg {
  flex: none;
}
.comment-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}
/* Reactions sit with the reply action instead of being flung to the far edge —
   the auto margin left a 514px void mid-row on desktop and 192px on mobile. */
.comment-vote-like {
  margin-inline-start: 6px;
}
.comment-vote-btn svg {
  flex: none;
}
.comment-vote-btn:hover {
  color: var(--white);
  background: var(--tint-006);
}
.comment-vote-like.is-voted {
  color: var(--green-300);
  background: rgba(52, 211, 153, 0.12);
}
.comment-vote-dislike.is-voted {
  color: var(--red-300);
  background: rgba(251, 113, 133, 0.12);
}

/* Threaded replies (indented under parent, with connector) */
.social-comment-row.is-reply {
  margin-inline-start: 22px;
  position: relative;
}
.social-comment-row.is-reply::before {
  content: '';
  position: absolute;
  inset-inline-start: -13px;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: 2px;
}
.social-comment-row.is-reply .comment-mini-avatar {
  width: 20px;
  height: 20px;
  font-size: 10px;
}


/* Inline reply & comment forms (toggled via .is-open) */
.inline-reply-form,
.inline-comment-form {
  display: none;
  margin-top: 8px;
}
.inline-reply-form.is-open,
.inline-comment-form.is-open {
  display: block;
}
.reply-context {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.reply-context strong {
  color: var(--accent-300);
  font-weight: 600;
}
.inline-reply-form textarea,
.inline-comment-form textarea {
  width: 100%;
  background: var(--tint-004);
  border: 1px solid var(--tint-008);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  min-height: 48px;
  transition: border-color 140ms ease;
  box-sizing: border-box;
}
.inline-reply-form textarea:focus,
.inline-comment-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.reply-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.btn-submit-inline {
  background: var(--accent);
  border: none;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease;
}
.btn-submit-inline:hover { background: var(--accent-400); }
.btn-submit-inline:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-cancel-reply {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px 8px;
  transition: color 140ms ease;
}
.btn-cancel-reply:hover { color: var(--white); }

/* Toast notifications */
.comment-toast {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
.comment-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Sidebar ---------- */

.sidebar { padding-block: 4px 40px; }

/* Minimal database-managed secondary rail. Content stays editable in
   Appearance → Widgets; this layer supplies the card treatment. It is the
   single owner of the frame, so a widget must not draw one of its own. */
.rail-left .ad-slot { width: 100%; }
.rail-left .widget {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.rail-left .widget + .widget { margin-top: 14px; }
.rail-left .widget-title {
  margin: 0;
  color: var(--soft);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}
.rail-left .widget-content > :first-child { margin-top: 0; }
.rail-left .widget-content > :last-child { margin-bottom: 0; }

/* Ad slot — the left rail is a labelled demo block for now; whatever fills the
   rail later is CONTENT and lives in the database, never in code. */
.ad-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  min-height: 250px;
  margin-inline: auto;
  padding: 24px 20px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  text-align: center;
}

/* Brand + search live at the top of the channel rail on desktop — wherever a
   rail exists the 60px header bar is redundant and hidden (nx-has-rails — a server
   body class, true from the first byte — never flashes the bar mid-parse).
   Below 1101px the header bar carries them. */
.rail-brand { display: none; }

@media (min-width: 1101px) {
  .rail-brand {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .rail-brand .brand { font-size: 22px; }
  .rail-brand .search-form { width: 100%; margin-top: 12px; }
  body.nx-has-rails .site-header { display: none; }
  body.nx-has-rails .rail-right,
  body.nx-has-rails .rail-left { top: 16px; max-height: calc(100dvh - 32px); }
}

/* ---------- Generic page / single ---------- */

/* No footer: the page wrap no longer reserves space under the content. */
.page-wrap { padding-block: 28px 0; }

.entry-header h1 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 6px 0 10px;
}
.entry-meta { color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.featured-media {
  margin: 22px 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  max-height: 500px;
  width: 100%;
}
.featured-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.entry-content { max-width: 760px; font-size: 16.5px; color: var(--text-4); }
/* Bare oEmbed iframes (YouTube etc.) keep their width/height attributes in the
   content HTML, so they render at the provider's 560px default. Stretch them to
   the column and let aspect-ratio supply the height. */
.entry-content iframe,
.reading-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  margin: 28px 0;
}
.entry-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.entry-content p { margin: 0 0 18px; }
.entry-content h2 { font-size: 24px; font-weight: 700; margin: 34px 0 14px; color: var(--white); letter-spacing: 0; }
.entry-content h3 { font-size: 19px; font-weight: 700; margin: 26px 0 10px; color: var(--white); }
.entry-content a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-inline-start: 24px; margin: 0 0 18px; }
.entry-content li { margin-bottom: 8px; }
.entry-content blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  border-inline-start: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 12px;
  color: var(--soft);
}

.archive-count { color: var(--muted); font-size: 14px; margin: 0 0 6px; }

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  color: var(--soft);
  margin-top: 16px;
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 26px 0 8px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--soft);
  font-size: 14px;
}
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--white); }
.pagination .page-numbers:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); color: var(--white); }

/* Responsive safety */
.main-column, .feed, .sidebar { min-width: 0; }
button:disabled { cursor: default; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Phone "more" menu: hidden everywhere by default; the phone block below shows it. */
.more-wrap, .more-menu { display: none; }
/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  /* Mid desktop: the channels rail stays beside the feed; the widgets rail
     becomes a responsive band under the feed. */
  .layout { grid-template-columns: 260px minmax(0, 1fr); }
  .layout > #view { grid-column: 2; grid-row: 1; }
  .main-column { grid-column: 2; grid-row: 2; }
  .rail-right  { grid-column: 1; grid-row: 1 / span 2; }
  .rail-left {
    grid-column: 1 / -1;
    grid-row: 3;
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
  }
}

@media (max-width: 1100px) {
  /* Phone/tablet: the stories strip (visible below 1101px) is the channel
     switcher, so the channel rail is removed entirely — no empty stub. */
  .layout { grid-template-columns: 1fr; }
  .layout > #view { grid-column: 1; grid-row: 1; }
  .main-column { grid-column: 1; grid-row: 2; }
  .rail-left { grid-column: 1; grid-row: 3; }
  .rail-right { display: none; }
  .sidebar { padding-top: 8px; }
}

@media (max-width: 860px) {
  .search-form { width: 180px; }
}

@media (max-width: 680px) {
  .search-form { width: min(210px, calc(100vw - 190px)); }
  .search-form input[type="search"] { font-size: 16px; }
  .header-start { gap: 12px; }

  /* Phones: search collapses to a magnifier button; the field opens as a panel below the bar. */
  .search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; flex: none;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); cursor: pointer;
  }
  .search-toggle svg { width: 15px; height: 15px; }
  .search-toggle:hover { border-color: var(--rule-2); }
  .search-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .search-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
  .header-search {
    display: none;
    position: absolute; top: 100%; inset-inline: 0;
    padding: 10px var(--nx-layout-gutter) 12px;
    background: var(--plate-088); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
  .search-toggle[aria-expanded="true"] + .header-search { display: block; }
  .header-search .search-form { width: 100%; }
  .site-header .container.header-inner { position: relative; }

  /* Phones: "more" menu (three vertical dots). Opens a panel of extra links under the bar. */
  .more-wrap { position: relative; display: inline-flex; flex: none; }
  .more-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; flex: none;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); cursor: pointer;
  }
  .more-toggle svg { width: 16px; height: 16px; }
  .more-toggle:hover { border-color: var(--rule-2); }
  .more-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .more-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
  .more-menu {
    display: none;
    position: absolute; top: 100%; inset-inline-end: var(--nx-layout-gutter);
    min-width: 160px; margin: 6px 0 0; padding: 6px;
    list-style: none;
    background: var(--plate-088); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
  .more-toggle[aria-expanded="true"] + .more-menu { display: block; }
  .more-menu a {
    display: block; padding: 9px 12px; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.4;
  }
  .more-menu a:hover, .more-menu a:focus-visible { background: var(--tint-005); outline: none; }

  /* The channel rail's legal links are not shown on phones; they live in the "more" menu. */
  .rail-legal { display: none; }
}

@media (max-width: 440px) {
  .brand { font-size: 17px; }
}

/* ---------- Reading (single article) ---------- */

.reading-progress-bar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 60%, transparent);
  z-index: 999;
  transition: width 80ms ease-out;
}

/* Reading measure: the article sits in the layout's main track; cap it so the
   line length stays readable when that track runs wide (e.g. the 1200px grid). */
.reading-article { max-width: 780px; }

.reading-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb-item {
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease;
}
.breadcrumb-item:hover { color: var(--white); }
.breadcrumb-separator { opacity: 0.35; user-select: none; }
.breadcrumb-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.breadcrumb-badge.has-term {
  background: color-mix(in srgb, var(--term) 14%, transparent);
  color: var(--term);
  border: 1px solid color-mix(in srgb, var(--term) 30%, transparent);
}
.breadcrumb-badge.no-term {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.reading-header { margin-bottom: 28px; }
/* Scoped so it outranks `.entry-header h1` (the generic archive title scale).
   Unscoped, the article headline silently fell back to 38px instead of 46px. */
.reading-header .reading-title {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 16px;
}
.reading-standfirst {
  font-size: 19px;
  line-height: 1.62;
  color: var(--text-6);
  margin: 0 0 24px;
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 14px;
  font-weight: 500;
}

.reading-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 14px;
  border-block: 1px solid var(--border);
}
.meta-info {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta-icon {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.75;
}
.meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-inline: 12px;
  background: var(--tint-004);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
  text-decoration: none;
}
.btn-share .share-icon {
  width: 14px;
  height: 14px;
  flex: none;
}
.btn-copy-link:hover,
.btn-copy-link.is-copied {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--white);
}
.btn-copy-link.is-copied {
  border-color: var(--green-300);
  color: var(--green-300);
}
.btn-whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.4);
  color: var(--whatsapp);
}

.reading-featured-media {
  margin: 0 0 36px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.reading-featured-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.reading-content {
  font-size: 18px;
  line-height: 1.84;
  color: var(--text-4);
}
.reading-content > p:first-of-type {
  font-size: 20px;
  line-height: 1.72;
  color: var(--text);
  font-weight: 500;
}
.reading-content p {
  margin-bottom: 22px;
}
.reading-content h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
  margin: 44px 0 18px;
  line-height: 1.3;
  border-inline-start: 4px solid var(--accent);
  padding-inline-start: 12px;
}
.reading-content h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  margin: 34px 0 14px;
  line-height: 1.35;
}
.reading-content a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 140ms ease;
}
.reading-content a:hover {
  color: var(--accent-300);
}
.reading-content blockquote {
  position: relative;
  margin: 32px 0;
  padding: 22px 26px;
  border-inline-start: 4px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, transparent), rgba(20, 22, 34, 0.6));
  border-radius: 12px;
  color: var(--text-2);
  font-size: 18.5px;
  font-style: normal;
  line-height: 1.65;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.reading-content blockquote p {
  margin: 0;
}
.reading-content ul,
.reading-content ol {
  padding-inline-start: 24px;
  margin-bottom: 24px;
}
.reading-content li {
  margin-bottom: 10px;
  line-height: 1.75;
}
.reading-content li strong {
  color: var(--white);
}

@media (max-width: 768px) {
  .reading-header .reading-title { font-size: 26px; line-height: 1.25; margin-bottom: 12px; }
  .reading-standfirst { font-size: 16px; line-height: 1.55; margin-bottom: 18px; }
  .reading-meta-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .meta-actions { width: 100%; justify-content: flex-start; }
  .reading-content { font-size: 16.5px; line-height: 1.75; }
  .reading-content > p:first-of-type { font-size: 18px; }
}

/* ---------- Article Reactions (Like / Dislike) ---------- */

.article-reactions {
  /* Compact engagement row — hairline separator instead of a heavy plate. */
  margin-top: 28px;
  padding: 12px 0 4px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.reactions-lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.reactions-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--soft);
}
.reactions-sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.reactions-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 12px;
  background: var(--tint-003);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  user-select: none;
}
.reaction-btn .reaction-icon {
  width: 14px;
  height: 14px;
  transition: transform 140ms ease;
}
.reaction-btn:hover {
  background: var(--tint-006);
  border-color: var(--tint-018);
  color: var(--white);
}
.reaction-btn:hover .reaction-icon {
  transform: scale(1.15);
}

/* Spacing before the comment thread on a single post */
#comments { margin-top: 22px; }

.reaction-like.is-voted {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--green-300);
}
.reaction-like.is-voted .reaction-icon {
  stroke: var(--green-300);
  fill: rgba(16, 185, 129, 0.25);
}

.reaction-dislike.is-voted {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--red-400);
}
.reaction-dislike.is-voted .reaction-icon {
  stroke: var(--red-400);
  fill: rgba(239, 68, 68, 0.25);
}

.reaction-count {
  font-size: 11px;
  color: var(--muted);
  padding-inline-start: 6px;
  border-inline-start: 1px solid var(--tint-01);
}

/* ---------- Comments Section ---------- */


.comments-title svg { color: var(--accent); }



.nx-comment-item {
  list-style: none;
}
/* Scoped to the single-post thread. The bare `.comment-body` selector also
   matched the boxed comment inside the feed card, leaking a surface box and
   36px of vertical padding into every card comment row (104px tall each). */
.comment-list .comment-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.comment-avatar .avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 35%, transparent), color-mix(in srgb, var(--color-accent) 55%, #3730a3));
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
}

.comment-time {
  font-size: 12px;
  color: var(--muted);
}

.comment-content {
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}
.comment-content p { margin: 0; }

/* Comment Form */

.form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
}
.form-row input,
.form-row textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 150ms ease;
  box-sizing: border-box;
}
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.form-row textarea {
  resize: vertical;
  min-height: 90px;
}


/* UX polish */
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); color: var(--white); }

/* ── Mobile card compactness (trailing on purpose: overrides the later base
   rules for the social card; keep this block at the END of the file) ───────── */
@media (max-width: 768px) {
  .social-title { font-size: 16.5px; line-height: 1.3; }
  .social-text { font-size: 13.5px; line-height: 1.6; }
  .social-action-btn { min-height: 40px; min-width: 40px; padding: 8px 8px; }
  .social-action-btn svg { width: 14px; height: 14px; }
  .social-more-toggle { min-height: 40px; min-width: 40px; }
  .social-actions-bar { gap: 8px; }
  .social-actions-left { gap: 12px; }
  .social-read-btn { height: 30px; padding-inline: 9px; font-size: 11.5px; }
  .social-media-wrap { border-radius: 10px; overflow: hidden; }
  .social-embed-frame { border-radius: 10px; }
}

/* LinkedIn official iframe: tall fixed frame (the embed page has no resize
   handshake), internal scroll, provider's own light chrome inside. */
.social-embed-frame--linkedin {
  aspect-ratio: auto;
  height: clamp(360px, 62vh, 620px);
  border-radius: 10px;
  overflow: hidden;
}

/* ── Trust pages (about, editorial policy): one clean reading column ───────
   Used by page-trust.php, which renders outside the article grid. */
.trust-page { max-width: 760px; margin-inline: auto; padding-block: 24px 0; }
.trust-page .entry-header h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; line-height: 1.25; margin: 0 0 28px; color: var(--white); }
.trust-page .entry-content { max-width: none; font-size: 17px; line-height: 1.85; }
.trust-page .entry-content h2 { font-size: 22px; margin: 40px 0 14px; scroll-margin-top: 96px; }
.trust-page .entry-content a[href^="mailto:"] { font-weight: 600; }

/* Desktop trust layout: channel rail in the right track, reading column beside it.
   Selector is 0,3,1 so it outranks the global body.nx-has-rails .layout grid. */
@media (min-width: 1101px) {
  body.nx-has-rails .layout.layout--trust { grid-template-columns: 280px minmax(0, 1fr); }
  .layout--trust > .rail-right { grid-column: 1; grid-row: 1; }
  .layout--trust > .trust-page { grid-column: 2; grid-row: 1; min-width: 0; }
}


/* Small legal links pinned to the foot of the channel rail (template-parts/rail-legal.php).
   The rail is a flex column so the nav pushes these to the bottom edge. */
/* Desktop only: a flex column so the nav pushes the links to the bottom edge.
   Phones/tablets (≤1100px) have no rail at all — see the rail-right display:none
   rule in the 1100px block — so this must not re-open it there. */
@media (min-width: 1101px) {
  .rail-right { display: flex; flex-direction: column; }
}
.rail-legal { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: flex-start; border-top: 1px solid var(--border); }
.rail-legal a { font-size: 11px; line-height: 1.6; color: var(--muted); text-decoration: none; white-space: nowrap; }
.rail-legal a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Infinite feed (js/infinite-feed.js) ----------
   The numbered nav is hidden once the script runs; it remains the no-JS path. */
.pagination.is-infinite { display: none; }
.nx-feed-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 8px; }
.nx-feed-sentinel { width: 1px; height: 1px; }
.nx-feed-more-btn { min-height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nx-feed-more-btn:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.nx-feed-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nx-feed-more-btn:disabled { opacity: .6; cursor: progress; }
.nx-feed-more-btn[hidden] { display: none; }
.nx-feed-status { margin: 0; font-size: 13px; color: var(--soft); min-height: 1em; }