/* ============================================================================
   TOPBAR (§10.7) — after the Portal build. Fixed and always visible; the hero
   and the pinned figure leave room for it. Below 1280px the nav collapses to
   a full-screen sheet. Markup: js/render/topbar.js. Behaviour:
   js/behaviour/topbar.js, which sets html.nav-open while the sheet is open.
   ========================================================================= */

html.nav-open { overflow: hidden; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid var(--color-hairline-soft);
}
/* Blur on a pseudo-element: on the bar itself it would become the containing
   block of the fixed menu sheet.
   Liquid glass, at the user's request (against §10.7's blur(12px)): a
   thinner tint, a deeper blur with the colour behind lifted, a bright top
   rim and a gloss fading down the bar, and a soft shadow under it. */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--color-topbar-sheen), transparent 55%),
    var(--color-topbar);
  box-shadow: inset 0 1px 0 var(--color-topbar-sheen), var(--shadow-sm);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}

.topbar__inner {
  display: flex; align-items: center; gap: var(--space-6);
  max-width: var(--layout-container-max);
  height: var(--layout-topbar);
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}
.topbar__brand { display: inline-flex; align-items: center; margin-right: auto; border-radius: var(--radius-sm); }
.topbar__brand img { display: block; height: 52px; width: auto; }
.topbar__brand:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 4px; }

.topbar__nav { display: flex; align-items: center; gap: var(--space-8); }
.topbar__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.topbar__links > li > a {
  display: inline-block; padding: var(--space-2) 0;
  font-size: var(--type-body); font-weight: 500; line-height: 1.2;
  color: var(--color-ink); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.topbar__links > li > a:hover,
.topbar__links > li > a:focus-visible { color: var(--color-action-primary); border-bottom-color: currentColor; }
.topbar__links > li > a:active { color: var(--color-action-primary-active); }
.topbar__links > li > a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.topbar__toggle { display: none; }

/* The actions: the Alumni portal (secondary, off the page) beside the one
   primary action. Its arrow (.btn__offsite, base.css) says the link leaves
   the page. */
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }

/* The full bar: the links centred in the space between the logo and the action. */
@media (min-width: 1280px) {
  .topbar__nav { flex: 1; gap: var(--space-6); }   /* the bar's own gap, so both sides match */
  /* The brand stands apart from the navigation: a wider gap after the logo
     than anywhere in the nav, paid for by the small buttons (.btn--sm). */
  .topbar__brand { margin-right: var(--space-4); }
  .topbar__links { flex: 1; justify-content: center; }
  .topbar__links > li > a,
  .topbar__actions .btn { white-space: nowrap; }   /* never a two-line label in the bar */
}

/* --- the Experiences menu (desktop bar only) -----------------------------
   §10.7 keeps dropdowns out unless the architecture needs one; the client
   asked for this one. It opens on hover and on keyboard focus (focus on
   "Experiences" opens it, Tab walks through it), below the bar, its left edge
   in line with the Experiences label's and its right edge on the bar's
   (behaviour/topbar.js sets its width, and the columns spread to fill it;
   too wide to fit, it moves left instead). One column per group,
   each under a title set like the cards' kind line. Esc, or following a
   link, closes it (behaviour/topbar.js, .is-dismissed) until the pointer
   or focus leaves. Floating level (§7): canvas, hairline, {shadow.md}. */
.topbar__has-menu { position: relative; }   /* the menu hangs from "Experiences" */
.topbar__links > .topbar__has-menu > a { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__has-menu > a::after,
.topbar__menu-toggle::after {
  content: "";
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--motion-fast), margin var(--motion-fast);
}
.topbar__menu-toggle { display: none; }   /* the sheet's stand-in for "Experiences" */

.topbar__menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: var(--space-6);       /* a bridge for the pointer between the label and the panel */
  opacity: 0;
  visibility: hidden;
  translate: 0 calc(-1 * var(--space-1));
  transition: opacity var(--motion-fast), translate var(--motion-fast), visibility 0s 160ms;
}
.topbar__has-menu:is(:hover, :focus-within):not(.is-dismissed) .topbar__menu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity var(--motion-fast), translate var(--motion-fast), visibility 0s;
}
.topbar__has-menu:is(:hover, :focus-within):not(.is-dismissed) > a::after { rotate: 225deg; margin-top: 3px; }

