@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap");

/* =========================
   RESET
========================= */
* { box-sizing: border-box; }

/* ===== CARETS ===== */

.caret{
  display:inline-block;        /* viktigt */
  margin-left:8px;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}


.nav-with-caret{
  display:inline-flex;
  align-items:center;
}

/* desktop hover */
@media (min-width:1151px){
  .nav-with-caret:hover .caret{
    transform: rotate(180deg);
  }
}

/* mobil toggle */
@media (max-width:1150px){
  .nav-with-caret.open .caret{
    transform: rotate(180deg);
  }
}

/* =========================
   TOPNAV – BAS
========================= */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background: #282A35;
  display: flex;
  align-items: center;
  font-family: 'Source Sans Pro', sans-serif;
  z-index: 10001;
}

.topnav a {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;              /* ← BEVARAD */
  color: #d0d0d0;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;

}

.topnav a:hover,
.topnav a.active {
  background: #191D26;
  color: #fff;
}



@media (min-width: 1000px) and (max-width: 1300px) {
  .topnav a:not(.smallmenu) {
    font-size: 12px !important;
  }
}

@media (min-width: 1301px) and (max-width: 1500px) {
  .topnav a:not(.smallmenu) {
    font-size: 14px !important;
  }
}


/* =========================
   DROPDOWNS
========================= */
.dropdown { position: relative; }
.dropdown-content { display: none; }

/* konto till höger desktop */
.account-wrapper { margin-left: auto; }

