/* Registrera din egna font */


html {
  box-sizing: border-box;
   font-family: Helvetica, arial, sans-serif;

  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

header {
  
  color: #333;
  z-index: 2;
  top: 5px;
  position: sticky;
  display: flex;
  justify-content: space-between;
  padding:0% 5%;
  align-items: center;
}

/* Göm mobilmenyn på desktop helt och hållet */
.mobil-meny {
  display: none;
}

.lista {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 5%;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  backdrop-filter: blur(0.5px); 
 

}

.lista.visible {
  transform: translateY(0);
 
}
.lista h3 {
  margin: 0;
  
  font-weight: 200;
}

.lista h3 a {
  color: #3c6996;
  text-decoration: none;
  
}
.lista ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
    font-weight: 200;
}



.lista a:hover {
 
  text-decoration: underline;
}
/* Huvudbehållare för introt - lägger bild och text bredvid varandra */
.intro {
  display: flex;
  align-items: flex-start; /* Justerar topparna jämnt så vi kan dra upp texten */
  gap: 2rem;
  width: 100%;
  margin-left: 0;          /* Nollställs om du inte vill ha negativ marginal här */
  margin-bottom: 8rem;
}

/* Porträttbilden till vänster utan extra marginaler */
.intro-img {
  width: 50%;
  height: auto;
  margin: 0 !important;    /* Tar bort globala bildmarginaler */
 padding-bottom: 8rem;
  display: block;
  
}

/* Höger kolumn - staplar header.svg och pilen vertikalt */
.intro-text {
  display: flex;
  flex-direction: column;  /* Staplar innehållet i en kolumn */
  align-items: flex-start; /* Vänsterställer bilden och pilen */
  max-width: 30rem;
  width: 50%;
  margin-top: 15%;       /* DRAR UPP header.svg och pilen högre upp */
  margin-right: 5%;
}

/* Header-bilden längst upp i högerkolumnen */
.intro-header-img {
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding-bottom: 2rem !important; /* Avstånd ner till pilen */
 
}

/* Länk och pil under header.svg */
.intro-text a {
  display: inline-block;
  line-height: 0;

}

.intro-arrow {
  width: 5rem;            /* Fast/lagom storlek på pilen */
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.2s ease;
}

.intro-text a:hover .intro-arrow {
  transform: translateY(3px); /* Mjuk rörelse nedåt vid hover */
}

body {
  margin: 0;
  background-color: #f5f5f5;
  color: #333;
  font-family: sans-serif;
  min-height: 100vh;
  line-height: 1.2;
  
  /* Ger en mjuk övergång när JS ändrar bakgrundsfärgen */
 transition: background-color 1.2s ease;
}

/* Se till att även textfärgen och loggan ändras i samma långsamma tempo */
body.dark-bg header,
body.dark-bg .lista h3,
body.dark-bg .lista li a,
body.dark-bg h3,
body.dark-bg h4,
body.dark-bg p,
body.dark-bg a,
body.dark-bg li,
body.dark-bg ul {
  color: #ffffff;
  transition: color 1.2s ease; /* Matchar 1.2s */
}

body.dark-bg .logo-img {
  filter: invert(1);
  transition: filter 1.2s ease; /* Matchar 1.2s */
}

.intro-text img {
  max-width: 30rem;
  display: block;
  margin: left;
   
  
  
}

main {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;

}

.prislista {
  list-style: none; /* Tar bort punkterna */
  padding-left: 0;   /* Tar bort indraget till vänster */
  margin-left: 0;    /* Säkerställer att ingen marginal trycker in texten */
   
}

.prislista li {
  display: flex;
  justify-content: space-between;
  max-width: 300px;  /* Justera bredden för att välja avståndet till priset */
}
.pris{
  max-width: 28rem;
  padding-bottom: 3rem;
}

.text-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 7rem;
}

.text-row:nth-child(odd) {
  justify-content: flex-end;
}

