:root{
  --bg:#0b0c0f;
  --fg:#e8e8ea;
  --muted:#a7abb3;
  --card:#14171c;
  --border:#262b33;
  --brand:#2ecc71;
  --brand-2:#1abc9c;
  --container:980px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:linear-gradient(180deg, #0b0c0f 0%, #101318 100%);
}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(10,12,15,.7);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:700}
.brand i{color:var(--brand)}

.main-nav{display:flex; gap:14px; align-items:center}
.main-nav .nav-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  color:var(--fg); text-decoration:none; opacity:.9;
  border:1px solid transparent;
}
.main-nav .nav-link:hover{opacity:1; border-color:var(--border)}
.main-nav .nav-link.is-active{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#06140f;
  font-weight:600;
}

/* Content area */
.content{
  padding:28px 0 60px;
}
.md{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

/* Markdown typografi */
.md h1,.md h2,.md h3,.md h4{line-height:1.2; margin:1.2em 0 .5em}
.md h1{font-size:clamp(26px, 3.6vw, 34px)}
.md h2{font-size:clamp(22px, 3vw, 28px)}
.md h3{font-size:clamp(18px, 2.5vw, 22px)}
.md p{margin:.8em 0}
.md ul{padding-left:1.2em}
.md li{margin:.3em 0}
.md code{
  background:#0e1116; border:1px solid #20252d; padding:2px 6px; border-radius:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.md pre{background:#0e1116; border:1px solid #20252d; padding:14px; border-radius:10px; overflow:auto}
.md img{max-width:100%; border-radius:10px; border:1px solid var(--border)}
.img-wrapper {
  width: 100%;     /* ønsket bredde */
  height: 300px;    /* ønsket høyde */
  border-radius: 10px;
  overflow: hidden; /* skjul det som går utenfor */
  position: relative;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;   
  top: -250px;
  left: 0;     /* fyll container, beskjær om nødvendig */
  object-position: 50% 30%;  /* vis midten (kan justeres f.eks. 50% 30%) */
  position: absolute;
  border-radius: 10px;
}


/* Helpers */
.loading, .error{
  display:flex; gap:10px; align-items:center; justify-content:flex-start;
  padding:16px; border-radius:12px;
  border:1px dashed var(--border); color:var(--muted);
}
.error{border-color:#8b2b2b; color:#f0b7b7; background:rgba(139,43,43,.08)}
.muted{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:18px 0 28px; color:var(--muted)}
.foot-inner{display:flex; justify-content:space-between; align-items:center; gap:12px}
@media (max-width: 800px){.foot-inner{flex-direction:column; align-items:flex-start}}

/* --- Bedre typografi og flyt på små skjermer --- */
html { text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.65; }
a {color: lightgreen;}
.container { padding-left: 16px; padding-right: 16px; }

/* Unngå horisontal scroll fra langt innhold */
.md { overflow-wrap: anywhere; word-break: break-word; }
.md pre { overflow: auto; max-width: 100%; }
.md pre code { white-space: pre; } /* hold kode lesbar, men i scroll */

/* Bilder skalerer pent */
.md img { height: auto; display: block; margin: 12px 0; }

/* Større trykkflater for lenker/knapper */
.main-nav .nav-link { padding: 10px 14px; }

/* Mobiloppsett (<= 800px) */
@media (max-width: 800px) {
  .header-inner {
    height: auto;
    padding: 10px 0;
    gap: 8px;
  }

  /* Skjul desktop-nav som standard, vis toggle-knapp */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--fg);
  }

  /* Som default: skjul menyen på mobil */
  .main-nav {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 6px;
    flex-direction: column;
  }
  /* Åpnet meny */
  .main-nav.open { display: flex; }

  .main-nav .nav-link {
    width: 100%;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid transparent;
  }
  .main-nav .nav-link + .nav-link { margin-top: 4px; }

  /* Innholdsmargins */
  .content { padding-top: 18px; padding-bottom: 40px; }

  /* Størrelsesjustering av overskrifter */
  .md h1 { font-size: clamp(22px, 6vw, 28px); }
  .md h2 { font-size: clamp(20px, 5.5vw, 24px); }
  .md h3 { font-size: clamp(18px, 5vw, 20px); }
}

/* Desktop (skjul toggle, vis vanlig nav) */
@media (min-width: 801px) {
  .nav-toggle { display: none; }
  .main-nav { display: flex; }
}