/*
  The website's header, the same on every page of movahelp.com: the landing page, its static pages,
  and the blog and the NMT trainer the CRM serves (which link this file under SITE_URL). The markup
  contract is ../crm/docs/features/site-header.md; change it there first.

  Every rule names a `site-header` class and sets what it relies on — font, colour, box sizing — so
  a page's own rules for `a`, `img` or `nav` do not reach the header, and the header's do not leak.
*/

:root {
  --site-header-height: 72px;
}

@media (max-width: 680px) {
  :root {
    --site-header-height: 64px;
  }
}

.site-header {
  --site-header-ink: #0f172a;
  --site-header-paper: #fff;
  --site-header-blue: #2338b8;
  --site-header-blue-deep: #1a2a8c;
  /*
    The header sticks over the page, so a soft shadow keeps the text scrolling under it apart; the
    website draws no ink line across the whole page, only around cards and buttons.
  */
  --site-header-lift: 0 1px 0 rgba(15, 23, 42, 0.06), 0 10px 24px -18px rgba(15, 23, 42, 0.45);
  /* The teacher's wavy red line, as the landing page draws it. */
  --site-header-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12C30 4 50 18 80 10S130 4 160 12S220 18 250 9S290 6 298 11' fill='none' stroke='%23d0202a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* A person, head and shoulders, for the learner's link before anyone signs in. */
  --site-header-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c0-4.1 3.4-6.5 7.5-6.5s7.5 2.4 7.5 6.5'/%3E%3C/svg%3E");

  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--site-header-paper);
  box-shadow: var(--site-header-lift);
  color: var(--site-header-ink);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(1160px, 100% - 40px);
  height: var(--site-header-height);
  margin-inline: auto;
}

.site-header__logo {
  display: block;
  flex: none;
  margin-right: auto;
}

.site-header__logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 40px;
}

/* The row may be narrower than its links: then it is the learner's name that gives way (below). It
   is as tall as the header, so a submenu hangs from the header's bottom edge. */
.site-header__nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 1.4rem;
  min-width: 0;
}

.site-header__link {
  padding-block: 0.4rem;
  color: var(--site-header-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* The section one is in, and the link under the pointer, underlined with the wavy red line. */
.site-header__link:hover,
.site-header__link[aria-current="page"],
.site-header__link[aria-current="true"] {
  background: var(--site-header-wave) left bottom / 100% 8px no-repeat;
  color: var(--site-header-ink);
}

/*
  «Тренажер НМТ» and its submenu, the trainer's parts. The page prints the submenu with `display: none`
  in its style, so with a stylesheet older than the page the header looks as before; `!important`
  here overrides that style. The `hidden` attribute would not do: the landing page's Tailwind and the
  trainer's stylesheet hide `[hidden]` with `!important` of their own. It opens under its link while
  the pointer or the focus is on either, so Tab walks through it, and Escape closes it until they
  leave (`is-dismissed`, /site-header.js). In the phone's menu its links follow the link, indented.
*/
.site-header__group {
  position: relative;
  display: flex;
  align-items: center;
}

.site-header__nav .site-header__group {
  align-self: stretch;
}

.site-header__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav .site-header__group:is(:hover, :focus-within):not(.is-dismissed) > .site-header__sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  display: grid !important;
  min-width: 15rem;
  padding: 0.5rem;
  border-radius: 0 0 16px 16px;
  background: var(--site-header-paper);
  box-shadow: var(--site-header-lift);
}

.site-header__sublink {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  color: var(--site-header-ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__sublink:hover {
  background: #f6f7f9;
  color: var(--site-header-blue);
}

.site-header__sublink:focus-visible {
  outline: 3px solid var(--site-header-blue);
  outline-offset: -3px;
}

/* A small chevron says the link opens more, where the row has room for it. */
@media (min-width: 1200px) {
  .site-header__nav .site-header__group > .site-header__link::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.2em) rotate(45deg);
  }
}

/*
  In the phone's menu the submenu is folded under a chevron button beside «Тренажер НМТ», so the menu
  stays short; the link itself still leads to the hub. The page prints the button hidden, like the
  submenu, so a page older than this stylesheet shows its submenu unfolded, as before.
*/
.site-header__panel .site-header__group {
  flex-wrap: wrap;
  align-items: center;
}

.site-header__panel .site-header__sub {
  display: grid !important;
  flex-basis: calc(100% - 0.25rem);
  margin: 0 0 0.25rem 0.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid #f19c9c;
}

.site-header__panel .site-header__expand[aria-expanded="false"] + .site-header__sub {
  display: none !important;
}

.site-header__panel .site-header__expand {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--site-header-ink);
  cursor: pointer;
}

