/* mor-ui-ux-pro kit.css: tested RTL components on top of ../base.css (load base.css first).
   Class prefix k- (scoped: never collides with theme/plugin CSS). Tokens come from base.css :root;
   set --brand / --action / --action-ink per site (business.json "colors"). */

/* ---------- section rhythm ---------- */
.k-sec { padding-block: var(--s12); }
@media (min-width: 900px) { .k-sec { padding-block: var(--s16); } }
.k-sec + .k-sec { border-block-start: 1px solid var(--line); }
.k-band { background: var(--tint); }
.k-split { display: grid; gap: var(--s8); }
@media (min-width: 900px) { .k-split { grid-template-columns: 7fr 5fr; align-items: start; } }
.k-muted { color: var(--muted); }
.k-nw { white-space: nowrap; }

/* ---------- header ---------- */
.k-hdr { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--paper); border-block-end: 1px solid var(--line); }
.k-hdr-in { display: flex; align-items: center; gap: var(--s4); min-block-size: var(--hdr-h); }
.k-brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--brand); margin-inline-end: auto; min-block-size: 44px; }
.k-brand b { font-family: var(--f-head); font-size: 1.25rem; line-height: 1.1; }
.k-brand small { display: block; color: var(--muted); font-size: .8rem; }
.k-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s6); }
.k-nav a { text-decoration: none; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; min-block-size: 44px; }
.k-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); }
.k-menu-btn { display: none; min-block-size: 44px; padding-inline: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; }
.k-hdr .k-hdr-cta { display: none; }
@media (min-width: 1024px) { .k-hdr .k-hdr-cta { display: inline-flex; } }
@media (max-width: 899px) {
  .k-menu-btn { display: inline-flex; align-items: center; gap: var(--s2); }
  .k-nav { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--paper); border-block-end: 1px solid var(--line); padding: var(--s2) var(--gut) var(--s4); }
  .k-nav[hidden] { display: none; }
  .k-nav ul { flex-direction: column; gap: 0; }
  .k-nav li + li { border-block-start: 1px solid var(--line); }
}
@media (min-width: 900px) { .k-nav[hidden] { display: block; } }

/* ---------- hero (service / home) ---------- */
.k-hero { padding-block: var(--s8) var(--s12); }
.k-hero h1 { margin-block-end: var(--s3); }
.k-hero .k-lead { font-size: var(--fs-lg); color: var(--ink-2); max-inline-size: 38rem; margin-block-end: var(--s6); }
.k-cta-pair { display: grid; gap: var(--s3); max-inline-size: 30rem; }
@media (min-width: 600px) { .k-cta-pair { grid-template-columns: 1fr 1fr; } }
.k-cta-pair .btn { min-block-size: 56px; font-size: 1.05rem; }
.k-cta-pair .k-num { font-variant-numeric: tabular-nums; }
/* compact facts block near the top: true hours, area, starting price, who (the blind-test winner pattern) */
.k-facts { list-style: none; margin: var(--s6) 0 0; padding: 0; border-block: 1px solid var(--line); max-inline-size: 38rem; }
.k-facts li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s3); padding-block: var(--s3); }
.k-facts li + li { border-block-start: 1px solid var(--line); }
.k-facts b { color: var(--brand); }
.k-proof { display: flex; align-items: center; gap: var(--s2); margin-block-start: var(--s4); color: var(--ink-2); }
.k-stars { color: #f5b400; letter-spacing: 0; } /* gold only when real reviews exist */
.k-stars.is-empty { color: #c9ced8; }

/* ---------- photos: real or labelled illustration, caption below (never pills on the image) ---------- */
.k-photo { margin: 0; }
.k-photo img, .k-photo .k-frame { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); display: block; background: var(--tint); }
.k-photo.is-wide img, .k-photo.is-wide .k-frame { aspect-ratio: 4 / 3; }
.k-photo .k-frame { display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--muted); padding: var(--s6); text-align: center; }
.k-photo figcaption { margin-block-start: var(--s2); font-size: var(--fs-sm); color: var(--muted); }

