/* ============================================================
   GP Digitalbyrå — komponenter
   Topp, knappar, cursor, kortstomme
   ============================================================ */

/* ---------- Toppen: frostad list i Rolls-Royce-anda ----------
   Fast, halvgenomskinlig morkbla list med blur och en harfin violett
   underkant. Tre zoner: MENY-knappen till vanster, loggan centrerad,
   KONTAKT till hoger. Blir nagot tatare nar sidan rullats (.topp--rullad,
   satts i js/meny.js). */
.topp {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.9rem;
  padding: 0.65rem var(--marginal);
  /* Hogst upp: helt genomskinlig, ingen linje — loggan och orden ligger direkt
     mot stjarnhimlen. Listen tonar in forst nar man borjat rulla (.topp--rullad). */
  background: rgba(22, 24, 38, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  border-bottom: 1px solid rgba(145, 132, 217, 0);
  box-shadow: 0 12px 40px rgba(8, 9, 18, 0);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease), -webkit-backdrop-filter 0.5s var(--ease);
}
.topp--rullad {
  background: rgba(19, 21, 34, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: rgba(145, 132, 217, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 44px rgba(8, 9, 18, 0.4);
}
/* Nar helskarmsmenyn ar oppen ligger listen kvar ovanpa, utan skugga */
html.meny-oppen .topp { background: transparent; box-shadow: none; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Etikettstilen som delas av MENY och KONTAKT: glesade Inter-versaler */
.meny-knapp__ord, .topp__kontakt {
  font: 600 0.74rem/1 var(--etikett);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ---------- Loggan, centrerad ----------
   Kundens 3D-rendering + wordmark, absolut mittad i listen. */
.topp__marke {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  text-decoration: none;
}
.gp3d { width: clamp(50px, 3.2rem + 1vw, 66px); flex: none; display: block; }
.gp3d img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.ordmarke { display: inline-flex; align-items: center; }
.ordmarke img { height: clamp(20px, 1.05rem + 0.55vw, 26px); width: auto; display: block; user-select: none; -webkit-user-select: none; }

/* ---------- MENY-knappen ----------
   Tre lila streck + ordet MENY. Oppet lage: strecken blir ett kryss och
   ordet byts till STANG. Ligger over helskarmsmenyn (js/meny.js). */
.meny-knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 0.3rem 0 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 120;
}
.meny-knapp__streck {
  width: 28px; height: 44px;
  display: grid;
  place-items: center;
}
.meny-knapp i {
  grid-area: 1 / 1;
  display: block;
  width: 24px; height: 2px;
  background: var(--violett);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  box-shadow: 0 0 10px rgba(145, 132, 217, 0.45);
}
.meny-knapp i:nth-child(1) { transform: translateY(-7px); }
.meny-knapp i:nth-child(3) { transform: translateY(7px); }
.meny-knapp:hover i { box-shadow: 0 0 16px rgba(145, 132, 217, 0.75); }
.meny-knapp--oppen i:nth-child(1) { transform: rotate(45deg); }
.meny-knapp--oppen i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.meny-knapp--oppen i:nth-child(3) { transform: rotate(-45deg); }
.meny-knapp__ord { display: grid; transition: color 0.3s var(--ease); }
.meny-knapp__ord span { grid-area: 1 / 1; transition: opacity 0.3s var(--ease), translate 0.3s var(--ease); }
.meny-knapp__ord span:nth-child(2) { opacity: 0; translate: 0 6px; }
.meny-knapp--oppen .meny-knapp__ord span:nth-child(1) { opacity: 0; translate: 0 -6px; }
.meny-knapp--oppen .meny-knapp__ord span:nth-child(2) { opacity: 1; translate: 0 0; }
.meny-knapp:hover .meny-knapp__ord { color: var(--text); }

/* ---------- KONTAKT till hoger ---------- */
.topp__kontakt {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0 0 0.3rem;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.topp__kontakt svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--violett);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(145, 132, 217, 0.45));
  transition: filter 0.3s var(--ease);
}
.topp__kontakt:hover { color: var(--text); }
.topp__kontakt:hover svg { filter: drop-shadow(0 0 12px rgba(145, 132, 217, 0.8)); }

@media (max-width: 639px) {
  .topp { min-height: 4rem; gap: 0.6rem; }
  .ordmarke { display: none; }                 /* bara 3D-loggan i mitten pa mobil */
  .gp3d { width: 46px; }
  .topp__kontakt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* bara ikonen, texten kvar for skarmlasare */
  .topp__kontakt { padding: 0 0.2rem; }
  .meny-knapp { gap: 0.55rem; }
}

/* ---------- Helskarmsmenyn ----------
   Overlayen tonar in/ut med CSS. Lankarna och e-postraden flygs in av GSAP
   (js/meny.js, "inflygningen") — darfor har de INGA CSS-overgangar pa
   opacity/transform/filter, bara pa farg. Startlaget (osynliga lankar)
   galler bara under html.js-rorelse; utan GSAP eller med reducerad rorelse
   plockar meny.js/motion.js bort klassen och allt syns direkt med overlayen. */
.meny {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 5rem var(--marginal) 4rem;
  overflow: clip;                        /* klipper lankarna nara kanten under inflygningen, utan att bli en rullyta */
  background: rgba(22, 24, 38, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.meny--oppen {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s;
}
.meny__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;                                /* avstandet ligger i lankarnas padding */
  text-align: center;
}
.meny__lista a {
  display: inline-block;
  padding: 0.45rem 0.9rem;              /* klickyta >= 44 px pa mobil */
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);   /* mindre — alla sju ska rymmas utan scroll */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s var(--ease);   /* bara farg — lage, opacitet och oskarpa ags av GSAP */
}
.meny__lista a:hover, .meny__lista a[aria-current] { color: var(--violett); }
/* Violett punkt: direkt vid hover. Vid aktuell sida blommar den upp allra
   sist — .meny--landad satts av tidslinjen i meny.js nar allt landat.
   Utan inflygning (ingen GSAP / reducerad rorelse) syns den direkt. */
.meny__lista a::after {
  content: ".";
  display: inline-block;
  transform-origin: 50% 100%;           /* punkten vaxer upp fran baslinjen, sjunker inte ner pa den */                /* sa att punkten kan skalas */
  color: var(--violett);
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.3s var(--ease), scale 0.4s var(--ease);
}
.meny__lista a:hover::after,
.meny--landad .meny__lista a[aria-current]::after,
html:not(.js-rorelse) .meny__lista a[aria-current]::after { opacity: 1; scale: 1; }
.meny__fot {
  position: absolute;
  left: 0; right: 0; bottom: 2.2rem;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  font: 600 0.76rem/1 var(--etikett);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--damp);
}
.meny__fot a { display: inline-block; padding: 1rem 0.5rem; color: inherit; text-decoration: none; }  /* >= 44 px klickyta */
.meny__fot a:hover { color: var(--text); }
/* Startlage for inflygningen: med GSAP och utan reducerad rorelse ar
   lankarna och e-postraden osynliga tills meny.js flyger in dem. */