/* =========================
   DESKTOP
========================= */
@media (min-width:1151px) {

  .dropdown { display: flex; align-items: center; }

  .dropdown-content {
	  opacity:0;
  transform: translateY(-6px);
    position: absolute;
    top: 100%;
    min-width: 320px;
    background: #2f323e;
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
	white-space: nowrap;
	transition: opacity .18s ease, transform .18s ease;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  @media (min-width:1151px){

  .dropdown:hover .dropdown-content{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }

}

  .dropdown-content a {
    display: block;
    padding: 10px 16px;
		white-space: nowrap;
  }
  
  /* user-ikon */
.fa-user,
.fa-solid.fa-user,
.fa-right-to-bracket {
  margin-right: 8px;
}



  .smallmenu, .menu-footer { display: none; }
}

/* =========================
   HAMBURGER
========================= */
.smallmenu {
  display: none;
  position: fixed;
  top: 9px;
  right: 10px;
  width: 26px;
  cursor: pointer;
  z-index:999999;
}

.smallmenu span {
  display: block;
  height: 3px;
  margin: 4px 0;
  background: #cfcfcf;
}

/* =========================
   MOBIL – BLOCK (VIKTIG DEL)
========================= */
@media (max-width:1150px) {

  .topnav {
    position: fixed;
    display:block;
    height:42px;
  }



.topnav a:not(.homeicon),
.topnav.responsive .dropdown,
.topnav.responsive .account-wrapper{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}



  .topnav.responsive a:not(.menu-footer a) {
    padding: 10px 14px;      /* ← BEVARAD */
    border-bottom: 1px solid #414141;
  }

  .dropdown-content {
    position: static;
    background: #1f212b;
  }

  .dropdown-content.show {
    display: block;
  }

  .dropdown-content a {
    padding: 10px 28px;
  }

  .smallmenu { display: block; }
  .account-wrapper { margin-left: 0; }
}





/* =========================
   FOOTER (ORÖRD)
========================= */

.footers {
  min-height: 32px;   /* eller ta bort helt */
  background: linear-gradient(to right, rgba(15,17,23,.85), rgba(255,255,255,.16));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top:20px;
}

.footers a {
  color: #9fb4ff;          /* ljus accent, funkar på mörk bakgrund */
  text-decoration: none;  /* ta bort underline */
}

.footers a:hover {
  color: #ffffff;
  text-decoration: underline; /* valfritt, ger feedback */
}

.footers i {
  color: #9fb4ff;
}

.footers a:hover i {
  color: #ffffff;
}

@media (max-width: 1150px) {
.footers div:nth-child(2) {
display:none;}
}



.dropdown-content a {
  display: block;          /* ← Tvingar ny rad */
  width: 100%;
}


@media (max-width:1150px) {

  .topnav.responsive a {
    width: 100%;
    box-sizing: border-box;
  }

  .topnav.responsive a:hover,
  .topnav.responsive a:active {
    background: #000;
  }
}


@media (max-width:1150px) {

  /* USER-IKON: bara höger */
  .topnav.responsive a .fa-user,
  .topnav.responsive a .fa-solid.fa-user{
    margin-left: 0;
    margin-right: 8px;
  }
  
  .topnav.responsive a .fa-right-to-bracket  {
    margin-left: 0px;
    margin-right: 8px;
  }
}




.smallmenu span {
  display: block;
  height: 3px;
  margin: 4px 0;
  background: #fff;
  border-radius: 2px;
transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .2s;
}

/* morph till X */
.smallmenu.open span:nth-child(1) {
  transform: translateY(7px) rotate(-45deg);
}
.smallmenu.open span:nth-child(2) {
  opacity: 0;
}
.smallmenu.open span:nth-child(3) {
  transform: translateY(-7px) rotate(45deg);
}



@media (max-width:1150px){

.topnav > a:not(.homeicon),
.topnav .dropdown,
.topnav .account-wrapper{
  display:none;
}

.topnav.responsive > a:not(.homeicon),
.topnav.responsive .dropdown,
.topnav.responsive .account-wrapper{
  display:block;
}

}


@media (max-width: 1150px) {

  /* VIKTIG FIX */
  .account-wrapper {
    display: block;        /* ← INTE flex */
    width: 100%;
    margin-left: 0;
  }

  .account-wrapper .dropdown {
    display: block;
    width: 100%;
  }

}


@media (max-width:1150px){

  /* animera ALLA meny-triggers (även inne i wrappers) */
  .topnav.responsive a,
  .topnav.responsive .dropdown > a,
  .topnav.responsive .menu-footer > a{
    opacity: 0;
    animation: menuItem .45s forwards;
    animation-delay: calc(var(--i, 0) * .06s);
  }

  @keyframes menuItem{
    from { opacity:0; transform: translateY(-20px); }
    to   { opacity:1; transform: translateY(0); }
  }
}

/* FIX: mobilmeny måste ligga över dashboard */
.topnav {
  position: fixed;
  z-index: 99999 !important;
}

@media (max-width:1150px) {

  .topnav {
    position: fixed;
    inset: 0 0 auto 0;   /* top:0 left:0 right:0 */
    height: 42px;
    overflow: hidden;
  }

  .topnav.responsive{
    height:100dvh;
    display:flex;
    flex-direction:column;
  }

  .topnav.responsive .menu-items{
    flex:1;
  }
  
    .topnav .dropdown{
    display:block;      /* bryter flex från desktop */
    width:100%;
  }

  .topnav .dropdown > a{
    display:block;
    width:100%;
    text-align:left;
  }
  
  .topnav.responsive > a,
  .topnav.responsive .dropdown > a{
    text-align:left;
    display:block;
    width:100%;
  }
  

  .dropdown-content{
    opacity:0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .dropdown-content.show{
    opacity:1;
    transform: translateY(0);
  }

 
.menu-footer{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);

  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.menu-footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;

  font-size:13px;
  opacity:.7;
}

.menu-footer-brand img{
  height:18px;
}

.menu-register-btn{
  display:block;
  width:240px;              /* fast bredd gör den visuellt centrerad */
  margin:18px auto 0 auto;  /* centrerar knappen */

  padding:12px 18px;
  border-radius:12px;

  background:linear-gradient(135deg,#22c55e,#16a34a);

  color:#fff !important;    /* säkerställ vit text */
  text-align:center;
  font-weight:700;
  letter-spacing:.4px;
  text-decoration:none;

  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.menu-register-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
}