/*
 * Shared components (2026-10-21). One design per component, used on every page, post and band.
 * Colours come from the band tokens in design.css (--ink, --body, --mute, --s1, --s2, --fg-rgb, --or-text),
 * so each component works on light and dark bands. Loaded on the front end and in the editor.
 *
 * - Table (core/table): the data table for posts and pages. Style "Comparison" highlights the last column,
 *   like the homepage solo-vs-agency table (Figma round 17).
 * - Key findings (core/group .nirmal-key-findings) and cite box (.nirmal-cite) for research and long reads.
 */

/* ---------- Table ---------- */
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) {
	--tb-head: var(--s2);
	--tb-line: rgb(var(--fg-rgb) / .1);
	margin-block: 32px;
	overflow-x: auto;
	border-radius: 20px;
	border: 1px solid var(--tb-line);
	background: var(--s1);
	box-shadow: 0 18px 44px -30px rgb(14 19 46 / .35);
}
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; margin: 0; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) :is(th, td) { padding: 15px 20px; border: 0; border-bottom: 1px solid var(--tb-line); text-align: left; vertical-align: top; color: var(--body); }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) thead th { background: var(--tb-head); color: var(--ink); font: 600 13px/1.35 Inter, sans-serif; letter-spacing: .02em; border-bottom: 1px solid var(--tb-line); }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) tbody tr:last-child :is(th, td) { border-bottom: 0; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) tbody :is(th, td):first-child { color: var(--ink); font-weight: 600; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) tbody tr { transition: background .2s; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) tbody tr:hover { background: rgb(var(--fg-rgb) / .03); }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) tfoot td { background: var(--tb-head); color: var(--ink); font-weight: 600; border-top: 1px solid var(--tb-line); border-bottom: 0; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) figcaption { margin: 0; padding: 12px 20px 14px; font-size: 13px; color: var(--mute); text-align: left; border-top: 1px solid var(--tb-line); background: var(--s1); }
/* Comparison: the last column is the answer, highlighted in cream with an orange top edge. */
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp).is-style-comparison :is(th, td):last-child { background: #FDF3E1; color: #0E132E; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp).is-style-comparison thead th:last-child { box-shadow: inset 0 3px 0 #FE9A00; font-weight: 700; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp).is-style-comparison tbody :is(th, td):last-child { font-weight: 600; }
/* The table scroll wrapper (pages and posts) carries no second frame around the designed table. */
.nirmal-table-scroll:has(> .wp-block-table), .nirmal-table-scroll:has(> table) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.nirmal-table-scroll > .wp-block-table { margin-block: 32px; }
@media (max-width: 680px) {
	:is(.nd, .nirmal-single) figure.wp-block-table:not(.nx-cmp) table { font-size: 14px; min-width: 560px; }
	:is(.nd, .nirmal-single) figure.wp-block-table:not(.nx-cmp) :is(th, td) { padding: 12px 14px; }
}

/* ---------- Key findings ---------- */
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings { margin-block: 36px; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: #0E132E; color: #F4F1EA; --ink: #F4F1EA; --body: #D2CFC8; --mute: #B5B2AB; --fg-rgb: 255 255 255; position: relative; overflow: hidden; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings::before { content: ""; position: absolute; right: -120px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgb(254 154 0 / .28), transparent 68%); pointer-events: none; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings > * { position: relative; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings h2 { margin: 0 0 18px; font-size: clamp(24px, 2.2vw, 32px); color: #fff; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings ol { margin: 0; padding: 0; list-style: none; counter-reset: kf; display: grid; gap: 16px; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings li { counter-increment: kf; position: relative; padding-left: 52px; color: #E4E6EE; font-size: 17px; line-height: 1.6; margin: 0; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings li::before { content: counter(kf, decimal-leading-zero); position: absolute; left: 0; top: -2px; font: 700 24px/1 Pally, Inter, sans-serif; color: #FE9A00; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-key-findings a { color: #fff; text-decoration-color: #FE9A00; }

/* ---------- Cite and reuse ---------- */
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-cite { margin-block: 40px; padding: clamp(22px, 2.6vw, 34px); border-radius: 20px; background: var(--s2); border-left: 4px solid #1A5ECB; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-cite h2, :is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-cite h3 { margin-top: 0; font-size: clamp(22px, 2vw, 28px); }
:is(.nd, .nirmal-single, .editor-styles-wrapper) .nirmal-cite p { font-size: 16px; }

/* ---------- Table of contents links never take the content link underline ---------- */
.nirmal-toc .nirmal-toc__list a { text-decoration: none !important; color: var(--mute) !important; }
.nirmal-toc .nirmal-toc__list a { transition: color .15s; }
/* Hover, keyboard focus and the section being read (set by toc-spy.js) share one look: dark text, orange underline. */
.nirmal-toc .nirmal-toc__list a:is(:hover, :focus-visible, [aria-current="location"]) { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--or) !important; }
.nirmal-toc .nirmal-toc__list li:has(> a[aria-current="location"])::marker { color: var(--or); }

/* Old zebra stripes and fixed row fills from the first blog template give way to the designed table. */
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp) tbody tr:nth-child(n) :is(th, td) { background-color: transparent; }
:is(.nd, .nirmal-single, .editor-styles-wrapper) figure.wp-block-table:not(.nx-cmp).is-style-comparison tbody tr:nth-child(n) :is(th, td):last-child { background-color: #FDF3E1; }

/* ---------- Testimonial wall (Success stories page): the homepage tiles, three across, gently tilted ---------- */
.tgrid--wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; align-items: start; }
.tgrid--wall .tcard:nth-child(3n+1) { transform: rotate(1.2deg); }
.tgrid--wall .tcard:nth-child(3n+2) { transform: rotate(-1.4deg); }
.tgrid--wall .tcard:nth-child(3n) { transform: rotate(-0.6deg) translateY(8px); }
.tgrid--wall .tcard:hover { transform: rotate(0) translateY(-4px); }
.tgrid--wall .tcard blockquote { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; }
.who-initials { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--or); display: grid; place-items: center; font: 700 22px/1 Pally, Inter, sans-serif; color: #141414; background: #FDF3E1; }
@media (max-width: 1024px) { .tgrid--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tgrid--wall { grid-template-columns: 1fr; gap: 32px; } .tgrid--wall .tcard:nth-child(n) { transform: none; } }

/* ---------- Case cards anywhere: sector line above the result ---------- */
.case .kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }

