/* mor-ui-ux-pro base.css: RTL-first foundation for Mor's hand-coded WordPress themes.
   Copy into the theme, then set the tokens from the approved style tile. Everything is logical
   (inline/block), so the same file works in RTL and in an LTR island. No framework, no reset bloat.
   Order inside a theme: tokens → base (this file) → components → page bits. */

:root {
  /* --- colour roles (fill from the style tile; one brand + one action + states) --- */
  --brand: #14296b;        /* headings, lines, stamps */
  --brand-ink: #0d1730;    /* body text if it's tinted to the brand */
  --action: #ff7a2e;       /* the ONE colour for the main tap target (WhatsApp or call, per site) */
  --action-ink: #1a1206;   /* text on --action: check ≥4.5:1, white on orange usually fails */
  --ink: #0d1730; --ink-2: #2a3452; --muted: #5b6479;   /* muted must stay ≥4.5:1 on --paper */
  --paper: #fff; --tint: #f4f6fb;
  --line: #e3e7f0; --line-strong: #c9d0de;
  --ok: #137a4b; --warn: #8a5a00; --bad: #c2372b;     /* state only, always with text/icon too */
  --focus: #1d4ed8;

  /* --- type (Hebrew: no italic, no tracking; condensed heavy display works well) --- */
  --f-head: "Site Head", "Noto Sans Hebrew", system-ui, sans-serif;
  --f-text: "Site Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-sm: .875rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem;
  --fs-h3: clamp(1.2rem, 1rem + .9vw, 1.45rem);
  --fs-h2: clamp(1.55rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-h1: clamp(2rem, 1.4rem + 3.2vw, 3.6rem);
  --lh-text: 1.65; --lh-head: 1.15;

  /* --- shape & space: ONE radius scale, 4/8 rhythm --- */
  --r-sm: 6px; --r: 12px; --r-pill: 999px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem; --s12: 3rem; --s16: 4rem;
  --wrap: 72rem; --gut: clamp(1rem, 4vw, 2rem);
  --bar-h: 64px;           /* mobile sticky action bar */
  --hdr-h: 64px;

  /* --- layers: a small documented scale, nothing above 100 --- */
  --z-sticky: 20; --z-bar: 30; --z-a11y: 40; --z-modal: 50; --z-toast: 60;

  --t-fast: 150ms; --t: 220ms; --ease: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.77, 0, .175, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* viewport meta: width=device-width, initial-scale=1, viewport-fit=cover  (env(safe-area-inset-*) is 0 without viewport-fit=cover) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--hdr-h) + var(--s4)); -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--ink); }
input, textarea { caret-color: var(--brand); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: max(1rem, 16px); line-height: var(--lh-text);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video, picture { display: block; max-inline-size: 100%; block-size: auto; }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: var(--lh-head); letter-spacing: 0; margin: 0 0 var(--s3); text-wrap: balance; color: var(--brand); }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
.prose { max-inline-size: 65ch; }
a { color: inherit; text-underline-offset: .2em; }

/* Hebrew has no real italic: emphasis = weight. Latin islands may keep italic. */
em, i, cite, dfn { font-style: normal; font-weight: 700; }
:lang(en) em, :lang(en) i { font-style: italic; font-weight: inherit; }

/* numbers, prices, phone numbers */
.num, table.prices td, .price { font-variant-numeric: tabular-nums lining-nums; }
.ltr, bdi.ltr { direction: ltr; unicode-bidi: isolate; }
/* Usage: <a class="tel" href="tel:+972501234567"><span>התקשרו</span> <bdi dir="ltr">050-123-4567</bdi></a>
          price range: <bdi dir="ltr">350-450</bdi> ₪ */

/* accessibility basics (IS 5568) */
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: var(--s2); inset-block-start: var(--s2); z-index: var(--z-modal); padding: var(--s2) var(--s4); background: var(--brand); color: #fff; border-radius: var(--r-sm); transform: translateY(-200%); transition: transform var(--t-fast) var(--ease); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* buttons: one primary per screen; text never wraps at desktop */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-block-size: 48px; padding-inline: var(--s6); border-radius: var(--r); border: 1px solid transparent; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn, button, [role="button"], .actbar a { -webkit-user-select: none; user-select: none; } /* controls only: text stays copyable */
@media (hover: hover) and (pointer: fine) { .btn-go:hover { filter: brightness(.96); } .btn-line:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); } }
.btn-go { background: var(--action); color: var(--action-ink); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-line { background: transparent; border-color: currentColor; color: var(--brand); }
.btn svg { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.ic-dir:dir(rtl), [dir="rtl"] .ic-dir { transform: scaleX(-1); }  /* arrows/chevrons only: never phone, check, logo, play */

/* mobile sticky action bar: never hides content, respects the iPhone home indicator */
.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)); background: var(--paper); border-block-start: 1px solid var(--line); }
.has-actbar { padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .actbar { display: none; } .has-actbar { padding-block-end: 0; } }

/* forms: label above, error below, phone typed LTR but aligned with the Hebrew fields */
label { display: block; font-weight: 600; margin-block-end: var(--s1); }
input, select, textarea { font: inherit; font-size: max(1rem, 16px); inline-size: 100%; min-block-size: 48px; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
input[type="tel"], input[type="email"], input[type="url"] { direction: ltr; text-align: end; }
input::placeholder, textarea::placeholder { color: var(--muted); }
[aria-invalid="true"] { border-color: var(--bad); }
.field-err { color: var(--bad); font-size: var(--fs-sm); margin-block-start: var(--s1); }
.field-help { color: var(--muted); font-size: var(--fs-sm); margin-block-start: var(--s1); }

/* price table: a real <table> (search engines and AI answers quote tables) */
table.prices { inline-size: 100%; border-collapse: collapse; }
table.prices th, table.prices td { padding: var(--s3) var(--s2); text-align: start; border-block-end: 1px solid var(--line); vertical-align: baseline; }
table.prices td:last-child { text-align: end; font-weight: 700; white-space: nowrap; }

/* FAQ accordion: native <details>. The chevron is a direction-free SVG mask (a border-built chevron points sideways in RTL). */
details.faq { border-block-end: 1px solid var(--line); }
details.faq > summary { list-style: none; cursor: pointer; padding-block: var(--s4); padding-inline-end: var(--s8); position: relative; font-weight: 700; min-block-size: 44px; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: ""; position: absolute; inset-inline-end: var(--s2); inset-block-start: 50%; inline-size: 1em; block-size: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: translateY(-50%); transition: transform var(--t) var(--ease); }
details.faq[open] > summary::after { transform: translateY(-50%) rotate(180deg); }

.wrap { inline-size: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.hero { min-block-size: auto; } /* never a full-screen hero on a service site: the CTA must be visible */

/* reduced motion = no movement, but keep short colour/opacity feedback (a global 0.01ms kill also removes useful feedback) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, outline-color, opacity !important; }
}
@media print { .actbar, .skip-link, [class*="a11y-"] { display: none !important; } }