@media (prefers-reduced-motion: no-preference) {
  html.js-rorelse .meny__lista a,
  html.js-rorelse .meny__fot { opacity: 0; }
}
/* Lasa sidan bakom */
html.meny-oppen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .meny, .meny__lista a, .meny__lista a::after, .meny-knapp i { transition: none; }
  .meny__lista a::after { scale: 1; }
}
/* Textlank med linje som ritas fran vanster */
.lank {
  position: relative;
  text-decoration: none;
  padding-bottom: 0.1em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease);
}
.lank:hover, .lank:focus-visible { background-size: 100% 1px; }

/* ---------- Egen cursor: violett prick + slapande ring ---------- */
.pekare {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
}
.pekare__prick {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--violett);
}
.pekare__ring {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--glow);
  border-radius: 50%;
  will-change: translate;
  transition: translate 0.22s cubic-bezier(0.22, 1, 0.36, 1), scale 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pekare[data-lage="lank"] .pekare__ring { scale: 1.6; border-color: var(--violett); }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.har-pekare, body.har-pekare a, body.har-pekare button { cursor: none; }
}


/* Smala skarmar: loggan och wordmarket krymper */
@media (max-width: 559px) {
  .topp { gap: 0.6rem; }
  .ordmarke { margin-left: 0.4rem; }
  .ordmarke img { height: 15px; }
}

/* ---------- Cookie-bannern (js/cookies.js) ----------
   Mork panel langst ner, tva LIKA stora och lika tydliga knappar.
   Google Analytics laddas bara efter "Acceptera". */
.kakor {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 130;
  width: min(100% - 2rem, 44rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  padding: 1.1rem 1.4rem;
  background: var(--yta-mork);
  color: var(--text-2);
  box-shadow:
    inset 0 0 0 1px var(--linje),
    0 0 24px rgba(145, 132, 217, 0.22),
    0 0 70px rgba(145, 132, 217, 0.14),
    0 1rem 3rem rgba(0, 0, 0, 0.45);
  translate: -50% 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease), visibility 0s linear 0.4s;
}
.kakor--synlig {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease), visibility 0s;
}
.kakor__text { margin: 0; flex: 1 1 22rem; font-size: var(--t-liten); line-height: 1.55; }
.kakor__text a { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; }
.kakor__text a:hover { color: var(--violett); }
.kakor__val { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; flex: 0 0 auto; }  /* tva exakt lika breda kolumner */
/* Bada knapparna delar exakt samma stil och storlek — ingen ar mer framtradande */
.kakor__knapp {
  min-width: 7.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--violett);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 600 0.76rem/1 var(--etikett);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.kakor__knapp:hover, .kakor__knapp:focus-visible { background: var(--violett); color: #14121F; outline: none; }
.kakor__knapp:focus-visible { box-shadow: 0 0 0 3px rgba(145, 132, 217, 0.4); }
@media (max-width: 560px) {
  .kakor__val { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kakor { transition: none; } }