/* ==========================================================================
   Home page (17) + footer + shared slider design
   --------------------------------------------------------------------------
   WHY THE "body" PREFIX ON MOST RULES
   The so-css layer (custom_css post 1597, "דף הבית — הקטנה של 10%") hardcodes
   px values with the selector
       .elementor-17 .elementor-element.elementor-element-XXX
   and it is not wrapped in media queries, so it also overrides Elementor's own
   tablet/mobile values. Prefixing with "body" adds one element to the
   specificity so these rules win regardless of stylesheet order, without
   needing !important everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE CHROME
   -------------------------------------------------------------------------- */

/* hero banner: shorter.
   Was min-height 630px from the so-css layer, applied at EVERY breakpoint
   (that is why mobile was 630px tall too, ignoring Elementor's 335px). */
body .elementor-17 .elementor-element.elementor-element-777f310 > .elementor-container {
	min-height: 480px;
}

@media (max-width: 1024px) {
	body .elementor-17 .elementor-element.elementor-element-777f310 > .elementor-container {
		min-height: 400px;
	}
}

@media (max-width: 767px) {
	body .elementor-17 .elementor-element.elementor-element-777f310 > .elementor-container {
		min-height: 300px;
	}
}

/* section headings: smaller.
   The ההטבות heading has an EMPTY Elementor id, so its generated class is
   literally "elementor-element-" - hence the odd-looking selector. */
body .elementor-17 .elementor-element.elementor-element-416ad22 .elementor-heading-title,
body .elementor-17 .elementor-element.elementor-element-78ef2ba .elementor-heading-title,
body .elementor-17 .elementor-element.elementor-element-e31fe28 .elementor-heading-title,
body .elementor-17 .elementor-element.elementor-element- .elementor-heading-title {
	font-size: 30px;
}

@media (max-width: 1024px) {

	body .elementor-17 .elementor-element.elementor-element-416ad22 .elementor-heading-title,
	body .elementor-17 .elementor-element.elementor-element-78ef2ba .elementor-heading-title,
	body .elementor-17 .elementor-element.elementor-element-e31fe28 .elementor-heading-title,
	body .elementor-17 .elementor-element.elementor-element- .elementor-heading-title {
		font-size: 27px;
	}
}

@media (max-width: 767px) {

	body .elementor-17 .elementor-element.elementor-element-416ad22 .elementor-heading-title,
	body .elementor-17 .elementor-element.elementor-element-78ef2ba .elementor-heading-title,
	body .elementor-17 .elementor-element.elementor-element-e31fe28 .elementor-heading-title,
	body .elementor-17 .elementor-element.elementor-element- .elementor-heading-title {
		font-size: 23px;
	}
}

/* ההטבות שלנו carousel image.
   The banner is 1638x423 (3.87:1). The slide area was a fixed 315px tall and
   the image was painted with background-size:cover, so the banner was scaled
   up to fill that height and cropped. Matching the slide to the image's own
   aspect ratio and switching to "contain" shows the whole banner at every
   width, with no cropping and no letterboxing. */
body .elementor-17 .elementor-element.elementor-element-a1b51a4 .elementor-main-swiper {
	height: auto !important;
}

body .elementor-17 .elementor-element.elementor-element-a1b51a4 .elementor-main-swiper .swiper-slide {
	height: auto !important;
	aspect-ratio: 1638 / 423;
}

body .elementor-17 .elementor-element.elementor-element-a1b51a4 .elementor-carousel-image {
	height: 100%;
	background-size: contain !important;
	background-repeat: no-repeat;
	background-position: center;
}

/* --------------------------------------------------------------------------
   2. SHARED SLIDER DESIGN
   One arrow and one dot design, applied to all three slider engines used on
   the home page:
     .sapir-carousel        - the מדורי האגודה carousel (this file's component)
     .jet-listing-grid      - JetEngine listing carousels (Slick)
     .elementor-element-a1b51a4 - ההטבות שלנו (Elementor Pro / Swiper)
   Styling all three from one block is the point: change it here and every
   slider on the page follows.
   -------------------------------------------------------------------------- */

