/* Pnima — "שאלה של חינוך" landing page.
 * Layout, colours and type sizes live in the Elementor page; this file holds what
 * Elementor can't express: hand-drawn effects, frames, form skin, ticker, sticky bar. */

:root {
	--pn-cream: #FFFDEE;
	--pn-navy: #013A7B;
	--pn-ink: #000;
	--pn-green: #C0FFA1;
	--pn-pink: #FFBCBF;
	--pn-blue: #85E1FF;
	--pn-cyan: #AAE9EE;
	--pn-card: rgba(190, 239, 255, .7);
	--pn-draw: 1.1s;
}

body.elementor-template-canvas:has(.pn-page) { background: var(--pn-cream); }
.pn-page, .pn-page .elementor-widget-container { font-family: "Simpler Pro", "Assistant", "Heebo", Arial, sans-serif; }
.pn-page p:last-child { margin-bottom: 0; }
.pn-page strong, .pn-page b { font-weight: 900; }
.pn-br-m { display: none; }
.pn-page a { color: inherit; }
html:has(.pn-page) { scroll-behavior: smooth; }

/* ── Highlighter swipe (brush marker behind words) ─────────────────────── */
.pn-hl {
	--pn-hl-c: var(--pn-pink);
	background-image: linear-gradient(var(--pn-hl-c), var(--pn-hl-c));
	background-repeat: no-repeat;
	background-position: 100% 62%;          /* RTL: the marker starts on the right */
	background-size: 0% 72%;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	padding: 0 .12em;
	margin: 0 -.12em;
	border-radius: .35em .15em .4em .2em / .5em .3em .5em .3em;
	transition: background-size var(--pn-draw) cubic-bezier(.65, .05, .25, 1);
}
.pn-hl.is-drawn { background-size: 100% 72%; }
.pn-hl--green { --pn-hl-c: rgba(192, 255, 161, .95); }
.pn-hl--blue  { --pn-hl-c: rgba(133, 225, 255, .7); }
.pn-hl--cyan  { --pn-hl-c: var(--pn-cyan); }
.pn-hl--pink  { --pn-hl-c: rgba(255, 188, 191, .9); }

/* ── Hand-drawn strokes (circle / underline) — SVG injected by pnima.js ── */
.pn-circle, .pn-under, .pn-under2 { position: relative; display: inline-block; white-space: nowrap; }
.pn-draw {
	position: absolute; pointer-events: none; overflow: visible; z-index: 0;
}
.pn-draw path {
	fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
	transition: stroke-dashoffset var(--pn-draw) cubic-bezier(.55, .1, .3, 1);
}
.pn-draw path + path { transition-delay: calc(var(--pn-draw) * .55); }
.is-drawn > .pn-draw path { stroke-dashoffset: 0; }
.pn-circle > .pn-draw { color: #119100; }
.pn-under > .pn-draw, .pn-under2 > .pn-draw { color: var(--pn-navy); }

/* ── Designer marks (circles / underlines from the agency, see pnima.js) ── */
.pn-mark { position: relative; display: inline-block; white-space: nowrap; }
.pn-mark__img {
	position: absolute; top: calc(var(--cy, .5) * 100%); height: auto; max-width: none !important;
	transform: translateY(-50%); pointer-events: none; z-index: 0;
}
.pn-mark__img.is-anim:not([src]) { visibility: hidden; }
.pn-mark__img.is-wipe { clip-path: inset(0 0 0 99.5%); transition: clip-path .9s cubic-bezier(.6, .05, .3, 1); }
.pn-mark.is-drawn > .pn-mark__img.is-wipe { clip-path: inset(0 0 0 0); }
@media (max-width: 767px) { .pn-mark { white-space: normal; } }

/* ── Photo frames (tape around the hero video, blue pen around the magnifier) ── */
.pn-framed { position: relative; overflow: visible !important; }
.pn-framed::before {
	content: ""; position: absolute; pointer-events: none; z-index: 2;
	background: no-repeat center / 100% 100%;
}
.pn-framed--tape::before {
	inset: -6.5% -8.6% -6% -10.6%;
	background-image: url(frame-tape.png);
}
.pn-framed--blue::before {
	inset: -5% -6.4% -5.6% -7.9%;
	background-image: url(frame-blue.png);
}
.pn-framed img, .pn-framed video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pn-framed .elementor-wrapper, .pn-framed .e-hosted-video { aspect-ratio: 1; height: auto !important; padding: 0 !important; background: transparent; }
.pn-framed video.elementor-video { position: static; height: auto; }

/* Colourful hand lettering over the magnifier photo, revealed right-to-left. */
.pn-lettering { position: absolute !important; top: 7.7%; left: 34.3%; width: 63% !important; z-index: 3; }
.pn-lettering img { width: 100%; }
/* 99.5% (not 100%) so the browser still sees it as visible and lazy-loads the image */
.pn-reveal { clip-path: inset(0 0 0 99.5%); transition: clip-path 1.8s cubic-bezier(.6, .05, .3, 1); }
.pn-reveal.is-drawn { clip-path: inset(0 0 0 0); }

/* ── Vertical pen line between the call and the form ─────────────────── */
.pn-penline { align-self: stretch; width: 6px !important; flex-shrink: 0; }
.pn-penline .elementor-widget-container, .pn-penline .elementor-widget-image { height: 100%; }
.pn-penline img { width: 6px !important; height: 100% !important; object-fit: fill; }

/* ── Check list ─────────────────────────────────────────────────────── */
.pn-checks ul { list-style: none; margin: 0; padding: 0; }
.pn-checks li { position: relative; padding-inline-start: 46px; margin-bottom: .33em; }
.pn-checks li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: .2em;
	width: 20px; height: 24px; background: url(check.png) no-repeat center / contain;
}

