/* ============================================================
   JUNO PORTALS · header-footer.css
   The site header, the menu behind the button, and the footer.

   Loaded last on every page (includes/site.php → head_assets), after
   styles.css (tokens), editorial.css and the page's own sheet. Uses
   the tokens only, no new colour, no new typeface.

   Markup: includes/header.php and includes/footer.php.
   Behaviour: js/nav.js.
   ============================================================ */

/* ---------- the header ----------
   The mark on the left, one button on the right, on every width.
   It scrolls away with the page, as before. */
.site-header{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);
  padding:calc(var(--s-3) + env(safe-area-inset-top)) var(--pad) var(--s-3);
  background:var(--color-background);
  border-bottom:1px solid var(--color-line-soft);
}
.site-brand{display:inline-flex;min-width:0;flex:0 1 auto}

/* the mark · the same size as before on every page */
.site-header .brandmark{
  display:block;height:90px;max-width:100%;
  object-fit:contain;object-position:left center;
}
@media (min-width:700px){
  .site-header .brandmark{max-width:46vw}
}

/* ---------- the button ----------
   Two hairlines. 44px to touch, the lines themselves aligned with
   the right edge of the page. */
.nav-toggle,.nav-close{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;padding:0;
  background:none;border:0;border-radius:0;
  color:var(--color-text);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-icon{
  position:relative;display:block;width:24px;height:9px;
  border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transition:width .2s ease;
}
.nav-toggle:hover .nav-icon{width:20px}

/* the close mark · the same two lines, crossed */
.nav-icon--close{border:0;height:24px}
.nav-icon--close::before,.nav-icon--close::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:1.5px;margin-top:-.75px;background:currentColor;
}
.nav-icon--close::before{transform:rotate(45deg)}
.nav-icon--close::after{transform:rotate(-45deg)}

.nav-toggle:hover,.nav-close:hover{color:var(--color-accent)}
.nav-toggle:focus-visible,.nav-close:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:3px;
}

/* ---------- the menu ----------
   A panel from the right. Half the window on a desktop, the whole
   screen on a phone. What is behind it goes dark, and a click on the
   dark part closes it. */
.site-menu{
  position:fixed;inset:0;z-index:1000;
  background:rgba(21,19,19,0);
  transition:background-color .3s ease;
}
.site-menu[hidden]{display:none}
.site-menu.is-open{background:rgba(21,19,19,.45)}

.site-menu-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:100%;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--color-background);color:var(--color-text);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.site-menu.is-open .site-menu-panel{transform:none}

/* the page behind it stays where it was */
html.nav-open,html.nav-open body{overflow:hidden}

.site-menu-top{border-bottom-color:transparent}

.site-menu-nav{
  width:100%;
  padding:var(--s-4) var(--pad) 0;
}
.site-menu-list{list-style:none;margin:0;padding:0}
.site-menu-list li{margin:0}
.site-menu-list a{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--color-line-soft);
  font-family:var(--font-display);letter-spacing:-0.04em;
  text-transform:uppercase;line-height:1.05;
  font-size:clamp(34px,9vw,60px);
  color:var(--color-text);text-decoration:none;
  transition:color .2s ease;
}
.site-menu-list li:first-child a{border-top:1px solid var(--color-line-soft)}
.site-menu-list a:hover,
.site-menu-list a:focus-visible,
.site-menu-list a[aria-current]{color:var(--color-accent)}
.site-menu-list a:focus-visible{outline:none}

/* the small MAG mark beside its name */
.site-menu-mark{
  display:block;height:.9em;width:auto;
  object-fit:contain;
}

/* Instagram, quiet, at the foot */
.site-menu-foot{
  margin-top:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-4);
  padding:var(--s-6) var(--pad) calc(var(--s-5) + env(safe-area-inset-bottom));
}
.site-menu-foot a{
  min-height:44px;display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-text);text-decoration:none;
}
.site-menu-foot a:hover,.site-menu-foot a:focus-visible{color:var(--color-accent)}
.site-social img{display:block;width:20px;height:20px;opacity:.75;transition:opacity .2s}
.site-social:hover img,.site-social:focus-visible img{opacity:1}

/* from a tablet up · half the window, a smaller type, and the panel's
   own top row keeps only the close button */
@media (min-width:700px){
  .site-menu-panel{
    width:max(440px,50vw);
    box-shadow:-1px 0 0 var(--color-line-soft);
  }
  .site-menu-top .site-brand{visibility:hidden}
  .site-menu-nav{padding-top:var(--s-3);padding-right:var(--s-6)}
  .site-menu-list a{font-size:clamp(26px,2.4vw,36px);padding:var(--s-3) 0}
}

/* ---------- the footer ----------
   Layout comes from .about-footer in editorial.css. The two groups
   disappear into it on a desktop, so the row looks as it did. */
.site-footer-nav,.site-footer-meta{display:contents}
.site-footer a[aria-current]{color:var(--color-accent)}
.footer-social{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.footer-social img{display:block;width:20px;height:20px;opacity:.75;transition:opacity .2s}
.footer-social:hover img,.footer-social:focus-visible img{opacity:1}

/* the phone · two columns of names, then one quiet line apart:
   the documents on the left, Instagram on the right */
@media (max-width:639px){
  .site-footer{display:block}
  .site-footer-nav{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:var(--s-4);
  }
  .site-footer-nav a{min-height:40px}
  .site-footer-meta{
    display:flex;align-items:center;gap:0 var(--s-4);
    margin-top:var(--s-4);padding-top:var(--s-2);
    border-top:1px solid var(--color-line-soft);
  }
  .site-footer-meta .footer-legal{
    font-size:10px;color:var(--color-disabled);
  }
  .site-footer-meta .footer-social{order:2;margin-left:auto;margin-right:-12px}
}

/* ---------- the phone ---------- */
@media (max-width:639px){
  .site-header{
    padding-top:calc(18px + env(safe-area-inset-top));
    padding-bottom:14px;
  }
  .site-header .brandmark{width:min(200px,56vw);height:auto}
}

@media (prefers-reduced-motion:reduce){
  .site-menu,.site-menu-panel,.site-menu-list a,.nav-icon{transition:none}
}