/**
 * sinit_front — תבנית החזית לתורם
 * @copyright Copyright (c) 2026 sinit. All rights reserved.
 *
 * נכתב RTL-first: הכיוון הטבעי של האתר הוא עברית. במקום left/right משתמשים
 * בתכונות לוגיות (inline-start/inline-end), כך שאותו קובץ עובד גם ב-LTR
 * בלי קובץ _rtl נפרד — בניגוד ל-bootstrap_rtl.css של התבנית הישנה.
 *
 * אין כאן Bootstrap. הרשת והרכיבים כתובים כאן, כדי שהתבנית לא תסחוב
 * 200KB של פריימוורק בשביל שש מחלקות.
 */

/* ============================================================ tokens */
:root {
	--sinit-container: 1200px;

	/* נדרסים inline מ-index.php לפי הגדרות התבנית. הערכים כאן הם ברירת
	   המחדל וגם רשת ביטחון: אם התוסף מושבת וה-inline לא נכתב, האתר עדיין
	   מקבל פלטה שלמה במקום צבעים חסרים. */
	--sinit-primary: #0b2545;
	--sinit-accent: #c8a34a;

	--sinit-ink: #14181f;
	--sinit-ink-soft: #5b636d;
	--sinit-bg: #ffffff;
	/* גוון חם ולא אפור קר — אפור כחלחל מול זהב נראה מלוכלך */
	--sinit-bg-soft: #f7f4ee;
	--sinit-line: #e4ded2;

	/* פסים כהים: הרקע של ההירו ושל סקשן --dark */
	--sinit-dark: #0b2545;
	--sinit-on-dark: #f8f5ee;
	--sinit-on-dark-soft: rgba(248, 245, 238, .74);
	--sinit-hero-overlay: .55;

	--sinit-radius: 10px;
	--sinit-radius-sm: 6px;
	--sinit-gap: 1.5rem;
	--sinit-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);

	--sinit-header-h: 76px;

	/* Heebo ולא Playfair Display כמו באתר הייחוס: ל-Playfair אין גליפים
	   בעברית, וכותרת עברית הייתה נופלת ל-fallback אקראי של המערכת. */
	--sinit-font: "Heebo", "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
	--sinit-weight-display: 800;
	--sinit-tracking-display: -.02em;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sinit-ink: #ece7dd;
		--sinit-ink-soft: #a8a294;
		--sinit-bg: #12151a;
		--sinit-bg-soft: #1a1e25;
		--sinit-line: #2e3138;
		--sinit-dark: #080f1c;
		--sinit-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35);
	}
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--sinit-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sinit-ink);
	background: var(--sinit-bg);
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--sinit-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* סקאלה בפרופורציות של עמוד נחיתה: כותרת ההירו נושאת את העמוד, ולכן
   הפער בינה לבין h2 גדול. clamp ולא media queries — גדל רציף עם הצג. */
h1, h2, h3, h4 {
	margin: 0 0 .6em;
	line-height: 1.12;
	font-weight: var(--sinit-weight-display);
	letter-spacing: var(--sinit-tracking-display);
	text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

p { margin: 0 0 1rem; }

/* פסקת פתיח מתחת לכותרת סקשן */
.sinit-lead {
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	line-height: 1.7;
	color: var(--sinit-ink-soft);
}

:focus-visible {
	outline: 3px solid var(--sinit-accent);
	outline-offset: 2px;
}

.sinit-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--sinit-primary);
	color: #fff;
}
.sinit-skip:focus { inset-inline-start: 0; }

/* ============================================================ layout */
.sinit-container {
	width: 100%;
	max-width: var(--sinit-container);
	margin-inline: auto;
	padding-inline: 1rem;
}

.sinit-page { display: flow-root; min-height: 100vh; }

.sinit-layout {
	display: grid;
	gap: var(--sinit-gap);
	grid-template-columns: 1fr;
	padding-block: 2rem;
}

@media (min-width: 992px) {
	.sinit-layout.has-left,
	.sinit-layout.has-right { grid-template-columns: 280px 1fr; }
	.sinit-layout.has-right { grid-template-columns: 1fr 280px; }
	.sinit-layout.has-left.has-right { grid-template-columns: 260px 1fr 260px; }
	.sinit-layout.has-right:not(.has-left) .sinit-main { order: -1; }
}

.sinit-main { min-width: 0; }