/* ==========================================================================
 * Designed pages as editable blocks (proto-to-blocks.js native blocks, 2026-10-21). The block editor saves
 * core markup (figures, paragraphs, groups); these rules keep the approved look on that markup.
 * ========================================================================== */
/* Spark lines are image blocks now; the bob animation moves to the image. */
figure.spark > img { animation: bob var(--dur, 7s) cubic-bezier(.45, 0, .55, 1) var(--delay, 0s) infinite alternate; width: 100%; height: auto; }
/* Linked cards: the heading carries the link and stretches over the whole card. */
:is(.svc, .scard, .case-w, .ins) { position: relative; }
:is(.svc, .scard, .case-w) :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
:is(.svc, .scard, .case-w) :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
:is(.svc, .scard, .case-w) :is(h2, h3, h4) a:focus-visible { outline: none; }
:is(.svc, .scard, .case-w):focus-within { outline: 2px solid var(--or); outline-offset: 4px; }
:is(.svc, :is(.bg-white, .bg-paper, .bg-egg, .bg-eggshell, .bg-cream) :is(.scard, .case-w)):focus-within { outline-color: #0E132E; } /* light cards: 16:1 (2026-10-22, IR-009) */
.svc p.link, .scard p.link { margin: auto 0 0; }
/* The homepage comparison table is a table block; the highlighted column is the last one. */
.pg-home figure.nx-cmp { margin: 56px 0 0; }
.pg-home figure.nx-cmp table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.pg-home .nx-cmp :is(th, td):last-child { background: #FFF8EC; border-left: 2px solid var(--or); border-right: 2px solid var(--or); }
.pg-home .nx-cmp thead :is(th, td):last-child { border-top: 2px solid var(--or); border-radius: 22px 22px 0 0; position: relative; }
.pg-home .nx-cmp tbody tr:last-child :is(th, td):last-child { border-bottom: 2px solid var(--or); border-radius: 0 0 22px 22px; }
/* Paragraph versions of the design's small boxes keep their box layout. */
p.stat-row, p.nx-big, p.follow, p.nx-logo { margin: 0; }
/* Core's table block styles (cell borders, thick thead rule, scroll clipping) are switched off for the
 * homepage comparison, so it keeps the approved Figma look. */
.pg-home figure.wp-block-table.nx-cmp { margin: 56px 0 0 !important; padding-top: 14px; overflow: visible; border: 0; background: none; box-shadow: none; }
.pg-home .nx-cmp :is(thead, tfoot) { border: 0 !important; }
.pg-home .nx-cmp table { border: 0 !important; }
.pg-home .nx-cmp :is(th, td) { border: 0; border-top: 1px solid var(--hair); }
.pg-home .nx-cmp thead :is(th, td) { border-top: 0; }
.pg-home .nx-cmp :is(th, td):last-child { border-left: 2px solid var(--or); border-right: 2px solid var(--or); }
.pg-home .nx-cmp thead :is(th, td):last-child { border-top: 2px solid var(--or); }
@media (max-width: 899px) { .pg-home figure.wp-block-table.nx-cmp { overflow-x: auto; padding-top: 14px; } }
/* Follow links in the feed are quiet text links, as designed. */
p.follow a { color: inherit; text-decoration: none; transition: color .2s; }
p.follow a:hover { color: var(--or); }
p.follow a.link { color: var(--ink); }

/* "How I can help" cards: a big line icon fills each card's background (Saba, 2026-10-21), warming to orange on hover. */
.svc[class*="svc--"] { position: relative; overflow: hidden; isolation: isolate; }
.svc[class*="svc--"]::after { content: ""; position: absolute; right: -36px; bottom: -40px; width: 230px; height: 230px; background: currentColor; color: rgb(14 19 46 / .06); -webkit-mask: var(--svc-icon) no-repeat center / contain; mask: var(--svc-icon) no-repeat center / contain; z-index: -1; transition: color .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.svc[class*="svc--"]:hover::after { color: rgb(254 154 0 / .22); transform: rotate(-6deg) scale(1.05); }
.bg-navy .svc[class*="svc--"]::after { color: rgb(255 255 255 / .06); }
.svc--ai { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203l1.9%205.8L20%2011l-6.1%202.2L12%2019l-1.9-5.8L4%2011l6.1-2.2z%22%2F%3E%3Cpath%20d%3D%22M19%202v4M21%204h-4%22%2F%3E%3C%2Fsvg%3E"); }
.svc--ux { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%209h18M9%2021V9%22%2F%3E%3C%2Fsvg%3E"); }
.svc--growth { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2017l6-6%204%204%208-8%22%2F%3E%3Cpath%20d%3D%22M14%207h7v7%22%2F%3E%3C%2Fsvg%3E"); }
.svc--dev { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M16%2018l6-6-6-6M8%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.svc--care { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.svc--shop { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%202L3%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4z%22%2F%3E%3Cpath%20d%3D%22M3%206h18M16%2010a4%204%200%200%201-8%200%22%2F%3E%3C%2Fsvg%3E"); }

/* Orange accent words in headings on light bands: the brand orange is 2.1:1 on white, under the 3:1 minimum for
 * large text (WCAG 1.4.3). A slightly deeper orange passes on every light band; dark bands keep #FE9A00. */
:is(.bg-white, .bg-paper, .bg-egg, .bg-eggshell, .bg-cream, .nirmal-post) :is(h1, h2, h3, .h2, .h2s) .or { color: #D47200; }

/* Card with no featured image (2026-10-21): a designed dark panel, never a blank box. Midnight with a glow in
   the card's accent colour, one brand line and the topic in large type. Every post should still get a real
   featured image; this is the backup. Used by insight cards (.ins .img) and post cards (.nirmal-card__media). */
.img--fallback { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 22px 24px;
	background: radial-gradient(120% 90% at 85% 10%, rgb(var(--fb-rgb, 254 154 0) / .32), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgb(66 133 244 / .16), transparent 70%), #0E132E;
	border-bottom: 1px solid rgb(255 255 255 / .06); }
.img--fallback.img--bl { --fb-rgb: 66 133 244; }
.img--fallback.img--gr { --fb-rgb: 81 178 58; }
.ins .img--fallback img.fb-line, .nirmal-card__media.img--fallback img.fb-line { position: absolute; right: -18px; top: 18%; width: 46%; max-width: 220px; height: auto !important; object-fit: contain; transform: rotate(-8deg); opacity: .9; }
.img--fallback .fb-topic { position: relative; z-index: 1; max-width: 70%; font: 700 clamp(22px, 2vw, 30px)/1.05 Pally, Inter, sans-serif; letter-spacing: -0.02em; color: #F4F1EA; }
.ins-feat .img--fallback .fb-topic { font-size: clamp(30px, 3.4vw, 52px); }
.pg-insights .ins:hover .img--fallback img.fb-line { transform: rotate(-8deg) translateX(-6px); }

/* "How I can help" (Nirmal, 2026-10-21): each card's number takes its own brand colour, and the background icon
   sits top right in the same colour, faint, instead of bottom right. */
.svc-grid > .svc:nth-child(6n+1) { --svc-c: 254 154 0; }
.svc-grid > .svc:nth-child(6n+2) { --svc-c: 66 133 244; }
.svc-grid > .svc:nth-child(6n+3) { --svc-c: 81 178 58; }
.svc-grid > .svc:nth-child(6n+4) { --svc-c: 60 196 181; }
.svc-grid > .svc:nth-child(6n+5) { --svc-c: 229 72 77; }
.svc-grid > .svc:nth-child(6n+6) { --svc-c: 139 92 246; }
.svc-grid > .svc[class*="svc--"] .num, :is(.bg-white, .bg-paper, .bg-egg, .bg-eggshell, .bg-cream) .svc-grid > .svc .num { color: rgb(var(--svc-c, 254 154 0)); }
.svc-grid > .svc[class*="svc--"]::after { top: -34px; bottom: auto; right: -30px; width: 200px; height: 200px; color: rgb(var(--svc-c, 14 19 46) / .09); }
.svc-grid > .svc[class*="svc--"]:hover::after { color: rgb(var(--svc-c, 254 154 0) / .2); }
.bg-navy .svc-grid > .svc[class*="svc--"]::after { color: rgb(var(--svc-c, 255 255 255) / .12); }

/* Section heading straight onto a card grid (Nirmal, 2026-10-21: "All insights" on /blog/ sat on its cards).
   Any heading followed directly by a grid of cards gets the same breathing room, site-wide. Flow margins
   collapse, so headings that already had a bottom margin keep the larger of the two. */
.nd :is(h2, .h2, .h2s):not(.screen-reader-text) + :is([class*="-grid"], .dir-card, .cards, .nirmal-cards, .wp-block-nirmal-insight-cards, .wp-block-nirmal-posts-listing, .wp-block-nirmal-case-cards, .wp-block-nirmal-testimonials, .tgrid) { margin-top: clamp(32px, 3.4vw, 48px); }