@charset "UTF-8";
/*
 * press.papagay-lp.co.il — custom homepage
 * Papagay Digital, 2026-08.
 *
 * Design note: every structural device here is lifted from the construction of
 * the Papagay parrot mark — quarter-circle wedges (hero field), the square
 * keyline the parrot sits inside (hero mark, card placeholder), and the
 * four-colour quadrant (the rule above the section title, the card chips).
 * Baseline target: "widely available".
 */

/* ---------- tokens ---------- */
:root {
	--navy: #213f5a;
	--navy-deep: #17293b;
	--green: #80c99c;
	--blue: #4b89bf;
	--coral: #f05c63;
	--yellow: #f2cb05;
	--paper: #f7f9fb;
	--muted: #55697d;
	--panel: #edf2f7;

	--wrap: 1200px;
	--gap: 24px;
	--radius: 14px;

	--font-he: "Heebo", "Arial Hebrew", system-ui, sans-serif;
	--font-lat: "Barlow", "Heebo", system-ui, sans-serif;
	--font-brush: "Caveat Brush", "Barlow", system-ui, cursive;

	--ease: cubic-bezier(0.22, 0.68, 0.16, 1);
}

/* ---------- reset-ish ---------- */
.press-home * ,
.press-home *::before,
.press-home *::after { box-sizing: border-box; }

body.press-home {
	margin: 0;
	background: var(--paper);
	color: var(--navy);
	font-family: var(--font-he);
	font-size: 100%;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.press-home img { max-width: 100%; }

.press-home a { color: inherit; }

.press-home :focus-visible {
	outline: 3px solid var(--green);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Visually hidden, still announced — used to append "(נפתח בחלון חדש)" to each
   card's accessible name without overriding the title with an aria-label. */
.ppk-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ppk-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 100;
	background: #fff;
	color: var(--navy);
	padding: 12px 20px;
	font-weight: 700;
	border-radius: 0 0 8px 0;
}
.ppk-skip:focus { inset-inline-start: 0; }

/* =========================================================================
   HERO
   ====================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(120% 90% at 50% 0%, #244663 0%, var(--navy) 45%, var(--navy-deep) 100%);
	color: #fff;
	padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 40px) clamp(24px, 4vh, 40px);
	text-align: center;
}

/* Quarter-circle wedges: the same four colours and the same quadrant geometry
   as the parrot mark, pivoted off each corner so the arcs sweep inward. The
   vignette on top keeps the navy ground (and the text contrast) intact. */
.hero__field {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	overflow: hidden;
}

/* Deliberately physical corners, not logical: this is pure geometry, and the
   page is always RTL. */
.hero__field::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(66% 56% at 50% 46%,
		rgba(22, 39, 58, 0.9) 0%,
		rgba(22, 39, 58, 0.72) 40%,
		rgba(22, 39, 58, 0.2) 72%,
		rgba(22, 39, 58, 0) 100%);
}

.wedge {
	position: absolute;
	display: block;
	inline-size: clamp(240px, 27vmax, 470px);
	block-size: clamp(240px, 27vmax, 470px);
	filter: blur(46px);
	opacity: 0.6;
	will-change: transform;
}

.wedge--y {
	background: var(--yellow);
	border-radius: 0 0 100% 0;
	top: -14%;
	left: -12%;
	opacity: 0.32;
	animation: drift-a 38s var(--ease) infinite alternate;
}
.wedge--c {
	background: var(--coral);
	border-radius: 0 0 0 100%;
	top: -12%;
	right: -13%;
	opacity: 0.38;
	animation: drift-b 46s var(--ease) infinite alternate;
}
.wedge--b {
	background: var(--blue);
	border-radius: 100% 0 0 0;
	bottom: -12%;
	right: -8%;
	opacity: 0.56;
	animation: drift-c 42s var(--ease) infinite alternate;
}
.wedge--g {
	background: var(--green);
	border-radius: 0 100% 0 0;
	bottom: -13%;
	left: -12%;
	opacity: 0.32;
	animation: drift-d 52s var(--ease) infinite alternate;
}

@keyframes drift-a { to { translate: 3.5vw 3vh; scale: 1.14; } }
@keyframes drift-b { to { translate: -3vw 4vh; scale: 0.88; } }
@keyframes drift-c { to { translate: 3vw -4vh; scale: 1.12; } }
@keyframes drift-d { to { translate: -3.5vw -3vh; scale: 0.9; } }