.site-header__expand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}

.site-header__expand[aria-expanded="true"]::before {
  transform: translateY(2px) rotate(-135deg);
}

.site-header__expand:hover {
  background: #f6f7f9;
}

.site-header__expand:focus-visible {
  outline: 3px solid var(--site-header-blue);
  outline-offset: -3px;
}

.site-header__panel .site-header__sublink {
  padding: 0.45rem 0.25rem;
  font-size: 0.98rem;
}

/*
  The learner's link stands apart from the sections' links: an outlined pill, like the menu button.
  A visitor sees a person drawn in ink and «Увійти»; a signed-in learner, the first letter of their
  name in a circle of the pupil's blue pen, and the name.
*/
.site-header__account {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 40px;
  padding: 0.25rem 0.95rem 0.25rem 0.3rem;
  border: 2px solid var(--site-header-ink);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.2s, color 0.2s;
}

.site-header__account[hidden] {
  display: none;
}

/* Not the sections' wavy line: the pill is the pupil's, and the pupil's pen is blue. */
.site-header__account:hover {
  border-color: var(--site-header-blue);
  background: #fff;
  color: var(--site-header-blue);
}

/* The person is a mask, so it takes the link's colour. */
.site-header__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: currentColor;
  -webkit-mask: var(--site-header-person) center / 20px no-repeat;
  mask: var(--site-header-person) center / 20px no-repeat;
}

/* The script writes the initial as an attribute, which React leaves alone (see /site-header.js). */
.site-header__account[data-account="learner"] .site-header__avatar {
  background: var(--site-header-blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  -webkit-mask: none;
  mask: none;
}

.site-header__account[data-account="learner"] .site-header__avatar::before {
  content: attr(data-initial);
}

/* The learner's first name can be long; the header keeps its width. In the row the name is also no
   wider than the room the other links and the call to action leave it: the only text that clips, it
   is the only one that shrinks. */
.site-header__account-label {
  min-width: 0;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A block, not a flex box, so that `::first-letter` capitalises the short label on a phone. */
.site-header__cta {
  display: inline-block;
  flex: none;
  min-height: 44px;
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  background: var(--site-header-blue);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.site-header__cta:hover {
  background: var(--site-header-blue-deep);
  color: #fff;
}

.site-header__link:focus-visible,
.site-header__logo:focus-visible,
.site-header__cta:focus-visible,
.site-header__toggle:focus-visible {
  outline: 3px solid var(--site-header-blue);
  outline-offset: 3px;
  box-shadow: none;
}

.site-header__link:focus-visible,
.site-header__logo:focus-visible {
  border-radius: 4px;
}

.site-header__account:focus-visible {
  border-radius: 999px;
}

/* The menu exists for narrow screens only. */
.site-header__menu {
  display: none;
}

.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--site-header-ink);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.site-header__toggle::-webkit-details-marker {
  display: none;
}

/* Three pen strokes, which cross into an "x" while the menu is open. */
.site-header__bars,
.site-header__bars::before,
.site-header__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--site-header-ink);
  transition: transform 0.2s, background-color 0.2s;
}

.site-header__bars {
  position: relative;
}

.site-header__bars::before,
.site-header__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-header__bars::before {
  top: -6px;
}

.site-header__bars::after {
  top: 6px;
}

.site-header__menu[open] .site-header__bars {
  background: transparent;
}

.site-header__menu[open] .site-header__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header__menu[open] .site-header__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* The open menu lies over the page under the header, its links one per row. */
.site-header__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: calc(100vh - var(--site-header-height));
  overflow-y: auto;
  padding: 0.5rem max(20px, (100% - 1160px) / 2) 1.25rem;
  background: var(--site-header-paper);
  box-shadow: var(--site-header-lift);
}