/* מצב רוחב מלא: אין container עוטף (ראה index.php), והרכיב מצייר עד קצה
   המסך. ה-padding מתאפס כדי שההירו יתחיל מיד מתחת לכותרת, בלי רצועה לבנה. */
.sinit-layout--full {
	padding-block: 0;
	gap: 0;
	grid-template-columns: 1fr;
}

/* ============================================================ topbar */
.sinit-topbar {
	background: var(--sinit-bg-soft);
	border-block-end: 1px solid var(--sinit-line);
	font-size: .875rem;
}
.sinit-topbar .sinit-container {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
	flex-wrap: wrap;
}

/* ============================================================ header */
.sinit-header {
	background: var(--sinit-bg);
	border-block-end: 1px solid var(--sinit-line);
}
.sinit-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}
.sinit-header.is-scrolled { box-shadow: var(--sinit-shadow); }

.sinit-header__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: var(--sinit-header-h);
}

.sinit-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.sinit-brand__logo { max-height: 52px; width: auto; }
.sinit-brand__text { font-size: 1.35rem; font-weight: 700; color: var(--sinit-ink); }

.sinit-nav { flex: 1; min-width: 0; }
.sinit-header__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-inline-start: auto;
}

.sinit-phone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	font-size: 1.05rem;
	white-space: nowrap;
	color: var(--sinit-ink);
	direction: ltr;
}
.sinit-phone__icon { color: var(--sinit-accent); }

/* ---- תפריט אופקי (mod_menu) */
.sinit-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sinit-nav ul ul { display: none; }
.sinit-nav a, .sinit-nav .separator {
	display: block;
	padding: .55rem .85rem;
	border-radius: var(--sinit-radius-sm);
	color: var(--sinit-ink);
	font-weight: 600;
}
.sinit-nav a:hover { background: var(--sinit-bg-soft); text-decoration: none; }
.sinit-nav .current > a,
.sinit-nav .active > a { color: var(--sinit-primary); background: var(--sinit-bg-soft); }

@media (max-width: 991px) {
	.sinit-nav { display: none; }
}

/* ---- כפתור המבורגר */
.sinit-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--sinit-line);
	border-radius: var(--sinit-radius-sm);
	background: transparent;
	cursor: pointer;
}
.sinit-burger span {
	display: block;
	height: 2px;
	background: var(--sinit-ink);
	transition: transform .2s ease, opacity .2s ease;
}
@media (max-width: 991px) { .sinit-burger { display: flex; } }

/* ============================================================ offcanvas */
.sinit-offcanvas {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(320px, 85vw);
	z-index: 200;
	padding: 3.5rem 1.25rem 1.25rem;
	background: var(--sinit-bg);
	border-inline-start: 1px solid var(--sinit-line);
	box-shadow: var(--sinit-shadow);
	overflow-y: auto;
}
.sinit-offcanvas[hidden] { display: none; }

.sinit-offcanvas__close {
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-end: .75rem;
	width: 40px;
	height: 40px;
	font-size: 1.75rem;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--sinit-ink);
	cursor: pointer;
}
.sinit-offcanvas ul { margin: 0; padding: 0; list-style: none; }
.sinit-offcanvas li + li { border-block-start: 1px solid var(--sinit-line); }
.sinit-offcanvas a { display: block; padding: .8rem .25rem; color: var(--sinit-ink); font-weight: 600; }

.sinit-backdrop {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: rgba(0, 0, 0, .45);
}

/* ============================================================ hero + bottom */
/* קרקע כהה קבועה: מודול הירו נטען אחרי התמונה, ובלי רקע מוגדר נראית
   הבהקה לבנה עד שהתמונה מגיעה. */
.sinit-hero {
	position: relative;
	background: var(--sinit-dark);
	color: var(--sinit-on-dark);
}
.sinit-hero > * { margin: 0; }
.sinit-hero img { width: 100%; object-fit: cover; display: block; }
.sinit-hero h1, .sinit-hero h2 { color: var(--sinit-on-dark); }
.sinit-hero p { color: var(--sinit-on-dark-soft); }

.sinit-breadcrumbs {
	background: var(--sinit-bg-soft);
	font-size: .875rem;
	border-block-end: 1px solid var(--sinit-line);
}
.sinit-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .6rem 0; list-style: none; }

