/* goa-app-kit — the family header of the public pages.

   Load it with goa-switches.css: the header holds the two switches.
   Uses only the family ROLE tokens (--fg, --line-strong, --bg-raised, --focus,
   --radius-sm, --font-text), each with a neutral fallback.

   The header holds `header`, `nav`, `ul` and `a`, and app CSS styles those.
   An app rule such as `body.plain header { display: block; padding: 2rem }`
   is (0,1,2). So each rule here that resets a header part is (0,2,0) or more.
   Do not use !important. Do not use @layer: unlayered app CSS beats any layer.

   The kit does not set position, top, background or border on the header.
   The app sets them (farangur: sticky). Then a rule of (0,1,0) is enough.

   Do not edit a vendored copy. Edit the skill and run goa-kit-sync. */

.goa-hdr {
  --goa-fg:       var(--fg,          light-dark(#1f1f1f, #f2f2f2));
  --goa-line-2:   var(--line-strong, light-dark(rgba(0, 0, 0, .28), rgba(255, 255, 255, .32)));
  --goa-card:     var(--bg-raised,   light-dark(#ffffff, #1e1e1e));
  --goa-focus:    var(--focus,       light-dark(#1a5fb4, #8cb4ff));
}
.goa-hdr * { box-sizing: border-box; }

/* The class is doubled to reach (0,2,0) without an extra element. */
.goa-hdr.goa-hdr {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .375rem;          /* narrow column gaps: see the end group */
  float: none;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: .25rem .75rem;
  text-align: start;
  color: var(--goa-fg);
  font-family: var(--font-text, system-ui, -apple-system, 'Segoe UI', sans-serif);
}

/* ---- the brand: the app's logo, a 44 px target ---------------------------- */
.goa-hdr .goa-hdr__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  float: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 .25rem;
  border-radius: var(--radius-sm, 12px);
  background: none;
  color: inherit;
  text-decoration: none;
}
.goa-hdr .goa-hdr__brand:focus-visible {
  outline: 3px solid var(--goa-focus);
  outline-offset: 2px;
}
/* A default size for a logo without one. (0,0,1), so any app rule wins. */
:where(.goa-hdr__brand) > :where(svg, img) {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 100%;
}

/* ---- the end group: the app's slot, then the switches ---------------------
   It sits at the right. When the line has no room for it beside the brand,
   it wraps under the brand. Its parts wrap too, so the targets keep 44 px and
   the page does not scroll sideways at 320 px.
   The column gaps are small on purpose. Each target has its own padding, so
   the space you see is larger than the gap. With .75rem gaps a brand, two nav
   links and the language switch needed 326 px and wrapped at 320 px. */
.goa-hdr .goa-hdr__end {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem .25rem;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
}
.goa-hdr .goa-hdr__tools {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* ---- the skip link: hidden until it takes focus --------------------------- */
.goa-hdr .goa-skip {
  position: absolute;
  top: -100px;
  left: .5rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--goa-line-2);
  border-radius: var(--radius-sm, 12px);
  background: var(--goa-card);
  color: var(--goa-fg);
  font-weight: 700;
  text-decoration: none;
}
.goa-hdr .goa-skip:focus {
  top: .5rem;
  outline: 3px solid var(--goa-focus);
  outline-offset: 2px;
}