.site-header__panel .site-header__link {
  padding-block: 0.8rem;
  font-size: 1.05rem;
}

/* In the menu the learner's link comes first, a little apart, its name as wide as the panel allows:
   signing in takes no scrolling past the links. */
.site-header__panel .site-header__account {
  max-width: 100%;
  margin-block: 0.5rem 0.75rem;
  padding-block: 0.3rem;
  font-size: 1rem;
}

.site-header__panel .site-header__account-label {
  max-width: none;
}

/* Up to 1199px the row is barely wider than its content: the links sit closer and a little smaller,
   so «Увійти» keeps its whole pill and the call to action its distance from the edge, about 14px to
   spare at 1024px with a classic scrollbar. */
@media (max-width: 1199px) {
  .site-header__inner {
    gap: 1rem;
  }
  .site-header__nav {
    gap: 0.75rem;
  }
  .site-header__link {
    font-size: 0.9rem;
  }
}

/* There a learner's link is the circle with their initial alone; the name stays in the link for a
   screen reader and shows as its title under the pointer. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header__nav .site-header__account[data-account="learner"] {
    padding: 0.25rem;
  }
  .site-header__nav .site-header__account[data-account="learner"] .site-header__account-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/*
  The phone's row holds the learner's link too, as its circle alone beside the menu button, so signing
  in is one tap from any page. The page prints it with `display: none`, so a page older than this
  stylesheet shows the row as before; the name stays in the link for a screen reader and shows as its
  title.
*/
.site-header__account--bar .site-header__account-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .site-header__nav {
    display: none;
  }
  .site-header__inner {
    gap: 0.75rem;
  }
  .site-header__menu {
    display: block;
    flex: none;
  }
  .site-header__account--bar {
    display: inline-flex !important;
    flex: none;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .site-header__account--bar[hidden] {
    display: none !important;
  }
}

/* As narrow as the trainer's and the blog's pages are on a phone. */
@media (max-width: 680px) {
  .site-header__inner {
    width: calc(100% - 28px);
  }
  .site-header__logo img {
    height: 36px;
  }
  .site-header__panel {
    padding-inline: 14px;
  }
}

/*
  A phone: the call to action loses its second word (`site-header__cta-verb`, named when it hid
  «Пройти») and the circles shrink to 40px, so the logo, the call to action, the learner's circle and
  the menu button fit a 375px screen. The logo is about 4.4 times as wide as it is tall, so its
  height decides most of the row.
*/
@media (max-width: 520px) {
  .site-header__inner {
    gap: 0.375rem;
  }
  .site-header__logo img {
    height: 30px;
  }
  .site-header__cta {
    padding: 0.75rem 0.6rem;
    font-size: 0.85rem;
  }
  .site-header__account--bar,
  .site-header__toggle {
    width: 40px;
    height: 40px;
  }
  .site-header__cta-verb {
    display: none;
  }
  .site-header__cta::first-letter {
    text-transform: uppercase;
  }
}

/* A 360px phone: a smaller logo. */
@media (max-width: 374px) {
  .site-header__logo img {
    height: 26px;
  }
}

/* The narrowest phones, down to 320px. */
@media (max-width: 359px) {
  .site-header__inner {
    width: calc(100% - 24px);
  }
  .site-header__cta {
    padding: 0.7rem 0.5rem;
    font-size: 0.8125rem;
  }
  .site-header__panel {
    padding-inline: 12px;
  }
}

/* Below 340px the row has no room for the learner's circle; «Увійти» is the menu's first row. */
@media (max-width: 339px) {
  .site-header__account--bar {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__cta,
  .site-header__account,
  .site-header__expand::before,
  .site-header__bars,
  .site-header__bars::before,
  .site-header__bars::after {
    transition: none;
  }
}

@media print {
  .site-header {
    position: static;
  }
  .site-header__menu,
  .site-header__cta,
  .site-header__account--bar {
    display: none !important;
  }
}