/* ==================================================================================================
 * THE TOP BAR, FOR PAGES THAT ARE NOT THE HOMEPAGE
 *
 * zetareh.com is a single-page site: index.html holds every section and swaps panes with data-go.
 * A page that lives on its own URL (/vision) is a real second document — it got no bar, no language
 * selector and no i18n.js, which is why a visitor who had chosen Magyar landed on an English page
 * with no way back into the site.
 *
 * These rules are COPIED VERBATIM from the bar in index.html so the two look identical rather than
 * similar. Two differences, both forced:
 *   1. index.html's items are <button data-go> (they switch panes in the same document). Here they
 *      are <a href="/#section">, because a sub-page has to actually navigate. The homepage styles
 *      say `button.nl` / `button.getapp` / `button.enter`, which an <a> does not match — hence the
 *      anchor twins below. Same declarations, different element.
 *   2. The variables are set on `nav` rather than :root. /vision has its own palette with slightly
 *      different --bg2 and --dim; scoping keeps the bar exactly the homepage's colour without
 *      touching a single pixel of the page underneath it.
 *
 * ⚠ If the bar in index.html changes, change it here too — recorded as R-08 in redundancies.md.
 * ================================================================================================== */

nav{
  --bg:#05070d; --bg2:#080c15;
  --line:rgba(126,168,190,.16); --line2:rgba(126,168,190,.28);
  --ink:#e9f0f4; --dim:#9fb2c0;
  --teal:#67cfe0; --teal-soft:#a9ecf6;
  --serif:Vazirmatn,"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --maxw:1080px;
}

nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:linear-gradient(to bottom,rgba(5,7,13,.94),rgba(5,7,13,.6));
  border-bottom:1px solid var(--line)}
/* Deliberately `nav .wrap` and not `.wrap`: the vision page has a .wrap of its own holding its
   whole body, and a bare rule here would silently re-lay-out the document it is a guest on. */
nav .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px}
nav .brand{font-family:var(--serif);font-size:21px;font-weight:600;display:inline-flex;align-items:center;
  gap:9px;order:1;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
nav .brand .star{color:var(--teal)}
nav .navlinks{display:flex;gap:26px;align-items:center;font-size:14.5px;margin-left:auto;order:2}
nav .langbox{order:3;display:flex;align-items:center;gap:6px}
nav .navtoggle{order:4}
nav .navlinks a.nl{color:var(--dim);transition:color .2s;padding:0;text-decoration:none}
nav .navlinks a.nl:hover{color:var(--ink)}
/* The page you are standing on, lit the same way the homepage lights its current section. */
nav .navlinks a.nl.active{color:var(--teal-soft)}
nav .navlinks .enter{color:var(--bg);background:linear-gradient(180deg,var(--teal-soft),var(--teal));
  padding:9px 17px;border-radius:999px;font-weight:600;text-decoration:none}
nav .navlinks a.getapp{color:var(--teal-soft);border:1.5px solid var(--line2);border-radius:999px;
  padding:8px 14px;font-weight:600;text-decoration:none}
nav .navlinks a.getapp:hover{border-color:var(--teal);color:var(--teal-soft)}
nav #langsel{background:var(--bg2,#0b1017);color:var(--ink);border:1px solid var(--line2);border-radius:999px;
  padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;max-width:150px}
nav #langsel:focus{outline:2px solid var(--teal-soft);outline-offset:1px}
nav .navtoggle{display:none;background:none;border:0;padding:6px;cursor:pointer;line-height:0;color:var(--ink)}
nav .navtoggle svg{width:26px;height:26px;display:block}

#langnote{display:none;background:#080c15;border-bottom:1px solid rgba(126,168,190,.28);
  color:#9fb2c0;font-size:13.5px;padding:9px 18px;text-align:center}
#langnote.on{display:block}

@media(max-width:760px){
  /* Stays in the bar, never in the drawer: someone who cannot read the page must not have to open a
     menu to find the way to change that. */
  nav .langbox{margin:0 4px 0 auto;order:2}
  nav .navtoggle{order:3;display:inline-block}
  nav #langsel{max-width:132px;padding:7px 8px;font-size:13px}
  nav .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,12,21,.98);backdrop-filter:blur(12px);border-top:1px solid var(--line2);
    padding:6px 0 10px;transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .18s,transform .18s;max-height:calc(100vh - 60px);overflow-y:auto}
  nav .navlinks.open{opacity:1;transform:none;pointer-events:auto}
  nav .navlinks a.nl{display:block;width:100%;text-align:left;padding:13px 22px;font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.06)}
  nav .navlinks a.getapp{display:block;width:calc(100% - 44px);margin:12px 22px 0;
    text-align:center;font-size:15px;padding:11px}
  nav .navlinks a.enter{display:block;width:calc(100% - 44px);margin:10px 22px 0;text-align:center;
    padding:12px;font-size:15px}
}
@media(max-width:380px){ nav #langsel{max-width:104px;font-size:12.5px} }