/* Isaak Child – דף הבית. נטען רק בדף הבית (functions.php).
   התוכן והעיצוב: בעמוד "בית" בעורך גוטנברג – צבעים, ריווח, רוחב, עמודות, רשת, מסגרות וטיפוגרפיה
   מוגדרים בהגדרות של כל בלוק (ליבנת, 25.10.2026: מקסימום גוטנברג).
   כאן רק מה שגוטנברג לא יודע לעשות:
   1. אייקון בתוך כפתור (שאר האייקונים: בלוקי תמונה, WebP מספריית המדיה).
   2. גודל לחיצה של 44 פיקסלים לקישורים (WCAG 2.5.5).
   3. כרטיס חנות לחיץ כולו.
   4. רשימת "למה לבחור בנו" ברשת (לבלוק רשימה אין פריסת רשת).
   6. שאלות נפוצות: גודל לחיצה של השאלה (44 פיקסלים).
   7. ריחוף ופוקוס על כפתורים. ביקורות (מתוסף), ציורי הכבל, טלפון אופקי, מצב ניגודיות גבוהה.
   יחידות: rem ו-em. אין תנועה ואין אנימציה. */

/* ===== 1. אייקון וואטסאפ בכפתור (אין תמונה בתוך בלוק כפתור). שאר האייקונים: בלוקי תמונה בעמוד ===== */
:root .isaak-btn-wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}
:root .isaak-btn-wa .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	background-color: currentColor;
	-webkit-mask: url("../images/icons/whatsapp.webp") center / contain no-repeat;
	mask: url("../images/icons/whatsapp.webp") center / contain no-repeat;
}

/* ===== ריחוף ופוקוס על כפתורים: שחור, טקסט לבן (כמו בכל האתר).
   לבלוק כפתור אין צבע לריחוף, וצבעי הכפתור בעורך (has-*-color) גוברים על theme.json ===== */
:root .isaak-home .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--black) !important;
	border-color: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ===== 2. גודל לחיצה: שאלה בשאלות נפוצות. (קישור "עוד" – isaak-more – ב-theme.json, לכל האתר) ===== */
:root .isaak-home .isaak-faq summary {
	box-sizing: border-box;
	min-height: 2.75rem;
	padding-block: 0.375rem;
	cursor: pointer;
}
:root .isaak-home .isaak-faq summary:hover {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}
/* על אדום: מסגרת פוקוס לבנה */
:root .isaak-hero :focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--white);
	outline-offset: 0.1875rem;
}

/* ===== 3. כרטיס חנות לחיץ כולו: הקישור בשם נמתח על הכרטיס. תחנת Tab אחת לכרטיס ===== */
:root .isaak-home .isaak-prod {
	position: relative;
}
:root .isaak-home .isaak-prod a::after {
	content: "";
	position: absolute;
	inset: 0;
}
:root .isaak-home .isaak-prod a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.25rem;
}

/* קוביות החנות: קובייה בלי תמונה (עוד אין צילום) באותו גובה כמו הקוביות שלידה בשורה.
   הקובייה נמתחת לגובה השורה, והרקע האפור ממלא את המקום (הטקסט נשאר למטה) */
:root .isaak-home .isaak-prod-grid > .isaak-prod {
	display: flex;
	flex-direction: column;
}
:root .isaak-home .isaak-prod-grid > .isaak-prod > .wp-block-group:first-child {
	flex-grow: 1;
}

/* ===== 3א. קוביות החנות בטלפון (עד 36em): לכל היותר 2 קוביות בשורה, וקובייה בודדת באמצע (ליבנת, 27.10.2026).
   במחשב ובטאבלט: הרשת של גוטנברג (6 עמודות, רוחב לכל קובייה בהגדרות הבלוק).
   בטלפון כל קובייה בחצי רוחב, והקובייה הרחבה (isaak-prod--wide, הטלוויזיות) ברוחב מלא. תמונות ריבועיות ===== */
