/*
Theme Name: HD Solutions FSE
Theme URI: https://hdsolutions.co.il/
Author: HD Solutions
Author URI: https://hdsolutions.co.il/
Description: תבנית בלוקים (FSE) לחד פתרונות — מתח נמוך, סיבים אופטיים, רשתות תקשורת ואבטחה. מבוססת על שפת העיצוב הכחולה של המותג, עם טופס יצירת קשר מאובטח ותמיכה מלאה ב-RTL ו-WCAG 2.1 AA.
Version: 3.6.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hd-solutions
Tags: block-patterns, full-site-editing, rtl-language-support, accessibility-ready, business
*/

/* =====================================================
   DESIGN TOKENS — נגזרים מ-theme.json כדי לשמור מקור אמת אחד
   ===================================================== */

/*
 * ערכי הנפילה־לאחור זהים ל-theme.json. הם מבטיחים שהעיצוב עומד גם בהקשרים
 * שבהם משתני ה-preset אינם זמינים — למשל בתוך iframe של העורך לפני
 * שהסגנונות הגלובליים נטענו.
 */
:root {
	--hd-blue:       var(--wp--preset--color--blue, #1a1a8c);
	--hd-blue-mid:   var(--wp--preset--color--blue-mid, #0000cc);
	--hd-blue-hover: var(--wp--preset--color--blue-hover, #2424a8);
	--hd-blue-dark:  var(--wp--preset--color--blue-dark, #0d0d66);
	--hd-blue-light: var(--wp--preset--color--blue-light, #e8e8f8);
	--hd-blue-pale:  var(--wp--preset--color--blue-pale, #f2f2fb);
	--hd-white:      var(--wp--preset--color--white, #ffffff);
	--hd-off-white:  var(--wp--preset--color--off-white, #f8f8fc);
	--hd-gray-100:   var(--wp--preset--color--gray-100, #e4e4ea);
	--hd-gray-200:   var(--wp--preset--color--gray-200, #c8c8d4);
	--hd-gray-900:   var(--wp--preset--color--ink, #14142a);
	--hd-text:       var(--wp--preset--color--ink, #14142a);
	--hd-text-muted: var(--wp--preset--color--muted, #4a4a68);

	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  40px;
	--space-2xl: 64px;
	--space-3xl: 96px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 4px rgba(26, 26, 140, .08);
	--shadow-md: 0 4px 16px rgba(26, 26, 140, .12);
	--shadow-lg: 0 8px 32px rgba(26, 26, 140, .16);

	--focus-ring: 0 0 0 3px rgba(26, 26, 140, .45);
}

/*
 * חובה: כל רוחב שנקבע כאן הוא width:100% יחד עם padding ו-border — למשל
 * שדות הטופס. בלי border-box הריפוד נוסף מעל ה-100%, כל שדה יוצא רחב
 * מהמכל שלו, וב-RTL העודף בורח שמאלה. בלוקים של הליבה כבר מניחים
 * border-box, כך שהכלל הזה מיישר את שאר האתר איתם.
 */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/*
 * רשת ביטחון נגד גלילה אופקית. clip ולא hidden — hidden על html/body הופך
 * אותם למכל גלילה ושובר את ה-position:sticky של הכותרת העליונה.
 */
html { overflow-x: clip; }

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

/*
 * מכולות flex/grid מנהלות את הריווח דרך gap. הכלל הזה מנטרל את
 * מרווחי blockGap שהעורך מוסיף לילדים, אחרת הם נערמים על ה-gap.
 */
.hero-inner > *,
.hero-stats > *,
.services-grid > *,
.about-strip-inner > *,
.about-metrics > *,
.whyus-inner > *,
.features > *,
.feat > *,
.info-cards > *,
.info-card > * {
	margin-block: 0;
}

/* WCAG 2.1 §2.4.7 — פוקוס נראה על כל אלמנט אינטראקטיבי */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--hd-blue-mid);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/*
 * קישור דילוג לתוכן — WCAG 2.4.1
 *
 * הקישור יושב בתוך חלק ההדר (בתוך ה-banner, כדי ש-axe לא יסמן "תוכן
 * מחוץ ל-landmark"), וההזרקה של הליבה מנוטרלת ב-functions.php. לכן
 * ה-CSS כאן מספק את שני המצבים — גם ההסתרה במנוחה, שקודם הגיעה
 * מהגיליון של הליבה שכבר לא נטען.
 */
.skip-link.screen-reader-text {
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	overflow: visible;
	position: fixed !important;
	inset-block-start: 0;
	inset-inline-start: 5px;
	z-index: 100000;
	background-color: var(--hd-blue);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: normal;
	text-decoration: none;
	padding: 14px 24px;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/*
 * הסתרה מהעין תוך שמירה על הקראה בקורא מסך.
 * clip הוצא משימוש; clip-path הוא היורש. שניהם נשארים — clip-path
 * לדפדפנים מודרניים, clip כנפילה־לאחור לישנים.
 */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================
   כפתורים — סגנון "מתאר" ו"לבן" נבחרים מהעורך
   ===================================================== */

.wp-block-button__link { transition: background .2s, color .2s, border-color .2s, transform .1s; }
.wp-block-button__link:active { transform: scale(.98); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--hd-blue);
	border-color: var(--hd-blue);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--hd-blue-pale);
	color: var(--hd-blue);
	border-color: var(--hd-blue);
}

.wp-block-button.is-style-hd-white > .wp-block-button__link {
	background: #fff;
	color: var(--hd-blue);
	border-color: #fff;
}
.wp-block-button.is-style-hd-white > .wp-block-button__link:hover {
	background: var(--hd-blue-pale);
	border-color: var(--hd-blue-pale);
	color: var(--hd-blue);
}

/* =====================================================
   כותרת עליונה
   ===================================================== */

.hd-header {
	background: var(--hd-white);
	border-block-end: 1px solid var(--hd-gray-100);
	position: sticky;
	inset-block-start: 0;
	z-index: 1000;
}

.hd-header .hd-header-inner { min-height: 72px; }

/*
 * גודל הלוגו נשלט על ידי רוחב הבלוק (עיצוב ← עורך ← כותרת עליונה),
 * לא מכאן. קביעת height עם width:auto הייתה גוזרת רוחב מיחס התמונה —
 * 8:1, כלומר 390px בגובה 48 — רחב מכל מסך טלפון, וזה היה מקור הגלילה
 * האופקית. max-width על המכל מבטיח שגם רוחב בלוק גדול לא יחרוג.
 */
.hd-header .wp-block-site-logo { max-width: 55vw; }
/*
 * max-width ולא width:100% — גודל התצוגה מגיע מה-style המוטבע של הבלוק
 * (או של הנפילה-לאחור), וכאן רק מובטח שהוא לא חורג מהמכל במסך צר.
 * width:100% היה מפסיד ממילא ל-style מוטבע, ובנפילה-לאחור בלי style
 * היה מותח את התמונה לרוחבה הטבעי.
 */
.hd-header .wp-block-site-logo img { max-width: 100%; height: auto; }

.hd-header .wp-block-navigation {
	font-size: .9375rem;
	font-weight: 400;
}
.hd-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--hd-text-muted);
	text-decoration: none;
	padding-block: 6px;
	border-block-end: 2px solid transparent;
	transition: color .2s, border-color .2s;
}
.hd-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.hd-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--hd-blue);
	border-block-end-color: var(--hd-blue);
}
.hd-header .wp-block-navigation__responsive-container-open,
.hd-header .wp-block-navigation__responsive-container-close {
	color: var(--hd-blue);
}

/* =====================================================
   HERO
   ===================================================== */

.hero {
	background: var(--hd-blue-pale);
	padding-block: var(--space-3xl);
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, var(--hd-blue-mid) 1px, transparent 1px);
	background-size: 30px 30px;
	opacity: .05;
	pointer-events: none;
}

.hero > * { position: relative; }

.hero-inner {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
}
.hero-content { flex: 1; min-width: 0; }

.hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--hd-blue);
	border: 1px solid var(--hd-gray-200);
	font-size: .8125rem;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 20px;
	margin-block-end: var(--space-lg);
	letter-spacing: .3px;
	line-height: 1.6;
}
.hero-tag::before {
	content: '';
	width: 7px; height: 7px;
	background: var(--hd-blue-mid);
	border-radius: 50%;
	flex: 0 0 auto;
}

.hero h1 {
	margin-block-end: var(--space-lg);
	/* מחלק את השורות באופן שווה במקום להשאיר מילה בודדת בשורה אחרונה */
	text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--hd-blue); }

.hero-desc {
	font-size: 1.0625rem;
	color: var(--hd-text-muted);
	max-width: 500px;
	margin-block-end: var(--space-xl);
}

.hero-btns { margin-block-end: var(--space-2xl); }
.hero-btns.wp-block-buttons { gap: var(--space-md); }

.hero-stats {
	display: flex;
	gap: var(--space-xl);
	padding-block-start: var(--space-xl);
	border-block-start: 1px solid var(--hd-gray-200);
	flex-wrap: wrap;
}
.hero-stats > .wp-block-group { flex: 0 0 auto; }

.stat-num {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--hd-blue);
	line-height: 1;
	margin: 0;
}
.stat-label {
	font-size: .8125rem;
	color: var(--hd-text-muted);
	margin-block-start: 4px;
	margin-block-end: 0;
}

.hero-visual { flex-shrink: 0; width: 280px; }
.hero-card {
	background: #fff;
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	text-align: center;
	box-shadow: var(--shadow-md);
	position: relative;
}
/*
 * inline-start = הפינה שממנה מתחילים לקרוא: ימין ב-RTL, שמאל ב-LTR.
 * קודם היה כאן inline-end, ולכן התגית נחתה בפינה השמאלית באתר עברי.
 */
.hero-badge {
	position: absolute;
	inset-block-start: -14px;
	inset-inline-start: -14px;
	background: var(--hd-blue);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
}
.hero-card svg { margin-inline: auto; }
/*
 * הכרטיס כולו aria-hidden ודקורטיבי, ולכן הכותרת שלו אינה כותרת אמיתית
 * אלא פסקה מודגשת — כדי שלא תיצור דילוג h1→h4 במפת הכותרות.
 * הסגוליות (0,2,0) גוברת על .hero-card p שמאפסת מרווחים.
 */
.hero-card .hero-card-title {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--hd-gray-900);
	margin-block: var(--space-md) 6px;
}
.hero-card p  { font-size: .8125rem; color: var(--hd-text-muted); margin: 0; }

/* =====================================================
   סקשן משותף
   ===================================================== */

.section { padding-block: var(--space-3xl); }
.section--alt  { background: var(--hd-off-white); }
.section--blue { background: var(--hd-blue); color: #fff; }

.section-header { text-align: center; margin-block-end: var(--space-2xl); }
.section-pill,
.is-style-section-pill {
	display: inline-block;
	background: var(--hd-blue-light);
	color: var(--hd-blue);
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	margin-block-end: 10px;
	letter-spacing: .3px;
	line-height: 1.7;
}
.section--blue .section-pill { background: rgba(255, 255, 255, .18); color: #fff; }
.section-header h2 { margin-block-end: 10px; }
.section-header p  { color: var(--hd-text-muted); font-size: .9375rem; margin: 0; }
.section--blue :is(h2, h3, h4, p) { color: #fff; }

/* =====================================================
   שירותים
   ===================================================== */

/*
 * שלושה כרטיסים בשורה — שש השירותים מתחלקים לשתי שורות מלאות.
 * auto-fit היה נותן חמישה ברוחב 1200 ומשאיר כרטיס יתום בשורה שנייה.
 */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.service-card,
.is-style-service-card {
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	transition: transform .2s, box-shadow .2s, border-color .2s;
	color: inherit;
	text-align: center;
}
.service-card:hover,
.service-card:focus-within,
.is-style-service-card:hover,
.is-style-service-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--hd-blue-mid);
}

/* -----------------------------------------------------
   אייקוני כרטיסים — קופסה אחידה, לאמוג'י או לתמונה
   -----------------------------------------------------
   שלושת סוגי הכרטיסים חולקים מכניקה אחת: קופסה במידות קבועות שהתוכן
   ממורכז בה בשני הצירים.

   בלי הקופסה כל אמוג'י תופס מידות אחרות — 📍 גבוה מ-⚡, 🤝 רחב מ-📋 —
   והשורות נראות עקומות גם כשהן מיושרות בקוד.

   אותה קופסה היא גם מה שמאפשר להחליף אמוג'י בתמונה בלי ששום מידה תזוז.
   שתי דרכים לעשות זאת, ושתיהן נתמכות כאן:

   1. בלוק תמונה שנבחר לו הסגנון "אייקון כרטיס" (is-style-hd-icon) —
      הדרך המומלצת, בקליק אחד מסרגל הבלוק, בלי להקליד שמות מחלקות.
   2. בלוק תמונה שקיבל ידנית את אותה מחלקה של הפסקה שהוחלפה.

   הליבה מרנדרת <figure class="wp-block-image ...">, ולכן הסלקטורים כאן
   תופסים גם פסקה וגם figure.
   ----------------------------------------------------- */
.service-icon,
.feat-icon,
.info-card-icon,
.is-style-hd-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	overflow: hidden;
	line-height: 1;
	text-align: center;
	border-radius: var(--radius-md);
}

/*
 * figure.X ולא רק .X — לבלוק התמונה של הליבה יש כלל משלו באותה סגוליות
 * על הסלקטור .wp-block-image img, שקובע max-width ו-height. הוספת שם
 * התגית מעלה את הסגוליות ומכריעה בלי להזדקק ל-!important.
 */
.service-icon img,
.feat-icon img,
.info-card-icon img,
.is-style-hd-icon img,
figure.service-icon img,
figure.feat-icon img,
figure.info-card-icon img,
figure.is-style-hd-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	padding: 6px;
}

