/* ===========================
   Vars
   =========================== */
:root{
  --blue:#1e66ff;
  --blue-dark:#0f3fbf;
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#667085;
  --card:#ffffff;
  --line:#e9eef7;
  --radius:16px;
  --maxw:1080px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}
body.menu-open{ overflow:hidden }

/* =========
   Layout
   ========= */
.layout{ min-height:100vh }

/* ==========================
   Hamburger + backdrop
   =========================== */
.hamburger{
  position: fixed;
  top: 14px; left: 14px;
  z-index: 1100;
  display: none;                 /* default: skjult (vises på mobil) */
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid #dbe3f0;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.backdrop{
  position:fixed; inset:0; z-index: 1040;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.backdrop.show{ opacity:1; pointer-events:auto }

/* ==========================
   Sidebar (basis-stil – uten posisjon)
   ========================== */
aside#sidebar{
  background:#fff;
  border-right:1px solid var(--line);
  padding:22px 20px 28px;
  overflow:auto;
  z-index: 1050;
}

/* Brand & nav */
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:28px; width:auto}
.brand h1{margin:0; font-size:1.25rem; line-height:1.2}
.subtitle{margin:6px 0 16px; color:var(--muted); font-size:.95rem}

nav ul{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
nav a{
  color:var(--ink); text-decoration:none; display:block;
  padding:10px 12px; border-radius:12px; font-weight:500;
}
nav a:hover{ background:#f3f6fb }
nav a.active{
  background:rgba(30,102,255,.12);
  color:var(--blue-dark);
  outline:1px solid rgba(30,102,255,.25);
}

/* Status dropdown */
.dropdown>button{
  width:100%; padding:10px 12px;
  border:0; background:transparent; cursor:pointer;
  text-align:left; border-radius:12px; font-weight:500; color:var(--ink);
}
.dropdown>button:hover{ background:#f3f6fb }
.submenu{display:none; padding-left:10px; flex-direction:column; gap:6px}
.dropdown.open .submenu{display:flex}

/* ====================
   Hero / content
   ==================== */
.hero{
  position:relative; height:260px;
  background:
    linear-gradient(180deg, rgba(30,102,255,.10), transparent 70%),
    linear-gradient(0deg, #0f1c3a, #0f1c3a);
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-top:8px;
}
.hero .title{
  color:var(--blue); font-size:2.6rem; font-weight:800; letter-spacing:.2px; margin:0 12px;
}
.underline{width:120px; height:6px; background:var(--blue); border-radius:999px; margin:12px auto 0}

.hero-ikt{
  background:
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)),
    url("ikt-bilde.jpg") center/cover no-repeat;
}

main{min-width:0}
.container{max-width:var(--maxw); margin:auto; padding:36px 24px}
.section-title{color:var(--blue-dark); font-size:1.9rem; margin:0 0 8px; font-weight:800}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.band{
  background:
    linear-gradient( to bottom, rgba(255,255,255,.85), rgba(255,255,255,.85) ),
    url("ikt-bilde.jpg") center/cover no-repeat;
  padding:42px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band .card{background:rgba(255,255,255,.85); border:1px solid var(--line)}

.grid{display:grid; gap:24px}
.grid.two{grid-template-columns:1fr 360px}
.avatar{
  width:100%; max-width:360px; aspect-ratio:3/4; object-fit:cover;
  border-radius:16px; border:1px solid var(--line);
  box-shadow:0 14px 24px rgba(30,102,255,.10)
}

/* Search field (fixed) */
.searchbar{
  position:fixed; top:12px; right:18px; z-index:1100;
  display:flex; align-items:center; gap:8px;
}
.searchbar input{
  min-width:260px; padding:10px 12px;
  border:1px solid #dbe3f0; border-radius:12px; outline:none;
}
.searchbar input:focus{ border-color:var(--blue) }
.searchbar button{
  padding:10px 12px; border-radius:12px; border:1px solid var(--blue);
  background:var(--blue); color:#fff; cursor:pointer; font-weight:600;
}
.searchbar button:hover{ filter:brightness(.95) }

footer{max-width:var(--maxw); margin:40px auto 24px; padding:0 24px; color:var(--muted)}

/* ==============================
   DESKTOP (>= 1024px): sidebar fast synlig
   ============================== */
@media (min-width:1024px){
  .layout{
    display:grid;
    grid-template-columns:280px 1fr;
  }
  aside#sidebar{
    position: sticky; top:0; height:100vh;
    inset: auto; transform: none !important; box-shadow:none;
  }
  .backdrop{ display:none !important }
  .hamburger{ display:none !important }  /* skjul hamburger på PC */

  .hero, .band, footer{ grid-column:2 }
  main{ grid-column:2 }
}

/* ==============================
   MOBIL (< 1024px): hamburger + off-canvas
   ============================== */
@media (max-width:1023.98px){
  .hamburger{ display:inline-flex; }  /* vis hamburger på mobil */

  /* Off-canvas sidebar på mobil */
  aside#sidebar{
    position: fixed;
    inset: 0 35% 0 0;         /* ca 65% bredde */
    height: 100vh;
    transform: translateX(-110%);     /* skjult som default */
    transition: transform .25s ease;
    box-shadow: 2px 0 18px rgba(0,0,0,.10);
    background: #fff;
    z-index: 1050;
  }
  aside#sidebar.open{ transform: translateX(0); }
}

/* Små dingser (overlapp fix) */
@media (max-width:430px){
  .searchbar{ right:12px; top:58px; }
}

/* Fjern gammel mobilebar hvis det finnes rester */
.mobilebar{ display:none !important; }
header.brand-top, .brand-top{ display:none !important; }