@media (max-width: 35.99em) {
	/* 4 עמודות: כל קובייה תופסת 2 (חצי שורה). קובייה אחרונה שנשארת לבד בשורה – באמצע (ליבנת, 27.10.2026) */
	:root .isaak-home .isaak-prod-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	:root .isaak-home .isaak-prod-grid > .isaak-prod {
		grid-column: span 2 !important;
	}
	:root .isaak-home .isaak-prod-grid > .isaak-prod:nth-child(odd of .isaak-prod:not(.isaak-prod--wide)):nth-last-child(1 of .isaak-prod:not(.isaak-prod--wide)) {
		grid-column: 2 / span 2 !important;
	}
	:root .isaak-home .isaak-prod-grid > .isaak-prod--wide {
		grid-column: 1 / -1 !important;
	}
	:root .isaak-home .isaak-prod-grid > .isaak-prod:not(.isaak-prod--wide) img {
		aspect-ratio: 1 !important;
	}
}

/* מסך צר (עד 17.5em, 280 פיקסלים): קובייה אחת בכל שורה (ליבנת, 27.10.2026) */
@media (max-width: 17.5em) {
	:root .isaak-home .isaak-prod-grid > .isaak-prod,
	:root .isaak-home .isaak-prod-grid > .isaak-prod:nth-child(odd of .isaak-prod:not(.isaak-prod--wide)):nth-last-child(1 of .isaak-prod:not(.isaak-prod--wide)) {
		grid-column: 1 / -1 !important;
	}
	/* קובייה אחת בשורה: גם הטלוויזיות ברוחב קובייה אחת, ותמונה ביחס 3:2 כדי שהטלוויזיה תהיה גדולה */
	:root .isaak-home .isaak-prod-grid > .isaak-prod--wide img {
		aspect-ratio: 3 / 2 !important;
	}
}

/* ===== 4. למה לבחור בנו: רשת, אייקון בצד ===== */
:root .isaak-why-list {
	margin: 0;
	padding: 0;
	list-style-type: "\200B"; /* בלי תבליט, ועדיין רשימה ב-Safari/VoiceOver */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.375rem), 1fr));
	gap: 1.5rem;
	line-height: 1.4;
}
:root .isaak-why-list > li {
	position: relative;
	align-self: center;
	padding-inline-start: 2.875rem;
}
:root .isaak-why-list > li > img:first-child {
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}
/* מסך צר מאוד או טקסט מוגדל: האייקון מעל הטקסט, כדי שלטקסט יהיה כל הרוחב (WCAG 1.4.10).
   פחות מ-15.5em: טלפון עם טקסט מוגדל, או חלון צר מאוד. בטלפון רגיל – האייקון בצד, כמו בהדמיה */
@media (max-width: 15.49em) {
	:root .isaak-why-list > li {
		padding-inline-start: 0;
	}
	:root .isaak-why-list > li > img:first-child {
		position: static;
		display: block;
		transform: none;
		margin-block-end: 0.375rem;
	}
}
:root .isaak-why-list strong {
	font-size: var(--wp--preset--font-size--heading-md);
	color: var(--wp--preset--color--ink);
}

/* ===== 7. ביקורות (מהתוסף Reviews and Rating; קובץ העיצוב שלו כבוי). אין ביקורות – החלק מוסתר ===== */
:root .isaak-reviews:not(:has(.gmbrr .listing > li)) {
	display: none;
}
:root .isaak-reviews .gmbrr .listing {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
}
:root .isaak-reviews .gmbrr .listing > li {
	position: relative;
	display: block;
	margin: 0;
	padding: 1.5rem 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}
