/* מספרת ילדודס · "גיבורי תספורת": a comic book. Ink panels, yellow caption boxes, speech
   balloons, a starburst, and the yellow car (like the shop's car chairs) that drives in and parks
   next to the call button. Only transform + opacity move; reduced motion = parked, nothing moves. */

:root {
  --bg: #F4F7F6;
  --surface: #FFFFFF;
  --ink: #1E2B14;
  --muted: #4A5743;
  --primary: #F5C518;
  --primary-ink: #1E2B14;
  --soft: #FFF0BF;
  --accent: #E8731F;
  --hero-green: #3BA55C;
  --line: #1E2B14;
  --brand-text: var(--ink);
  --focus: #2E441F;
  --radius: 6px;
  --radius-pill: 10px;
  --k-outline-fill: var(--soft);
  --font-head: "Rubik Doodle Shadow", "Varela Round", sans-serif;
  --font-body: "Varela Round", system-ui, sans-serif;
  --h1: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --speed: repeating-conic-gradient(from 0deg at 85% 12%, rgb(30 43 20 / .07) 0 3deg, transparent 3deg 9deg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; font-synthesis: none; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
}
img, svg { display: block; }
a { color: inherit; }
p, figure, blockquote, h1, h2, ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; padding: .6rem 1rem; border: 3px solid var(--line); background: var(--primary); }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1132px; margin-inline: auto; padding-inline: 16px; }

/* Varela Round has one weight: no fake bold anywhere, kit buttons included. */
body .k-btn { font-weight: 400; }
/* Yellow toy keys with an ink outline (yellow alone is only 1.5:1 against the page). */
body .k-btn--raised::before,
body .k-btn--raised::after { border: 3px solid var(--line); }
body .k-btn--outline { border: 3px solid var(--line); background: var(--surface); }

