/* =========================================================================
   Shell — header, mobile menu, footer. Steps 2.2 to 2.4
   -------------------------------------------------------------------------
   Measured from the original:
     header   60px tall from 1001px up, 74px below; PINNED to the top of the
              viewport and overlapping the section beneath it, so the hero
              image runs to y=0. Transparent itself.
     scroll   slides up out of view (translateY(-100%), 0.3s linear) once you
              scroll DOWN past 400px, and returns on any upward scroll. The
              threshold is the same at 900px and 600px of viewport height, so
              it is a fixed distance, not a proportion.
     glass    a translucent pill sits behind the nav and behind the burger:
              rgba(255,255,255,.6) + blur(4px), radius 24px, flush with the
              header's bottom edge. 307x34 at desktop, 50x50 on mobile.
     nav      starts at 60% of the container, 24px between items, order
              Home / Portfolio / Resume / Linkedin, 14px #868686
     burger   50x50, 24px from the right edge, shown below 1001px
     menu     full-screen white; 18px/31.5px links; the CURRENT page is
              #7CB342 ("Visual Green")
     footer   one centred row, 24px gaps, 50px tall (60px on mobile, wrapped)
   ========================================================================= */

/* =========================================================================
   2.2  Header and desktop nav
   ========================================================================= */
/* Pinned, and it overlaps whatever is under it — the hero starts at y=0 and
   the header floats on top. Taking flow space here pushed every page down by
   exactly the header height. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: transparent;
  height: 74px;
  transition: transform 0.3s linear;   /* measured */
}
@media (min-width: 1001px) {
  .site-header { height: 60px; }
}

/* The pinned header overlaps a full-bleed hero, which is what Home has. A page
   that opens with an ordinary section instead asks for the space back.
   Phase 5's case-study hero is full-bleed, so it drops this class. */
.page-plain main {
  padding-top: 74px;
}
@media (min-width: 1001px) {
  .page-plain main { padding-top: 60px; }
}

/* Driven by js/header.js. Transform, not display, so it animates and so the
   nav stays in the accessibility tree and in the tab order. */
.site-header--hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-header__inner {
  position: relative;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* The nav begins at 60% of the container, rather than being right-aligned —
   which is why its distance from the right edge grows with the viewport.
   It sits flush with the header's BOTTOM edge, not centred: the glass pill
   measures 26px to 60px in a 60px header.

   left backs off by the pill's own 16px of padding so the first link still
   lands on the 60% line. */
.site-nav {
  display: none;
  position: absolute;
  left: calc(60% - 16px);
  bottom: 0;
  height: 34px;
  padding-inline: 16px;
  gap: var(--space-md);            /* measured 24px */
  align-items: center;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 24px;
}
@media (min-width: 1001px) {
  .site-nav { display: flex; }
}

/* --- hamburger ---------------------------------------------------------- */
/* Same glass as the desktop nav, and bottom-flush for the same reason:
   measured at 24px..74px in a 74px header. */
.burger {
  position: absolute;
  right: var(--space-md);          /* measured 24px from the edge, all widths */
  bottom: 0;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.35px;                     /* 8.35 centre to centre, bars are 2 thick */
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: 24px;
}
@media (min-width: 1001px) {
  .burger { display: none; }
}
/* Three bars, measured: 26 wide, 2px thick, 8.35px apart centre to centre.
   They rest in the muted grey and go to full ink on hover — the same
   treatment as every nav link on the site, measured #868686 -> #1A1A1A. */
.burger__bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--text-muted);
  transition: background-color var(--duration) var(--easing);
}
.burger:hover .burger__bar,
.burger:focus-visible .burger__bar { background: var(--ink); }

/* =========================================================================
   2.3  Mobile menu
   ========================================================================= */
/* Two parts: a 60% black overlay across the viewport, and a white panel on
   the right. The panel is the right 40% from 751px up (at 1000 the white
   starts at exactly 600) and the full width below that, where it covers the
   overlay completely. Clicking the overlay closes the menu — see menu.js. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, .6);
  display: flex;
  justify-content: flex-end;
}

.mobile-menu__panel {
  position: relative;
  width: 100%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
@media (min-width: 751px) {
  .mobile-menu__panel { width: 40%; }
}
/* [hidden] alone loses to display:flex, so state it explicitly. */
.mobile-menu[hidden] { display: none; }

/* Never reachable above the breakpoint, even if left open on resize. */
@media (min-width: 1001px) {
  .mobile-menu { display: none !important; }
}

/* Close takes the burger's exact box — 50x50, 24px in from the right, 24px
   down, which is where the burger sits bottom-flush in the 74px header — so
   the control does not jump when the menu opens. Out of the flow, so the
   links below position against the panel rather than against it. */
.mobile-menu__head {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
}

.mobile-menu__close {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: color var(--duration) var(--easing);
}
/* Same grey-to-ink as the burger. The original hovers this one to #1A6AFF, a
   blue that appears nowhere else in the palette — an unstyled Wix component
   default rather than a decision. Flagged to Martin; Appendix B entry 13. */
.mobile-menu__close:hover,
.mobile-menu__close:focus-visible { color: var(--ink); }

/* Centred in the panel, 48px apart. On mobile the block centres on the
   viewport; from 751px up it starts 108px down, measured. */
.mobile-menu__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
@media (min-width: 751px) {
  .mobile-menu__nav {
    justify-content: flex-start;
    padding-top: 108px;
  }
}

/* 24px / 500, measured. */
.menu-link {
  font-size: var(--step-sub);
  line-height: normal;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  transition: color var(--duration) var(--easing);
}
.menu-link:hover { color: var(--ink-strong); }

/* The current page carries aria-current for assistive tech but is NOT
   coloured differently: measured #1A1A1A on Home and on a case study alike.
   An earlier reading had it in "Visual Green"; the rendered site disagrees. */

/* =========================================================================
   2.4  Footer
   ========================================================================= */
/* Measured: the footer band is exactly 50px tall at desktop and 60px on
   mobile, with no padding above or below it. Adding padding here pushed the
   copyright 25px lower than the original on every page. */
/* Opaque, because Home pins its hero and the footer has to cover it rather
   than let it show through. */
.site-footer {
  padding-block: 0;
  position: relative;
  z-index: 1;
  background: var(--surface);
}

/* The content sits near the TOP of the band, not centred in it: measured 9px
   down in the 50px desktop footer, and flush with the top on mobile, where
   the second row follows 16px later and the band keeps 10px spare beneath.
   align-content matters as much as align-items here — without it the wrapped
   mobile rows get spread through the band instead of packing to the top. */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--space-md);            /* measured 24px */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: 9px;
  min-height: 50px;
}

.site-footer__copy {
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  letter-spacing: var(--tracking-none);
  color: var(--text-muted);
}

/* On mobile the copyright drops to its own centred line, as measured. */
@media (max-width: 750px) {
  .site-footer__inner {
    min-height: 60px;
    row-gap: var(--space-sm);
    padding-top: 0;                /* flush with the top here, measured */
  }
  .site-footer__copy { flex-basis: 100%; text-align: center; }
}

/* Keep the page footer at the bottom even when a page is short. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }