/* ============================================================================
   Coaching and Clarity — full-screen navigation overlay
   Design: Figma wtu9fpjCeFidOHbyJQ9Jit, frame 249:3 "Navbar Open" (1440x865).

   Shared by every page, so the menu is edited in ONE place.
   Brand tokens (--petrol-mid, --cyan, --ivory, …) come from each page's :root;
   only the values this component introduces are declared here.

   Measured from the frame: 64px frame padding · 553px portrait · 64px gap ·
   695px column · 72px between blocks · links 24/36 · labels 13/24 · contact 15/26.
   ========================================================================== */

.navmenu{
  /* geometry, in one place — the media queries below only change these */
  --nm-pad:64px;
  --nm-photo:553px;
  --nm-gap:64px;
  /* the three colours the frame introduces; documented in DESIGN.md */
  --nm-label:rgba(255,255,255,.55);
  --nm-link:rgba(150,227,241,.9);
  /* Figma has rgba(217,126,74,.8) here = 2.8:1 on petrol. These two lines are
     links, so they use the remedy already measured for this palette: 5.75:1. */
  --nm-contact:#EDA983;

  position:fixed;inset:0;z-index:100;
  background:linear-gradient(180deg,var(--petrol-mid),var(--petrol-deep));
  overflow-y:auto;
  overscroll-behavior:contain;
  outline:none;              /* it receives focus on open; the label is announced */
}
.navmenu[hidden]{display:none}
/* an animation rather than a transition, so it plays on display:none → block */
.navmenu:not([hidden]){animation:nm-fade .26s ease both}
@keyframes nm-fade{from{opacity:0}to{opacity:1}}

/* The portrait is a cut-out sitting straight on the petrol field and running off
   the bottom edge. Absolute, so it never adds scroll height to the overlay. */
.navmenu__figure{
  position:absolute;z-index:0;
  left:max(var(--nm-pad),calc(50% - 656px));
  top:var(--nm-pad);
  width:var(--nm-photo);
  height:calc(100vh - var(--nm-pad));
  height:calc(100dvh - var(--nm-pad));
  object-fit:cover;object-position:center top;
  pointer-events:none;user-select:none;
}

.navmenu__in{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:72px;
  max-width:1440px;margin:0 auto;min-height:100%;
  padding:var(--nm-pad);
  padding-left:calc(var(--nm-pad) + var(--nm-photo) + var(--nm-gap));
}

/* ---------- label rows ------------------------------------------------- */
.navmenu__label{
  margin:0;
  font-size:13px;font-weight:400;line-height:24px;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--nm-label);
}
.navmenu__top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;
}
.navmenu__close{
  display:grid;place-items:center;
  width:44px;height:44px;               /* 24px glyph, 44px target */
  margin:-10px -10px -10px 0;
  padding:0;background:none;border:0;
  color:var(--cyan);cursor:pointer;
}
.navmenu__close svg{width:24px;height:24px}

/* ---------- the pages -------------------------------------------------- */
.navmenu__links{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.navmenu__links a{
  font-size:24px;font-weight:300;line-height:36px;
  color:var(--nm-link);
  transition:color .18s ease;
}
.navmenu__links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.navmenu__links a:hover{color:var(--ivory)}

/* ---------- contact + social ------------------------------------------- */
.navmenu__block{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.navmenu__block--social{gap:16px}
.navmenu__contact{display:flex;flex-direction:column}
.navmenu__contact a{
  font-size:15px;line-height:26px;
  color:var(--nm-contact);
  transition:color .18s ease;
}
.navmenu__contact a:hover{color:var(--ivory);text-decoration:underline}
/* the social circles are the footer's .social component, unchanged */

/* ============================================================================
   Responsive. The frame is desktop-only, so below 980px the portrait steps out
   and the list takes the full width — the menu's job there is the list.
   ========================================================================== */
@media (max-width:1300px){
  .navmenu{--nm-pad:48px;--nm-photo:440px;--nm-gap:48px}
}
@media (max-width:980px){
  .navmenu{--nm-pad:32px}
  .navmenu__figure{display:none}
  .navmenu__in{padding-left:var(--nm-pad);gap:56px}
}
@media (max-width:640px){
  .navmenu{--nm-pad:22px}
  .navmenu__in{gap:44px}
  .navmenu__links a{font-size:22px;line-height:32px}
}

@media (prefers-reduced-motion:reduce){
  .navmenu:not([hidden]){animation:none}
}