/* Spelly — the shared top navigation.
 *
 * The landing carries this markup and these rules inline; the blog and the help
 * centre link this file, so all three surfaces get the SAME menu. Extracted
 * from landing.html on 30-08-26 rather than rewritten, so they cannot drift.
 *
 * Only the brand differs: the blog appends a "Blog" tag and the help centre a
 * "Help" tag (Hebrew "עזרה"), via <span class="tag">.
 */
.nav {
  /* THE NAV CARRIES ITS OWN PALETTE, rather than inheriting the host page's.
     All three stylesheets declare some of these names with different values and
     help.css has no --surface at all, so inheriting rendered the menu
     dark-on-dark on /help. Declared here, the bar is identical everywhere. */
  --ink: #1F1145;
  --ink-soft: #4A3A7A;
  --muted: #7A6FA8;
  --surface: #FFFFFF;
  --surface-tint: #FFF9E5;
  --outline: #1F1145;
  --stroke: 3px;
  --bevel: 6px;
  --grass: #3DD068;
  --grass-deep: #1FA547;
  --coin: #FFC42D;
  --tangerine-deep: #D0640A;
  --font-display: 'Baloo 2','Baloo 2 Fallback','Fredoka','Fredoka Fallback',system-ui,sans-serif;
  --r-sm: 12px;
  --r-md: 18px;
  --r-xl: 32px;
  --shadow-card: 0 10px 0 -2px rgba(31,17,69,0.06), 0 16px 36px -10px rgba(31,17,69,0.18);
  --shadow-lift: 0 22px 48px -16px rgba(31,17,69,0.35);
}
[data-theme="dark"] .nav {
  --ink: #F4EEFF;
  --ink-soft: #CFC2F2;
  --muted: #9B8FCB;
  --surface: #241a4d;
  --surface-tint: #2b2058;
  --outline: #0C0722;
  --shadow-card: 0 10px 0 -2px rgba(0,0,0,0.25), 0 16px 36px -10px rgba(0,0,0,0.5);
}

.nav{position:sticky; top:0; z-index:50; padding-top:14px}
.nav-inner{display:flex; align-items:center; gap:14px;
  background:color-mix(in oklab, var(--surface), transparent 18%); backdrop-filter:blur(12px);
  border:var(--stroke) solid var(--outline); border-radius:var(--r-xl);
  box-shadow:0 var(--bevel) 0 var(--outline); padding:10px 14px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:22px}
.brand .mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:24px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,0.25);
  background:conic-gradient(from 200deg,#FFD93D,#FF4FA3,#8B5CF6,#2E9DFF,#3DD068,#FFD93D);
  border:var(--stroke) solid var(--outline); box-shadow:0 4px 0 var(--outline); flex:none;}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-soft);padding:9px 14px;border-radius:12px;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--surface-tint);color:var(--ink)}
.nav-links .mi,.nav-links .mchev,.nav-links .menu-cta{display:none}
.nav-cta{display:flex;gap:10px;align-items:center}
.theme-toggle{width:48px;height:48px;border-radius:14px;border:var(--stroke) solid var(--outline);background:var(--surface);box-shadow:0 4px 0 var(--outline);cursor:pointer;font-size:20px;display:grid;place-items:center;transition:transform .08s,box-shadow .08s;flex:none}
.theme-toggle:active{transform:translateY(4px);box-shadow:0 1px 0 var(--outline)}
.burger{display:none;width:48px;height:48px;border-radius:14px;border:var(--stroke) solid var(--outline);background:var(--surface);box-shadow:0 4px 0 var(--outline);cursor:pointer;font-size:22px;place-items:center}
.mock .ts.cur{border-bottom-color:var(--coin)}
.mock .ts.cur::after{content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);width:3px;height:26px;background:var(--ink);border-radius:2px;animation:caret 1.05s steps(1) infinite}
.foot .brand{color:#fff}
.pat .tag{flex:none;font-family:var(--font-display);font-weight:800;font-size:14.5px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.22);border:2px solid var(--outline);border-radius:9px;padding:6px 9px;min-width:64px;text-align:center;box-shadow:0 2px 0 var(--outline)}
.cv-yes{color:var(--grass-deep);font-weight:800}
[data-theme="dark"] .cv-yes{color:#5cf08a}
.cv-no{color:var(--muted);font-weight:600}
.cv-lim{color:var(--tangerine-deep);font-weight:800}
[data-theme="dark"] .cv-lim{color:#ffb066}
.nav-group{position:relative}
.nav-group>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-soft);padding:9px 14px;border-radius:12px;transition:background .15s,color .15s}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:var(--surface-tint);color:var(--ink)}
.nav-group>summary .cv{font-size:10px}
.nav-group-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;display:grid;gap:2px;width:max-content;min-width:210px;background:var(--surface);border:var(--stroke) solid var(--outline);border-radius:var(--r-md);box-shadow:0 5px 0 var(--outline);padding:8px;z-index:60}
.nav-group-menu a{display:flex;align-items:center;gap:8px}
.nav-group-menu .mi{display:inline}
.nav-lang{position:relative}
.nav-lang>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:15px;color:var(--ink);padding:9px 11px;border:var(--stroke) solid var(--outline);border-radius:var(--r-sm);background:var(--surface);box-shadow:0 3px 0 var(--outline)}
.nav-lang>summary::-webkit-details-marker{display:none}
.nav-lang>summary .cv{font-size:11px}
.nav-lang[open]>summary{transform:translateY(1px);box-shadow:0 2px 0 var(--outline)}
.nav-lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;display:grid;grid-template-columns:repeat(2,auto);gap:2px 4px;width:max-content;max-width:min(94vw,380px);max-height:80vh;overflow:auto;background:var(--surface);border:var(--stroke) solid var(--outline);border-radius:var(--r-md);box-shadow:var(--shadow-lift);padding:8px;z-index:200}
.nav-lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-lang-menu a:hover{background:var(--surface-tint)}
.nav-lang>summary .cur{font-size:13px;font-weight:800;letter-spacing:.02em}