.sapir-carousel__arrow,
body .elementor-17 .jet-listing-grid__slider-icon,
body .elementor-17 .elementor-element-a1b51a4 .elementor-swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid rgba(10, 14, 122, .18);
	border-radius: 50%;
	background: #fff;
	color: #0A0E7A;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(10, 14, 122, .16);
	transition: background-color .25s ease, color .25s ease, border-color .25s ease,
		transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}

.sapir-carousel__arrow:hover,
.sapir-carousel__arrow:focus-visible,
body .elementor-17 .jet-listing-grid__slider-icon:hover,
body .elementor-17 .elementor-element-a1b51a4 .elementor-swiper-button:hover {
	background: #0A0E7A;
	border-color: #0A0E7A;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(10, 14, 122, .28);
	outline: none;
}

.sapir-carousel__arrow[disabled] {
	opacity: .35;
	cursor: default;
	transform: none;
	box-shadow: 0 6px 18px rgba(10, 14, 122, .10);
}

/* JetEngine renders its arrows as bare icons sized by the widget settings
   (50px / 45px here), which would blow the circle apart. */
body .elementor-17 .jet-listing-grid__slider-icon svg {
	width: 20px;
	height: 20px;
}

/* dots
   NOTE: this JetEngine version renders its listing carousels with Swiper, not
   Slick - the .slick-* classes in the plugin are legacy. So JetEngine and
   Elementor Pro share the same .swiper-pagination-bullet markup and one pair
   of selectors covers both engines.

   Bullet COLOURS are set through Swiper's own custom properties rather than by
   out-specifying the plugin. JetEngine ships
     .jet-listing-grid .jet-engine-swiper-pagination-wrapper
       .swiper-pagination-bullet.swiper-pagination-bullet-active
   which is four classes - a selector war we would only just win and would lose
   again on the next plugin update. Setting the variables it already reads is
   both simpler and update-proof. */
body .elementor-17 .jet-listing-grid,
body .elementor-17 .elementor-element-a1b51a4 {
	--swiper-theme-color: #E36C40;
	--swiper-pagination-color: #E36C40;
	--swiper-pagination-bullet-inactive-color: rgba(10, 14, 122, .25);
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-width: 10px;
	--swiper-pagination-bullet-height: 10px;
	--swiper-pagination-bullet-horizontal-gap: 0px;
}

.sapir-carousel__dot,
body .elementor-17 .jet-listing-grid .swiper-pagination-bullet,
body .elementor-17 .elementor-element-a1b51a4 .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(10, 14, 122, .25);
	opacity: 1;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color .25s ease, width .25s ease;
}

/* The active pill widening is shape, not colour, so it does need to beat the
   plugin's four-class selector - hence the matching depth here. */
.sapir-carousel__dot.is-active,
body .elementor-17 .jet-listing-grid .jet-engine-swiper-pagination-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active,
body .elementor-17 .elementor-element-a1b51a4 .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 26px;
	background: #E36C40;
}

.sapir-carousel__dots,
body .elementor-17 .jet-engine-swiper-pagination-wrapper,
body .elementor-17 .elementor-element-a1b51a4 .swiper-pagination-bullets {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	position: static;
}

/* A single bullet means there is nothing to page through - Swiper still draws
   it, which reads as a stray dot under the slider. */
body .elementor-17 .jet-engine-swiper-pagination-wrapper:has(> :only-child),
body .elementor-17 .elementor-element-a1b51a4 .swiper-pagination-bullets:has(> :only-child) {
	display: none;
}