/* ---------- steps ---------- */
.k-steps { list-style: none; counter-reset: k; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 900px) { .k-steps { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.k-steps li { counter-increment: k; padding-block-start: var(--s3); border-block-start: 2px solid var(--brand); }
.k-steps li::before { content: counter(k); display: block; font-family: var(--f-head); font-weight: 800; font-size: 1.6rem; color: var(--brand); line-height: 1; margin-block-end: var(--s2); font-variant-numeric: tabular-nums; }

/* ---------- reviews (real only; honest empty state) ---------- */
.k-reviews { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .k-reviews { grid-template-columns: repeat(3, 1fr); } }
.k-review { margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); }
.k-review p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-block-end: var(--s3); }
.k-review footer { font-size: var(--fs-sm); color: var(--muted); }
.k-empty { padding: var(--s6); border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--muted); text-align: center; }

/* ---------- compact rows (dense lists: one open item, the rest one line) ---------- */
.k-rows { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--line); }
.k-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding-block: var(--s2); min-block-size: 56px; }
.k-row + .k-row { border-block-start: 1px solid var(--line); }
.k-row .k-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.k-row .k-main { min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-row a.k-main { display: block; padding-block: var(--s3); color: var(--ink); font-weight: 600; text-decoration: none; }
.k-row .k-act { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--tint); color: var(--brand); }

/* ---------- breadcrumbs ---------- */
.k-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.k-crumbs li + li::before { content: "‹"; margin-inline-end: var(--s2); color: var(--line-strong); } /* points left = forward in RTL */
:root:dir(ltr) .k-crumbs li + li::before, [dir="ltr"] .k-crumbs li + li::before { content: "›"; }
.k-crumbs a { color: inherit; display: inline-block; padding-block: 2px; min-block-size: 24px; }

/* ---------- lead form ---------- */
.k-form { display: grid; gap: var(--s4); max-inline-size: 32rem; }
.k-field { display: grid; gap: var(--s1); }
.k-field p { margin: 0; }
.k-field p:empty { display: none; }
.k-check { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: start; font-weight: 400; }
.k-check input { inline-size: 24px; block-size: 24px; min-block-size: 0; margin-block-start: 2px; }
.k-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } /* honeypot: never left:-9999px in RTL */
.k-form-msg:empty { display: none; }
.k-form-msg { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--tint); }
.k-form-msg.is-ok { color: var(--ok); font-weight: 600; }
.k-form-msg.is-err { color: var(--bad); font-weight: 600; }
.k-form [aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- mobile action bar: the conversion engine ---------- */
.k-actbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-bar); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2);
  padding: var(--s2) var(--gut) max(var(--s2), env(safe-area-inset-bottom, 0px)); background: var(--paper); border-block-start: 1px solid var(--line);
  transition: transform var(--t) var(--ease), visibility 0s linear var(--t); }
.k-actbar .btn { min-block-size: 48px; }
.k-actbar.is-off { transform: translateY(110%); visibility: hidden; }
.k-actbar:not(.is-off) { transition: transform var(--t) var(--ease), visibility 0s; }
body.k-has-bar { padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .k-actbar { display: none; } body.k-has-bar { padding-block-end: 0; } }

/* ---------- accessibility widget (comfort tool: classes on <html>, never rewrites content) ---------- */
.k-a11y-tab { position: fixed; inset-inline-end: 0; inset-block-end: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-a11y);
  inline-size: 36px; block-size: 44px; display: grid; place-items: center; border: 0; border-start-start-radius: 8px; border-end-start-radius: 8px; background: var(--brand); color: #fff; cursor: pointer; }
