/* Oppsett: bunnmeny på mobil, sidemeny på PC */

.app {
  min-height: 100dvh;
}

.innhold {
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: calc(var(--nav-hoyde) + env(safe-area-inset-bottom) + 24px);
  max-width: 1200px;
  margin: 0 auto;
  outline: none;
}

/* Uten meny (innlogging) trengs ikke plass til bunnmenyen */
.nav[hidden] + .innhold {
  padding-bottom: 24px;
}

.nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-hoyde) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--flate);
  border-top: 1px solid var(--kant);
}

.nav__merke { display: none; }

.nav__lenke {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--tekst-dempet);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.nav__lenke svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__lenke[aria-current="page"] {
  color: var(--aksent);
  font-weight: 600;
}

.nav__lenke--ny svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: var(--aksent);
  color: var(--aksent-tekst);
  stroke-width: 2.4;
}
.nav__lenke--ny span { display: none; }

@media (min-width: 900px) {
  .app {
    display: grid;
    grid-template-columns: var(--nav-bredde) 1fr;
  }

  .nav {
    position: sticky;
    top: 0;
    inset: auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 12px;
    border-top: 0;
    border-right: 1px solid var(--kant);
  }

  .nav[hidden] + .innhold { grid-column: 1 / -1; }

  .nav__merke {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 20px;
    font-family: var(--font-tittel);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tekst);
    text-decoration: none;
  }
  .nav__merke img { border-radius: 8px; }

  .nav__lenke {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-liten);
    font-size: 0.95rem;
  }
  .nav__lenke:hover { background: var(--flate-2); }
  .nav__lenke[aria-current="page"] { background: var(--flate-2); }

  /* «Legg til» som vanlig knapp øverst i menyen */
  .nav__lenke--ny {
    order: -1;
    margin-bottom: 12px;
    background: var(--aksent);
    color: var(--aksent-tekst);
    font-weight: 600;
  }
  .nav__lenke--ny:hover,
  .nav__lenke--ny[aria-current="page"] { background: var(--aksent); color: var(--aksent-tekst); filter: brightness(1.08); }
  .nav__lenke--ny svg { width: 24px; height: 24px; padding: 0; background: none; color: inherit; }
  .nav__lenke--ny span { display: inline; }
  .nav__merke { order: -2; }

  .innhold {
    width: 100%;
    padding: 32px 40px;
  }
}