/* --------------------------------------------------------------------------
   3. מדורי האגודה — ring on desktop, carousel on phones
   --------------------------------------------------------------------------
   ONE set of markup drives both presentations:

     .sapir-ring            positioning context / mobile scroll container
       .sapir-ring__dots    the dashed circle (desktop only)
       .sapir-ring__center  the title - absolutely centred inside the ring on
                            desktop, an ordinary heading above the strip on
                            phones
       .sapir-ring__track   transparent wrapper; absolute on desktop so the
                            items keep their original rotation maths, a flex
                            scroller on phones
         .sapir-ring__item  carries --i, rotates into place on desktop
           .sapir-ring__disc

   The __track wrapper is the only structural addition versus the original
   ring. It exists so the mobile carousel has something to scroll that is not
   also holding the dashed circle and the centre title.

   The desktop sizing and the slow rotation still come from the so-css layer
   (custom_css post 1597), which is scoped @media (min-width:768px) and targets
   .sapir-ring / __item / __disc - so it starts matching again automatically
   and did not need to be touched.
   -------------------------------------------------------------------------- */

.sapir-ring {
	position: relative;
	width: min(680px, 80vw);
	aspect-ratio: 1 / 1;
	margin: 110px auto;
}

.sapir-ring__dots {
	position: absolute;
	inset: 0;
	border: 2px dashed #0A0E7A;
	border-radius: 50%;
}

.sapir-ring__center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: #102A43;
	font-family: Heebo, sans-serif;
	font-weight: 900;
	font-size: clamp(26px, 3.6vw, 60px);
	line-height: 1.15;
	text-align: center;
}

.sapir-ring__track {
	position: absolute;
	inset: 0;
}

.sapir-ring__item {
	position: absolute;
	inset: 0;
	transform: rotate(calc(var(--i) * 72deg));
	pointer-events: none;
}

.sapir-ring__disc {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	pointer-events: auto;
	text-decoration: none;
	cursor: pointer;
	transform: translate(-50%, -50%) rotate(calc(var(--i) * -72deg)) scale(1);
	transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), box-shadow .35s ease,
		background-color .35s ease, border-color .35s ease;
}

.sapir-ring__disc:hover,
.sapir-ring__disc:focus-visible {
	transform: translate(-50%, -50%) rotate(calc(var(--i) * -72deg)) scale(1.11);
	outline: none;
}

.sapir-ring__disc img {
	width: 36%;
	max-width: 52px;
	height: auto;
	transition: transform .35s cubic-bezier(.34, 1.4, .5, 1);
}

.sapir-ring__disc:hover img {
	transform: translateY(-3px) scale(1.08);
}

.sapir-ring__disc span {
	font-family: Heebo, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.5vw, 24px);
	line-height: 1.15;
	text-align: center;
	padding-inline: 6px;
}

/* ---------- keeping the labels inside the circles ----------
   A circle only offers an inscribed square to its content: for diameter D
   that is about 0.707 * D. Two-word labels ("החברה הערבית", "יזמות חברתית")
   were spilling over the edge because the type was sized for a box, not a
   circle. Fix is threefold: a percentage padding that follows the disc size,
   type calibrated to the inscribed width, and a smaller ramp for the light
   discs since they are the smaller of the two.

   These override the so-css layer (post 1597, @media min-width:768px), which
   sets the disc diameters with four-class selectors - hence the matching
   depth plus "body" here. */
/* Padding here MUST be absolute, not a percentage. On desktop the disc is
   position:absolute inside .sapir-ring__item, which is inset:0 on the 464px
   ring - so percentage padding resolves against 464px, not the disc. "12%"
   became 55.7px a side and squeezed the label down to ~17px of usable width,
   one character per line. */
body .elementor-17 .elementor-element.elementor-element-fa82aba .is-dark .sapir-ring__disc {
	width: clamp(84px, 11.5vw, 132px);
	padding: 10px;
}

body .elementor-17 .elementor-element.elementor-element-fa82aba .is-light .sapir-ring__disc {
	width: clamp(84px, 11.5vw, 132px);
	padding: 10px;
}

