/* ---------------------------------------------------------------------------
   Inline <style> blocks from the original page, ported.

   The original carried three inline stylesheets in the document body. The
   transpiler strips <style> before parsing (correctly — they would otherwise
   become stray text nodes), which meant these rules were silently lost. Two of
   them are visible to users:

   1. body direction/alignment. WordPress gives `text-align: start`, which
      resolves to the same side in RTL but is not identical for mixed
      Arabic/Latin runs such as prices ("295$") or dates.

   2. Focus and selection colours. Without them the browser and Hello
      Elementor's reset take over, and clicking a CTA paints a bright blue
      selection box plus a dark focus ring around the button — neither of which
      the original shows. The original's focus width is .125px, i.e.
      deliberately almost invisible, and selection is brand navy.

   Everything here is a faithful port, not a redesign. The commented-out blocks
   in the original (pointer cursors, form resets) are intentionally left out —
   they were disabled there too.
   --------------------------------------------------------------------------- */

body {
	direction: rtl !important;
	text-align: right !important;
}

/* Accessible focus styles for keyboard users, driven by the design's variables.
   --_sizes---focus--width is .125px in this design, so the ring is effectively
   invisible; the fallbacks are the Webflow defaults and should never apply. */
[tabindex]:not([tabindex='-1']):focus-visible,
button:focus-visible,
a:focus-visible,
[role='button']:focus-visible,
input[type='file']:focus-visible {
	outline: var(--_sizes---focus--width, 2px) solid var(--_theme---system--focus-state, #005fcc);
	outline-offset: var(--_sizes---focus--offset, 2px);
}

/* Hello Elementor's reset paints its own 2px ring on :focus-visible at a
   specificity this file would otherwise tie with. Restated here so the design's
   near-invisible ring wins, matching the original exactly. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [role='button']:focus-visible,
.elementor .elementor-button:focus-visible {
	outline: var(--_sizes---focus--width, 2px) solid var(--_theme---system--focus-state, #142940);
	outline-offset: var(--_sizes---focus--offset, 2px);
}

/* Mouse users should get no ring at all — this is what the original does and
   what made the reported "blue rounded border" appear only on v2. */
.elementor a:focus:not(:focus-visible),
.elementor button:focus:not(:focus-visible),
.elementor .elementor-button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* Text selection styling, from the design's variables. */
::selection {
	background-color: var(--_theme---system--selection-background);
	color: var(--_theme---system--selection-text);
	text-shadow: none;
}

::-moz-selection {
	background-color: var(--_theme---system--selection-background);
	color: var(--_theme---system--selection-text);
	text-shadow: none;
}

/* NOTE: an earlier version set `user-select: none` on CTAs here, on the theory
   that text selection was drawing the blue box over the button. It was not —
   the real cause was Webflow's `w-button` class landing on the Elementor widget
   wrapper and painting its stock #3898ec background. Suppressing selection was
   therefore both ineffective and a real regression: it stopped the button label
   highlighting with the surrounding copy and made it uncopyable, which the
   original does not do. Deliberately not reinstated. */

/* Rich-text spacing rules from the original. */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
	margin-top: 0 !important;
}

.w-richtext > :last-child,
.w-richtext ul li:last-child,
.w-richtext ol li:last-child {
	margin-bottom: 0 !important;
}

/* Line-clamp helpers from the original. */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.text-style-1line {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