.sinit-bottom {
	background: var(--sinit-bg-soft);
	border-block-start: 1px solid var(--sinit-line);
	padding-block: 2.5rem;
}
.sinit-bottom__grid {
	display: grid;
	gap: var(--sinit-gap);
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ============================================================ פסי תוכן
   מיקומי section-a/b/c, דרך ה-chrome ‏sinitsection. הרקע מגיע לקצוות
   המסך והטקסט נשאר ברוחב הקריא של .sinit-container שבפנים.
   ההפרדה בין פסים היא בהחלפת רקע, לא בקו — כך שני פסים סמוכים באותו
   גוון פשוט נראים כפס אחד, וזה הרצוי. */
.sinit-section {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
	background: var(--sinit-bg);
}

.sinit-section--soft { background: var(--sinit-bg-soft); }

.sinit-section--dark {
	background: var(--sinit-dark);
	color: var(--sinit-on-dark);
}
.sinit-section--dark h1,
.sinit-section--dark h2,
.sinit-section--dark h3,
.sinit-section--dark h4 { color: var(--sinit-on-dark); }
.sinit-section--dark p,
.sinit-section--dark .sinit-lead,
.sinit-section--dark .sinit-rail__hint { color: var(--sinit-on-dark-soft); }
.sinit-section--dark a { color: var(--sinit-accent); }
.sinit-section--dark .sinit-card {
	background: rgb(255 255 255 / .05);
	border-color: rgb(255 255 255 / .14);
}

.sinit-section__title { margin-block-end: .75rem; }

/* ---- רַכֶּבֶת גלילה אופקית (גלריית הזוכים)
   בתכונות לוגיות בלבד: ב-RTL ההתחלה היא מימין, והדפדפן מיישר לבד.
   חישוב כיוון ב-JS היה נשבר בדיוק בשפה שהאתר נכתב בשבילה. */
.sinit-rail {
	display: flex;
	gap: var(--sinit-gap);
	margin: 0;
	padding: 0 0 1rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--sinit-accent) var(--sinit-line);
}
.sinit-rail > * {
	flex: 0 0 clamp(220px, 62vw, 300px);
	scroll-snap-align: start;
}

/* בזמן גרירה ה-snap מכובה, אחרת הוא נלחם בעכבר ומחזיר את הפריט אחורה */
.sinit-rail.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.sinit-rail::-webkit-scrollbar { height: 6px; }
.sinit-rail::-webkit-scrollbar-track { background: var(--sinit-line); border-radius: 3px; }
.sinit-rail::-webkit-scrollbar-thumb { background: var(--sinit-accent); border-radius: 3px; }

.sinit-rail__hint {
	margin-block: .75rem 0;
	font-size: .875rem;
	color: var(--sinit-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.sinit-rail { scroll-behavior: auto; }
}

/* ============================================================ module card */
.sinit-card {
	background: var(--sinit-bg);
	border: 1px solid var(--sinit-line);
	border-radius: var(--sinit-radius);
	padding: 1.25rem;
	margin-block-end: var(--sinit-gap);
}
.sinit-card__title {
	margin: 0 0 .85rem;
	padding-block-end: .6rem;
	border-block-end: 2px solid var(--sinit-primary);
	font-size: 1.1rem;
}

/* ============================================================ footer
   פוטר כהה, כמו באתר הייחוס. אין margin-block-start: פס תוכן שנגמר
   מיד מעליו היה מקבל רצועה לבנה באמצע. ההפרדה בעמודים רגילים מגיעה
   מה-padding של .sinit-layout. */
.sinit-footer {
	background: var(--sinit-dark);
	color: var(--sinit-on-dark);
	padding-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.sinit-footer a { color: var(--sinit-on-dark); }
.sinit-footer a:hover { color: var(--sinit-accent); }

/* --sinit-footer-cols מגיע inline מ-index.php ומחזיק את מספר העמודות
   המאוכלסות בפועל, כדי ששתי עמודות לא ייפרסו כאילו הן שלוש. */
.sinit-footer__grid {
	display: grid;
	gap: var(--sinit-gap);
	grid-template-columns: 1fr;
	padding-block-end: 2rem;
}
@media (min-width: 768px) {
	.sinit-footer__grid {
		grid-template-columns: repeat(var(--sinit-footer-cols, 3), minmax(0, 1fr));
	}
}
.sinit-footer__col ul { margin: 0; padding: 0; list-style: none; }
.sinit-footer__col li { margin-block-end: .5rem; }

.sinit-footer__info { padding-block-end: 2rem; }
.sinit-footer__title { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); color: var(--sinit-on-dark); }
.sinit-footer__text { color: var(--sinit-on-dark-soft); }
.sinit-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

/* דיסקליימר משפטי: קטן ומאופק בכוונה — הוא חייב להופיע, אבל הוא לא
   מה שהתורם בא לקרוא. */
.sinit-footer__legal {
	padding-block: 1.25rem;
	border-block-start: 1px solid rgb(255 255 255 / .12);
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--sinit-on-dark-soft);
}
.sinit-footer__legal p:last-child { margin: 0; }