@media(max-width:860px){
  .nav-links{position:absolute; top:calc(100% + 12px); left:0; right:0; margin-left:0;
    flex-direction:column; gap:9px;
    background:var(--surface); border:var(--stroke) solid var(--outline);
    border-radius:var(--r-xl); box-shadow:0 var(--bevel) 0 var(--outline), var(--shadow-card);
    padding:13px; display:none;}
  .nav-links.open{display:flex; animation:menuDrop .2s cubic-bezier(.2,.9,.3,1.3)}
  .nav-links a{display:flex; align-items:center; gap:13px;
    font-size:18px; font-weight:800; color:var(--ink);
    padding:11px 14px; min-height:56px; border-radius:15px;
    background:var(--surface-tint); border:2.5px solid var(--outline);
    box-shadow:0 3px 0 var(--outline); transition:none;}
  .nav-links a:hover{background:var(--surface-tint);color:var(--ink)}
  .nav-links a:active{transform:translateY(3px); box-shadow:0 0 0 var(--outline)}
  .nav-links .mi{display:grid; place-items:center; flex:none; width:40px; height:40px;
    font-size:21px; border-radius:12px; background:var(--surface);
    border:2.5px solid var(--outline); box-shadow:0 2px 0 var(--outline);}
  .nav-links .mchev{display:block; margin-left:auto; font-size:28px; line-height:1; font-weight:800; color:var(--muted)}
  .nav-links .menu-cta{display:flex; justify-content:center; gap:8px; margin-top:5px; min-height:60px;
    font-size:19px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.18);
    background:var(--grass); border:var(--stroke) solid var(--grass-deep);
    box-shadow:0 5px 0 var(--grass-deep);}
  .nav-links .menu-cta:active{transform:translateY(4px); box-shadow:0 1px 0 var(--grass-deep)}
  .burger{display:grid}
  .nav-inner{justify-content:space-between}
  .nav-cta{margin-left:auto}
  .nav-cta .btn:not(.always){display:none}
}
@media (prefers-reduced-motion:reduce){
  .mock .ts.cur::after{animation:none}
}
@media(max-width:860px){
  .nav-links .nav-group{position:static;width:100%}
  .nav-links .nav-group>summary{width:100%;padding:9px 14px}
  .nav-links .nav-group-menu{position:static;box-shadow:none;border:none;background:transparent;min-width:0;width:auto;padding:0 0 0 20px}
}

/* ---------- host-page compatibility ----------
   The nav sits inside each page's own .wrap, and help.css caps that at 860px
   (the landing uses 1180px) — which squeezed the menu onto two lines. It also
   underlines links and the landing does not, because the landing relies on a
   global a{text-decoration:none} that help.css has no equivalent of. Both are
   corrected here rather than in the host stylesheets, so the nav keeps working
   if it is ever dropped onto a fourth surface. */
/* max-width only. Setting padding here also hit .nav-inner — which carries
   BOTH classes — and flattened the bar by 20px against the landing. */
.nav .wrap, .nav.wrap { max-width: 1180px; }
.nav a, .nav summary { text-decoration: none; }
.nav .nav-links > a, .nav .nav-group > summary, .nav .menu-cta { white-space: nowrap; }

/* The CTA's own styling. help.css has no .btn/.btn-grass, so the button
   rendered white-on-white; the blog happens to define them and the landing
   defines them inline. Scoped under .nav so nothing else on a host page moves. */
.nav .btn{font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,0.18); padding:14px 22px; border-radius:var(--r-md);
  border:var(--stroke) solid var(--outline); background:var(--grass); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative;
  box-shadow:0 var(--bevel) 0 var(--outline);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
  letter-spacing:.01em; line-height:1; min-height:48px; text-align:center;}
.nav .btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--outline)}
.nav .btn.sm{font-size:14px;padding:10px 16px;border-radius:14px;box-shadow:0 4px 0 var(--outline);min-height:0}
.nav .btn-grass{background:var(--grass)}
.nav .btn-grass:hover{background:#4be079}

/* The brand tag — "Blog", "Help", "עזרה". The landing carries no tag, so there
   was nothing to extract and the help centre inherited the brand's 22px plain
   text while the blog had a pill. One definition now, so all surfaces match. */
.nav .brand .tag {
  /* display is set explicitly because the blog also has a generic .tag rule
     (post categories) whose inline-flex would otherwise apply on that surface
     only — the pill looked the same but computed differently per page. */
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 10px 3px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--ink);
  align-self: center;
}

/* Below 880px the blog's own stylesheet hides its tag to save room, and the
   help centre would have kept showing one — the same inconsistency, one
   breakpoint down. Hidden here for every surface so they stay identical at
   every width, not just on a desktop screenshot. */
@media (max-width: 880px) {
  .nav .brand .tag { display: none; }
}