/* ==========================================================================
   MENU — the burger and the full-screen menu (Figma «Burger»)
   --------------------------------------------------------------------------
   One button does both jobs: three lines when closed, a cross when open,
   in the SAME spot — the finger that opened the menu finds the close
   without looking. The menu is a separate screen on the page ground, not
   a drop-down: four big items where the About headline stands, socials
   and «В дірект» at the bottom.

   Accent has exactly two jobs here (and never both at once):
     - «you are here»: the item of the section the menu was opened from;
     - «you tapped this»: the pressed item, just before the menu closes.
   ========================================================================== */

/* --- Header: a bar that hides on the way down, returns on the way up ------
   The burger has to be reachable from anywhere on a long page, but a bar
   that sits over the content all the time eats 64 px of every screen.
   So (js/menu.js):
     - at the very top: no bar, just the icon at (362, 40) as in Figma;
     - scrolling DOWN past the top: the header slides away;
     - scrolling UP (the gesture of someone looking for the way out): a
       64-px cream bar slides in with the burger centred in it (y 32).
   No hairline under the bar: it's the page ground continuing, not a
   toolbar. */

.site-header {
  position: fixed;
  z-index: 60;                                   /* above the open menu */
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;                                  /* 64 */
  pointer-events: none;                          /* only the button is live */
  background: transparent;
  transition: transform 250ms ease, background-color 200ms ease;
}