.text-row:nth-child(even) {
  justify-content: flex-start;
}

.text-row h3 {
  margin: 0;
  width: 12rem;
  flex-shrink: 0;
  transition: color 0.4s ease;
}

.textbox {
  max-width: 28rem;
  width: 100%;
  padding: 2.5rem;
 
}

.textbox2 {
  display: flex;
  align-items: start;        /* Centrerar elementen vertikalt */
  justify-content: center;   /* Håller hela paketet centrerat */
  gap: 2.5rem;                /* Avstånd mellan textrutorna och bilden */
  width: 100%;
  max-width: 75rem;           /* Bredd så att 3 kolumner får bra med plats */
  margin: 0 auto 5rem auto;   /* Centrerar behållaren horisontellt på sidan */
  padding-top: 10rem;
}

/* Vänster textspalt */
.textbox2 .text-left {
  flex: 1;
  font-size: clamp(1.1rem, 2vw, 4rem);
  text-align: right;           /* Textjustering: align start (vänster) */
  max-width: 30rem;
  font-weight: 200;
}

/* Bilden i mitten */
.textbox2 img {
  width: 25rem;
  max-width: 30%;
  height: auto;
  flex-shrink: 0;             /* Förhindrar att bilden trycks ihop */
  margin: 0 !important;
  border-radius: 0.2rem;
}



button {
  cursor: pointer;
}

h3 {
  font-size: 2rem;
font-weight: 200;
scroll-margin-top: 12rem;
 transition: color 0.4s ease;

}

h4 {
  font-size: 1.5rem;
  font-weight: 200;
  color: #0b2136;
}

a {
  color: inherit;
  text-decoration: none;
}

.citat {
  text-align: center;
  max-width: 37rem;
  min-width: 20rem;
  display: block;
  margin: auto;
  font-weight: 200;
}

/* Nätet som fördelar rutorna jämnt i 4 kolumner */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 exakt lika breda kolumner */
  gap: 30px;                             /* Jämnt avstånd mellan alla rutor */
  width: 100%;                           /* Tar upp hela tillgängliga bredden */
}

/* Rensa h3 så den inte förstör griddets layout */
.equipment-grid h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.3rem;
  font-weight: 200;

}

/* Styling för varje enskild ruta */
.equipment-card {

  border-radius: 8px;
  padding: 20px;
  height: 100%;       /* Tvingar alla rutor i samma rad att bli lika höga */
  box-sizing: border-border;

}




/* Skapa en osynlig skroll-tidslinje från Spotify-elementet */
.spotify-trigger {
  view-timeline-name: --spotify-scroll-timeline;
  padding-bottom: 2rem;
  padding-top: 2rem;
}



/* Enkel styling för spelaren så den smälter in i den nya bakgrunden */
.spotify-container {
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0.2, 0);
}

.spotify-container iframe {
  display: block;
  width: 100%;
  height: 552px;
  border: none;
}

#topBtn {
  position: fixed;
  bottom: 1rem;
  right: -0.5rem;
  z-index: 9999;
  background: transparent;
  padding: 0;
 
  cursor: pointer;
  
  /* GÖMD SOM STANDARD (INTROT): */
  opacity: 0;
  pointer-events: none;       /* Gör att man inte kan klicka på knappen när den är osynlig */
  transform: translateY(10px); /* Liten förskjutning nedåt när den är gömd */
  
  transition: opacity 0.3s ease, transform 0.3s ease;

 

}
#topBtn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  
  /* Rensa bort webbläsarens standard-ram och bakgrund helt */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;

  /* Gömd som standard */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#topBtn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#topBtn img {
  /* Använd fast bredd istället för % så att knappen inte blir en stor tom ruta */
  width: 3.5rem; 
  height: auto;
  display: block;
  transition: filter 0.4s ease;
}

#topBtn.visible:hover {
  transform: translateY(-3px);
}

