/*
 * Ekoloko World — public text pages (/about, /contact, /privacy, /terms in the app's "discovery" family; the
 * blog and the video gallery keep the original site chrome and only get the layout-shift guard).
 * Same language as the landing (eko-world-landing.v10.css): lime page (#abd93f), one parchment column
 * (#fffdf2, max 860px like the original site), no frame border, ink #18384f, Arial for text, GanCLM (EkoGan) only on
 * the wooden plaque heading, buttons are the original Flash wooden plank (landing3/wood-up-v1.webp, hover
 * wood-over-v1.webp) as a 9-slice border-image. No gradients except the original header bar, no glass, no emoji.
 * Versioned in the file name: /auth is served with a one-year cache.
 */
@font-face{font-family:EkoGan;src:url('gan-clm.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}

/* ---- layout-shift guard: the page body arrives after a fetch; the footer starts below the fold so it never jumps ---- */
#eko-public-main, #eko-public-content { min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); }

/* ---- discovery family: page and paper column ---- */
#root .source-discovery {
  direction: rtl; min-height: 100vh; background: #abd93f; color: #18384f; font: 16px/1.65 Arial, sans-serif;
  overflow-x: clip;
}
.source-discovery *, .source-discovery *::before, .source-discovery *::after { box-sizing: border-box; }

/* header: the original site bar (dark blue plank), logo at the start, white menu, wooden "play" plank */
.source-discovery .site-header {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  width: 100%; min-height: 64px; margin: 0; padding: 6px max(16px, calc(50% - 430px));
  border: 0; box-shadow: 0 2px 0 #18384f33; background: linear-gradient(#3a6e79, #33637f, #1e4560);
}
.source-discovery .site-header .brand { display: block; flex: none; line-height: 0; }
.source-discovery .site-header .brand img { display: block; width: 132px; height: auto; aspect-ratio: 579 / 206; }
.source-discovery .site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.source-discovery .site-header nav a:not(.header-play) {
  color: #fff; font: bold 17px/1.2 Arial, sans-serif; text-decoration: none; text-shadow: 0 1px 0 #10304a; padding: 8px 2px;
}
.source-discovery .site-header nav a:not(.header-play):hover,
.source-discovery .site-header nav a:not(.header-play):focus-visible { color: #ffe27a; text-decoration: underline; text-underline-offset: 4px; }
.source-discovery .site-header nav a[aria-current="page"] { color: #ffe27a; }

/* main: one parchment column, no frame */
.source-discovery #eko-public-main { width: min(860px, 100%); margin: 0 auto; padding: 0; background: #fffdf2; }
.source-discovery .article.section { max-width: none; margin: 0; padding: clamp(28px, 5vw, 56px) clamp(18px, 6vw, 64px) clamp(36px, 6vw, 64px); text-align: right; }
.source-discovery .article p, .source-discovery .article li { max-width: 62ch; color: #18384f; font-size: 16px; line-height: 1.7; }
.source-discovery .article .eyebrow { margin: 0 0 6px; color: #4a6076; font: bold 14px/1.3 Arial, sans-serif; letter-spacing: 0; text-align: center; max-width: none; }
.source-discovery .article h1 {
  display: flex; align-items: center; justify-content: center; width: fit-content; min-width: min(300px, 100%); max-width: 100%; min-height: 78px;
  margin: 0 auto 18px; padding: 8px 40px 14px; background: url('reg/plaque2.webp') center / 100% 100% no-repeat;
  font: 30px/1.15 EkoGan, 'Trebuchet MS', Arial, sans-serif; color: #fff; text-align: center; text-shadow: 0 2px 0 #6b4a1d, 0 0 4px #6b4a1d;
}
.source-discovery .article .lead { margin: 0 auto 22px; max-width: 46ch; color: #4a6076; font-size: 18px; text-align: center; }
.source-discovery .article h2 { margin: 30px 0 8px; padding: 0 0 4px; border-bottom: 1px dashed #a7b793; color: #2e5d12; font: bold 20px/1.3 Arial, sans-serif; }
.source-discovery .article a:not(.play-button) { color: #0d527e; font-weight: bold; }
.source-discovery .article a:not(.play-button):hover { color: #18384f; }
.source-discovery .article p:has(> .play-button) { max-width: none; margin-top: 30px; text-align: center; }

/* the wooden plank button (QuizJungle.swf "המשך": up / over states) */
.source-discovery .play-button, .source-discovery .site-header .header-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 6px 30px 12px;
  background: transparent none; border-style: solid; border-color: transparent; border-radius: 0; box-shadow: none; filter: none;
  border-image: url('landing3/wood-up-v1.webp') 26 48 30 44 fill / 13px 24px 15px 22px stretch;
  color: #6a4d00; text-shadow: 0 1px 0 #f0d78a; font: bold 22px/1.1 Arial, sans-serif; text-decoration: none; cursor: pointer;
}
.source-discovery .site-header .header-play { min-height: 46px; padding: 4px 22px 9px; font-size: 17px; }
.source-discovery .play-button:hover, .source-discovery .play-button:focus-visible,
.source-discovery .site-header .header-play:hover, .source-discovery .site-header .header-play:focus-visible {
  border-image-source: url('landing3/wood-over-v1.webp'); color: #e3c46c; text-shadow: 0 1px 0 #3d2c00; transform: none;
}
.source-discovery .play-button:active, .source-discovery .site-header .header-play:active { transform: translateY(1px); border-image-source: url('landing3/wood-up-v1.webp'); color: #6a4d00; }
.source-discovery a:focus-visible { outline: 3px solid #0d527e; outline-offset: 3px; }

/* footer: white links on the lime page, the original footer strip above them */
.source-discovery .site-footer {
  width: min(860px, 100%); margin: 0 auto; padding: 44px 16px 28px; border: 0;
  background: url('footer_iw.jpg') center top / 100% 40px no-repeat; color: #fff; text-align: center;
}
.source-discovery .site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.source-discovery .site-footer a { color: #fff; font: bold 14px/1.6 Arial, sans-serif; text-decoration: none; text-shadow: 0 1px 0 #4c7a14; }
.source-discovery .site-footer a:hover, .source-discovery .site-footer a:focus-visible { text-decoration: underline; }
.source-discovery .site-footer p { margin: 10px 0 0; color: #f4fbe4; font: 13px/1.5 Arial, sans-serif; text-shadow: 0 1px 0 #4c7a14; }

@media (max-width: 640px) {
  .source-discovery .site-header { justify-content: center; padding: 8px 12px 10px; }
  .source-discovery .site-header .brand img { width: 118px; }
  .source-discovery .site-header nav { justify-content: center; gap: 2px 16px; }
  .source-discovery .site-header nav a:not(.header-play) { font-size: 16px; }
  .source-discovery .article h1 { font-size: 26px; min-height: 66px; padding: 6px 28px 12px; }
  .source-discovery .play-button { width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { .source-discovery .play-button:active, .source-discovery .site-header .header-play:active { transform: none; } }

/* ---- v2: tablet widths (761-940px). The illustrated menu strip is 916px wide and its viewport scrolled sideways
 *      (the page could be dragged left/right at 768px). Clip the strip and centre its five links (they span
 *      82..776px of the strip, centre 429px); the faded strip ends are what gets cut. ---- */
@media (min-width: 761px) and (max-width: 940px) {
  #eko-player-auth #eko-login-header-viewport { overflow: hidden !important; }
  #eko-player-auth #eko-login-header-track { left: calc(50% - 429px); }
}

/* ---- v2: legacy standalone pages (video gallery): pictures keep their box while loading and never run past
 *      the phone screen ---- */
.source-public-standalone #eko-public-content img { max-width: 100%; height: auto; }
@media (max-width: 760px) {
  .source-public-standalone #eko-public-content img[hspace] { margin-inline: 0; }
  .source-public-standalone #eko-public-content table { width: 100% !important; max-width: 100%; }
}

/* ---- v3: layout-shift fixes ----
 * Phones (<=760px): the five menu links got their final compact size (40px tall, 10px sides, 14px text, wrapped
 * and centred) only after the sign-in form or the landing hero arrived (the :has() rules in the loginpage and
 * landing sheets), so the whole menu jumped once (CLS 0.014 at 360px). Give the menu that size from its first frame. */
@media (max-width: 760px) {
  #eko-player-auth #eko-login-header-track nav { flex-wrap: wrap !important; justify-content: center !important; gap: 4px 4px !important; padding: 6px 6px !important; overflow: visible !important; }
  #eko-player-auth #eko-login-header-track nav a { flex: 0 0 auto; min-height: 40px !important; padding: 0 10px !important; font-size: 14px !important; white-space: nowrap; }
}
/* Public pages (blog, video gallery): the page's loading line has a top margin that collapsed through #root and
 * pushed the whole page down 15px and back (CLS 0.22 at 1280px). Keep margins inside #root. */
body.eko-public-shell > #root { display: flow-root; }
/* v4: the loading line sits in #eko-public-content; keep its margin there (v3's #root guard alone still let the
 * whole page move 15px down and back at 1280px) */
body.eko-public-shell #eko-public-content { display: flow-root; }
/* v5: the video gallery (lab family) loaded in the wide 1200px site grid and then snapped to its own 960px column
 * (CLS 0.21 at 1280px). While its page is still loading, use the final column already. */
body.eko-public-shell--lab .source-public-page:not(.source-public-standalone) #eko-public-main {
  display: block; width: min(960px, 100%); margin: 0 auto; background: none; box-shadow: none;
}