/* Gene Academy shared site bar  v1.0  (2026-10-09)
   ---------------------------------------------------------------------------
   One navigation for every page. Before this, 60 pages carried 43 different
   bars and five pages had none at all, so where a visitor could go depended on
   where they happened to land.

   WHY THIS IS ITS OWN FILE AND NOT bundle.css
     69 of 77 pages still load the Tailwind CDN and cannot take bundle.css yet
     without their own rules fighting it. Every selector here is namespaced
     .ga-* so it cannot touch a page's existing header, and every token reads
     var(--name, literal) so the bar is correct on a page that has never heard
     of tokens.css. When a page is converted, this file folds into bundle.css
     as the SiteBar component and the <link> comes out. It is a bridge, and it
     should be taken into the design system before it is treated as final.

   WHAT IT OBEYS
     navy = structure, teal = action, gold = where you are now.
     Hairlines group; no shadow, no glow, no emoji, no gradient.
     Arabic first: logical properties throughout, so RTL and LTR both work
     from one rule. Labels carry data-ar/data-en and the page's <html lang>
     decides which shows, so the bar is bilingual with no JavaScript.
     Works with no JavaScript: the menus open on hover and on keyboard focus,
     and the phone drawer is a <details>. JavaScript only closes on Escape.
     Motion is small and purposeful, and every bit of it is switched off under
     prefers-reduced-motion.
   --------------------------------------------------------------------------- */

.ga-bar,
.ga-bar *{box-sizing:border-box}

/* ---- the bar's own palette ---------------------------------------------
   Written in, not inherited. 69 pages load tokens.css but are otherwise
   hard-coded light, so reading --card straight from the page turned the bar
   dark above a light page for anyone whose device prefers dark. These are the
   light token values; the bar therefore looks the same on all 75 pages.
   A page that also loads bundle.css is fully converted: the injector gives it
   .ga-themed and the names point back at that page's tokens, so there the bar
   follows the page into dark mode along with everything else. */