.sinit-copyright {
	border-block-start: 1px solid rgb(255 255 255 / .12);
	padding-block: 1rem;
	font-size: .875rem;
	color: var(--sinit-on-dark-soft);
}
.sinit-copyright p { margin: 0; }

/* ============================================================ back to top */
.sinit-totop {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 90;
	width: 46px;
	height: 46px;
	font-size: 1.25rem;
	border: 0;
	border-radius: 50%;
	background: var(--sinit-primary);
	color: #fff;
	box-shadow: var(--sinit-shadow);
	cursor: pointer;
}
.sinit-totop[hidden] { display: none; }

/* ============================================================ buttons + forms */
.sinit-btn, .btn {
	display: inline-block;
	padding: .6rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--sinit-radius-sm);
	font: inherit;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	background: var(--sinit-bg-soft);
	color: var(--sinit-ink);
}
.sinit-btn:hover, .btn:hover { text-decoration: none; filter: brightness(.96); }

.sinit-btn--primary, .btn-primary { background: var(--sinit-primary); color: #fff; }

/* טקסט כהה על הזהב, לא לבן. לבן על #c8a34a נותן יחס ניגודיות ~2.3:1
   ונופל ב-WCAG AA; כהה על אותו רקע נותן ~8.5:1. */
.sinit-btn--accent, .btn-warning { background: var(--sinit-accent); color: #14181f; }

/* על רקע כהה הכפתור הראשי בצבע הפס — צריך היפוך כדי להיראות בכלל */
.sinit-section--dark .sinit-btn--primary,
.sinit-hero .sinit-btn--primary {
	background: var(--sinit-on-dark);
	color: var(--sinit-dark);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea, .form-control {
	width: 100%;
	padding: .55rem .75rem;
	border: 1px solid var(--sinit-line);
	border-radius: var(--sinit-radius-sm);
	font: inherit;
	color: var(--sinit-ink);
	background: var(--sinit-bg);
}

/* ============================================================ system messages */
.alert {
	padding: .9rem 1.1rem;
	border: 1px solid var(--sinit-line);
	border-inline-start: 4px solid var(--sinit-primary);
	border-radius: var(--sinit-radius-sm);
	background: var(--sinit-bg-soft);
	margin-block-end: 1rem;
}
.alert-success { border-inline-start-color: #2f9e44; }
.alert-warning { border-inline-start-color: #f08c00; }
.alert-danger, .alert-error { border-inline-start-color: #e03131; }

/* ============================================================ grid subset
   ג'ומלה ו-VirtueMart פולטים מחלקות Bootstrap ב-layouts שלהם. זו כמות
   מינימלית של תאימות, לא Bootstrap מלא. אם override פולט מחלקה שלא כאן —
   להוסיף כאן, לא לייבא את כל הפריימוורק. */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -.75rem;
}
.row > [class*="col-"] { padding-inline: .75rem; width: 100%; }

.col-12 { width: 100%; }
@media (min-width: 768px) {
	.col-md-3 { width: 25%; }
	.col-md-4 { width: 33.3333%; }
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.6667%; }
	.col-md-9 { width: 75%; }
}
@media (min-width: 992px) {
	.col-lg-3 { width: 25%; }
	.col-lg-4 { width: 33.3333%; }
	.col-lg-6 { width: 50%; }
	.col-lg-8 { width: 66.6667%; }
}

.d-none { display: none !important; }
.text-center { text-align: center; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================ print */
@media print {
	.sinit-topbar, .sinit-header, .sinit-hero, .sinit-bottom,
	.sinit-footer, .sinit-totop, .sinit-offcanvas, .sinit-skip { display: none !important; }
	body { color: #000; background: #fff; }
}