/* =========================
File: style.css
========================= */

/* Reset + base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background:#fff;
  color:#000;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  }
  .navbar {
    position: sticky; top: 0; z-index: 1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 2rem;
    background: transparent;
    color:#000;
    border-bottom:1px solid transparent;
    transition: background .3s, border-color .3s, color .3s;
  }
.navbar.scrolled {
  background:#fff !important;
  border-bottom-color:#eee;
}
.nav-logo { font-size:1.2rem; font-weight:normal; }

.nav-links { list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; }
.nav-links a {
  color:inherit; text-decoration:none; font-size:1.2rem; font-weight:normal;
  position:relative; padding-bottom:2px;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: currentColor; transition: width .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

/* Hamburger (mobil) */
.menu-toggle {
  display:none; background:none; border:none; cursor:pointer;
  font-size:1.8rem; color:inherit; transition: transform .2s ease;
}
.menu-toggle:active { transform: scale(.9); }

/* ===== Layout ===== */
main.content {
  flex: 1;
  padding:2rem;
}
.narrow { max-width:900px; margin:0 auto; }

h1 {
  margin:0 0 2rem; text-align:center;
  font-size:2.5rem; font-weight:600;
}

/* ===== Profile (index) ===== */
.profile-section {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin-bottom:2rem; text-align:center;
}
.profile-image {
  width:140px; height:auto; border-radius:10%;
  border:3px solid currentColor; margin-bottom:1rem;
}
.profile-name { font-size:1.5rem; font-weight:600; margin:0 0 .3rem; }
.profile-intro { color:#333; }

.intro-text {
  max-width:900px; margin:0 auto 2rem; text-align:center; font-size:1.1rem;
}

/* ===== Boxes (index) ===== */
.box-grid {
  max-width:1000px; margin:0 auto 2.5rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
.info-box {
  background:#fff; border:1px solid #ccc; border-radius:16px;
  padding:1rem; display:grid; gap:.5rem;
}
.info-box h3 { margin:0; font-size:1.25rem; }
.box-description { color:#333; }
.box-content { min-height:80px; display:grid; place-items:center; }

/* ===== Contact grid ===== */
.contact-grid {
  max-width: 1000px;
  margin: 0 auto 2rem;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  justify-items: center;
}
.contact-item {
  display:grid; justify-items:center; gap:.35rem;
  padding:1rem; width:100%; max-width: 240px;
  text-align:center; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #ccc; border-radius:16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-color:#bbb;
}
.contact-logo { width:56px; height:56px; object-fit:contain; display:block; }
.contact-name { font-size:1.1rem; font-weight:600; }
.contact-handle { color:#333; font-size:.95rem; }

/* ===== Project grid ===== */
.project-grid {
  max-width: 1000px;
  margin: 0 auto 2rem;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; justify-items: center;
}
.project-item {
  display:grid; justify-items:center; gap:.35rem;
  padding:1rem; width:100%; max-width: 220px;
  text-align:center; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #ccc; border-radius:16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.project-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-color:#bbb;
}
.project-logo { width:56px; height:56px; object-fit:contain; display:block; }
.project-name { font-size:1.1rem; font-weight:600; }
.project-desc { font-size:.95rem; color:#333; }

/* ===== Resume view (PDF med jevnt mellomrom) ===== */
.resume-wrapper {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 8px;                 /* kant rundt PDF */
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
}
.resume-embed {
  display: block;
  width: calc(100% - 16px);     /* justert for padding */
  height: calc(95vh - 16px);    /* jevnt mellomrom oppe/nede */
  margin: 0 auto;
  border: none;
}

/* ===== Footer ===== */
.footer {
  text-align:center; padding:1rem; font-size:.9rem; color:#444; border-top:1px solid #ccc;
}
.back-to-top {
  margin-left:.5rem; color:inherit; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.back-to-top:hover { border-color: currentColor; }

/* ===== Mobile (<=700px) ===== */
@media (max-width:700px){
  .menu-toggle { display:block; }
  .nav-links {
    display:none; flex-direction:column; gap:1rem;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:1rem 2rem; border-bottom:1px solid #eee;
  }
  .nav-links.open { display:flex; }

  .box-grid { grid-template-columns:1fr; }

  .resume-wrapper { max-width: 100%; padding: 6px; }
  .resume-embed { width: calc(100% - 12px); height: calc(80vh - 12px); }
}

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark){
  body { background:#000; color:#fff; }
  .navbar { color:#fff; }
  .navbar.scrolled { background:#000 !important; border-bottom-color:#333; }

  .profile-intro, .box-description, .contact-handle, .project-desc { color:#ddd; }
  .info-box, .contact-item, .project-item, .resume-wrapper { background:#0f0f0f; border-color:#333; }
  .contact-item:hover, .project-item:hover { box-shadow:0 2px 10px rgba(255,255,255,.06); border-color:#444; }

  .footer { color:#aaa; border-top-color:#555; }

  @media (max-width:700px){
    .nav-links { background:#000; border-bottom:1px solid #333; }
  }
}