/* ── Petition form skin ─────────────────────────────────────────────── */
.pn-form .elementor-field-group { margin-bottom: 12px !important; padding: 0 !important; }
.pn-form .elementor-field-textual {
	height: 52px; min-height: 52px; border-radius: 4px !important;
	background: #FFFEF8 !important; border: .5px solid rgba(0, 0, 0, .42) !important;
	font-size: 18px; padding: 0 14px; color: #000; font-family: inherit;
}
.pn-form .elementor-field-textual::placeholder { color: #858585; opacity: 1; }
.pn-form .elementor-field-textual:focus { outline: 2px solid var(--pn-navy); outline-offset: 1px; }
.pn-form .elementor-button {
	min-height: 67px; width: 100%; border-radius: 0 !important;
	box-shadow: 0 4px 4px rgba(0, 0, 0, .25); transition: transform .15s, box-shadow .15s;
}
.pn-form .elementor-button:hover { transform: translateY(-1px); box-shadow: 0 6px 8px rgba(0, 0, 0, .22); }
.pn-form .elementor-button .elementor-button-content-wrapper { justify-content: center; width: 100%; }
.pn-arrow-left .elementor-button-text::after {
	content: ""; display: inline-block; vertical-align: middle; width: 46px; height: 24px; margin-inline-start: 14px; flex-shrink: 0;
	background: url(arrow-left.svg) no-repeat center / contain;
}
.pn-form .elementor-button .elementor-button-text { width: 100%; text-align: center; white-space: nowrap !important; }
.pn-form .elementor-message { font-size: 20px; margin-top: 10px; font-family: inherit; }
.pn-form .elementor-message-success { color: #0B6B00; font-weight: 600; }
.pn-form .elementor-message::before { display: none; }
.pn-form .cf-turnstile { margin: 0 0 12px; }
.pn-form.is-signed .elementor-field-group:not(.e-form__buttons) { opacity: .5; pointer-events: none; }

.pn-counter { font-variant-numeric: tabular-nums; }
.pn-count.pn-bump { display: inline-block; animation: pn-bump .6s ease; }
@keyframes pn-bump { 40% { transform: scale(1.18); } }

/* ── CTA buttons with arrows ────────────────────────────────────────── */
.pn-btn .elementor-button { box-shadow: 0 4px 4px rgba(0, 0, 0, .25); border-radius: 0; transition: transform .15s, box-shadow .15s; }
.pn-btn .elementor-button:hover { transform: translateY(-1px); box-shadow: 0 6px 8px rgba(0, 0, 0, .22); }
.pn-btn--up .elementor-button-text { display: inline-flex; flex-direction: row; gap: 16px; align-items: center; }
.pn-btn--up .elementor-button-text::after {      /* RTL: ::after sits to the left of the text */
	content: ""; display: inline-block; width: 21px; height: 22px; flex-shrink: 0;
	background: url(arrow-up.svg) no-repeat center / contain;
}

.pn-arrow { display: block; }
.pn-arrow .elementor-widget-container { line-height: 0; }
.pn-arrow img { width: 27px; height: auto; }
.pn-arrow a { display: inline-block; transition: transform .2s; }
.pn-arrow a:hover { transform: translateY(4px); }

/* ── "Change direction" sketch grid ─────────────────────────────────
 * The designer's distressed strokes: kav-short.png (vertical, sides + middle), kav-long.png
 * (horizontal, between rows). Rows after the first start with the horizontal line, and their
 * vertical lines begin 25px lower so the strokes don't touch, as in the Figma. */
.pn-grid-row {
	background: url(kav-short.png) no-repeat 0 100% / 5px 100%,
	            url(kav-short.png) no-repeat 100% 100% / 5px 100%;
}
.pn-grid-row--split {
	background: url(kav-short.png) no-repeat 0 100% / 5px 100%,
	            url(kav-short.png) no-repeat 100% 100% / 5px 100%,
	            url(kav-short.png) no-repeat 50% 100% / 5px 100%;
}
.pn-grid-row + .pn-grid-row {
	background: url(kav-long.png) no-repeat 50% 0 / calc(100% - 8px) 2px,
	            url(kav-short.png) no-repeat 0 100% / 5px calc(100% - 25px),
	            url(kav-short.png) no-repeat 100% 100% / 5px calc(100% - 25px);
}
.pn-grid-row--split + .pn-grid-row--split {
	background: url(kav-long.png) no-repeat 50% 0 / calc(100% - 8px) 2px,
	            url(kav-short.png) no-repeat 0 100% / 5px calc(100% - 25px),
	            url(kav-short.png) no-repeat 100% 100% / 5px calc(100% - 25px),
	            url(kav-short.png) no-repeat 50% 100% / 5px calc(100% - 25px);
}

/* ── Ticker ─────────────────────────────────────────────────────────── */
.pn-ticker { overflow: hidden; }
.pn-ticker .elementor-widget-container { overflow: hidden; }
.pn-ticker__track { display: flex; width: max-content; animation: pn-ticker var(--pn-dur, 40s) linear infinite; }
/* Every item is "question + ?" followed by the same trailing space, so all gaps are identical
 * (including the seam between the two copies the animation loops over). */
.pn-ticker__item { display: inline-flex; align-items: center; white-space: nowrap; padding-inline-end: 2.6em; }
.pn-ticker:hover .pn-ticker__track { animation-play-state: paused; }
.pn-ticker img.pn-q { display: inline-block; height: 1em !important; width: auto !important; max-width: none; margin-inline-start: .22em; transform: translateY(-.04em); }
@keyframes pn-ticker { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* Columns stack on tablet/mobile: the vertical pen line becomes a horizontal rule. */
@media (max-width: 1024px) {
	.pn-penline { width: 100% !important; height: 3px; min-height: 0; background: var(--pn-navy); border-radius: 2px; }
	.pn-penline > *, .pn-penline img { display: none !important; }
}

/* ── Mobile sticky "sign" bar ───────────────────────────────────────── */
.pn-sticky { display: none !important; }
@media (max-width: 767px) {
	.pn-sticky {
		display: flex !important; position: fixed !important; inset: auto 0 0 0; z-index: 99;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, .12); transition: transform .35s ease;
	}
	.pn-sticky.is-hidden { transform: translateY(110%); }
	body:has(.pn-sticky) { padding-bottom: 94px; }   /* = sticky bar height */

	.pn-br-m { display: inline; }
	.pn-m-para { display: block; margin-top: 20px; }
	.elementor-heading-title:has(.pn-m-para) { max-width: 280px; margin-inline: auto; }
	.pn-tagline .elementor-heading-title { font-weight: 400 !important; }
	.pn-checks li { padding-inline-start: 50px; margin-bottom: .6em; }
	.pn-checks li::before { width: 27px; height: 31px; top: .05em; }
	/* Cards stack on mobile: draw the separator between the two cards of a row (middle of the gap). */
	.pn-grid-row--split {
		background: url(kav-long.png) no-repeat 50% 50% / 100% 2px,
		            url(kav-short.png) no-repeat 0 100% / 5px 100%,
		            url(kav-short.png) no-repeat 100% 100% / 5px 100%;
		background-origin: content-box, border-box, border-box;
	}
	/* Rows after the first: 12px margin + stroke + 13px padding, i.e. the same centred 25px gap as between stacked cards. */
	.pn-grid-row + .pn-grid-row {
		background: url(kav-long.png) no-repeat 50% 0 / calc(100% - 8px) 2px,
		            url(kav-short.png) no-repeat 0 100% / 5px calc(100% - 13px),
		            url(kav-short.png) no-repeat 100% 100% / 5px calc(100% - 13px);
	}
	.pn-grid-row--split + .pn-grid-row--split {
		background: url(kav-long.png) no-repeat 50% 0 / calc(100% - 8px) 2px,
		            url(kav-long.png) no-repeat 50% 50% / 100% 2px,
		            url(kav-short.png) no-repeat 0 100% / 5px calc(100% - 13px),
		            url(kav-short.png) no-repeat 100% 100% / 5px calc(100% - 13px);
		background-origin: border-box, content-box, border-box, border-box;
	}
	.pn-form .elementor-button { padding-inline: 14px !important; }
	.pn-circle, .pn-under, .pn-under2 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.pn-hl, .pn-draw path, .pn-reveal, .pn-mark__img { transition: none !important; }
	.pn-ticker__track { animation-duration: 120s; }
}
.pn-media { position: relative; }