.ga-bar,.ga-skip{--ga-card:#ffffff;--ga-paper:#fbf9f4;--ga-ink:#1b2430;--ga-navy:#123b5d;--ga-teal:#116f6f;--ga-gold:#8a6d14;--ga-muted:#5b6573;--ga-on:#ffffff;--ga-rule:#d9d3c4;--ga-rule-strong:#8a8170;--ga-display:'Noto Kufi Arabic','Noto Sans Arabic',sans-serif;--ga-body:'Noto Sans Arabic','Noto Kufi Arabic',sans-serif}
.ga-bar.ga-themed,.ga-skip.ga-themed{--ga-card:var(--card,#ffffff);--ga-paper:var(--paper,#fbf9f4);--ga-ink:var(--ink,#1b2430);--ga-navy:var(--navy,#123b5d);--ga-teal:var(--teal,#116f6f);--ga-gold:var(--gold,#8a6d14);--ga-muted:var(--muted,#5b6573);--ga-on:var(--on-fill,#ffffff);--ga-rule:var(--rule,#d9d3c4);--ga-rule-strong:var(--rule-strong,#8a8170);--ga-display:var(--display,'Noto Kufi Arabic','Noto Sans Arabic',sans-serif);--ga-body:var(--body,'Noto Sans Arabic','Noto Kufi Arabic',sans-serif)}


/* skip link: the first thing a keyboard reaches on every page */
/* Hidden by clipping, never by being pushed off the edge. inset-inline-start
   is `right` in Arabic, so the usual -9999px parked the link 9999px to the
   RIGHT of an RTL page and gave every Arabic page a horizontal scrollbar. */
.ga-skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ga-skip:focus{position:fixed;inset-inline-start:12px;top:12px;z-index:100;
  width:auto;height:auto;margin:0;padding:10px 16px;overflow:visible;clip-path:none;
  background:var(--ga-navy);color:var(--ga-on);text-decoration:none;
  font:600 14px/1.65 var(--ga-display)}

.ga-bar{position:sticky;top:0;z-index:50;background:var(--ga-card);
  border-bottom:1px solid var(--ga-rule);
  transition:border-color .2s ease}
.ga-bar[data-scrolled]{border-bottom-color:var(--ga-rule-strong)}
.ga-bar__in{max-width:var(--wrap-max,1000px);margin:0 auto;
  padding-inline:var(--gutter,20px);display:flex;align-items:center;gap:10px 18px;
  min-height:62px}

/* brand */
.ga-bar .ga-brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:inherit;margin-inline-end:auto;padding-block:9px}
.ga-bar .ga-brand .ga-seal{width:34px;height:34px;flex:none;display:block}
.ga-bar .ga-brand b{display:block;line-height:1.2;color:var(--ga-navy);
  font:700 17px/1.2 var(--ga-display)}
.ga-bar .ga-brand i{display:block;font-style:normal;letter-spacing:.04em;
  color:var(--ga-muted);
  font:400 11.5px/1.4 var(--ga-body)}

/* ---- the bar itself, from 900px up ------------------------------------- */
.ga-bar .ga-nav{display:flex;align-items:stretch;gap:2px}
.ga-bar .ga-item{position:relative;display:flex}
.ga-bar .ga-top{display:inline-flex;align-items:center;gap:6px;padding:20px 12px;
  text-decoration:none;color:var(--ga-ink);white-space:nowrap;
  background:none;border:0;cursor:pointer;
  font:600 14px/1.65 var(--ga-display)}
/* the underline grows from the reading edge, so it runs right-to-left in Arabic */
.ga-bar .ga-top::after{content:"";position:absolute;inset-inline:12px;bottom:0;height:2px;
  background:var(--ga-teal);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .16s ease-out}
.ga-bar .ga-item:hover .ga-top::after,
.ga-bar .ga-item:focus-within .ga-top::after{transform:scaleX(1)}
/* where you are now: gold, and it stays */
.ga-bar .ga-top[aria-current=page]{color:var(--ga-navy)}
.ga-bar .ga-top[aria-current=page]::after{background:var(--ga-gold);transform:scaleX(1)}
.ga-bar .ga-caret{width:9px;height:9px;flex:none;opacity:.55;transition:transform .16s ease-out}
.ga-bar .ga-item:hover .ga-caret,
.ga-bar .ga-item:focus-within .ga-caret{transform:rotate(180deg)}

/* the dropdown: a panel of links that each explain themselves */
.ga-bar .ga-menu{position:absolute;top:100%;inset-inline-start:0;min-width:330px;
  background:var(--ga-card);border:1px solid var(--ga-rule);
  border-top:3px solid var(--ga-navy);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease-out,transform .14s ease-out,visibility .14s;
  max-height:min(76vh,560px);overflow-y:auto}
.ga-bar .ga-item:hover > .ga-menu,
.ga-bar .ga-item:focus-within > .ga-menu{opacity:1;visibility:visible;transform:none}
/* The last panels hang off the end of the bar and a hidden absolute panel still
   counts toward the page's scroll width, so an Arabic page gained 82px of
   horizontal scroll from a menu nobody had opened. Anchor them to the far edge;
   the logical property flips with the direction, so one rule serves both. */
.ga-bar .ga-item:nth-last-child(-n+2) > .ga-menu{inset-inline-start:auto;inset-inline-end:0}
.ga-bar .ga-menu .ga-lede{display:block;padding:8px 12px 10px;margin-bottom:4px;
  border-bottom:1px solid var(--ga-rule);color:var(--ga-muted);
  font:400 13px/1.55 var(--ga-body);max-width:44ch}
.ga-bar .ga-menu a{display:block;padding:9px 12px;text-decoration:none;
  border-inline-start:3px solid transparent;transition:background-color .12s ease,border-color .12s ease}
.ga-bar .ga-menu a b{display:block;color:var(--ga-navy);
  font:600 14.5px/1.4 var(--ga-display)}
.ga-bar .ga-menu a span{display:block;margin-top:2px;color:var(--ga-muted);
  font:400 13px/1.5 var(--ga-body);max-width:42ch}
.ga-bar .ga-menu a:hover,
.ga-bar .ga-menu a:focus-visible{background:var(--ga-paper);
  border-inline-start-color:var(--ga-teal);outline:0}
.ga-bar .ga-menu a[aria-current=page]{border-inline-start-color:var(--ga-gold);
  background:var(--ga-paper)}

/* the end of the bar: language, then the one action */
.ga-bar .ga-end{display:flex;align-items:center;gap:10px;flex:none}
.ga-bar .ga-lang{font:inherit;font-size:13px;background:none;color:var(--ga-navy);
  border:1px solid var(--ga-rule-strong);border-radius:var(--radius-control,2px);
  padding:6px 12px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .16s ease,color .16s ease}
.ga-bar .ga-lang:hover{border-color:var(--ga-teal);color:var(--ga-teal)}
.ga-bar .ga-cta{display:inline-block;white-space:nowrap;text-decoration:none;
  background:var(--ga-navy);color:var(--ga-on);
  border-radius:var(--radius-control,2px);padding:10px 18px;
  font:600 14px/1.65 var(--ga-display);
  transition:background-color .16s ease}
.ga-bar .ga-cta:hover{background:var(--ga-teal)}

/* focus is always visible and never only a colour change */
.ga-bar a:focus-visible,
.ga-bar button:focus-visible,
.ga-bar summary:focus-visible{
  outline:2px solid var(--ga-teal);outline-offset:2px}

/* ---- the phone drawer --------------------------------------------------- */
.ga-bar .ga-burger{display:none}
.ga-bar .ga-burger > summary{list-style:none;cursor:pointer;padding:10px;margin:0;
  border:1px solid var(--ga-rule-strong);border-radius:var(--radius-control,2px);
  display:flex;align-items:center;justify-content:center}
.ga-bar .ga-burger > summary::-webkit-details-marker{display:none}
.ga-bar .ga-burger .ga-ico{display:block;width:18px;height:12px;position:relative}
.ga-bar .ga-burger .ga-ico i{position:absolute;inset-inline:0;height:2px;background:var(--ga-ink);
  transition:transform .18s ease,opacity .18s ease}
.ga-bar .ga-burger .ga-ico i:nth-child(1){top:0}
.ga-bar .ga-burger .ga-ico i:nth-child(2){top:5px}
.ga-bar .ga-burger .ga-ico i:nth-child(3){top:10px}
.ga-bar .ga-burger[open] .ga-ico i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.ga-bar .ga-burger[open] .ga-ico i:nth-child(2){opacity:0}
.ga-bar .ga-burger[open] .ga-ico i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 900-1120px: five sections, a brand and an action do not fit a 1000px line at
   full padding, and the bar overflowed its own container on a 1024px laptop.
   The subtitle goes first, then the padding tightens. */
@media (min-width:900px) and (max-width:1120px){
  .ga-bar .ga-brand i{display:none}
  .ga-bar .ga-top{padding-inline:8px;font-size:13.5px}
  .ga-bar .ga-cta{padding:9px 14px}
  .ga-bar__in{gap:10px 12px}
}

@media (max-width:899px){
  .ga-bar__in{flex-wrap:wrap;min-height:58px}
  .ga-bar .ga-burger{display:block;order:2}
  .ga-bar .ga-brand{order:1}
  .ga-bar .ga-nav{order:3;flex-basis:100%;display:none;flex-direction:column;gap:0;
    padding-bottom:10px}
  .ga-bar .ga-end{order:4;flex-basis:100%;display:none;gap:10px;
    padding-bottom:16px;border-top:1px solid var(--ga-rule);padding-top:14px}
  /* no JavaScript anywhere in this: the drawer is the <details> open state,
     and the nav and the actions are its later siblings. */
  .ga-bar .ga-burger[open] ~ .ga-nav,
.ga-bar .ga-burger[open] ~ .ga-end{display:flex}
  .ga-bar .ga-item{display:block}
  .ga-bar .ga-top{width:100%;padding:13px 0;justify-content:space-between;
    border-top:1px solid var(--ga-rule)}
  .ga-bar .ga-top::after{display:none}
  .ga-bar .ga-top[aria-current=page]{border-inline-start:3px solid var(--ga-gold);
    padding-inline-start:10px}
  .ga-bar .ga-caret{display:none}
  /* on a phone every section is simply open: one scroll, nothing to discover */
  .ga-bar .ga-menu{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;border:0;border-top:0;padding:0 0 10px;max-height:none;overflow:visible}
  .ga-bar .ga-menu .ga-lede{display:none}
  .ga-bar .ga-menu a{padding:8px 0 8px 10px;padding-inline-start:10px}
  .ga-bar .ga-cta{flex:1 1 auto;text-align:center}
}

/* a visitor who asked for less movement gets none of it */
@media (prefers-reduced-motion:reduce){
  .ga-bar,
.ga-bar .ga-top::after,
.ga-bar .ga-caret,
.ga-bar .ga-menu,
.ga-bar .ga-menu a,
.ga-bar .ga-lang,
.ga-bar .ga-cta,
.ga-bar .ga-burger .ga-ico i{transition:none !important}
  .ga-bar .ga-top::after{transform:scaleX(1);background:var(--ga-rule)}
  .ga-bar .ga-top[aria-current=page]::after{background:var(--ga-gold)}
  .ga-bar .ga-item:hover .ga-top::after,
.ga-bar .ga-item:focus-within .ga-top::after{background:var(--ga-teal)}
  .ga-bar .ga-caret{transform:none !important}
}

/* printing a page should not print the navigation */
@media print{.ga-bar,
.ga-skip{display:none}}