body .elementor-17 .elementor-element.elementor-element-fa82aba .is-dark .sapir-ring__disc span {
	font-size: clamp(11px, 0.9vw, 15px);
}

body .elementor-17 .elementor-element.elementor-element-fa82aba .is-light .sapir-ring__disc span {
	font-size: clamp(11px, 0.9vw, 15px);
}

/* width:100% is load-bearing. The disc is a centred flex column, so without an
   explicit width the label shrinks to its min-content size. Combined with an
   aggressive overflow-wrap that means one character per line, which is exactly
   what "overflow-wrap:anywhere" produced here. break-word does not feed back
   into intrinsic sizing, so words stay whole and only wrap when they must. */
body .elementor-17 .elementor-element.elementor-element-fa82aba .sapir-ring__disc span {
	width: 100%;
	line-height: 1.12;
	padding-inline: 0;
	overflow-wrap: break-word;
}

body .elementor-17 .elementor-element.elementor-element-fa82aba .sapir-ring__disc img {
	width: 30%;
	max-width: 44px;
}

.sapir-ring .is-dark .sapir-ring__disc {
	width: clamp(108px, 17vw, 196px);
	background: #0A0E7A;
	border: 11px solid #B4DAFF;
	color: #fff;
	box-shadow: 0 10px 26px rgba(10, 14, 122, .28);
}

.sapir-ring .is-dark .sapir-ring__disc img {
	filter: brightness(0) invert(1);
}

.sapir-ring .is-dark .sapir-ring__disc:hover,
.sapir-ring .is-dark .sapir-ring__disc:focus-visible {
	background: #141AA0;
	border-color: #E36C40;
	box-shadow: 0 18px 38px rgba(10, 14, 122, .42);
}

.sapir-ring .is-light .sapir-ring__disc {
	width: clamp(84px, 12.5vw, 144px);
	background: #CFE6FF;
	border: 7px solid #0A0E7A;
	color: #0A0E7A;
	box-shadow: 0 8px 20px rgba(10, 14, 122, .18);
}

.sapir-ring .is-light .sapir-ring__disc:hover,
.sapir-ring .is-light .sapir-ring__disc:focus-visible {
	background: #E7F2FF;
	border-color: #E36C40;
	box-shadow: 0 16px 32px rgba(10, 14, 122, .30);
}

/* The dots belong to the mobile presentation only. Hiding them by breakpoint
   rather than leaning on carousel.js's is-static flag: on desktop the track is
   absolutely positioned with the discs rotating outside it, so scrollWidth is
   not a reliable "does this overflow" signal there. */
@media (min-width: 768px) {
	.sapir-ring .sapir-carousel__dots {
		display: none;
	}
}

.sapir-ring.is-static .sapir-carousel__dots {
	display: none;
}

