/* === Shared Header & Mobile Nav ===
   Used by both website and LMS portal.
   Content differs, design is identical.
*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(0, 19, 23, 0.08);
  /* Opak: hero-kortet är inramat, så sidbakgrunden ska löpa obruten från
     headern ut i kortets marginaler. */
  background: var(--page-bg, #EAE0D2);
}

.header__inner {
  /* Helbredd som nysno.se — ingen centrerad container. Sidpaddingen matchar
     hero-kortets --frame-inset så loggan linjerar med kortets vänsterkant. */
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 2.375rem;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.header__logo-symbol {
  height: 50px;
  width: auto;
  aspect-ratio: 1 / 1;
}

.header__logo-wordmark {
  height: 28px;
  width: auto;
  aspect-ratio: 3 / 1;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 0;
  /* align-items: center centrerar boxarna, inte baslinjerna. Ordmärket är en
     bild, så CSS har ingen textbaslinje att linjera mot — ordets baslinje
     ligger 7px under menytextens. Uppmätt, inte gissat. */
  position: relative;
  top: 7px;
}

.header__nav a {
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
  position: relative;
  padding: 0.5rem 1.25rem;
}

.header__nav a:hover {
  opacity: 0.6;
}

.header__nav a.active {
  font-weight: 600;
}

.header__nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  background: var(--eld);
  border-radius: 1px;
}

/* Nav group with hover submenu */
.header__nav-group {
  position: relative;
}

/* Invisible bridge below the toggle so the cursor can travel down to the
   submenu without exiting the hover area. Always present (not just when
   the submenu is open) so it also acts as an extended hit zone. */
.header__nav-group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 0.75rem;
}

.header__nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
  padding: 0.5rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity 0.2s;
}

.header__nav-toggle:hover {
  opacity: 0.6;
}

.header__nav-toggle svg {
  transition: transform 0.2s;
  opacity: 0.6;
}

