/* The same on every page: the menu, the menu on a phone and the footer. Loaded after side.css */

/* Top */
.nav nav a[aria-current="page"]{background:rgba(127,127,127,.16)}
.meny-knapp{display:none;align-items:center;gap:9px;height:40px;padding:0 13px 0 14px;border:0;border-radius:10px;background:rgba(127,127,127,.16);color:inherit;font:500 15px/1 var(--sans);cursor:pointer}
.meny-knapp i{position:relative;display:block;width:16px;height:11px}
.meny-knapp i::before,.meny-knapp i::after{content:"";position:absolute;left:0;right:0;height:1.7px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.3,.8,.3,1),top .3s cubic-bezier(.3,.8,.3,1)}
.meny-knapp i::before{top:1.5px}
.meny-knapp i::after{top:7.8px}
.meny-apen .meny-knapp i::before,.meny-apen .meny-knapp i::after{top:4.65px;transform:rotate(45deg)}
.meny-apen .meny-knapp i::after{transform:rotate(-45deg)}
/* With the menu open the top is dark, whatever is under it */
.meny-apen .nav,.meny-apen .nav.lys,.meny-apen .nav.pa-lime{color:var(--tekst);background:rgba(20,21,23,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.meny-apen .nav .knapp.liten{visibility:hidden}
.meny-apen .nav #logo circle{fill:var(--lime)}

/* The menu on a phone: a dark sheet under the top, the links come in one after the other */
.meny{position:fixed;inset:0;z-index:19;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:96px 20px calc(26px + env(safe-area-inset-bottom));background:var(--natt);background-image:radial-gradient(circle,rgba(198,244,50,.32) 1px,transparent 1.6px);background-size:10px 10px;color:var(--tekst);opacity:0;transition:opacity .35s;overflow-y:auto;overscroll-behavior:contain}
.meny::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--natt) 30%,rgba(8,9,10,.86))}
.meny{isolation:isolate}
/* Closed, it is gone: display on .meny would otherwise beat [hidden], and the invisible sheet would take every click */
.meny[hidden]{display:none}
.meny.vis{opacity:1}
.meny nav{display:flex;flex-direction:column}
.meny nav a{display:flex;align-items:baseline;padding:13px 0 12px;border-bottom:1px solid var(--strek);font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.035em;opacity:0;transform:translateY(16px);transition:transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 40ms),opacity .45s calc(var(--i) * 40ms)}
.meny.vis nav a{opacity:1;transform:none}
.meny nav a[aria-current="page"]::after{content:"";width:.2em;height:.2em;margin-left:.1em;border-radius:50%;background:var(--lime)}
.meny-bunn{display:flex;align-items:center;gap:20px;opacity:0;transition:opacity .45s .3s}
.meny.vis .meny-bunn{opacity:1}
.meny-bunn .knapp{height:52px;padding:0 24px}
.meny-inn{font-weight:500;font-size:16px}

/* Footer: about, three columns of links, a line, and the big mark cut by the bottom of the page */
.fot{padding-top:clamp(60px,10vh,104px)}
/* On the front page the lime is drawn with dots under it. The small text gets a calm ground that fades in */
.fot{background:linear-gradient(rgba(198,244,50,0),var(--lime) 120px)}
.fot-topp{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:40px 32px;padding-bottom:52px}
.fot-logo{display:inline-block}
.fot-logo svg{display:block;height:28px;width:auto}
.fot-om p{margin-top:18px;max-width:28em;font-size:15.5px;line-height:1.5;color:rgba(17,18,20,.74)}
.fot-om .fot-kontakt{margin-top:14px;color:var(--blekk)}
.fot-kontakt a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fot-kol{display:flex;flex-direction:column;align-items:flex-start;gap:11px;font-size:15.5px;font-weight:500}
.fot-kol a{transition:opacity .2s}
.fot-kol a:hover{opacity:.62}
.fot-h{margin-bottom:5px;font-size:14px;font-weight:400;color:rgba(17,18,20,.6)}
.fot-rad span{font-weight:400}

/* Pages other than the front page have no WebGL ground, so the lime is a colour */
.under .fot{background:var(--lime)}

@media (max-width:1100px){
  .fot-topp{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fot-om{grid-column:1/-1}
}
/* The menu needs room in the middle: below 880 px the links go into the menu */
@media (max-width:880px){
  .nav nav,.nav .inn{display:none}
  .meny-knapp{display:inline-flex}
}
@media (max-width:760px){
  .nav{gap:8px}
  .fot{padding-top:64px}
  .fot-topp{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px;padding-bottom:40px}
  .fot-rad{flex-direction:column;gap:6px;font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .meny,.meny nav a,.meny-bunn{transition:none}
}