/* =========================
   Vars & base
========================= */
:root{
  --bg:#0b0c0f; --card:#12141a; --text:#e9edf1; --muted:#a7b0bd;
  --accent:#68b5ff; --border:#1e222b; --tag-bg:#192332;
}
:root.light{
  --bg:#ffffff; --card:#f7f9fc; --text:#0e1116; --muted:#444e5a;
  --accent:#0a84ff; --border:#e6e9ee; --tag-bg:#eef4ff;
}
*{ box-sizing:border-box; }
html, body{ height:100%; max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--text);
}
.container{ width:min(1200px,92vw); margin:0 auto; }

/* =========================
   Header
========================= */
.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--bg), transparent 35%);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; }
.avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.nav a{ color:var(--muted); text-decoration:none; margin-left:16px; }
.nav a:hover{ color:var(--text); }
.nav button{ background:none; border:1px solid var(--border); color:var(--muted); padding:6px 10px; border-radius:8px; cursor:pointer; }

/* =========================
   Featured / hero
========================= */
.featured{ margin:28px auto 8px; display:grid; grid-template-columns:1fr; gap:16px; }
.featured-card{
  display:grid; grid-template-columns:1fr;
  border:1px solid var(--border); background:var(--card);
  border-radius:16px; overflow:clip;
}
.featured-media{ aspect-ratio:16/7; width:100%; object-fit:cover; }
.featured-body{ padding:16px; display:grid; gap:10px; }
.featured h1{ margin:0; font-size:clamp(1.4rem,2vw + 1rem,2rem); }
.meta{ color:var(--muted); font-size:.9rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tag{ background:var(--tag-bg); color:var(--accent); padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); }

/* =========================
   Filter / search
========================= */
.filters{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0 0; }
.searchbar input{
  width:100%; max-width:420px; padding:10px 12px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--text);
}

