/* The site header, on every page of every locale.
 *
 * One stylesheet rather than a block in each of the site's two: the Academy family loads
 * /affiliate.css, the practices load /article.css, and the app-growth catalog bundles
 * src/styles.css — a header that looked the same in all three by being written three times
 * would not stay that way. generate-static.mjs copies this file to public/site-header.css
 * for the generated pages; src/main.jsx imports it for the catalog.
 *
 * Colours are resolved through `var(--affiliate, …)` so the file leans on the Academy
 * palette where it is defined and falls back to the same blue everywhere else. Nothing
 * here sets a font: the header inherits the page's, which is Manrope in both stylesheets.
 */

/* The height of the bar, which is also what the catalog's sticky sidebar subtracts from the
 * viewport. It is a floor rather than a measurement, so it only has to stay at or above what
 * the row actually comes to: the tallest thing in the row is the language switcher, and the
 * rest is the header's padding and its border. The bar used to be 94px around a 50px
 * switcher, which is most of the thickness this file has shed. */
:root {
  --site-header-height: 64px;
}

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--site-header-height);
  padding: 9px 36px;
  border-bottom: 1px solid #e5e8ee;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}

.site-header-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin-right: 14px;
  color: #111216;
  font-size: 20px;
  font-weight: 800;
  line-height: .86;
  letter-spacing: -1px;
  text-decoration: none;
}

.site-header-brand img { width: 38px; height: 38px; }

.site-nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.site-nav-item { position: relative; }

/* How wide a menu opens and what it hangs off, declared on the item so the panel only ever
 * reads variables — the wide breakpoints below then re-declare them without having to
 * out-specify anything. The two list menus stay tied to the label that opened them; the
 * app-growth menu is four columns wide, more than fits beside its own label on a laptop, so
 * it spans the header instead. `position: static` is what moves the panel's containing block
 * up from the item to the header. */
.site-nav-item[data-columns="2"] { --site-nav-columns: 2; --site-nav-width: 660px; }
.site-nav-item[data-columns="4"] {
  position: static;
  --site-nav-columns: 4;
  --site-nav-left: 24px;
  --site-nav-right: 24px;
  --site-nav-width: auto;
  --site-nav-max-width: none;
}

.site-nav-summary, .site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  color: #202226;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

/* Both spellings of the disclosure triangle, so no browser draws one next to the caret. */
.site-nav-summary::-webkit-details-marker { display: none; }
.site-nav-summary::marker { content: ""; }

.site-nav-summary:hover, .site-nav-link:hover { background: #f2f5fa; color: var(--affiliate, #155eef); }
.site-nav-item[open] > .site-nav-summary { background: var(--affiliate-soft, #edf5ff); color: var(--affiliate, #155eef); }
.site-nav-item.is-current > .site-nav-summary, .site-nav-link.is-current { color: var(--affiliate, #155eef); }
.site-nav-summary:focus-visible, .site-nav-link:focus-visible, .site-nav-panel a:focus-visible, .site-header-brand:focus-visible, .site-locale a:focus-visible {
  outline: 3px solid #a8c5ff;
  outline-offset: 2px;
}

.site-nav-caret { flex: 0 0 auto; opacity: .5; transition: transform .18s ease; }
.site-nav-item[open] .site-nav-caret { transform: rotate(180deg); opacity: 1; }

.site-nav-panel {
  position: absolute;
  top: calc(100% + 9px);
  left: var(--site-nav-left, 0px);
  right: var(--site-nav-right, auto);
  z-index: 30;
  display: grid;
  gap: 4px;
  width: var(--site-nav-width, 390px);
  max-width: var(--site-nav-max-width, calc(100vw - 48px));
  padding: 16px;
  border: 1px solid #e5e8ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(16, 17, 20, .14);
  animation: site-nav-panel-in .16s ease;
}

@keyframes site-nav-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* The way into the whole section, as the first line of the menu: one link the size of the
 * links under it, sitting on the same padding and the same hover. It used to be a filled
 * card with the section title and a sentence about it — copy the reader had already read on
 * the way in, taking a third of the panel's height above the links they came for. Only the
 * colour separates it from the list it belongs to. `justify-self: start` keeps the hover
 * around the words rather than across the panel. */
.site-nav-all {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--affiliate, #155eef);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.site-nav-all:hover { background: var(--affiliate-soft, #edf5ff); }
.site-nav-arrow { flex: 0 0 auto; }

.site-nav-columns { display: grid; grid-template-columns: repeat(var(--site-nav-columns, 1), minmax(0, 1fr)); gap: 8px 18px; }

.site-nav-column { min-width: 0; }

.site-nav-column-title {
  margin: 6px 0 8px;
  padding-inline: 10px;
  color: #7b8798;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav-column ul { display: grid; margin: 0; padding: 0; list-style: none; }

.site-nav-column a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #202226;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.site-nav-column a:hover { background: #f2f5fa; color: var(--affiliate, #155eef); }
.site-nav-column a[aria-current="page"] { color: var(--affiliate, #155eef); }
.site-nav-number { flex: 0 0 auto; color: #9aa5b5; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.site-nav-link-copy { display: grid; gap: 2px; min-width: 0; }
.site-nav-link-text { color: #6b7687; font-size: 13px; font-weight: 600; line-height: 1.4; }
.site-nav-column a:hover .site-nav-link-text { color: #5c6878; }

.site-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; margin-left: auto; }

.site-locale {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(31, 39, 54, .05);
}

.site-locale a {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 34px;
  border-radius: 8px;
  color: #50545c;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.site-locale a:hover { color: var(--affiliate, #155eef); }
.site-locale a.is-active { background: var(--affiliate-soft, #edf5ff); color: var(--affiliate, #155eef); }

/* Below this the widest panel no longer fits beside the item that opens it, so every panel
 * spans the header instead of hanging off its own menu. `position: static` on the item is
 * what moves the containing block up to the header. */
@media (max-width: 1180px) {
  .site-header { padding-inline: 24px; }
  .site-nav-item[data-columns] {
    position: static;
    --site-nav-left: 24px;
    --site-nav-right: 24px;
    --site-nav-width: auto;
    --site-nav-max-width: none;
  }
  .site-nav-columns { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* The brand and the language switcher keep the first row; the sections take a row of their
 * own, where four short labels fit a phone without a menu button in front of them. */
@media (max-width: 860px) {
  :root { --site-header-height: 96px; }
  .site-header { flex-wrap: wrap; gap: 6px; padding: 8px 16px; }
  .site-header-brand { margin-right: 0; font-size: 17px; letter-spacing: -.8px; }
  .site-header-brand img { width: 34px; height: 34px; }
  .site-nav { order: 3; flex-basis: 100%; gap: 2px; }
  .site-nav-summary, .site-nav-link { height: 34px; padding: 0 10px; font-size: 15px; }
  .site-nav-item[data-columns] { --site-nav-left: 12px; --site-nav-right: 12px; }
  .site-nav-panel { max-height: min(68vh, 460px); padding: 12px; overflow-y: auto; }
  .site-locale a { min-width: 36px; height: 30px; }
}

@media (max-width: 420px) {
  :root { --site-header-height: 94px; }
  .site-header { padding-inline: 12px; }
  .site-nav-summary, .site-nav-link { padding: 0 8px; }
  .site-locale { padding: 2px; }
  .site-locale a { min-width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-panel { animation: none; }
  .site-nav-caret { transition: none; }
}