/* The site header (build.py nav_html; DESIGN.md "Site header"). Notion's pattern with Linear's precision: the logo
   mark and name, four menus and two direct links, then the language menu, Log in and the one primary button. Menus
   are panels of titled links with a one-line description; below 1160px a burger opens the same groups as accordions
   in a full-height sheet with the call to action pinned at its foot. Logical properties throughout, so Arabic mirrors.
   Values are the design tokens (styles/tokens.css); each falls back to the site's older names, or to the same step of
   the 4px scale, until the tokens file ships with this header. */
.sh {
  --sh-ink: var(--color-ink, var(--ink));
  --sh-text: var(--color-text, var(--text));
  --sh-muted: var(--color-muted, var(--muted));
  --sh-line: var(--color-line, var(--line));
  --sh-bg: var(--color-bg, var(--surface));
  --sh-surface: var(--color-surface, var(--surface));
  --sh-wash: var(--color-wash, var(--bg));
  --sh-accent: var(--color-accent, var(--action));
  --sh-on-accent: var(--color-on-accent, var(--surface));
  --sh-bar: 64px;
  position: sticky; top: 0; z-index: 40;
  background: var(--sh-bg); border-bottom: 1px solid var(--sh-line);
}
html { scroll-padding-top: 80px; }
html.sh-lock { overflow: hidden; }
.sh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6, 24px); min-height: var(--sh-bar); }

/* Logo: the pod mark and the name */
.sh-logo { flex: none; display: inline-flex; align-items: center; gap: var(--space-2, 8px); min-height: var(--target, 44px); color: var(--sh-ink); text-decoration: none; font-size: var(--text-lg, 18px); font-weight: var(--weight-bold, 700); line-height: var(--leading-ui, 1.5); }
.sh-logo:hover { color: var(--sh-ink); }
.sh-mark { flex: none; display: block; }
.sh-mark-bg, .sh-mark-dot { fill: var(--sh-accent); }
.sh-mark-pod { fill: var(--sh-on-accent); }

/* Top-level items */
.sh-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1, 4px); }
.sh .sh-item, .sh .sh-links li, .sh .sh-chips li { margin: 0; }
.sh-trigger, .sh-top { display: inline-flex; align-items: center; gap: var(--space-1, 4px); min-height: var(--target, 44px); margin: 0; padding: 0 var(--space-3, 12px);
  border: 0; border-radius: var(--radius-md, 8px); background: none; color: var(--sh-text); font: inherit; font-size: var(--text-ui, 14px);
  font-weight: var(--weight-medium, 500); line-height: var(--leading-ui, 1.5); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast, 120ms) ease-out, color var(--dur-fast, 120ms) ease-out; }
.sh-trigger:hover, .sh-top:hover, .sh-trigger[aria-expanded="true"] { background: var(--sh-wash); color: var(--sh-ink); }
.sh-chev { flex: none; transition: transform var(--dur, 200ms) ease-out; }
.sh-trigger[aria-expanded="true"] .sh-chev { transform: rotate(180deg); }

/* Panels */
.sh-panel { display: none; }
.sh-group { padding: var(--space-2, 8px); min-width: 0; }
.sh-group-t { margin: 0; padding: var(--space-1, 4px) var(--space-3, 12px); font-size: var(--text-sm, 13px); font-weight: var(--weight-semibold, 600); line-height: var(--leading-ui, 1.5); color: var(--sh-muted); }
.sh-links { list-style: none; margin: 0; padding: 0; }
.sh-link { display: flex; flex-direction: column; justify-content: center; min-height: var(--target, 44px); padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--radius-md, 8px); text-decoration: none; }
.sh-link:hover { background: var(--sh-wash); }
.sh-link-t { font-size: var(--text-ui, 14px); font-weight: var(--weight-semibold, 600); line-height: var(--leading-ui, 1.5); color: var(--sh-ink); }
.sh-link-d { font-size: var(--text-ui, 14px); line-height: var(--leading-ui, 1.5); color: var(--sh-muted); }
.sh-en { font-weight: var(--weight-regular, 400); color: var(--sh-muted); }
.sh-chips { list-style: none; margin: 0; padding: var(--space-1, 4px) var(--space-3, 12px); display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.sh-chip { display: inline-flex; align-items: center; min-height: var(--target, 44px); padding: 0 var(--space-4, 16px); border: 1px solid var(--sh-line); border-radius: var(--radius-pill, 999px);
  background: var(--sh-surface); color: var(--sh-ink); font-size: var(--text-ui, 14px); font-weight: var(--weight-medium, 500); line-height: var(--leading-ui, 1.5); text-decoration: none; }
.sh-chip:hover { background: var(--sh-wash); color: var(--sh-ink); }

/* The end of the bar */
.sh-end { display: flex; align-items: center; gap: var(--space-1, 4px); margin-inline-start: auto; }
.sh .lang-menu { margin: 0; }
.sh-login { display: inline-flex; align-items: center; min-height: var(--target, 44px); padding: 0 var(--space-3, 12px); border-radius: var(--radius-md, 8px);
  color: var(--sh-text); font-size: var(--text-ui, 14px); font-weight: var(--weight-medium, 500); line-height: var(--leading-ui, 1.5); text-decoration: none; white-space: nowrap; }
.sh-login:hover { background: var(--sh-wash); color: var(--sh-ink); }
.sh .sh-cta { margin-inline-start: var(--space-2, 8px); white-space: nowrap; }
.sh-burger { display: none; align-items: center; justify-content: center; width: var(--target, 44px); height: var(--target, 44px); margin: 0; padding: 0; border: 0;
  border-radius: var(--radius-md, 8px); background: none; color: var(--sh-ink); cursor: pointer; }
.sh-burger:hover { background: var(--sh-wash); }
.sh-burger .sh-burger-close, .sh-burger[aria-expanded="true"] .sh-burger-open { display: none; }
.sh-burger[aria-expanded="true"] .sh-burger-close { display: inline; }
.sh-sheet-foot { display: none; }

/* --- Wide: menus drop down as panels ---------------------------------------------------------------- */
@media (min-width: 1160px) {
  .sh-nav { display: flex; align-items: center; }
  .sh-item { position: relative; }
  .sh-panel { position: absolute; z-index: 50; top: calc(100% + var(--space-2, 8px)); inset-inline-start: 0; width: max-content; max-width: min(640px, calc(100vw - 48px));
    padding: var(--space-2, 8px); background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg, none);
    grid-template-columns: repeat(2, minmax(240px, 280px)); align-items: start; }
  /* The gap between the button and its panel still counts as the menu for the mouse. */
  .sh-panel::before { content: ""; position: absolute; inset-inline: 0; top: calc(-1 * var(--space-2, 8px)); height: var(--space-2, 8px); }
  .sh-js .sh-trigger[aria-expanded="true"] + .sh-panel,
  .sh:not(.sh-js) .sh-item:hover > .sh-panel, .sh:not(.sh-js) .sh-item:focus-within > .sh-panel { display: grid; }
  .sh-panel-solutions { grid-template-columns: minmax(260px, 300px) minmax(240px, 280px); }
  .sh-works { border-inline-start: 1px solid var(--sh-line); }
}