.site-header.is-bar {
  background: var(--color-bg);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* --- Toggle ---------------------------------------------------------------
   The 16 × 8 icon from Figma inside an invisible 44 × 44 tap zone. The zone
   overhangs the 20 px field by 14 so the ICON meets the field line.
   Icon centre: y 40 at the top of the page (Figma), y 32 = the middle of
   the 64 bar once the bar is showing. */

.menu-toggle {
  position: absolute;
  top: calc(2.5rem - var(--tap) / 2);            /* icon centre at 40 */
  right: calc(var(--page-margin) - (var(--tap) - 1rem) / 2);
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: top 250ms ease;
}

.site-header.is-bar .menu-toggle {
  top: calc(2rem - var(--tap) / 2);              /* icon centre at 32 */
}

.menu-toggle__icon {
  position: relative;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: auto;
}

/* Three hairlines, 0.5 px as in Figma: 15, 13 and 8 long, left-aligned. */
.menu-toggle__icon i {
  position: absolute;
  left: 0;
  height: 0.5px;
  background: currentColor;
  transition: transform 200ms ease, opacity 150ms ease, width 200ms ease;
}

.menu-toggle__icon i:nth-child(1) { top: 1px; width: 15px; }
.menu-toggle__icon i:nth-child(2) { top: 4px; width: 13px; }
.menu-toggle__icon i:nth-child(3) { top: 7px; width: 8px;  }

/* Open: the outer lines become a 12-px cross centred on the same point
   (the icon's centre, 8 / 4), the middle one fades out. */
[aria-expanded="true"] .menu-toggle__icon i:nth-child(1),
[aria-expanded="true"] .menu-toggle__icon i:nth-child(3) {
  left: 2px;
  width: 12px;
}

[aria-expanded="true"] .menu-toggle__icon i:nth-child(1) {
  transform: translateY(2.75px) rotate(45deg);    /* line centre 1.25 → 4 */
}

[aria-expanded="true"] .menu-toggle__icon i:nth-child(3) {
  transform: translateY(-3.25px) rotate(-45deg);  /* 7.25 → 4 */
}

[aria-expanded="true"] .menu-toggle__icon i:nth-child(2) {
  opacity: 0;
}

/* --- The menu screen ------------------------------------------------------ */

.menu {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-between);             /* items at y 56, like About */
  /* Figma «Burger»: the Telegram row (a 44-tall box) ends 56 above the
     bottom edge. Plus the phone's own safe area. */
  padding-bottom: calc(var(--space-between) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;                              /* landscape phones */
  overscroll-behavior: contain;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* The page under the menu doesn't scroll. */
.menu-open,
.menu-open body {
  overflow: hidden;
}

/* --- Items ----------------------------------------------------------------
   M/Display XL 44/48, stacked by the leading alone — one tall block, like
   the About headline they replace on screen. Each line box is 48, taller
   than 44, so every item is its own full tap target with no extra zone.
   Case: sentence case, as drawn in the Figma file (the display role
   elsewhere is set in capitals). */

.menu__link {
  display: block;
  width: max-content;
  text-transform: none;
  transition: color 200ms ease;
}

.menu__link[aria-current],
.menu__link.is-pressed {
  color: var(--color-accent);                    /* 3.99:1 — AA for 44 px */
}

/* When something is pressed, the current item gives the accent up:
   one accent at a time. */
.menu__items.has-pressed .menu__link[aria-current]:not(.is-pressed) {
  color: var(--color-ink);
}

/* Items rise into place, one after another. */
.menu__items li {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.menu.is-open .menu__items li {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__items li:nth-child(2) { transition-delay: 40ms; }
.menu.is-open .menu__items li:nth-child(3) { transition-delay: 80ms; }
.menu.is-open .menu__items li:nth-child(4) { transition-delay: 120ms; }

/* --- Bottom: socials + «В дірект» -----------------------------------------
   Same pieces and the same numbers as the footer columns (Figma «Frame 132»):
   a marker head, 10, then rows that are 44-tall boxes with the text centred
   in them — the box IS the tap target, so no invisible zone is needed. */

.menu__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: var(--space-between);             /* never closer than 56 */
}

.menu__head {
  color: var(--color-ink-faint);
}

.menu__rows {
  display: flex;
  flex-direction: column;
  margin-top: var(--list-gap);                   /* 10, Figma panel */
}

.menu__row {
  display: flex;
  align-items: center;
  min-height: var(--tap);                        /* 44 — «Frame 128–130» */
}

/* The ring is centred on the Telegram row, as in Figma: its bottom sits
   (52 − 44) / 2 = 4 below the row's box. */
.menu__cta {
  margin-bottom: calc((var(--tap) - 3.25rem) / 2);
}

/* --- Desktop bar -----------------------------------------------------------
   Phones: burger + full-screen menu. Desktop: the menu is gone and the same
   header carries a real bar — the name (home) on the left, the three
   sections centred on the page, «Відкрита до проєктів» on the right (it
   leads to the contact block in the footer). Same behaviour as the burger
   bar: away on the way down, back as a cream bar on the way up.
   Over the dark Hero, at the very top, the bar is transparent and its text
   takes the ground colour. The section you are in is ink + underlined;
   the others are ink-soft. */

.site-header__brand,
.site-nav,
.site-header__status {
  display: none;
}

@media (min-width: 64em) {
  .menu,
  .menu-toggle {
    display: none;
  }

  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-inline: var(--page-margin);
    color: var(--color-ink);
    pointer-events: auto;
  }

  .site-header__brand,
  .site-header__status {
    display: block;
    text-transform: uppercase;
  }

  .site-header__status {
    justify-self: end;
  }

  .site-nav {
    display: block;
  }

  .site-nav__list {
    display: flex;
    gap: 9.375vw;                                /* 180 at 1920, as drawn */
  }

  .site-nav__link {
    color: var(--color-ink-soft);
    text-transform: uppercase;
    text-underline-offset: 0.5em;
    transition: color 200ms ease;
  }

  /* Bigger hover / click zone: each bar link is padded out to the full
     height of the 64-px bar and 24 px either side, then pulled back with
     the same negative margin — the words stay exactly where they were,
     only the area that answers the pointer grows (from a ~20-px line of
     text to a 64-px band). The gaps between the links (180 at 1920)
     are far wider than 2 × 24, so zones never touch. */
  .site-header__brand,
  .site-header__status,
  .site-nav__link {
    display: inline-block;
    padding: 1.375rem 1.5rem;                   /* 22 / 24 */
    margin: -1.375rem -1.5rem;
  }

  .site-header__brand {
    justify-self: start;                        /* hug the words, not the 1fr column */
  }

  .site-nav__link[aria-current] {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  .site-nav__link:hover {
    color: inherit;
  }

  /* Home page: the bar begins with About, as in Figma — while the Hero is
     on screen there is no bar at all. Until it is called back by
     scrolling up (.is-bar, fixed like everywhere else), it rides at the
     top of About as part of the page, with a hairline under it
     (Figma «Nav»). --hero-h is the Hero's height, set by js/menu.js;
     --dock-gap is the cream air between the dark Hero and the bar
     (56 on the scale — Figma's 150 read as too much on screen). */
  .has-hero .site-header:not(.is-bar) {
    position: absolute;
    top: calc(var(--hero-h, 100vh) + var(--dock-gap));
    transform: none;
    border-bottom: 1px solid var(--color-hairline);
  }
}

/* Without JS the burger can't open anything: hide it. The footer carries
   the same links; the desktop bar is plain links and stays. */
html:not(.js) .menu-toggle,
html:not(.js) .menu {
  display: none;
}