.topbar__menu-panel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;   /* spare width goes between the columns */
  gap: var(--space-4);
  padding: var(--space-6);   /* with that gap, it fits between "Experiences" and the bar's end */
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
  box-shadow: var(--shadow-md);
}
.topbar__menu-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.topbar__menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.topbar__menu a {
  display: block;
  margin-inline: calc(-1 * var(--space-2));
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.topbar__menu a:hover  { background: var(--color-canvas-tinted); color: var(--color-action-primary-hover); }
.topbar__menu a:active { background: var(--color-canvas-pressed); color: var(--color-action-primary-active); }
.topbar__menu a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 0; }

@media (max-width: 1279px) {
  .topbar__brand img { height: 44px; }

  /* The Experiences menu as an accordion (§10.6): the button stands in for the
     link and opens the columns as one list below it (behaviour/topbar.js,
     .is-open). */
  .topbar__links > .topbar__has-menu > a { display: none; }
  .topbar__menu-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    width: 100%; padding: var(--space-4) 0;
    background: none; border: 0; border-bottom: 1px solid var(--color-hairline);
    font: 600 var(--type-h3) / 1.3 var(--font-body); letter-spacing: -0.01em;
    color: var(--color-ink); text-align: left; cursor: pointer;
    transition: color var(--motion-fast);
  }
  .topbar__menu-toggle::after { margin-right: var(--space-2); }
  .topbar__menu-toggle:hover { color: var(--color-action-primary); }
  .topbar__menu-toggle:active { color: var(--color-action-primary-active); }
  .topbar__menu-toggle:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
  .topbar__menu-toggle[aria-expanded="true"]::after { rotate: 225deg; margin-top: 3px; }

  .topbar__menu {
    display: none; position: static;
    padding: 0; opacity: 1; visibility: visible; translate: none;
  }
  .topbar__has-menu.is-open > .topbar__menu { display: block; border-bottom: 1px solid var(--color-hairline); }
  .topbar__menu-panel {
    display: grid; grid-auto-flow: row; gap: var(--space-1);   /* the same step as within a group: one list */
    padding: var(--space-2) 0 var(--space-6);
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .topbar__menu-title { display: none; }   /* no group titles in the sheet */
  .topbar__menu a { padding-block: var(--space-3); }

  .topbar__toggle {
    display: inline-flex; align-items: center; gap: var(--space-3);
    min-height: 44px; padding: 0 var(--space-4);
    background: none; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill);
    color: var(--color-ink); font: 600 var(--type-label) / 1 var(--font-body); cursor: pointer;
  }
  .topbar__toggle:hover  { background: var(--color-canvas-tinted); }
  .topbar__toggle:active { background: var(--color-canvas-pressed); }
  .topbar__toggle:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
  .topbar__toggle-icon {
    position: relative; width: 18px; height: 12px;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }
  .topbar__toggle-icon::before,
  .topbar__toggle-icon::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform var(--motion-fast), top var(--motion-fast), bottom var(--motion-fast);
  }
  .topbar__toggle-icon::before { top: 0; }
  .topbar__toggle-icon::after  { bottom: 0; }
  .topbar__toggle[aria-expanded="true"] .topbar__toggle-icon { background: none; }
  .topbar__toggle[aria-expanded="true"] .topbar__toggle-icon::before { top: 5px; transform: rotate(45deg); }
  .topbar__toggle[aria-expanded="true"] .topbar__toggle-icon::after  { bottom: 5px; transform: rotate(-45deg); }

  /* §10.7 full-screen sheet, never a cramped dropdown */
  .topbar__nav {
    position: fixed; top: var(--layout-topbar); left: 0; right: 0; bottom: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: var(--space-8);
    padding: var(--space-6) var(--space-6) var(--space-12);
    background: var(--color-canvas); overflow-y: auto;
  }
  .topbar__nav[hidden] { display: none; }
  .topbar__links { flex-direction: column; align-items: stretch; gap: 0; }
  .topbar__links > li > a {
    display: block; padding: var(--space-4) 0;
    font-size: var(--type-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
    border-bottom: 1px solid var(--color-hairline);
  }
  .topbar__links > li > a:hover,
  .topbar__links > li > a:focus-visible { border-bottom-color: var(--color-hairline); }
  .topbar__actions { flex-direction: column; align-items: stretch; }
}