/*
 * לבלוק תמונה יש שדה כיתוב. בקופסה בגובה קבוע עם overflow:hidden כיתוב
 * היה נחתך באמצע — מסתירים אותו במפורש כדי שהכשל יהיה נקי ולא מבולגן.
 */
.service-icon figcaption,
.feat-icon figcaption,
.info-card-icon figcaption,
.is-style-hd-icon figcaption {
	display: none;
}

.service-icon,
figure.service-icon {
	width: 56px;
	height: 56px;
	/* margin מקוצר ולא margin-inline — שורה אחת שמאפסת גם שאריות מהעורך */
	margin: 0 auto var(--space-lg);
	background: var(--hd-blue-light);
	font-size: 1.5rem;
}

/*
 * תמונה בסגנון "אייקון כרטיס" — המידה נגזרת מהמקום שבו הבלוק יושב, כדי
 * שאותו סגנון יתאים לשלושת סוגי הכרטיסים בלי שהמשתמש יבחר גודל.
 * ברירת המחדל למטה חלה אם הבלוק הונח מחוץ לכרטיס.
 */
.is-style-hd-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-md);
	background: var(--hd-blue-light);
}
.service-card > .is-style-hd-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--space-lg);
}
.feat > .is-style-hd-icon {
	width: 44px;
	height: 44px;
	margin: 0;
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
}
.info-card > .is-style-hd-icon {
	width: 44px;
	height: 44px;
	margin: 0;
}

