/*
 * FRENKEL — base / global styles.
 * English / LTR by default; Hebrew only per-block via [dir="rtl"] / .cf-he.
 */

/*
 * Full-bleed sections break out with 100vw, so sideways scroll has to be shut
 * off. clip (not hidden) keeps position: sticky working for the header.
 *
 * On html as well as body: the body rule only reaches the viewport while html
 * is overflow:visible, and Elementor or a plugin touching html silently
 * disables it.
 */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	font-family: var(--cf-font-body);
	font-size: var(--cf-body);
	line-height: 1.6;
	color: var(--cf-dark);
	background: var(--cf-cream);
}

/* Headings use the display serif. Hebrew blocks swap family + direction locally. */
h1, h2, h3,
.cf-display {
	font-family: var(--cf-font-display);
	font-weight: 600;
	line-height: 1.1;
	color: var(--cf-dark);
}

h1 { font-size: var(--cf-h1); }
h2 { font-size: var(--cf-h2); }
h3 { font-size: var(--cf-h3); }

/* Hebrew content blocks (special places only). */
[dir="rtl"],
.cf-he {
	direction: rtl;
	text-align: start;
	font-family: var(--cf-font-he-display, var(--cf-font-body));
}

img,
picture,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Rich text (used by content sections, articles, job postings). */
.cf-richtext > * + * { margin-block-start: 1em; }
.cf-richtext img { margin-block: 1.5rem; }

/* Simple text page (legal / generic). */
.cf-page { margin-block: var(--cf-section-y); max-width: 760px; }
.cf-page__title { margin: 0 0 1rem; }

/* HTML sitemap ([frenkel_sitemap] / page-sitemap.php) — columns on wide
   screens, single on mobile. Wider than the 760px text measure. */
.cf-page--wide { max-width: var(--cf-container); }
.cf-sitemap { --cf-sitemap-cols: 3;max-width: 1300px;margin: 30px auto; }
.cf-sitemap__section { margin-block-start: 3rem; }
.cf-sitemap__section:first-child { margin-block-start: 0; }
.cf-sitemap__heading {
	margin: 0 0 1rem;
	padding-block-end: .5rem;
	border-block-end: 1px solid currentColor;
	font-size: var(--cf-h3);
}
.cf-sitemap__heading a { color: inherit; text-decoration: none; }
.cf-sitemap__heading a:hover { text-decoration: underline; }
.cf-sitemap__list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: var(--cf-sitemap-cols, 3) 220px;
	column-gap: 2.5rem;
}
/* Nested page children stay with their parent when the list breaks into columns. */
.cf-sitemap__list li { break-inside: avoid; margin-block-end: .4em; }
.cf-sitemap__list ul { list-style: none; margin: .4em 0 0; padding-inline-start: 1.25rem; }
.cf-sitemap__list a { color: inherit; text-decoration: none; }
.cf-sitemap__list a:hover,
.cf-sitemap__list a:focus-visible { text-decoration: underline; }

/* Instagram grid (shortcode; usable anywhere incl. Elementor). */
.cf-instagram {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 60px;
}
.cf-instagram img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@media (max-width: 600px) {
	.cf-instagram { grid-template-columns: repeat(2, 1fr); }
}

/* Search shortcode ([frenkel_search]; usable anywhere incl. Elementor).
   Colours are driven by inline custom props set from shortcode attributes. */
.cf-search {
	--cf-search-bg: transparent;
	--cf-search-border: #fff;
	display: inline-flex;
	align-items: stretch;
	gap: .25rem;
	max-width: 100%;
}
input.cf-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .25em .9em;
	font: inherit;
	background: transparent;
	line-height: 22px;
	font-size: 16px;
	border: 1px solid var(--cf-search-border) !important;
	border-radius: 20px;
	-webkit-appearance: none;
	appearance: none;
	color: var(--cf-search-border);
}
.cf-search__input::placeholder {
	color: inherit;
	opacity: .7;
}
.cf-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 .6em;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	transition: background var(--cf-dur) var(--cf-ease);
}
.cf-search__submit:hover,
.cf-search__submit:focus-visible {
	background: color-mix(in srgb, var(--cf-search-border) 20%, transparent);
	color: var(--cf-search-border);
}
/* Search icon (inline SVG, see frenkel_icon_search) — inherits colour,
   scales from the button's font-size. */

.cf-search__submit .cf-icon-search {
	display: block;
	width: 25px;
	height: 25px;
}
.cf-search-toggle .cf-icon-search {
	width: 20px;
	height: 20px;
}

/* --- Layout container --- */
.cf-container {
	width: 100%;
	max-width: var(--cf-container);
	margin-inline: auto;
	padding-inline: var(--cf-gutter);
}

/* --- Button component: hover inverts to "negative" (design rule) --- */
.cf-btn {
	--_bg: transparent;
	--_fg: var(--cf-dark);
	--_bd: var(--cf-dark);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	/* Fixed size on every breakpoint per spec. */
	width: 200px;
	height: 56px;
	padding: 0 20px;
	font-size: 15px;
	font-family: var(--cf-font-latin);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--_fg);
	background: var(--_bg);
	border: 1px solid var(--_bd);
	cursor: pointer;
	transition:
		background var(--cf-dur) var(--cf-ease),
		color var(--cf-dur) var(--cf-ease),
		border-color var(--cf-dur) var(--cf-ease);
}