body.dark-bg #topBtn img {
  filter: invert(1);
}

  .site-footer {
  text-align: center;
  padding: 4rem 4rem 1rem 4rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* Container för ikoner och rubrikbild */
.footer-icons {
  position: relative; /* Gör det möjligt att placera textbilden exakt */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  margin-top: 2rem; /* Extra utrymme ovanför för att ge plats åt "kontakt"-bilden */
}

/* Handritad "kontakt"-bild placerad ovanför, snett till vänster */
.footer-label {
  position: absolute;
  bottom: 100%;       /* Placerar bilden ovanför ikonerna */
  left: 41%;          /* Justerar positionen något till vänster om mitten (justera vid behov) */
  transform: translateX(-50%); /* Centrerar baserat på utgångspunkten */
  width: 200px;        /* Justera storleken så den passar din bild */
  height: auto;
  pointer-events: none; /* Gör så att bilden inte täcker klickytan för ikonerna */
}

/* Smidig övergång för animationen */
.footer-icons a {
  display: inline-flex;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-icons a:hover {
  transform: translateY(-2px);
}

.footer-icon {
  width: 55px;
  height: 55px;
  display: block;
}

.site-footer p {
  font-size: 0.85rem;
  color: #333;
  font-weight: 200;
  margin: 0;
}

/* Ändrar linjen överst när bakgrunden blir blå */
body.dark-bg .site-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

  ::selection {
  background-color: #3c6996;
  color: white;
}

/* För surfplattor och mobil */
 @media (max-width: 1000px) {
    .equipment-grid {

      grid-template-columns: repeat(2, 1fr); /* 2x2 rutor på surfplattor */
    }
  }



@media (max-width: 750px) {

  main {
  display: flex;
  flex-direction: column;
  padding: 0 2.5rem 0 2.5rem;
  padding-top: 0;
}
}

@media (max-width: 768px) {

  .intro {
    position: static;
    display: flex;
    flex-direction: column;   /* Staplar bilden överst och texten under */
    align-items: center;
    width: 100%;
    min-height: auto;
    margin-bottom: 1.5rem;      /* Avstånd ner till mobilmenyn */
    overflow: visible;
    margin-top: 10%;
  }

  /* 2. Porträttbilden hamnar överst */
  .intro-img {
    position: static;         /* Tar bort absolut positionering */
    transform: none;          /* Tar bort centeringstrick */
    width: 80% !important;
    height: auto;
    opacity: 1;               /* Behöver inte vara genomskinlig längre */
    padding: 0 !important;
    
    
  }

  /* 3. Loggan och pilen hamnar direkt under porträttet */
  .intro-text {
    position: static;
    display: flex;

    align-items: left;
    justify-content: start;
   
    width: 80% !important;
    
    margin: 0 !important;
    padding: 0 !important;    /* ALLA 53vh/32vh-paddings tas bort helt */
  }

  .intro-header-img {
    width: 90% !important;
    height: auto;
    padding-bottom: 0 !important;
    margin: 0 !important;
     display: none !important;
  }

  .intro-arrow {
    
  display: none !important;
  }



/* 1. Göm listan i den sticky headern på mobil */
  .lista ul.desktop-lista {
    display: none !important;
  }

.mobil-meny {
    display: block;
    width: 100%;
    padding: 0 10%;
    margin-bottom: 4.5rem;
  }

  .mobil-meny ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    display: flex;
    flex-direction: column;
    align-items: flex-end;     /* Flyttar alla länkar till högerkanten */
    gap: 0.9rem;                /* Luftigt vertikalt avstånd */
  }

  .mobil-meny li {
    font-size: 1.1rem;
    font-weight: 200;
    letter-spacing: 0.03em;
    text-align: right;
  }

  .mobil-meny a {
    text-decoration: underline;
    text-underline-offset: 4px; /* Flyttar ner understrecket lite för elegantare känsla */
    color: inherit;
    display: inline-block;
  }


  .spotify-container iframe {
    height: 452px; /* Spotifys medelstora kompakta spelare */
    width: 100%;
  }

  .text-row {
    display: flex;
    flex-direction: row;       /* Behåller dem sida vid sida */
    align-items: flex-start;
    justify-content: flex-start !important; /* Förhindrar att varannan rad flyttas till höger */
    gap: 1rem;                 /* Litet, exakt avstånd mellan rubrik och text */
    width: 100%;
    margin-bottom: 3rem;
    padding-top: 0;
  }

  /* Minska rubrikens bredd så att texten får betydligt mer plats */
  .text-row h3 {
    width: 5.5rem;             /* Minskad från 12rem till 6.5rem */
    font-size: 1.1rem;         /* Något mindre font för att ord inte ska huggas av */
    flex-shrink: 0;            /* Förhindrar att rubriken trycks ihop ytterligare */
  }

  /* Ge textrutan allt resterande utrymme */
  .textbox {
    flex: 1;                   /* Tar upp allt utrymme som blir över */
    width: auto;
    max-width: 100%;
    padding: 0;
  }

h3 {
  font-size: 1.5rem;
  padding: 0;
  
}

  .textbox2 {
    display: flex !important;       /* Tvingar flexbox-kontext */
    flex-direction: column;         /* Staplar innehållet vertikalt */
    align-items: center;            /* Centrerar elementen */
    text-align: left;
    padding-top: 3rem;
  }

.textbox2 .text-left {
    width: 90%;
     text-align: left;   
}

  .textbox2 img {
    order: -1;                      /* Lägger bilden överst i stapeln */
    width: 100%;
    max-width: 20rem;               /* Förhindrar att bilden tar över hela skärmen */

  }

.pris {
    display: block;
    width: 100%;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding-bottom: 2rem;
  }

  /* Nollställ indraget på listan inuti prisrutan */
  .pris ul {
    padding-left: 0 !important; /* Tar bort det tomma utrymmet till vänster */
    margin-left: 0 !important;
    list-style-type: none;
  }

/* Gör om nätet till en vertikal lista med kort */
  .equipment-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;                 /* Avstånd mellan varje utrustningskategori */
    width: 100%;
  }

  /* Gör varje kort till en horisontell rad (likt .text-row) */
  .equipment-card {
    display: flex;
    flex-direction: row;       /* Rubrik och lista bredvid varandra */
    align-items: flex-start;
    gap: 1.2rem;                 /* Samma avstånd som i .text-row */
    padding: 0;   
    padding-top: 1.5rem;               /* Tar bort kortets padding för renare look */
    width: 100%;
  }

  /* Matcha bredd och stil på rubriken (h4) med h3 i .text-row */
  .equipment-card h4 {
    width: 6.5rem;             /* Exakt samma bredd som h3 i text-row */
    font-size: 1.2rem;
    margin: 0;
    flex-shrink: 0;            /* Låser bredden på vänsterkolumnen */
  }

  /* Ge listan allt resterande utrymme till höger */
  .equipment-card ul {
    flex: 1;                   /* Fyller ut högerkolumnen */
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .equipment-card li {
    padding: 3px 0;
    border-bottom: 1px solid #eef0f2;
    font-size: 0.95rem;
  }

  body.dark-bg .equipment-card li {
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }

  .citat {
    padding-right: 7%;
    padding-left: 7%;
  }

  .footer-label {
  position: absolute;
  bottom: 90%;       /* Placerar bilden ovanför ikonerna */
  left: 25%;          /* Justerar positionen något till vänster om mitten (justera vid behov) */
  transform: translateX(-50%); /* Centrerar baserat på utgångspunkten */
  width: 170px;        /* Justera storleken så den passar din bild */
  height: auto;
  pointer-events: none; /* Gör så att bilden inte täcker klickytan för ikonerna */
}

}