.header__nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  background: var(--page-bg, #EAE0D2);
  border: 1px solid rgba(0, 19, 23, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 240px;
  z-index: 50;
  overflow: hidden;
  padding: 0.25rem 0;
}

.header__nav-submenu::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.header__nav-group:hover .header__nav-submenu,
.header__nav-group:focus-within .header__nav-submenu {
  display: block;
}

.header__nav-group:hover .header__nav-toggle svg,
.header__nav-group:focus-within .header__nav-toggle svg {
  transform: rotate(180deg);
}

.header__nav-submenu a {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

.header__nav-submenu a:hover {
  background: rgba(0, 19, 23, 0.04);
  opacity: 1;
}

.header__nav a.btn-login {
  background: var(--black);
  color: var(--dimma);
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-size: 0.875rem;
  transition: background 0.2s;
}

.header__nav a.btn-login:hover {
  background: var(--moln);
  opacity: 1;
}

.header__user {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.header__user-name {
  font-size: 0.8125rem;
  color: var(--moln);
}

.header__btn {
  background: var(--black);
  color: var(--dimma);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.header__btn:hover {
  background: var(--moln);
}

.header__btn--ghost {
  background: transparent;
  color: var(--moln);
  padding: 0.4rem 0.75rem;
}

.header__btn--ghost:hover {
  background: rgba(0, 19, 23, 0.05);
  color: var(--black);
}

/* Nav divider between site links and portal links (used in PortalLayout) */
.header__nav-divider {
  width: 1px;
  height: 16px;
  background: var(--black);
  opacity: 0.2;
  flex-shrink: 0;
}

/* Sub-navigation row for logged-in pages */
.header__subnav {
  padding: 1.25rem 2.5rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header__subnav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  /* Sätts av mätskriptet till menyns första länk; fallbacket är samma värde
     som nysno.se använder. */
  padding-left: var(--nav-text-x, 240px);
}

.header__subnav-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.header__subnav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--moln, #555);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.header__subnav a:hover {
  color: var(--black);
}

.header__subnav-account {
  display: none;
  line-height: 0;
  margin-left: auto;
}

/* Login button in header__user for website (non-logged-in) */
.header__user--login .btn-login {
  background: var(--black);
  color: var(--dimma);
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.2s;
}

.header__user--login .btn-login:hover {
  background: var(--moln);
}

/* Notification bell wrapper */
.header__notification-bell {
  position: relative;
}

/* User dropdown (PHP website header) */
.header__dropdown {
  position: relative;
}

.header__dropdown .header__user-name {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--moln);
}

.header__dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: var(--page-bg, #EAE0D2);
  border: 1px solid rgba(0, 19, 23, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 50;
  overflow: hidden;
}

.header__dropdown.open .header__dropdown-menu {
  display: block;
}

.header__dropdown.open .header__user-name svg {
  transform: rotate(180deg);
}

.header__dropdown-menu a,
.header__dropdown-menu button {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: var(--black);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.header__dropdown-menu a:hover,
.header__dropdown-menu button:hover {
  background: rgba(0, 19, 23, 0.04);
}

.header__dropdown-menu button {
  color: var(--moln, #555);
}

.header__dropdown-divider {
  border-top: 1px solid rgba(0, 19, 23, 0.1);
}

/* Mobile nav divider */
.mobile-nav__divider {
  width: 40px;
  height: 1px;
  background: rgba(0, 19, 23, 0.15);
}

.header__badge {
  background: var(--eld);
  color: var(--vit);
  border-radius: 999px;
  font-size: 0.6rem;
  padding: 1px 5px;
  font-weight: 700;
  margin-left: -0.5rem;
  vertical-align: super;
}

.header__menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  /* Inloggat läge har inget .header__user i toppraden — knappen får själv
     putta sig till högerkanten. */
  margin-left: auto;
}

.header__menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  margin: 5px 0;
  transition: 0.3s;
}

/* === Mobile Nav === */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--page-bg, #EAE0D2);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  justify-content: safe center;
  gap: 1.75rem;
  padding: 4rem 2.5rem;
  overflow-y: auto;
}

.mobile-nav.active {
  display: flex;
}

.mobile-nav a {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--black);
  text-decoration: none;
}

.mobile-nav__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.mobile-nav__group-label {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--black);
  opacity: 0.5;
}

.mobile-nav a.mobile-nav__sublink {
  font-size: 1.125rem;
  font-weight: 500;
  padding-left: 1.25rem;
  position: relative;
}

.mobile-nav a.mobile-nav__sublink::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.625rem;
  height: 1px;
  background: var(--black);
  opacity: 0.35;
}

/* Footerns länkar — footern själv ligger långt ner på en mobilsida */
.mobile-nav__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.mobile-nav .mobile-nav__footer a {
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.6;
}

.mobile-nav__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--black);
  line-height: 1;
}

/* === Responsive === */
@media (max-width: 768px) {
  .header {
    padding: 0.75rem 0;
  }

  .header__logo-symbol {
    height: 40px;
  }

  .header__logo-wordmark {
    height: 22px;
  }

  .header__nav {
    display: none;
  }

  .header__inner {
    padding: 0 1.25rem;
  }

  .header__subnav {
    gap: 0.75rem;
    padding: 0.625rem 1.25rem 0;
  }

  /* Bara länkraden scrollar — kontoklustret står kvar till höger. */
  .header__subnav-links {
    gap: 1.25rem;
    padding-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .header__subnav-links::-webkit-scrollbar {
    display: none;
  }

  .header__subnav a {
    white-space: nowrap;
  }

  /* "Mitt konto"-menyn byts mot personikonen när utrymmet tryter. */
  .header__subnav-user .header__dropdown {
    display: none;
  }

  .header__subnav-account {
    display: flex;
    align-items: center;
  }

  .header__user {
    display: none;
  }

  .header__menu-btn {
    display: block;
  }
}

/* Paradigm: logout is a POST form (CSRF) instead of a fetch(); make its
   button look like the links around it. */
.mobile-nav .mobile-nav__logout {
  font: inherit;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--black);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}