:root .isaak-reviews .gmbrr .listing > li:first-child {
	border-block-start-color: var(--wp--preset--color--ink);
}
:root .isaak-reviews .gmbrr .listing > li::before {
	content: "\200B";
	position: absolute;
}
:root .isaak-reviews .gmbrr .review-meta {
	margin: 0 0 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
}
:root .isaak-reviews .gmbrr :is(.author-name, .rating, .relative-time-description) {
	margin: 0;
}
:root .isaak-reviews .gmbrr .author-name {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
:root .isaak-reviews .gmbrr .rating {
	color: var(--wp--preset--color--red);
	letter-spacing: 0.125em;
}
:root .isaak-reviews .gmbrr .relative-time-description {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-muted);
}
:root .isaak-reviews .gmbrr .text {
	display: block;
	margin: 0;
	max-width: 40em;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* ===== טלפון אופקי: פתיחה נמוכה יותר, כדי שהכותרת, הטקסט והכפתורים ייראו יחד ===== */
@media (max-height: 30em) and (orientation: landscape) {
	:root .isaak-hero.isaak-hero {
		padding-block: 2rem !important;
	}
	:root .isaak-hero.isaak-hero > * + * {
		margin-block-start: 1rem;
	}
}

/* ===== ציורי הכבל: קישוט סטטי (בלוק "מרווח" עם מחלקה), שקיפות 15%, רק מ-68em ===== */
:root .isaak-hero {
	position: relative;
}
:root .isaak-home .isaak-cable-art {
	display: none;
}
@media (min-width: 68em) {
	:root .isaak-home .isaak-cable-art {
		display: block;
		opacity: 0.15;
		background: center / contain no-repeat;
	}
	:root .isaak-home .isaak-cable-laptop {
		position: absolute;
		inset-inline-end: max(1.5rem, calc(50% - 36rem));
		top: 50%;
		transform: translateY(-50%);
		width: clamp(11rem, 17vw, 17rem);
		height: auto !important;
		aspect-ratio: 220 / 150;
		margin: 0 !important;
		background-image: url("../images/cable-laptop.svg");
	}
	:root .isaak-home .isaak-cable-psu {
		height: clamp(4.45rem, 7vw, 7rem) !important;
		width: calc(clamp(4.45rem, 7vw, 7rem) * 36 / 112);
		max-width: none !important;
		margin-inline: auto max(0rem, calc(50% - 36rem)) !important;
		background-image: url("../images/cable-psu.svg");
	}
}

/* ===== מצב ניגודיות גבוהה: אייקונים נשארים גלויים ===== */
@media (forced-colors: active) {
	:root .isaak-btn-wa .wp-block-button__link::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* ===== הכבל (assets/js/home-cable.js): שכבת קישוט מעל כל הדף, רק מ-68em ===== */
:root .wp-site-blocks {
	position: relative;
}
:root .isaak-cable {
	display: none;
}
@media (min-width: 68em) {
	/* margin: 0 – וורדפרס מוסיף רווח בין חלקי הדף (blockGap), והוא הזיז את כל הכבל למטה */
	:root .wp-site-blocks > .isaak-cable {
		display: block;
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
		opacity: 0.15;
	}
}

/* ===== טלפון צר מאוד עם טקסט מוגדל (פחות מ-12.5em – למשל רוחב 200 עם גופן דפדפן כפול) =====
   שום דבר לא יוצא מהמסך (WCAG 1.4.4, 1.4.10). בטלפון רגיל – בלי שינוי.
   שורה של אייקון וטקסט: האייקון מעל הטקסט. קישורים וכפתורים: מילה ארוכה נשברת. כפתור: ריווח פנימי קטן יותר */
@media (max-width: 12.49em) {
	:root .is-layout-flex.is-nowrap:has(> .wp-block-image) {
		flex-wrap: wrap;
	}
	:root .is-layout-flex.is-nowrap > .wp-block-group {
		min-width: 0;
		flex-basis: 100%;
	}
	:root .isaak-more a,
	:root .wp-block-button__link {
		overflow-wrap: anywhere;
	}
	:root .wp-block-buttons > .wp-block-button {
		min-width: 0;
	}
	:root .wp-block-button__link {
		padding-inline: 0.75rem !important;
	}
}