/* =========================
   Grid (cards)
========================= */
.grid{
  margin:14px auto 0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.card{
  display:grid; border:1px solid var(--border); background:var(--card);
  border-radius:14px; overflow:clip;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 4px 20px color-mix(in oklab,#000, transparent 70%); }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#111; }
.card .body{ padding:12px; display:grid; gap:8px; }
.card .title{ margin:0; font-size:1.05rem; }
.card .excerpt{ color:var(--muted); font-size:.95rem; }
.card .meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* =========================
   Pager / sections / footer
========================= */
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; padding:22px 0 40px; color:var(--muted); }
.pager button{ border:1px solid var(--border); background:var(--card); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; }
.pager button[disabled]{ opacity:.5; cursor:not-allowed; }

.projects, .about{ padding:28px 0; }
.project-list{ display:grid; gap:6px; padding-left:18px; }

.site-footer{ border-top:1px solid var(--border); margin-top:24px; }
.footer-inner{ padding:16px 0; display:flex; gap:16px; align-items:center; justify-content:space-between; color:var(--muted); flex-wrap:wrap; }

/* =========================
   Post pages (post.html)
   — sentrering, bildehåndtering, overflow
========================= */
.post-article{ max-width:820px; margin:0 auto; padding:24px 0; }
.post-title{ margin:0 0 6px 0; font-size:clamp(1.6rem,2.2vw + 1rem,2.6rem); }
.post-cover{ display:block; width:100%; max-width:100%; height:auto; border-radius:12px; margin:12px 0; float:none !important; }

.post-content{ max-width:100%; margin-left:auto; margin-right:auto; overflow-x:hidden; }
.post-content::after{ content:""; display:block; clear:both; }
.post-content *{ box-sizing:border-box; }

/* media/embeds skal aldri sprenge containeren */
.post-content img,
.post-content figure,
.post-content .kg-card,
.post-content .kg-image-card,
.post-content video,
.post-content iframe,
.post-content embed,
.post-content object{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto;
  margin-left:auto; margin-right:auto;
  float:none !important;
  clear:both;
}

/* nøytraliser Koenig wide/full som kan skyve layouten */
.post-content .kg-width-wide,
.post-content .kg-width-full,
.post-content figure.kg-width-wide,
.post-content figure.kg-width-full{
  width:100% !important;
  margin-left:0 !important;
  transform:none !important;
}

/* typografi i innhold */
.post-content :where(h2,h3){ margin-top:1.6em; }
.post-content p{ line-height:1.8; }
.post-content img{ border-radius:10px; }
.post-content pre{ overflow:auto; padding:12px; border-radius:10px; background:var(--card); border:1px solid var(--border); white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.post-content code, .post-content kbd, .post-content samp{ white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.post-content a{ word-break:break-word; overflow-wrap:anywhere; }

/* gallerier */
.post-content .kg-gallery-card{ display:grid; gap:8px; }
.post-content .kg-gallery-row{
  display:grid;
  grid-template-columns:repeat(var(--kg-gallery-row-cols, 3), 1fr);
  gap:8px;
}

/* tabeller */
.post-content table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse; }
.post-content th, .post-content td{ padding:.5rem; vertical-align:top; }

/* =========================
   Responsive tweaks
========================= */
@media (min-width:900px){
  .featured-card{ grid-template-columns:1.2fr 1fr; }
  .featured-media{ aspect-ratio:auto; height:100%; }
}

/* --- YouTube / oEmbed responsiv --- */
.post-content figure.kg-embed-card,
.post-content .kg-embed-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px auto !important;
}

.post-content .kg-embed-card iframe,
.post-content iframe[src*="youtube.com"],
.post-content iframe[src*="youtu.be"],
.post-content iframe[src*="vimeo.com"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  /* Høyde styres av aspect-ratio i stedet for faste px */
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Hvis du noen gang vil støtte “fullbredde”-embeds */
.post-content .kg-embed-card.kg-width-wide,
.post-content .kg-embed-card.kg-width-full {
  width: 100% !important;           /* kan settes til 100vw med translate om du vil */
  margin-left: 0 !important;
  transform: none !important;
}

/* ==== Ghost File Card (kg-file-card) ==== */
.post-content figure.kg-file-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  margin: 14px 0;
}

.post-content .kg-file-card-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}

/* Venstre side: tittel + caption */
.post-content .kg-file-card-contents {
  display: grid;
  gap: 4px;
  min-width: 0; /* viktig for ellipsis */
}

.post-content .kg-file-card-title {
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-content .kg-file-card-caption {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Høyre side: filnavn + størrelse + knapp */
.post-content .kg-file-card-metadata {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.post-content .kg-file-card-filename,
.post-content .kg-file-card-filesize {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* “Download”-knappen Ghost legger inn (span/a) */
.post-content .kg-file-card-button {
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card), #000 6%);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* Hover-states */
.post-content .kg-file-card-container:hover .kg-file-card-button {
  background: color-mix(in oklab, var(--card), #fff 6%);
}
.post-content .kg-file-card-container:hover .kg-file-card-title {
  color: var(--accent);
}

/* Mobil: stack alt pent */
@media (max-width: 700px) {
  .post-content .kg-file-card-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .post-content .kg-file-card-metadata {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* Ikon (hvis Ghost ikke leverer ett) – enkel fallback */
.post-content .kg-file-card-contents::before {
  content: "📄";
  margin-right: 8px;
  font-size: 1.1rem;
}

/* Buy Me a Coffee – button uten script */
.bmc-btn {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1rem; border-radius:8px; font-weight:700;
  text-decoration:none; border:1px solid var(--border);
  transition:transform .08s ease, box-shadow .08s ease;
}
.bmc-btn:hover { transform: translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.bmc-btn img { height:1.4em; width:auto; display:block; }

/* read more-lenke nederst i kort */
.card .readmore {
  margin: 4px 0 0;
}
.card .readmore a {
  text-decoration: none;
  font-weight: 600;
}
.card .readmore a:hover {
  text-decoration: underline;
}

.card .title { cursor: default; }
.card .readmore { margin: 4px 0 0; }
.card .readmore a { text-decoration: none; font-weight: 600; }
.card .readmore a:hover { text-decoration: underline; }

/* --- Ghost navigation via {{navigation}} --- */
.nav { display:flex; align-items:center; gap:16px; }      /* knapp + meny side om side */

/* nullstill ul/li og gjør den horisontal */
.nav ul { 
  list-style:none; margin:0; padding:0; 
  display:flex; align-items:center; gap:16px;
}
.nav li { margin:0; padding:0; }

/* lenker slik du hadde dem før */
.nav a { color: var(--muted); text-decoration:none; }
.nav a:hover { color: var(--text); }

/* aktiv side markeres av Ghost med .nav-current på <li> */
.nav li.nav-current > a { color: var(--text); font-weight:600; }

/* fjern gammel spacing-regel hvis den fortsatt finnes */
.nav a { margin-left: 0; }  /* overstyrer tidligere margin-left:16px */

/* Brand/logo */
.brand {
  display:flex; align-items:center; gap:10px;
  color: var(--text); text-decoration:none; font-weight:700;
}
.avatar {
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border);
}

/* Nav-linje */
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.nav {
  display:flex; align-items:center; gap:16px;
}
.nav ul {
  list-style:none; margin:0; padding:0;
  display:flex; gap:16px;
}
.nav li { margin:0; padding:0; }
.nav a { color: var(--muted); text-decoration:none; }
.nav a:hover { color: var(--text); }
.nav li.nav-current > a { color: var(--text); font-weight:600; }

/* Tema-knappen */
.nav button {
  background:none; border:1px solid var(--border);
  color:var(--muted); padding:6px 10px; border-radius:8px;
  cursor:pointer;
}

/* Klikkbare tag-badges */
.tag a {
  color: var(--accent);
  text-decoration: none;
}
.tag a:hover {
  text-decoration: underline;
}

/* Tittel/intro på tag-sider (valgfritt) */
.container h1 + .meta { margin-top: 6px; }

.footer-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:14px; }
.footer-nav a { color: var(--muted); text-decoration:none; }
.footer-nav a:hover { color: var(--text); }

.social {
  display: flex;
  gap: 12px;
}
.social a {
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--muted);
}
.social a:hover {
  color: var(--text);
}

.like-button{display:inline-flex;gap:.5rem;align-items:center;border:1px solid var(--color-border,#ddd);padding:.5rem .8rem;border-radius:.6rem;background:transparent;cursor:pointer}
.like-button[disabled]{opacity:.6;cursor:default}
.like-button .like-emoji{font-size:1.1rem;line-height:1}
.like-count{font-variant-numeric:tabular-nums}
.like-button.is-liked{border-color:currentColor}