/* ---------- Illustration paint ---------- */
.c-yel { fill: var(--primary); }
.c-acc { fill: var(--accent); }
.c-white { fill: #fff; }
.c-ink { fill: var(--ink); }
.c-skin { fill: #FFE3C8; }
.c-hero { fill: var(--hero-green); }
.c-mapbg { fill: #E6EEE9; }
.c-yel-icon { color: var(--primary); }
.ink { stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.ink-line { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.soft-line { stroke: var(--muted); stroke-width: 2.5; }
.spokes { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.cross { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.road-band { fill: none; stroke: #C9CDCB; stroke-width: 46; }
.road-dash { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 14 12; }
.car *, .art *, .map * { vector-effect: non-scaling-stroke; }

/* ---------- Comic building blocks ---------- */
.panel {
  position: relative;
  padding: 18px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel--open { background: var(--speed), var(--soft); }
.panel--yellow { background: var(--speed), var(--primary); }
.panel--green { background: var(--hero-green); }
.caption {
  display: inline-block;
  padding: 6px 12px;
  border: 3px solid var(--line);
  background: var(--primary);
  box-shadow: 4px 4px 0 var(--line);
  color: var(--primary-ink);
  font-size: .9375rem;
  line-height: 1.35;
}
.caption--h2 { font-family: var(--font-head); font-size: 28px; font-weight: 400; line-height: 1.2; }
.caption--white { background: var(--surface); }
.balloon {
  position: relative;
  padding: 14px 18px;
  border: 3px solid var(--line);
  border-radius: 28px;
  background: #fff;
  font-size: 1.1875rem;
  line-height: 1.5;
}
/* Tail: an ink triangle with a white one inside it. */
.balloon::before,
.balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: 34px;
  border: solid transparent;
}
.balloon::before { border-width: 16px 12px 0 0; border-top-color: var(--line); margin-top: 0; }
.balloon::after { border-width: 11px 8px 0 0; border-top-color: #fff; margin-top: -1px; margin-inline-start: 3px; }
.balloon--small { margin-top: 14px; padding: 10px 12px; border-radius: 20px; font-size: .9375rem; }
.tag { display: inline-block; margin-top: 18px; padding: 2px 10px; border-radius: 4px; background: var(--soft); color: var(--ink); font-size: .875rem; }
.balloon .tag { display: block; width: fit-content; margin-top: 8px; }

/* ---------- Banner + header ---------- */
.demo-banner { padding: .5rem 16px; background: var(--ink); color: var(--surface); font-size: .875rem; line-height: 1.5; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 3px solid var(--line); background: var(--surface); }
.site-header__inner { display: flex; align-items: center; gap: 18px; max-width: 1132px; height: 60px; margin-inline: auto; padding-inline: 16px; }
.logo {
  margin-inline-end: auto;
  padding: 0 10px;
  border: 3px solid var(--line);
  background: var(--primary);
  font-family: var(--font-head);
  font-size: 26px;
  line-height: 1.3;
  text-decoration: none;
  rotate: -3deg;
}
.site-nav { display: none; }
.site-header .header-call-text { display: none; }

/* ---------- Hero: the opening page ---------- */
.hero { padding-block: 22px 56px; }
.hero__grid { position: relative; }
.hero__main { min-height: 600px; padding: 20px 18px 120px; }
.burst { position: relative; width: 230px; height: 170px; rotate: -4deg; }
.burst__shape { width: 100%; height: 100%; overflow: visible; }
.burst__text { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 6px; font-family: var(--font-head); font-size: 48px; line-height: 1; }
.hero__burst { margin: -6px -8px 0 0; }
.hero__cap { position: relative; margin-top: -26px; }
.hero__title { margin-top: 20px; font-family: var(--font-head); font-size: var(--h1); font-weight: 400; line-height: 1.2; }
.hero__lead { margin-top: 14px; }
.hero__actions { display: grid; gap: 12px; margin-top: 24px; }
.hero__road { display: none; }
.drive { position: absolute; pointer-events: none; }
.car { width: 100%; height: auto; overflow: visible; }
.hero__lane { position: absolute; left: 4px; bottom: -34px; width: 150px; pointer-events: none; }
.hero__car { width: 150px; }
.car__bang { opacity: 0; }

/* ---------- Sections ---------- */
.section { padding-block: 40px; }

/* איך זה עובד */
.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.strip__panel { display: flex; flex-direction: column; min-height: 230px; padding: 10px; }
.strip__panel:nth-child(1) { rotate: -.6deg; }
.strip__panel:nth-child(2) { rotate: .5deg; }
.strip__panel:nth-child(3) { rotate: .4deg; }
.strip__panel:nth-child(4) { rotate: -.5deg; }
.art { width: 100%; height: auto; margin-bottom: 10px; }
.strip__cap { align-self: flex-start; margin-top: auto; }

/* ההורים מספרים */
.parents__panel { padding: 22px 18px 28px; }
.score { display: flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--muted); font-size: .9375rem; }
.score svg { width: 16px; height: 16px; color: var(--primary); }
.balloons { display: grid; gap: 22px; margin-top: 24px; padding: 0; list-style: none; }
.balloons li:nth-child(even) { text-align: end; }
.balloons li:nth-child(even) .balloon { text-align: start; }
.balloons li:nth-child(even) .balloon::before { inset-inline-start: auto; inset-inline-end: 34px; border-width: 16px 0 0 12px; }
.balloons li:nth-child(even) .balloon::after { inset-inline-start: auto; inset-inline-end: 37px; margin-inline-start: 0; border-width: 11px 0 0 8px; }
.star-burst { position: relative; width: 250px; height: 190px; margin: 34px 0 0 auto; }
.star-burst .burst__shape { width: 100%; height: 100%; rotate: -6deg; overflow: visible; }
.star-burst__text { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px 44px 50px; text-align: center; font-family: var(--font-head); font-size: 26px; line-height: 1.15; }
.star-burst .tag { position: absolute; bottom: -6px; left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; }
.more { margin-top: 26px; }
.k-link { display: inline-flex; align-items: center; min-height: 44px; }

/* גם לגדולים */
.grown__grid { display: grid; gap: 10px; }
.grown__panel { display: grid; gap: 14px; min-height: 120px; }
.grown__panel .caption { justify-self: start; }
.grown__art { display: none; }

/* איפה אנחנו */
.find__grid { display: grid; gap: 10px; }
.find__map { padding: 0; overflow: hidden; }
.map { width: 100%; height: auto; }
.map__tag {
  position: absolute;
  top: 46%;
  inset-inline-end: 8%;
  padding: 2px 10px;
  border: 3px solid var(--line);
  background: #fff;
  font-size: .9375rem;
}
.find__addr { margin-top: 18px; font-size: 1.25rem; }
.live { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 2px 12px; border: 3px solid var(--line); border-radius: 999px; background: var(--soft); font-size: .9375rem; }
.live::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--line); border-radius: 50%; background: #fff; }
.live.is-open::before { background: var(--hero-green); }
.hours { width: 100%; margin-top: 16px; border-collapse: collapse; }
.hours tr { border-bottom: 2px dashed #C9CDCB; }
.hours th, .hours td { padding: 7px 0; font-weight: 400; text-align: start; }
.hours td { text-align: end; }
.hours tr.is-today { background: var(--soft); }
.hours tr.is-today th, .hours tr.is-today td { padding-inline: 8px; }
.find__park { margin-top: 12px; }
.find__nav { position: relative; display: grid; gap: 12px; margin-top: 76px; }
.find__car { top: -84px; left: 0; width: 120px; }

/* הגיבור הבא */
.call__panel { padding: 28px 18px; }
.call__lead { margin-top: 18px; font-size: 1.25rem; }
.call__actions { display: grid; gap: 12px; margin-top: 22px; }

/* ---------- Footer + dock ---------- */
.site-footer { margin-top: 32px; padding: 28px 0 36px; border-top: 3px solid var(--line); background: var(--surface); color: var(--muted); font-size: .9375rem; }
.site-footer p + p { margin-top: 6px; }
.site-footer a { display: inline-block; min-height: 24px; color: var(--ink); }

.dock {
  position: fixed;
  inset-inline: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  gap: 8px;
  padding: 8px 8px 13px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--line);
}
.dock > * { flex: 1 1 0; }
.dock.is-hidden { visibility: hidden; opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .dock { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s; }
  .dock.is-hidden { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s 420ms; }
}
@media (prefers-reduced-motion: reduce) { .dock.is-hidden { transform: none; } }
@media (max-width: 899px) { body { padding-bottom: 96px; } }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .balloons { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .call__actions, .find__nav { display: flex; flex-wrap: wrap; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .site-nav { display: flex; gap: 24px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; text-decoration: none; }
  .site-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .site-header .header-call-text { display: inline-flex; }
  .site-header .header-call-icon { display: none; }

  .hero { padding-block: 32px 96px; }
  .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
  .hero__main { grid-column: 1 / 8; min-height: 600px; padding: 28px 32px 40px; }
  .hero__road { display: block; grid-column: 8 / 13; background: var(--speed), var(--surface); background-position: center; overflow: hidden; }
  .road { position: absolute; inset-inline: 0; bottom: 70px; height: 56px; background: #C9CDCB; border-block: 3px solid var(--line); }
  .road::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 40px); }
  .hero__lane { left: 0; top: 0; bottom: 0; width: calc((100% - 110px) / 12 * 5 + 40px); overflow: clip; border-radius: var(--radius); }
  .hero__car { position: absolute; left: calc(50% - 180px); bottom: 76px; width: 360px; }
  .burst { width: 300px; height: 222px; }
  .burst__text { font-size: 88px; }
  .hero__title { font-size: 52px; }
  .hero__actions { display: flex; }
  .hero__actions .k-btn--block { width: auto; }

  .section { padding-block: 56px; }
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip__panel { min-height: 300px; }
  .caption--h2 { font-size: 40px; }
  .balloon { font-size: 1.3125rem; }
  .balloon--small { font-size: 1rem; }

  .parents__panel { padding: 32px 32px 40px; }
  .star-burst { position: absolute; left: -30px; bottom: -70px; margin: 0; }
  .more { margin-top: 32px; }

  .grown__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 40px; }
  .grown__panel { grid-column: 1 / 8; grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
  .grown__art { display: grid; place-items: center; grid-column: 8 / 13; }
  .grown__art svg { width: 160px; height: 160px; }

  .find__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .find__info { grid-column: 1 / 6; grid-row: 1; }
  .find__map { grid-column: 6 / 13; grid-row: 1; }
  .find__map .map { height: 100%; object-fit: cover; }

  .call__panel { margin-inline-end: 8.33%; margin-inline-start: 8.33%; padding: 40px; }
  .call__lead { font-size: 1.5rem; }
}

/* =====================================================================
   Motion. Hero: pure CSS from the first paint (no flash). Below the fold:
   start states only under html.k-motion, keyed on .is-in.
   Reduced motion / no JS: burst in place, car parked, no "!" marks.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero__burst { animation: burst 450ms var(--k-spring) both; }
  .hero__car { animation: drive-in 800ms var(--k-ease-out) 300ms both; }
  .hero__car .car { animation: hop 150ms ease-out 1100ms both; }
  .hero__car .wheel { transform-box: fill-box; transform-origin: center; animation: spin 800ms var(--k-ease-out) 300ms both; }
  .hero__car .car__bang { transform-box: fill-box; transform-origin: right center; animation: bang 300ms ease 1250ms both; }

  .k-motion .find__nav:not(.is-in) .find__car { transform: translateX(130%); }
  .k-motion .find__nav.is-in .find__car { animation: drive-in 800ms var(--k-ease-out) 200ms both; }
  .k-motion .find__nav.is-in .find__car .wheel { transform-box: fill-box; transform-origin: center; animation: spin 800ms var(--k-ease-out) 200ms both; }
  .k-motion .find__nav.is-in .find__car .car { animation: hop 150ms ease-out 1000ms both; }
  .k-motion .find__nav.is-in .find__car .car__bang { transform-box: fill-box; transform-origin: right center; animation: bang 300ms ease 1150ms both; }

  .k-motion .star-burst:not(.is-in) .burst__shape { transform: scale(.3) rotate(-14deg); }
  .k-motion .star-burst:not(.is-in) .star-burst__text { opacity: 0; }
  .k-motion .star-burst.is-in .burst__shape { animation: pop-burst 420ms var(--k-spring) both; }
  .k-motion .star-burst.is-in .star-burst__text { animation: fade-in 200ms ease 420ms both; }
}
@keyframes burst {
  0% { opacity: 0; transform: scale(.2) rotate(-12deg); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: none; }
}
@keyframes drive-in { from { transform: translateX(130%); } }
@keyframes spin { from { transform: rotate(-540deg); } }
@keyframes hop { 50% { transform: translateY(-6px); } }
@keyframes bang {
  0% { opacity: 0; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes pop-burst { from { transform: scale(.3) rotate(-14deg); } }
@keyframes fade-in { from { opacity: 0; } }

@media (forced-colors: active) {
  .caption, .panel, .balloon, .logo { border-color: CanvasText; }
}

/* ---------- Accessibility statement + 404 ---------- */
.page { max-width: 720px; margin: 32px auto; padding: 32px 20px; border: 3px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.page h1 { display: inline-block; padding: 4px 12px; border: 3px solid var(--line); background: var(--primary); box-shadow: 4px 4px 0 var(--line); font-family: var(--font-head); font-size: 2rem; font-weight: 400; line-height: 1.2; }
.page h2 { margin: 28px 0 6px; font-size: 1.25rem; font-weight: 400; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--primary); text-underline-offset: 6px; }
.page ul { padding-inline-start: 1.2em; }
.page p { margin-top: 12px; }
.page a { display: inline-block; min-height: 24px; }
@media (max-width: 760px) { .page { margin: 16px; } }