/*
 * מרכוז שעומד גם מול סגנון inline.
 *
 * אם נקבע לבלוק ריווח מהעורך, וורדפרס מדפיס margin ישירות על האלמנט —
 * ו-inline גובר על כל כלל בגיליון, בלי קשר לסגוליות. זו ההגנה היחידה
 * שעובדת מול זה.
 *
 * מוגבל לציר האופקי בלבד: ריווח אנכי שנקבע מהעורך ממשיך לעבוד כרגיל,
 * ורק המרכוז ננעל. זו הסיבה ש-margin-inline ולא margin.
 */
.service-icon,
figure.service-icon,
.service-card > .is-style-hd-icon {
	margin-inline: auto !important;
}

.service-card h3 { font-size: 1rem; margin-block-end: 8px; }
.service-card p  { font-size: .875rem; color: var(--hd-text-muted); margin: 0; }

/* =====================================================
   רצועת "מי אנחנו"
   ===================================================== */

.about-strip-inner {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
}
.about-strip-text { flex: 1; min-width: 0; }
.about-strip-text h2 { color: #fff; margin-block-end: 12px; }
.about-strip-text p  { color: rgba(255, 255, 255, .85); font-size: .9375rem; margin: 0; }

.about-metrics {
	display: flex;
	gap: var(--space-2xl);
	flex-shrink: 0;
	flex-wrap: wrap;
}
.metric { text-align: center; color: #fff; }
.metric-num {
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
	color: #fff;
	margin: 0;
}
.metric-label {
	font-size: .8125rem;
	opacity: .8;
	margin-block-start: 4px;
	margin-block-end: 0;
	color: #fff;
}

/* =====================================================
   למה אנחנו
   ===================================================== */

.whyus-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
}
.whyus-text h2 { margin-block-end: var(--space-xl); }

.features { display: flex; flex-direction: column; gap: var(--space-lg); }
/* center ולא flex-start — האייקון מיושר לגובה מול גוש הטקסט, לא לשורה הראשונה */
.feat { display: flex; gap: var(--space-md); align-items: center; }
.feat-icon,
figure.feat-icon {
	width: 44px;
	height: 44px;
	margin: 0;
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
	font-size: 1.25rem;
}
.feat-body { min-width: 0; }
.feat-body h3 { font-size: .9375rem; margin-block-end: 3px; }
.feat-body p  { font-size: .875rem; color: var(--hd-text-muted); margin: 0; }

.info-cards { display: flex; flex-direction: column; gap: var(--space-md); }
.info-card,
.is-style-info-card {
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	display: flex;
	align-items: center;
	gap: var(--space-md);
}
.info-card-icon,
figure.info-card-icon {
	width: 44px;
	height: 44px;
	margin: 0;
	background: var(--hd-blue-light);
	font-size: 1.25rem;
}
.info-card h3 { font-size: .9375rem; margin-block-end: 3px; }
.info-card p  { font-size: .8125rem; color: var(--hd-text-muted); margin: 0; }

/* =====================================================
   טופס יצירת קשר
   ===================================================== */

.contact-form-wrap {
	background: var(--hd-blue-pale);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-lg);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-sm);
	max-width: 720px;
	margin-inline: auto;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin-block-end: var(--space-md);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: var(--space-md);
}
.form-row .form-group { margin-block-end: 0; }

