/* appnav.css — sajtens toppmeny inne i webbappen (index.php): samma utseende som menyn i
   home.css, men allt ligger under .snav sa att webbappens egna .btn/.brand/a-regler i
   style.css inte krockar. Menyn ar statisk (inte fixed) och tar 64px ovanfor app-kortet. */
@font-face{font-family:"Sora";src:url(/fonts/sora-latin.woff2) format("woff2");font-weight:300 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";src:url(/fonts/cinzel-latin.woff2) format("woff2");font-weight:600 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.snav{--gold:#ffd76a;--dim:#bdb4d6;--mut:#8a82a6;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--ease:cubic-bezier(.2,.8,.2,1);
  --sans:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:"Cinzel","Trajan Pro",Georgia,serif;
  position:relative;z-index:60;margin:-12px -12px 12px;color:#f3effd;font:400 14px/1.4 var(--sans);-webkit-font-smoothing:antialiased;
  background:rgba(9,7,16,.86);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.snav *,.snav *::before,.snav *::after{box-sizing:border-box}
.snav .wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 24px}
.snav .nav-in{display:flex;align-items:center;gap:14px;height:64px}
.snav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:none}
.snav .brand img{width:40px;height:40px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.snav .brand-tx{display:flex;flex-direction:column;line-height:1.05}
.snav .brand-tx b{font:800 15.5px/1.1 var(--serif);letter-spacing:.02em;background:linear-gradient(180deg,#fff3c4,#ffc53d);-webkit-background-clip:text;background-clip:text;color:transparent}
.snav .brand-tx small{font-size:10.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.snav .nav-links{display:flex;gap:0;margin-left:auto}
.snav .nav-links a{padding:9px 6px;border-radius:10px;color:var(--dim);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:color .2s,background .2s}
.snav .nav-links a:hover,.snav .nav-links a[aria-current]{color:#fff;background:rgba(255,255,255,.06)}
.snav .nav-links .nav-m{display:none}
.snav .nav-cta{display:flex;align-items:center;gap:8px}
.snav .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border:0;border-radius:999px;
  font:700 13.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.snav .btn-ghost,.snav .btn-ghost:hover{border:0}
.snav .btn-ghost{color:var(--dim);background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.snav .btn-ghost:hover{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line2)}
.snav .btn-gold{color:#1b1204;background:linear-gradient(180deg,#ffe596,#ffc23a 52%,#ee9f16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(122,62,0,.35),0 0 0 1px rgba(255,214,120,.55),0 12px 34px -10px rgba(255,176,32,.65)}
.snav .btn-gold:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ffe596,#ffc23a 52%,#ee9f16)}

.snav .prog-link{--ph:38px;position:relative;display:inline-flex;align-items:center;gap:8px;height:var(--ph);padding:0 15px 0 6px;border-radius:999px;
  border:1.5px solid transparent;color:#fff;text-decoration:none;isolation:isolate;overflow:hidden;white-space:nowrap;
  background:linear-gradient(180deg,rgba(30,23,52,.95),rgba(13,10,24,.95)) padding-box,linear-gradient(115deg,#fff1c4,#ffc23a 30%,#a78bfa 68%,#22d3ee) border-box;
  box-shadow:0 10px 26px -14px rgba(255,176,32,.7),0 0 30px -16px rgba(167,139,250,.7);transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
.snav .prog-link:hover{transform:translateY(-2px);filter:brightness(1.08)}
.snav .prog-link::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:130% 0;animation:snavShine 6s ease-in-out infinite}
@keyframes snavShine{0%,72%{background-position:130% 0}100%{background-position:-130% 0}}
.snav .prog-ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#ffe596,#ffc23a 55%,#ee9f16);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 16px rgba(255,194,58,.5)}
.snav .prog-ic::before{content:"";width:14px;height:14px;background:#2a1a00;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E") center/contain no-repeat}
.snav .prog-tx{display:flex;flex-direction:column;line-height:1.1}
.snav .prog-tx b{font-size:13.5px;font-weight:800}

.snav .nav-burger{display:none;width:42px;height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.07);cursor:pointer;place-items:center;padding:0}
.snav .nav-burger span,.snav .nav-burger span::before,.snav .nav-burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;position:relative;transition:transform .3s,background .3s}
.snav .nav-burger span::before,.snav .nav-burger span::after{content:"";position:absolute;left:0}
.snav .nav-burger span::before{top:-6px}.snav .nav-burger span::after{top:6px}
.snav.open .nav-burger span{background:transparent}
.snav.open .nav-burger span::before{transform:translateY(6px) rotate(45deg)}
.snav.open .nav-burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1240px){
  .snav .nav-links{position:absolute;top:64px;left:12px;right:12px;display:none;flex-direction:column;gap:2px;padding:10px;border-radius:18px;
    background:rgba(12,9,22,.97);box-shadow:inset 0 0 0 1px var(--line2),0 30px 60px -20px rgba(0,0,0,.9)}
  .snav.open .nav-links{display:flex}
  .snav .nav-links a{padding:13px 14px;font-size:15px}
  .snav .nav-burger{display:grid}
  .snav .nav-cta{margin-left:auto}
}
@media (max-width:760px){
  .snav .wrap{padding:0 14px}
  .snav .nav-signin{display:none}
  .snav .nav-links .nav-m{display:block;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--gold)}
}
@media (max-width:520px){
  .snav .brand-tx small{display:none}
  .snav .brand-tx b{font-size:14px}
  .snav .prog-link{padding-right:5px;gap:0}
  .snav .prog-link .prog-tx{display:none}
  .snav .btn-gold{height:36px;padding:0 13px;font-size:12.5px}
}
@media (max-width:460px){.snav .brand-tx{display:none}}