/* SITE-NAV-02: plain header bar. One horizontal row on every page; links never
   collapse into a menu above 560px. Flat: solid background, one hairline
   border, text links, underline hover/current. No pills, shadows, or blur.
   Loaded after components.css, whose older pill nav rules this overrides. */

.site-head {
  background: var(--foinse-color-paper);
  border-bottom: 1px solid var(--foinse-color-rule-200);
}

.site-head .head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* mid widths wrap to two lines instead of hiding */
  gap: 0 16px;
  min-height: 56px;
  padding-block: 4px;
}

.site-head .brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* The nav is one flat row: primary jobs left, auth links right. */
.site-head nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.site-head nav a,
.site-head nav .nav-drop > summary {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 6px 10px;
  color: var(--foinse-color-ink-700);
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

.site-head nav a:hover,
.site-head nav a:focus-visible,
.site-head nav .nav-drop > summary:hover,
.site-head nav .nav-drop > summary:focus-visible {
  color: var(--foinse-color-ink-900);
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-head nav a[aria-current="page"] {
  color: var(--foinse-color-ink-900);
  background: none;
  border: 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Job + dropdown group: the job label is the link, the + opens its panel. */
.site-head nav .nav-job-group {
  display: inline-flex;
  align-items: center;
}

.site-head nav .nav-job {
  font-weight: 600;
  color: var(--foinse-color-ink-900);
}

.site-head nav .nav-job-group .nav-drop > summary {
  padding-inline: 4px 10px;
}

.site-head nav .nav-job-group .nav-drop > summary::after {
  content: none; /* the visible + is the marker */
}

/* The More disclosure renders like a pillar dropdown. */
.site-head nav .nav-more {
  position: relative;
  display: inline-block;
}

.site-head nav .nav-more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 6px 10px;
  color: var(--foinse-color-ink-700);
  background: none;
  border: 0;
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  cursor: pointer;
}

.site-head nav .nav-more > summary::-webkit-details-marker { display: none; }

.site-head nav .nav-more > summary::after {
  content: "\25BE";
  font-size: 10px;
  margin-inline-start: 2px;
  color: var(--foinse-color-ink-700);
}

.site-head nav .nav-more > summary:hover,
.site-head nav .nav-more > summary:focus-visible,
.site-head nav .nav-more[open] > summary {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-head nav .nav-more-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  display: grid;
  gap: 0;
  min-width: 200px;
  padding: 6px 0;
  margin-top: 6px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: 0;
}

.site-head nav .nav-more-panel a {
  display: block;
  min-height: 0;
  width: auto;
  padding: 9px 16px;
  color: var(--foinse-color-ink-700);
  white-space: nowrap;
  line-height: 1.35;
}

.site-head nav .nav-more-panel a:hover,
.site-head nav .nav-more-panel a:focus-visible {
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-rule-200);
  text-decoration: none;
}

@media (max-width: 560px) {
  .site-head nav .nav-job-group { display: flex; width: 100%; }
  .site-head nav .nav-more { display: block; width: 100%; }
  .site-head nav .nav-more > summary { width: 100%; justify-content: space-between; min-height: 48px; padding-inline: 14px; }
  .site-head nav .nav-more-panel { position: static; min-width: 0; margin-top: 0; border: 0; border-top: 1px solid var(--foinse-color-rule-200); }
  .site-head nav .nav-more-panel a { padding-inline: 26px; }
}

/* The single auth slot is pinned at the right end of the bar, always
   visible at desktop widths; plain near-white text (main.js swaps it to
   "Account" when a session is live). */
.site-head nav a.nav-account--signin {
  margin-inline-start: auto;
  color: var(--foinse-color-ink-900);
  flex: none;
  white-space: nowrap;
}

/* The "Create account" CTA is a filled blue pill on every page, site-wide. */
.site-head nav a.nav-account--create,
.site-head nav a.nav-account--create:hover,
.site-head nav a.nav-account--create:focus-visible {
  color: #fff;
  background: var(--foinse-color-accent);
  border-color: var(--foinse-color-accent);
}

/* Narrow band above the phone collapse (561–900px): keep one row, let the
   links scroll sideways, and pin the auth actions visible at the right end
   so "Create account" never wraps to a second line. */
@media (min-width: 561px) and (max-width: 900px) {
  .site-head .head-row { flex-wrap: nowrap; }
  .site-head nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-head nav::-webkit-scrollbar { display: none; }
  .site-head nav a.nav-account--signin,
  .site-head nav a.nav-account--create {
    position: sticky;
    inset-inline-end: 0;
    flex: none;
  }
  .site-head nav a.nav-account--signin { background: var(--foinse-color-paper); }
}

/* Pillar dropdowns: plain <details> menus, flat hairline panel, no shadows
   or radius. Close on outside click / Esc via main.js. */
.site-head nav .nav-drop {
  position: relative;
  display: inline-block;
}

.site-head nav .nav-drop > summary {
  list-style: none;
  gap: 4px;
  font: inherit;
}

.site-head nav .nav-drop > summary::-webkit-details-marker { display: none; }

.site-head nav .nav-drop > summary::after {
  content: "\25BE"; /* small down triangle */
  font-size: 10px;
  margin-inline-start: 2px;
  color: var(--foinse-color-ink-700);
}

.site-head nav .nav-drop > summary:hover::after,
.site-head nav .nav-drop[open] > summary::after {
  color: var(--foinse-color-ink-900);
}

.site-head nav .nav-drop[open] > summary {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Panel: lifted surface, hairline border, sits flush under its summary and
   above page content. Links brighter than the bar, with a flat row hover. */
.site-head nav .nav-drop-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  display: grid;
  gap: 0;
  min-width: 200px;
  padding: 6px 0;
  margin-top: 6px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: 0;
}

.site-head nav .nav-drop-panel a {
  display: block;
  min-height: 0;
  width: auto;
  padding: 9px 16px;
  color: var(--foinse-color-ink-700);
  white-space: nowrap;
  line-height: 1.35;
}

.site-head nav .nav-drop-panel a:hover,
.site-head nav .nav-drop-panel a:focus-visible {
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-rule-200);
  text-decoration: none;
}