/*
 * איפוס margin אנכי על ילדי הקבוצה.
 *
 * המרווחים בטופס מנוהלים בשני מקומות בלבד: gap בתוך הקבוצה, ו-margin
 * בתחתית הקבוצה עצמה. אם תוסף או סגנון גלובלי מוסיף margin לתווית או
 * לשדה, הוא נערם על אלה והטופס נפרש לגובה כפול.
 *
 * sr-only מוחרג — ה-margin השלילי שלו הוא חלק משיטת ההסתרה מקוראי מסך,
 * ואיפוסו היה מחזיר את הטקסט לזרימת העמוד.
 */
.form-group > *:not(.sr-only) {
	margin-block: 0;
}

/* WCAG 1.3.1 — תווית מקושרת לכל שדה */
.form-group label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--hd-text-muted);
}

.form-group input,
.form-group textarea,
.form-group select {
	background-color: var(--hd-white);
	border: 1.5px solid var(--hd-gray-200);
	border-radius: var(--radius-md);
	padding: 11px 14px;
	font-size: .9375rem;
	font-family: inherit;
	color: var(--hd-text);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
	/* בלי זה, הרוחב הפנימי של השדה גובר על ה-track ומרחיב אותו */
	min-width: 0;
}

/* התיבה הנפתחת מקבלת חץ משלנו כדי שתיראה זהה לשאר השדות */
.form-group select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a4a68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 12px 8px;
	padding-inline-start: 40px;
	cursor: pointer;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	border-color: var(--hd-blue-mid);
	box-shadow: var(--focus-ring);
	outline: none;
}
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group select[aria-invalid="true"] {
	border-color: #b42318;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .15);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/*
 * Honeypot — מוסתר בלי לצאת מגבולות המסמך.
 *
 * הגרסה הקודמת השתמשה ב-position:absolute עם inset-inline-end:-9999px.
 * לשדה לא היה אב ממוקם, ולכן הוא נתלה על גוף המסמך ונדחף 9999px מחוץ
 * למסך — ואלמנט absolute כן מרחיב את שטח הגלילה. התוצאה הייתה מסמך
 * ברוחב 10,359px בטלפון של 360px.
 *
 * הכיווץ לאפס משיג את אותה הסתרה בלי לגעת בגבולות: הבוט עדיין רואה
 * שדה טקסט תקין ב-DOM וממלא אותו, המשתמש לא רואה כלום, וקורא המסך
 * מדלג בזכות aria-hidden ו-tabindex="-1" שבסימון.
 */
.hds-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.captcha-box {
	display: grid;
	grid-template-columns: 1fr 140px;
	align-items: center;
	gap: var(--space-md);
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
}
.captcha-box span {
	color: var(--hd-text);
	font-weight: 700;
	font-size: 1.0625rem;
}
.captcha-box input {
	text-align: center;
	font-weight: 700;
	/* פריט grid מקבל min-width:auto כברירת מחדל וגולש מהעמודה שלו */
	min-width: 0;
	width: 100%;
}

.form-submit {
	width: 100%;
	background: var(--hd-blue);
	color: #fff;
	border: none;
	padding: 14px;
	border-radius: var(--radius-md);
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	margin-block-start: 6px;
	transition: background .2s, transform .12s, box-shadow .2s;
}
.form-submit:hover { background: var(--hd-blue-hover); box-shadow: var(--shadow-md); }
.form-submit:disabled { cursor: wait; opacity: .78; }

.form-status { margin-block-start: var(--space-md); font-size: .9375rem; font-weight: 600; }
.form-status.is-success { color: #16794c; }
.form-status.is-error   { color: #b42318; }

/* --- אישור מדיניות פרטיות --- */

.form-consent { margin-block-start: var(--space-md); }

.consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .875rem;
	font-weight: 400;
	color: var(--hd-text);
	cursor: pointer;
	line-height: 1.6;
}
.consent-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin-block-start: 3px;
	accent-color: var(--hd-blue);
	cursor: pointer;
	flex: 0 0 auto;
}
.consent-label a {
	color: var(--hd-blue);
	text-decoration: underline;
	font-weight: 600;
}
.consent-label input[aria-invalid="true"] { outline: 2px solid #b42318; outline-offset: 2px; }

/* =====================================================
   מבצע החודש
   ===================================================== */

.hd-promo {
	background: var(--hd-blue);
	color: #fff;
	padding-block: var(--space-lg);
}
.hd-promo :is(h2, h3, p) { color: #fff; }

.hd-promo-inner {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}
.hd-promo-inner > * { margin-block: 0; }

.hd-promo-image {
	flex: 0 0 auto;
	width: 120px;
	margin: 0;
}
.hd-promo-image img {
	width: 120px;
	height: 90px;
	object-fit: cover;
	display: block;
}

.hd-promo-text { flex: 1; min-width: 0; }

.hd-promo-tag {
	display: inline-block;
	background: rgba(255, 255, 255, .18);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 3px 12px;
	border-radius: 20px;
	margin-block-end: 6px;
}
/* font-weight מפורש: זו כבר לא כותרת, ולכן theme.json לא מעבה אותה */
.hd-promo-title { font-size: 1.25rem; font-weight: 700; margin-block-end: 4px; line-height: 1.3; }
.hd-promo-desc  { font-size: .9375rem; opacity: .9; margin: 0; }

.hd-promo-cta { flex: 0 0 auto; }

/* =====================================================
   תיק עבודות
   ===================================================== */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	list-style: none;
	padding: 0;
	margin: 0;
}
.portfolio-grid > li { margin: 0; }

.project-card {
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	height: 100%;
}
.project-card:hover,
.project-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--hd-blue-mid);
}
.project-card > * { margin-block: 0; }

