/* HamelIT shared portal header, v1.1.0 (spec: SPEC.md, 2026-10-17).
   Self-contained: copy this file into each portal repo, never link it across servers.
   Per-portal variables ONLY: --hamelit-accent (and the title text in the markup). Do not edit the rules below in a portal;
   change them here, bump the version, and re-copy into every portal. */
:root { --hamelit-accent: #D84B2E; }
.hh, .hh * { box-sizing: border-box; }
.hh {
  --hh-height: 56px; --hh-bg: #fbf7f0; --hh-ink: #1c1915; --hh-muted: #5f584c; --hh-line: #ddd2c0;
  --hh-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  display: flex; align-items: center; gap: 16px; min-height: var(--hh-height); height: var(--hh-height);
  margin: 0; padding: 0 24px; background: var(--hh-bg); color: var(--hh-ink);
  border-bottom: 3px solid var(--hamelit-accent);
  font-family: var(--hh-font); font-size: 15px; line-height: 1.3; position: relative; z-index: 10;
}
.hh a { color: inherit; }
.hh :focus-visible { outline: 2px solid var(--hamelit-accent); outline-offset: 2px; }
.hh-brand { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: var(--hh-ink); flex: 0 1 auto; }
.hh-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 4px;
  background: var(--hamelit-accent); color: #fff; font-weight: 700; font-size: 15px; }
.hh-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-env { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--hamelit-accent);
  border-radius: 3px; padding: 1px 6px; }
/* Optional portal-specific navigation (tabs): sits between the title and the right block. */
.hh-nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; }
.hh-nav a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--hh-muted); white-space: nowrap; }
.hh-nav a:hover { color: var(--hh-ink); }
.hh-nav a[aria-current="page"] { color: var(--hh-ink); font-weight: 600; background: rgba(0,0,0,.05); }
/* Right block, fixed order: 1) environment toggle, 2) language selector, 3) back to home portal. Always pushed right. */
.hh-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: none; }
/* Environment toggle: segmented DEV | PROD. Current env = filled, bold, aria-current; the other is a link (or disabled). */
.hh-envs { display: inline-flex; align-items: stretch; border: 1px solid var(--hh-line); border-radius: 6px; overflow: hidden;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; background: #fff; }
.hh-envs > * { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; text-decoration: none; color: var(--hh-muted); }
.hh-envs > * + * { border-left: 1px solid var(--hh-line); }
.hh-envs a:hover { color: var(--hh-ink); background: rgba(0,0,0,.04); }
.hh-envs [aria-current="true"]::before { content: "●"; font-size: 9px; }
.hh-envs .hh-env-dev[aria-current="true"] { background: #FEF3C7; color: #78350F; }   /* DEV amber, 8.9:1 */
.hh-envs .hh-env-prod[aria-current="true"] { background: #DCFCE7; color: #14532D; }  /* PROD green, 9.6:1 */
.hh-envs a.hh-env-dev:hover { color: #78350F; } .hh-envs a.hh-env-prod:hover { color: #14532D; }
.hh-envs [aria-disabled="true"] { color: #9a9386; text-decoration: line-through; cursor: not-allowed; }
.hh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hh-langs { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hh-langs a { text-decoration: none; color: var(--hh-muted); padding: 2px 2px; border-bottom: 2px solid transparent; }
.hh-langs a:hover { color: var(--hh-ink); }
.hh-langs a[aria-current="true"] { color: var(--hh-ink); font-weight: 700; border-bottom-color: var(--hamelit-accent); }
.hh-home { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--hh-line);
  border-radius: 999px; background: #fff; color: var(--hh-ink); text-decoration: none; font-size: 13px; white-space: nowrap; }
.hh-home:hover { border-color: var(--hamelit-accent); color: var(--hh-ink); }
.hh-home[hidden] { display: none; }
@media (max-width: 720px) {
  .hh { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; }
  .hh-nav { order: 3; flex-basis: 100%; }
  .hh-home .hh-home-text { display: none; }
}
@media print { .hh-right { display: none; } }