/* Real phones only: collapse behind the Menu button. In the expanded list,
   dropdown children sit indented under their pillar. */
@media (max-width: 560px) {
  .site-head nav a { width: 100%; min-height: 48px; padding-inline: 14px; }
  .site-head nav a.nav-account--signin { margin-inline-start: 0; }
  .site-head nav .nav-drop { display: block; width: 100%; }
  .site-head nav .nav-drop > summary { width: 100%; justify-content: space-between; min-height: 48px; padding-inline: 14px; }
  .site-head nav .nav-drop-panel { position: static; min-width: 0; margin-top: 0; border: 0; border-top: 1px solid var(--foinse-color-rule-200); }
  .site-head nav .nav-drop-panel a { padding-inline: 26px; }
}

/* ============================================================
   NAV WARM PASS: sans labels, pill hovers, rounded floating
   panels with soft shadows. Wins over the square mono layer.
   ============================================================ */
.site-head nav a,
.site-head nav .nav-drop > summary,
.site-head nav .nav-more > summary {
  font-family: var(--foinse-font-family-ui);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
  border-radius: 999px;
}

.site-head nav a:hover,
.site-head nav a:focus-visible,
.site-head nav .nav-drop > summary:hover,
.site-head nav .nav-drop > summary:focus-visible,
.site-head nav .nav-more > summary:hover,
.site-head nav .nav-more > summary:focus-visible,
.site-head nav .nav-more[open] > summary {
  background: var(--foinse-color-rule-100);
  text-decoration: none;
}

.site-head nav a[aria-current="page"] {
  background: var(--foinse-color-rule-100);
  text-decoration: none;
}

.site-head nav .nav-drop-panel,
.site-head nav .nav-more-panel {
  min-width: 220px;
  padding: 8px;
  margin-top: 10px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgb(28 25 23 / 0.06), 0 16px 40px rgb(28 25 23 / 0.12);
}

.site-head nav .nav-drop-panel a,
.site-head nav .nav-more-panel a {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
}

.site-head nav .nav-drop-panel a:hover,
.site-head nav .nav-drop-panel a:focus-visible,
.site-head nav .nav-more-panel a:hover,
.site-head nav .nav-more-panel a:focus-visible {
  background: var(--foinse-color-rule-100);
}