/* Mesheract shell: the parts of the header and footer that every Mesheract
 * page shares (templates/mesheract/_nav.html, _footer.html). Loaded by
 * base.html, index_mesheract.html and program_mesheract.html after their own
 * styles. Uses tokens.css; the homepage's inline :root supplies the same
 * names, so the pixel look carries through. */

/* header: more links than fit on a narrow desktop wrap onto a second row
   (right-aligned) instead of pushing the page sideways */
@media (min-width: 601px) {
    .top nav { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--sp-2, 8px); }
}

/* footer: labelled groups, links stacked */
.mx-foot { padding: 48px 0 70px; border-top: 1px solid var(--line); margin-top: 24px; }
.mx-foot__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
.mx-foot__head { margin: 0 0 6px; color: var(--gold); font-size: .66rem; letter-spacing: .2em; }
.mx-foot ul { list-style: none; margin: 0; padding: 0; }
.mx-foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; text-decoration: none; letter-spacing: .2em; font-size: .72rem; }
.mx-foot a:hover, .mx-foot a:focus-visible { color: var(--gold); }
.mx-foot a .fa-solid, .mx-foot a .fa-brands { font-size: .9em; opacity: .8; }

@media (max-width: 760px) {
    .mx-foot__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .mx-foot { padding: 40px 0 56px; }
    .mx-foot a { min-height: 44px; }
}
.mx-foot .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 601px) { .top nav a { white-space: nowrap; } }