@media (min-width: 1024px) { .k-a11y-tab { inset-block-end: 24px; } }
.k-a11y-tab svg { inline-size: 20px; block-size: 20px; }
.k-a11y { position: fixed; inset-inline-end: var(--s3); inset-block-end: calc(var(--bar-h) + 76px); z-index: var(--z-modal); inline-size: min(22rem, 100vw - 1.5rem);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); padding: var(--s4); }
.k-a11y[hidden] { display: none; }
.k-a11y h2 { font: 700 1rem/1.3 var(--f-text); color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.k-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.k-a11y-grid button { min-block-size: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--tint); color: var(--ink); font: 600 .9rem/1.3 var(--f-text); cursor: pointer; }
.k-a11y-grid button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.k-a11y-grid .k-wide { grid-column: 1 / -1; background: transparent; }
.k-a11y p { font-size: .85rem; color: var(--muted); margin: var(--s3) 0 0; }
html.a11y-text-1 { font-size: 115%; } html.a11y-text-2 { font-size: 130%; } html.a11y-text-3 { font-size: 150%; }
html.a11y-contrast { --ink: #000; --ink-2: #111; --muted: #222; --line: #333; --line-strong: #000; --tint: #fff; }
html.a11y-contrast .k-hdr, html.a11y-contrast .k-actbar { background: #fff; border-color: #000; }
html.a11y-links a:not(.btn) { text-decoration: underline 2px; background: #fff3b0; color: #000; }
html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3 { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-spacing body { line-height: 2; word-spacing: .12em; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---------- cookie notice / consent (never covers the action bar or the hero CTA) ---------- */
.k-ck { position: fixed; inset-inline-start: var(--s3); inset-inline-end: calc(36px + var(--s4)); /* leaves room for the a11y edge tab */ inset-block-end: calc(var(--bar-h) + var(--s3) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast);
  max-inline-size: 30rem; margin-inline: auto; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); padding: var(--s3) var(--s4);
  display: flex; gap: var(--s3); align-items: center; font-size: .9rem; }
.k-ck[hidden] { display: none; }
.k-ck p { margin: 0; flex: 1; }
.k-ck .btn { min-block-size: 44px; padding-inline: var(--s4); }
@media (min-width: 1024px) { .k-ck { inset-block-end: var(--s4); } }

body.k-typing .k-ck, body.k-typing .k-a11y-tab { visibility: hidden; }

/* ---------- footer ---------- */
.k-ftr { background: var(--brand); color: #fff; padding-block: var(--s12) var(--s8); margin-block-start: var(--s12); }
.k-ftr a { color: #fff; }
.k-ftr-cols { display: grid; gap: var(--s8); }
@media (min-width: 900px) { .k-ftr-cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.k-ftr h2 { color: #fff; font-size: 1rem; margin-block-end: var(--s3); }
.k-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.k-ftr ul a { display: inline-block; min-block-size: 24px; }
.k-ftr .k-legal { border-block-start: 1px solid rgb(255 255 255 / .25); margin-block-start: var(--s8); padding-block-start: var(--s4); font-size: .85rem; opacity: .9; }

/* ---------- content components built by the WP transformer (inc/content-transform.php) ---------- */
.k-content { padding-block-end: var(--s12); }
.k-content h2 { margin-block-start: var(--s12); }
.k-content h3 { margin-block-start: var(--s8); }
.k-brief { background: var(--tint); border-radius: var(--r-sm); padding: var(--s4) var(--s6); margin-block: var(--s6); } /* no coloured side-stripe: that is the template look */
.k-brief > strong { display: block; color: var(--brand); margin-block-end: var(--s2); }
.k-note, .k-disc { background: var(--tint); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.k-disc { font-size: var(--fs-sm); color: var(--ink-2); }
.k-tablewrap { overflow-x: auto; margin-block: var(--s6); }
.k-tablewrap table { min-inline-size: 22rem; }

/* ---------- draft markers for mockups (remove before launch) ---------- */
.k-sample { border-block-end: 1px dashed currentColor; }
.k-missing { background: #fff4d6; color: #5a4300; padding-inline: .25em; border-radius: 3px; }
.k-draftbar { background: var(--tint); color: var(--ink-2); font-size: .85rem; padding: var(--s2) var(--gut); border-block-end: 1px solid var(--line); }