/* Dither only — stops the wide blurred gradients from banding on 8-bit panels. */
.hero__grain {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

.hero__inner {
	position: relative;
	max-inline-size: 46rem;
	margin-inline: auto;
}

/* The parrot inside its square keyline — the logo lockup, rebuilt for dark. */
.hero__mark { margin: 0 0 clamp(20px, 3vh, 32px); }

.mark-frame {
	display: inline-grid;
	place-items: center;
	inline-size: clamp(112px, 15vh, 168px);
	aspect-ratio: 1;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.mark-frame img {
	inline-size: 76%;
	block-size: auto;
}

.hero__mark--text {
	font-family: var(--font-lat);
	font-weight: 800;
	font-size: clamp(2rem, 6vw, 3rem);
	letter-spacing: 0.12em;
	color: #fff;
}

.hero__title {
	margin: 0;
	font-family: var(--font-he);
	font-weight: 900;
	font-size: clamp(2.25rem, 1.35rem + 4.4vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.hero__tagline {
	margin: clamp(10px, 1.6vh, 16px) 0 0;
	font-family: var(--font-brush);
	font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
	line-height: 1.1;
	color: var(--yellow);
	font-weight: 400;
}

.hero__lede {
	margin: clamp(14px, 2vh, 20px) auto 0;
	max-inline-size: 40rem;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	color: rgba(255, 255, 255, 0.76);
	text-wrap: pretty;
}

.hero__actions {
	margin: clamp(26px, 4vh, 40px) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding: 12px 28px;
	border-radius: 999px;
	font-family: var(--font-he);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn--solid {
	background: var(--green);
	color: var(--navy);
}
.btn--solid:hover { background: #96d6ae; transform: translateY(-2px); }

.btn--ghost {
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
}
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

.hero__hint {
	position: relative;
	margin: 0;
	font-family: var(--font-lat);
	font-size: 0.75rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.hero__hint-line {
	inline-size: 1px;
	block-size: 40px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7));
	animation: hint 2.6s var(--ease) infinite;
	transform-origin: top;
}
@keyframes hint {
	0%, 100% { scale: 1 0.4; opacity: 0.35; }
	50% { scale: 1 1; opacity: 1; }
}

/* Staggered load-in. */
.hero__mark,
.hero__title,
.hero__tagline,
.hero__lede,
.hero__actions,
.hero__hint {
	animation: rise 0.62s var(--ease) both;
	animation-delay: var(--d, 0ms);
}
@keyframes rise {
	from { opacity: 0; translate: 0 18px; }
}

/* =========================================================================
   KITS
   ====================================================================== */
.kits {
	background: var(--paper);
	padding-block: clamp(56px, 9vw, 104px);
}

.kits__inner,
.site-foot__inner {
	max-inline-size: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

.kits__head {
	margin-block-end: clamp(28px, 4vw, 44px);
}

/* Four colours, four equal segments — the logo's quadrant, used as a rule. */
.quadrule {
	display: flex;
	gap: 4px;
	inline-size: 104px;
	block-size: 6px;
	margin-block-end: 20px;
}
.quadrule i { flex: 1; border-radius: 2px; }
.quadrule i:nth-child(1) { background: var(--yellow); }
.quadrule i:nth-child(2) { background: var(--coral); }
.quadrule i:nth-child(3) { background: var(--blue); }
.quadrule i:nth-child(4) { background: var(--green); }

.kits__title {
	margin: 0;
	font-weight: 900;
	font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.kits__count {
	margin: 6px 0 0;
	font-family: var(--font-lat);
	font-size: 0.9375rem;
	color: var(--muted);
}

.kits__empty {
	color: var(--muted);
	font-size: 1.0625rem;
}

.kit-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kit-item { display: flex; }

.kit-card {
	--chip: var(--blue);
	position: relative; /* containing block for .ppk-sr */
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(33, 63, 90, 0.07), 0 10px 26px -16px rgba(33, 63, 90, 0.3);
	transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.kit-card--blue { --chip: var(--blue); }
.kit-card--coral { --chip: var(--coral); }
.kit-card--yellow { --chip: var(--yellow); }
.kit-card--green { --chip: var(--green); }

.kit-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 2px 4px rgba(33, 63, 90, 0.08), 0 22px 44px -20px rgba(33, 63, 90, 0.45);
}

.kit-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--panel);
}
.kit-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: scale 0.5s var(--ease);
}
.kit-card:hover .kit-card__media img { scale: 1.03; }

/* Legibility scrim behind the chip on photographic covers. */
.kit-card__media--cover::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 48%;
	background: linear-gradient(to top, rgba(23, 41, 59, 0.62), rgba(23, 41, 59, 0));
	pointer-events: none;
}

/* Kits whose featured image is a brand logo (square or ultra-wide) are
   contained on a tinted panel rather than cropped to 16:10. */
.kit-card__media--mark {
	background: #fff;
	box-shadow: inset 0 -1px 0 rgba(33, 63, 90, 0.09);
}
.kit-card__media--mark img {
	object-fit: contain;
	padding: 11% 15%;
}
.kit-card:hover .kit-card__media--mark img { scale: 1.02; }

.kit-card__media--none {
	background: linear-gradient(140deg, #244663, var(--navy-deep));
	display: grid;
	place-items: center;
}
.kit-card__media--none .chip {
	position: static;
	font-size: 1.5rem;
	padding: 10px 20px;
	border-inline-start-width: 5px;
}

.chip {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	font-family: var(--font-lat);
	font-weight: 800;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--navy);
	background: color-mix(in oklab, var(--chip) 20%, #fff);
	direction: ltr;
	border-inline-start: 3px solid var(--chip);
	border-radius: 4px;
	padding: 5px 10px;
	line-height: 1.3;
}

.kit-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Fits two title lines exactly; one-line titles sit centred rather than
	   floating at the top now that the date line is gone. */
	min-block-size: 5.25rem;
	padding: 16px 20px 18px;
}

.kit-card__title {
	font-family: var(--font-lat);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--navy);
	text-wrap: balance;
}


/* Scroll reveal — IntersectionObserver adds .is-in (see press-home.js).
   Chosen over scroll-driven animations (animation-timeline: view()), which are
   not yet Baseline "widely available". */
.reveal {
	opacity: 0;
	translate: 0 20px;
	transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in {
	opacity: 1;
	translate: 0 0;
}

/* =========================================================================
   STICKY WHATSAPP CTA
   Shown only after the hero has largely scrolled away (the hero carries its
   own CTA). Driven by an IntersectionObserver on the hero rather than CSS
   container scroll-state queries: those are not yet Baseline "widely
   available", and they key off "has scrolled at all" rather than progress
   through a specific element.
   ====================================================================== */
.wa-cta {
	position: fixed;
	z-index: 90;
	inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
	/* Mobile: centred on the bottom edge. */
	inset-inline: 0;
	margin-inline: auto;
	inline-size: fit-content;
	max-inline-size: calc(100% - 32px);

	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 52px;
	padding: 12px 22px;
	border-radius: 999px;

	/* WhatsApp green with navy type: 5.5:1, and it reads on both the light
	   grid and the navy footer. Navy-on-colour is the logo's own idiom. */
	background: #25d366;
	color: var(--navy);
	font-family: var(--font-he);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 8px 24px -8px rgba(23, 41, 59, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.4);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	translate: 0 20px;
	transition: opacity 0.32s var(--ease), translate 0.32s var(--ease),
		visibility 0.32s, box-shadow 0.25s var(--ease);
}

.wa-cta.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	translate: 0 0;
}

.wa-cta:hover {
	box-shadow: 0 14px 32px -10px rgba(23, 41, 59, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* The page-wide green focus ring would vanish against the green pill. */
.press-home .wa-cta:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: 3px;
}

.wa-cta__icon {
	flex: none;
	display: block;
}

@media (min-width: 640px) {
	.wa-cta {
		/* Bottom inline-start = bottom-RIGHT in RTL. The accessibility toolbar
		   lives on the left edge, so the two never meet. */
		inset-inline-end: auto;
		inset-inline-start: clamp(20px, 4vw, 40px);
		margin-inline: 0;
		inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px));
	}
}

/* =========================================================================
   FOOTER
   ====================================================================== */
.site-foot {
	background: var(--navy-deep);
	color: #fff;
	padding-block-start: clamp(32px, 5vw, 52px);
	/* Extra room underneath: the sticky CTA stays on screen down here. */
	padding-block-end: calc(clamp(32px, 5vw, 52px) + 78px);
}
@media (min-width: 640px) {
	.site-foot { padding-block-end: calc(clamp(32px, 5vw, 52px) + 72px); }
}
.site-foot__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.site-foot__brand {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-lat);
	font-weight: 800;
	letter-spacing: 0.14em;
	font-size: 1.0625rem;
}
.site-foot__brand img {
	inline-size: 30px;
	block-size: auto;
}
.site-foot__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.82);
}
.site-foot__meta a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 3px;
}
.site-foot__meta a:hover { text-decoration-color: var(--green); }

/* =========================================================================
   MOTION PREFERENCES
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.press-home *,
	.press-home *::before,
	.press-home *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	.hero__mark,
	.hero__title,
	.hero__tagline,
	.hero__lede,
	.hero__actions,
	.hero__hint {
		opacity: 1;
		translate: none;
	}
	.wedge { animation: none; }
	.hero__hint-line { animation: none; opacity: 0.7; scale: 1 1; }
	.reveal { opacity: 1; translate: none; }
	.wa-cta { translate: none; }
	.kit-card:hover { transform: none; }
	.kit-card:hover .kit-card__media img { scale: 1; }
}