.project-thumb { margin: 0; }
.project-thumb img {
	width: 100%;
	display: block;
	object-fit: cover;
	background: var(--hd-blue-pale);
}

.project-title {
	font-size: 1.0625rem;
	padding: var(--space-lg) var(--space-lg) 0;
	margin: 0;
}
.project-title a { color: var(--hd-gray-900); text-decoration: none; }
.project-title a:hover { color: var(--hd-blue); }

.project-excerpt {
	font-size: .875rem;
	color: var(--hd-text-muted);
	padding: 8px var(--space-lg) var(--space-lg);
	margin: 0;
}

.project-cta {
	background: var(--hd-off-white);
	border-radius: var(--radius-lg);
	padding: var(--space-2xl) var(--space-lg);
}

/* =====================================================
   מחירון
   ===================================================== */

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	align-items: stretch;
}
.pricing-grid > * { margin-block: 0; }

.price-card {
	position: relative;
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.price-card > * { margin-block: 0; }

/*
 * תמונת הכרטיס אופציונלית. בלוק תמונה ריק לא מרנדר כלום, ולכן כרטיס
 * בלי תמונה נשאר בדיוק כפי שהיה. המרווחים השליליים מוציאים את התמונה
 * אל קצוות הכרטיס, מעבר לריפוד שלו. הסלקטור עם > גובר על
 * .price-card > * שמאפס מרווחים, אחרת המרווח השלילי היה מתבטל.
 */
.price-card > .price-image {
	margin: calc(var(--space-xl) * -1) calc(var(--space-lg) * -1) var(--space-lg);
	overflow: hidden;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.price-card > .price-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
/* בכרטיס המודגש המסגרת עבה יותר, ולכן המרווח השלילי גדול ב-1px */
.price-card--featured > .price-image {
	margin-inline: calc((var(--space-lg) + 1px) * -1);
	margin-block-start: calc((var(--space-xl) + 1px) * -1);
}

.price-card--featured {
	border-color: var(--hd-blue);
	border-width: 2px;
	box-shadow: var(--shadow-md);
}

.price-badge {
	position: absolute;
	inset-block-start: -13px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	background: var(--hd-blue);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	white-space: nowrap;
}

.price-card h3 { font-size: 1.0625rem; }

.price-value {
	font-size: 2rem;
	font-weight: 900;
	color: var(--hd-blue);
	line-height: 1.1;
}
.price-unit {
	font-size: .8125rem;
	color: var(--hd-text-muted);
	margin-block-end: var(--space-md);
}

.price-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: start;
	border-block-start: 1px solid var(--hd-gray-100);
	padding-block-start: var(--space-md);
}
.price-list li {
	font-size: .875rem;
	color: var(--hd-text-muted);
	padding-block: 5px;
	padding-inline-start: 22px;
	position: relative;
}
.price-list li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 12px;
	width: 12px;
	height: 6px;
	border-inline-start: 2px solid var(--hd-blue);
	border-block-end: 2px solid var(--hd-blue);
	transform: rotate(-45deg);
}