/* --- Narrow: a burger and a full-height sheet ------------------------------------------------------- */
@media (max-width: 1159px) {
  .sh .sh-login, .sh .sh-cta { display: none; }
  /* Without JavaScript the nav is a plain list under the bar, every group open. */
  .sh-nav { order: 3; width: 100%; padding-bottom: var(--space-4, 16px); }
  .sh-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .sh-item { border-bottom: 1px solid var(--sh-line); }
  .sh-trigger, .sh-top { width: 100%; justify-content: space-between; min-height: 56px; padding: 0; border-radius: 0; font-size: var(--text-md, 16px); font-weight: var(--weight-semibold, 600); color: var(--sh-ink); }
  .sh-trigger:hover, .sh-top:hover, .sh-trigger[aria-expanded="true"] { background: none; }
  .sh-panel { display: block; padding: 0 0 var(--space-3, 12px); }
  .sh-group { padding: 0 0 var(--space-2, 8px); }
  .sh-group-t, .sh-link { padding-inline: 0; }
  .sh-chips { padding-inline: 0; }
  .sh-sheet-foot { display: grid; gap: var(--space-3, 12px); padding-top: var(--space-4, 16px); }
  .sh .sh-sheet-foot .btn { width: 100%; }
  /* With JavaScript: the burger, the sheet and accordions. */
  .sh-js .sh-burger { display: inline-flex; }
  .sh-js .sh-nav { display: none; }
  .sh-js .sh-panel { display: none; }
  .sh-js .sh-trigger[aria-expanded="true"] + .sh-panel { display: block; }
  .sh-js.sh-open .sh-nav { display: flex; flex-direction: column; position: fixed; z-index: 50; inset: var(--sh-bar) 0 0 0; width: auto;
    padding: 0 var(--gutter, 16px); background: var(--sh-bg); overflow-y: auto; overscroll-behavior: contain; }
  .sh-js.sh-open .sh-menu { flex: 1 0 auto; }
  .sh-js .sh-sheet-foot { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--gutter, 16px)); padding: var(--space-4, 16px) var(--gutter, 16px);
    background: var(--sh-bg); border-top: 1px solid var(--sh-line); }
  .sh-bar { gap: 0 var(--space-2, 8px); }
}
@media (max-width: 1159px) and (min-width: 640px) {
  .sh-sheet-foot { grid-template-columns: 1fr 1fr; }
}

/* The header's language menu (the menu itself is in site.css): same rhythm as the other bar items. */
.sh .lang-menu summary { gap: var(--space-2, 8px); padding: 0 var(--space-3, 12px); line-height: var(--leading-ui, 1.5); }
.sh .lang-list a { line-height: var(--leading-ui, 1.5); }
.sh .lang-list { padding: var(--space-1, 4px); }
.sh .sh-sheet-foot .btn { line-height: var(--leading-ui, 1.5); }
@media (min-width: 1160px) {
  /* The bar stays one row: the language menu shows its globe (the current language is checked in the list and named
     for screen readers), and the English marker of a top-level link is left to its page (the menus keep theirs). */
  .sh-bar { flex-wrap: nowrap; gap: 0 var(--space-4, 16px); }
  .sh .lang-head .lang-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sh-top .sh-en { display: none; }
}