/* Outline default -> hover: fill dark, cream text. */
.cf-btn:hover,
.cf-btn:focus-visible {
	--_bg: var(--cf-dark);
	--_fg: var(--cf-cream);
	--_bd: var(--cf-dark);
	color: var(--_fg);
}

/* Solid variant: dark fill -> hover inverts to outline. */
.cf-btn--solid {
	--_bg: var(--cf-dark);
	--_fg: var(--cf-cream);
	--_bd: var(--cf-dark);
}
.cf-btn--solid:hover,
.cf-btn--solid:focus-visible {
	--_bg: transparent;
	--_fg: var(--cf-dark);
	--_bd: var(--cf-dark);
}

.cj_btn .elementor-image-box-title a {
	display: block;
	box-sizing: border-box;
	width: 200px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* --- Accessibility --- */
:where(a, button, input, select, textarea, .cf-btn):focus-visible {
	outline: 2px solid var(--cf-cream);
	outline-offset: 2px;
}

/* Skip link to main content (target #main in the header markup). */
.cf-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 1000;
	padding: .75em 1.25em;
	background: var(--cf-dark);
	color: var(--cf-cream);
	text-decoration: none;
}
.cf-skip-link:focus {
	inset-inline-start: 0;
}

/* ===== Slide / carousel background overlay =====
 * Two switches, both opt-in: `homepage_hero` or `homepage_hero_overlay` on the
 * widget's Advanced → CSS Classes picks which widget, and Site Options →
 * Homepage → "Carousel image overlay" puts .cf-hero-overlay on <body> to turn
 * it on at all.
 *
 * Elementor's own Background Overlay attaches to the section, so it washes the
 * headings, the arrows and the padding along with the photographs. This one
 * attaches to the element each widget paints the image on, which is what makes
 * it land on the images only.
 *
 * The widgets do not share markup, so one selector each, all verified against
 * Elementor 3.x / Pro 4.3 rather than guessed:
 *   .swiper-slide-bg          — Slides, and so Frankel Hero (a background <div>)
 *   .elementor-carousel-image — Media Carousel (a background <div>)
 *   .swiper-slide-inner       — Image Carousel (a <figure> around an <img>)
 *
 * Image Carousel's <figure> is excluded wherever a slide also has a
 * .swiper-slide-bg sibling: Slides has both, and masking each would stack two
 * washes, one of them over the text rather than the photo.
 *
 * Loop Carousel is deliberately absent: .e-loop-item holds arbitrary content,
 * and washing that would cover text, not images.
 */
.cf-hero-overlay :is(.homepage_hero, .homepage_hero_overlay) :is(.swiper-slide-bg, .elementor-carousel-image),
.cf-hero-overlay :is(.homepage_hero, .homepage_hero_overlay) .swiper-slide:not(:has(> .swiper-slide-bg)) .swiper-slide-inner,
.cf-hero-overlay :is(.homepage_hero, .homepage_hero_overlay) .swiper-slide:has(> .swiper-slide-image) {
	position: relative;
}
.cf-hero-overlay :is(.homepage_hero, .homepage_hero_overlay) :is(.swiper-slide-bg, .elementor-carousel-image)::before,
.cf-hero-overlay :is(.homepage_hero, .homepage_hero_overlay) .swiper-slide:not(:has(> .swiper-slide-bg)) .swiper-slide-inner::before,
.cf-hero-overlay :is(.homepage_hero, .homepage_hero_overlay) .swiper-slide:has(> .swiper-slide-image)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Elementor's global primary, same as .cf-project__hero::before. --cf-dark
	   is the fallback for any context where the kit stylesheet isn't loaded —
	   without one an undefined custom property invalidates the whole
	   declaration and the tint silently disappears. */
	background-color: var(--e-global-color-primary, var(--cf-dark));
	opacity: var(--cf-hero-overlay-tint, .35);
	pointer-events: none;
}

/* ===== Frankel Hero: an arrow supplied from the media library =====
 * An SVG is inlined so the Color control can reach inside it; anything else is
 * an <img>. Either way the width is in em, so both follow Elementor's own
 * "Arrows Size" control, which sets font-size on the button — neither an <img>
 * nor an SVG carrying its own width attribute would otherwise honour it. Only
 * this widget emits these classes, so Pro's own Slides arrows are untouched.
 */
.elementor-swiper-button .cf-hero-arrow__img,
.elementor-swiper-button .cf-hero-arrow__svg svg {
	width: 1em;
	height: auto;
	display: block;
}
.elementor-swiper-button .cf-hero-arrow__svg {
	display: block;
	line-height: 0;
}

/* "Stroke only" (Style → Navigation → Apply Color To) means outline, not just
 * a coloured stroke — so the fill goes, otherwise a solid glyph stays solid and
 * the setting looks broken. Descendants included, because an export tool puts
 * fill on the paths and a declaration there beats one inherited from <svg>.
 *
 * Static rather than part of the Color control: dropping the fill is what the
 * mode means, whether or not a colour has been picked. If an arrow vanishes
 * under this mode its outline is drawn with fill, not stroke — use Fill only.
 */
.cf-arrowcolor-stroke .elementor-swiper-button svg,
.cf-arrowcolor-stroke .elementor-swiper-button svg * {
	fill: transparent;
}

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