/* ---------- phones: same markup, swipeable strip ---------- */
@media (max-width: 767px) {

	.sapir-ring {
		width: 100%;
		aspect-ratio: auto;
		margin: 26px auto;
	}

	.sapir-ring__dots {
		display: none;
	}

	.sapir-ring__center {
		position: static;
		inset: auto;
		display: block;
		margin: 0 0 16px;
		font-size: 23px;
	}

	.sapir-ring__track {
		position: static;
		display: flex;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 8px 0;
	}

	.sapir-ring__track::-webkit-scrollbar {
		display: none;
	}

	/* two full discs plus a sliver of the third - the peek is what tells the
	   user there is more to swipe to */
	.sapir-ring__item {
		position: static;
		inset: auto;
		transform: none;
		pointer-events: auto;
		flex: 0 0 calc((100% - 2 * 14px) / 2.4);
		scroll-snap-align: start;
		display: flex;
		justify-content: center;
	}

	.sapir-ring__disc {
		position: static;
		transform: none;
		width: 100% !important;
		max-width: 150px;
		padding: 14px;
	}

	/* the vw-based desktop ramp bottoms out on a phone, so pin a readable
	   size here - the carousel discs have more room than the ring ones */
	body .elementor-17 .elementor-element.elementor-element-fa82aba .is-dark .sapir-ring__disc span,
	body .elementor-17 .elementor-element.elementor-element-fa82aba .is-light .sapir-ring__disc span {
		font-size: 14px;
	}

	body .elementor-17 .elementor-element.elementor-element-fa82aba .sapir-ring__disc img {
		width: 32%;
		max-width: 46px;
	}

	.sapir-ring__disc:hover,
	.sapir-ring__disc:focus-visible {
		transform: scale(1.05);
	}

	.sapir-ring .is-dark .sapir-ring__disc {
		border-width: 6px;
	}

	.sapir-ring .is-light .sapir-ring__disc {
		border-width: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sapir-ring__track {
		scroll-behavior: auto;
	}

	.sapir-ring__disc,
	.sapir-ring__disc img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   3b. STRAY SHADOWS ON PHONES
   -------------------------------------------------------------------------- */

/* The partners strip is a white band carrying a hard "0 4px 4px rgba(0,0,0,.25)"
   drop shadow plus a full border. At desktop width it reads as a divider; at
   386px it reads as a floating grey box. Softened to a hairline on phones. */
@media (max-width: 767px) {
	body .elementor-17 .elementor-element.elementor-element-3b00b7b {
		box-shadow: 0 1px 0 rgba(10, 14, 122, .10) !important;
	}
}

/* Touch screens keep :hover applied after a tap, so every card the user had
   touched kept its lifted shadow and dark overlay - which is what makes a
   phone look like it is covered in stray shadows. The hover treatment (defined
   in the so-css layer, custom_css post 1597) is neutralised wherever there is
   no true hover; it stays intact on desktop. */
@media (hover: none) {

	.jet-listing-grid__item:hover,
	.jet-listing-grid__item:focus-within {
		transform: none !important;
	}

	.jet-listing-grid__item:hover .elementor-element-4ebac37,
	.jet-listing-grid__item:hover .elementor-element-412284c,
	.jet-listing-grid__item:hover .elementor-element-dc5740d .elementor-widget-container {
		box-shadow: none !important;
	}

	.jet-listing-grid__item:hover .elementor-element-4ebac37::after,
	.jet-listing-grid__item:hover .elementor-element-412284c::after,
	.jet-listing-grid__item:hover .elementor-element-dc5740d .elementor-widget-container::after {
		opacity: 0 !important;
	}

	.jet-listing-grid__item:hover .elementor-widget-image img,
	.jet-listing-grid__item:hover .elementor-element-4ebac37::before,
	.jet-listing-grid__item:hover .elementor-element-412284c::before {
		transform: none !important;
	}

	.sapir-ring__disc:hover,
	.sapir-ring__disc:focus-visible {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   4. FOOTER MENUS
   The three footer nav menus had "dropdown: mobile", which collapsed each one
   into its own hamburger toggle below 767px. That is now "none" in Elementor,
   so the items render as a normal list - they just need to wrap and centre
   instead of trying to stay on one row.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	body .elementor-element-1acbeec .elementor-nav-menu,
	body .elementor-element-932e6fb .elementor-nav-menu,
	body .elementor-element-1209b9f .elementor-nav-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px 18px;
	}

	body .elementor-element-1acbeec .elementor-nav-menu .elementor-item,
	body .elementor-element-932e6fb .elementor-nav-menu .elementor-item,
	body .elementor-element-1209b9f .elementor-nav-menu .elementor-item {
		padding-inline: 0;
	}

	body .elementor-element-1acbeec .elementor-menu-toggle,
	body .elementor-element-932e6fb .elementor-menu-toggle,
	body .elementor-element-1209b9f .elementor-menu-toggle {
		display: none !important;
	}
}