/*
 * Hebrew RTL base layer. Logical properties only — no global direction:ltr,
 * no row-reverse tricks; DOM order = reading order (wireframe §1, §3).
 */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-body);
	line-height: var(--sm-lh-body);
	color: var(--sm-text-primary);
	background: var(--sm-white);
	text-align: start;
	overflow-wrap: break-word;
}

h1, h2, h3 {
	color: var(--sm-text-primary);
	font-family: var(--sm-font-sans);
	margin-block: 0 0.5em;
}
h1 { font-size: var(--sm-fs-h1); line-height: var(--sm-lh-h1); }
h2 { font-size: var(--sm-fs-h2); line-height: var(--sm-lh-h2); }
h3 { font-size: var(--sm-fs-h3); line-height: var(--sm-lh-h3); }

a { color: var(--sm-brand-blue); }

:focus-visible {
	outline: var(--sm-focus);
	outline-offset: 2px;
}

/* Phone numbers / emails: isolate LTR runs inside Hebrew text. */
/* :where() keeps specificity at zero so component classes (.sm-btn) can override display. */
:where(.sm-ltr, a[href^="tel:"], a[href^="mailto:"]) {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

.sm-container {
	max-width: var(--sm-container);
	margin-inline: auto;
	padding-inline: var(--sm-pad-inline);
}

.sm-section {
	padding-block: var(--sm-section-pad);
}
.sm-section--soft { background: var(--sm-bg-soft); }
.sm-section--navy { background: var(--sm-brand-blue); color: var(--sm-white); }
.sm-section--navy h2 { color: var(--sm-white); }

.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--sm-btn-min-h);
	padding-inline: 24px;
	border-radius: var(--sm-radius);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	background: var(--sm-brand-blue);
	color: var(--sm-white);
	border: 2px solid var(--sm-brand-blue);
}
.sm-btn--secondary {
	background: transparent;
	color: var(--sm-brand-blue);
}
.sm-section--navy .sm-btn {
	background: var(--sm-white);
	color: var(--sm-brand-blue);
	border-color: var(--sm-white);
}

/* Medical imagery must never be mirrored for RTL. */
img.sm-no-flip,
.sm-no-flip img {
	transform: none !important;
	object-fit: contain;
}

.sm-skip-link {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-start: -100px;
	z-index: 1000;
	background: var(--sm-brand-blue);
	color: var(--sm-white);
	padding: 12px 16px;
	border-radius: var(--sm-radius);
}
.sm-skip-link:focus { inset-block-start: 8px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}