/* ==========================================================================
   YAYA — brand foundation
   Colors + type extracted from BRAND BOOK YAYA.pdf (Feb 2025, Tomer Attal)
   and the source OTF / AI files. Nothing here is invented.
   ========================================================================== */

/* --- Hebrew faces: FB Jabutinski Condensed (Hebrew block only) ----------- */
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinski-ConLight.woff2') format('woff2');
  /* only three Hebrew faces exist. Without a range here, weight 400 and 500
     find no Hebrew face and drop to Arial Hebrew mid-page. */
  font-weight: 300 500; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200F, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinski-ConBold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200F, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinski-ConBlack.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200F, U+FB1D-FB4F;
}

/* --- Latin + digit faces: FB Jabutinski Eng ------------------------------ */
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinskiEng-ConLight.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  /* everything except the Hebrew block, so these never shadow the Hebrew faces */
  unicode-range: U+0000-058F, U+0600-FB1C, U+FB50-10FFFF;
}
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinskiEng-ConRegular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  /* everything except the Hebrew block, so these never shadow the Hebrew faces */
  unicode-range: U+0000-058F, U+0600-FB1C, U+FB50-10FFFF;
}
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinskiEng-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  /* everything except the Hebrew block, so these never shadow the Hebrew faces */
  unicode-range: U+0000-058F, U+0600-FB1C, U+FB50-10FFFF;
}
@font-face {
  font-family: 'Jabutinski';
  src: url('fonts/FbJabutinskiEng-ConBlack.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  /* everything except the Hebrew block, so these never shadow the Hebrew faces */
  unicode-range: U+0000-058F, U+0600-FB1C, U+FB50-10FFFF;
}

:root {
  /* Brand book p.13 */
  --navy:   #2A438C;
  --purple: #B4A7FF;
  --lilach: #93ACFE;
  --lime:   #E7FC93;
  --pink:   #FFBBF8;
  --aqua:   #C8E3FE;   /* from Logo/Icon Aqua source files */
  --ink:    #000000;
  --paper:  #FFFFFF;

  --ink-70: rgba(0, 0, 0, .70);
  --ink-55: rgba(0, 0, 0, .55);
  --navy-70: rgba(42, 67, 140, .70);

  --font: 'Jabutinski', 'Arial Hebrew', system-ui, sans-serif;

  /* fluid type scale, raised across the board (Lior, 11.8.2026) */
  --t-mega:  clamp(3.3rem, 10.5vw, 8.2rem);
  --t-h1:    clamp(2.6rem, 7vw, 5.6rem);
  --t-h2:    clamp(2.2rem, 5.2vw, 4rem);
  --t-h3:    clamp(1.55rem, 2.9vw, 2.2rem);
  --t-lead:  clamp(1.25rem, 2.3vw, 1.7rem);
  --t-body:  clamp(1.1rem, 1.6vw, 1.32rem);
  --t-small: 1rem;

  --wrap: 1240px;
  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --sec: clamp(4rem, 9vw, 8rem);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the sticky header would otherwise cover whatever an in-page anchor lands on */
  scroll-padding-block-start: 88px;
  /* reserve the scrollbar so locking the body when an overlay opens does not
     shift the whole layout sideways */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: inherit; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
/* navy on navy is an invisible focus ring, which is the same as having none */
.bg-navy :where(a, button, input, textarea, select, [tabindex]):focus-visible,
.dock :where(a, button, [tabindex]):focus-visible,
.ftr :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--lime);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* a skip link that never becomes visible is not a skip link */
.skip:focus {
  position: fixed; inset-block-start: .6rem; inset-inline-start: .6rem;
  width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
  z-index: 200; background: var(--navy); color: var(--paper);
  padding: .8rem 1.2rem; border-radius: 999px; font-weight: 900;
  text-decoration: none;
}

.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }

/* Latin words inside Hebrew sentences keep their own run direction */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------------------
   Recolourable brand marks.
   An external SVG loaded through <img> cannot inherit currentColor, so every
   single-colour mark is painted with a CSS mask instead. Colour then comes
   from `color:` on the element, exactly like type.
   -------------------------------------------------------------------------- */
.logo {
  display: block;
  aspect-ratio: 692.24 / 274.84;
  background-color: currentColor;
  -webkit-mask: url('logo.svg') center / contain no-repeat;
          mask: url('logo.svg') center / contain no-repeat;
}

/* The signature YAYA ribbon: one continuous stroke running through the layout */
.ribbon {
  position: absolute;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: var(--rib);
          mask-image: var(--rib);
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ribbon--1 { --rib: url('ribbon-1.svg'); }
.ribbon--2 { --rib: url('ribbon-2.svg'); }
.ribbon--3 { --rib: url('ribbon-3.svg'); }
.ribbon--4 { --rib: url('ribbon-4.svg'); }

/* Two-tone icon lives as an inline <symbol>; see .yaya-sprite in the markup */
.icon-y { display: block; width: 1em; height: 1.173em; }