.pricing-note {
	max-width: 760px;
	margin-inline: auto;
	margin-block-start: var(--space-xl);
	font-size: .8125rem;
	color: var(--hd-text-muted);
	line-height: 1.7;
}

/* =====================================================
   כותרת תחתונה
   ===================================================== */

.hd-footer {
	background: var(--hd-gray-900);
	padding-block: var(--space-2xl) var(--space-lg);
}
.hd-footer :is(h1, h2, h3, h4, p, li) { color: #fff; }
.hd-footer .footer-top {
	padding-block-end: var(--space-2xl);
	border-block-end: 1px solid rgba(255, 255, 255, .1);
	margin-block-end: var(--space-xl);
}
.hd-footer .footer-brand img { height: 40px; width: auto; margin-block-end: var(--space-md); }
.hd-footer .footer-brand p {
	font-size: .875rem;
	color: rgba(255, 255, 255, .78);
	line-height: 1.7;
}
.hd-footer .footer-col h3 { font-size: .9375rem; margin-block-end: var(--space-md); }
.hd-footer .footer-col p,
.hd-footer .footer-col li { margin-block-end: 8px; }
.hd-footer .footer-col a,
.hd-footer .footer-contact-item a {
	color: rgba(255, 255, 255, .78);
	font-size: .875rem;
	text-decoration: none;
	transition: color .2s;
}
.hd-footer .footer-col a:hover,
.hd-footer .footer-contact-item a:hover { color: var(--hd-blue-light); }
.hd-footer .footer-contact-item {
	font-size: .875rem;
	color: rgba(255, 255, 255, .78);
	margin-block-end: 8px;
}
.hd-footer .footer-bottom { text-align: center; }
.hd-footer .footer-bottom p {
	font-size: .9375rem;
	color: rgba(255, 255, 255, .82);
	margin: 0;
	font-weight: 600;
}

/* =====================================================
   ארכיונים / פוסטים
   ===================================================== */

.archive-layout { padding-block: var(--space-3xl); }
.archive-header { margin-block-end: var(--space-2xl); }

/* טופס חיפוש חוזר מתחת לכותרת התוצאות */
.search-again { margin-block-start: var(--space-lg); max-width: 460px; }

.post-card {
	background: var(--hd-white);
	border: 1px solid var(--hd-gray-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	padding: var(--space-lg);
}
.post-card h2 { font-size: 1.25rem; margin-block-end: var(--space-sm); }
.post-card h2 a { color: var(--hd-gray-900); text-decoration: none; }
.post-card h2 a:hover { color: var(--hd-blue); }
.post-meta    { color: var(--hd-text-muted); font-size: .875rem; }
.post-excerpt { color: var(--hd-text-muted); font-size: .9375rem; }

.wp-block-query-pagination { margin-block-start: var(--space-2xl); }
.wp-block-query-pagination :is(a, .current) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	border: 1px solid var(--hd-gray-200);
	border-radius: var(--radius-sm);
	padding-inline: var(--space-md);
	text-decoration: none;
}
.wp-block-query-pagination .current {
	background: var(--hd-blue);
	color: var(--hd-white);
	border-color: var(--hd-blue);
}

.empty-state { max-width: 680px; margin-inline: auto; text-align: center; padding-block: var(--space-3xl); }

/* =====================================================
   רספונסיביות
   ===================================================== */

@media (max-width: 900px) {
	.services-grid  { grid-template-columns: repeat(2, 1fr); }
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.pricing-grid   { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
	.price-badge    { inset-inline-start: auto; inset-inline-end: var(--space-lg); transform: none; }
	.hd-promo-inner { flex-wrap: wrap; }
	.hd-promo-cta   { width: 100%; }
	.hero-inner  { flex-direction: column; align-items: stretch; }
	.hero-visual { width: 100%; max-width: 320px; margin-inline: auto; }
	.hero-desc   { max-width: none; }
	.whyus-inner { grid-template-columns: 1fr; }
	.about-strip-inner { flex-direction: column; align-items: stretch; gap: var(--space-xl); }
	.about-metrics { gap: var(--space-xl); }
}

@media (max-width: 600px) {
	/*
	 * ריפוד השוליים של theme.json הוא 40px לכל צד — 80px מתוך מסך של 375
	 * הם חמישית מהרוחב. מצמצמים אותו במובייל דרך המשתנה של הליבה, כדי
	 * ש-alignwide ימשיך להתיישר נכון.
	 */
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}

	/*
	 * ההדר מוגדר nowrap כדי שבדסקטופ הלוגו והתפריט יישבו בקצוות. במסך צר
	 * שלושת האלמנטים לא נכנסים, והתוצאה היא גלישה אופקית של כל העמוד.
	 */
	.hd-header .hd-header-inner {
		flex-wrap: wrap;
		gap: 12px;
		padding-block: 12px;
	}
	.hd-header .header-cta .wp-block-button__link {
		padding-inline: 18px;
		font-size: .875rem;
	}

	.services-grid  { grid-template-columns: 1fr; }
	.portfolio-grid { grid-template-columns: 1fr; }
	.hd-promo-image, .hd-promo-image img { width: 84px; }
	.hd-promo-image img { height: 64px; }
	.hero, .section { padding-block: var(--space-2xl); }
	.contact-form-wrap { padding: var(--space-lg); }
	.form-row { grid-template-columns: 1fr; }
	.hero-stats { gap: var(--space-lg); }
	.about-metrics { gap: var(--space-lg); }

	/* התגית חורגת מהכרטיס ב-14px; במסך צר זה מספיק כדי לדחוף גלילה */
	.hero-badge { inset-inline-start: 0; }
	.hero-visual { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}