/* =========================================================
   Kromatone — mørkt, kontrastfyldt udtryk oven på Bootstrap 5
   Alle farver styres herfra.
   ========================================================= */
:root {
  --k-night: #130918;      /* baggrund */
  --k-night-2: #1d1224;    /* lidt lysere flader */
  --k-cream: #ece2d0;      /* tekst / lyse sektioner */
  --k-amber: #f1aa1c;      /* accent, knapper */
  --k-amber-hi: #ffbc13;

  /* Logoets farver */
  --k-red: #f0000c;
  --k-orange: #fc9c00;
  --k-cyan: #48d8fc;
  --k-green: #60fc6c;

  --k-line: rgba(236, 226, 208, .14);
  --k-muted: rgba(236, 226, 208, .62);

  --bs-body-font-family: "Barlow", system-ui, sans-serif;
  --bs-body-bg: var(--k-night);
  --bs-body-color: var(--k-cream);
  --bs-border-radius: 4px;
}

html { scroll-padding-top: 90px; }
body { background: var(--k-night); font-weight: 500; overflow-x: hidden; }

/* Diskret korn over hele siden */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2000;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, .display-title, .section-title {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: .98;
}

/* Ikoner (inline SVG) */
.ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

::selection { background: var(--k-amber); color: var(--k-night); }
:focus-visible { outline: 2px solid var(--k-amber); outline-offset: 2px; }

/* ---------- Knapper ---------- */
.btn-k, .btn-k-outline {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  border-radius: 4px;
  padding: .7rem 1.4rem;
  border: 2px solid var(--k-amber);
  transition: background .2s, color .2s, transform .2s;
}
.btn-k { background: var(--k-amber); color: var(--k-night); }
.btn-k:hover, .btn-k:focus-visible { background: var(--k-amber-hi); border-color: var(--k-amber-hi); color: var(--k-night); transform: translateY(-2px); }
.btn-k-outline { background: transparent; color: var(--k-amber); }
.btn-k-outline:hover { background: var(--k-amber); color: var(--k-night); }
.btn-lg.btn-k, .btn-lg.btn-k-outline { padding: .9rem 1.8rem; font-size: 1rem; }

/* ---------- Navigation ---------- */
.navbar {
  padding: 1rem 0;
  transition: background .25s, padding .25s, box-shadow .25s;
}
.navbar.scrolled {
  background: rgba(19, 9, 24, .92);
  backdrop-filter: blur(10px);
  padding: .6rem 0;
  box-shadow: 0 1px 0 var(--k-line);
}
.navbar .nav-link {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .85rem;
  color: var(--k-cream);
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--k-amber); }
.navbar .btn-k { padding: .5rem 1.1rem; font-size: .8rem; }
@media (max-width: 991.98px) {
  .navbar-collapse { background: var(--k-night); margin: .75rem -12px 0; padding: 1rem 12px 1.25rem; border-top: 1px solid var(--k-line); }
  .navbar .btn-k { margin-top: .75rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 1000px);
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(241,170,28,.10), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(72,216,252,.07), transparent 50%),
    var(--k-night);
}
/* ---------- Animeret KT-mærke ---------- */
.kt-mark {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  overflow: visible;
}
.kt-piece { will-change: transform; }
/* Al bevægelse styres af js/main.js. Fladerne skjules kun, når JS kører animationen. */
.kt-mark.is-animated .kt-piece { opacity: 0; }
@media (max-width: 991.98px) {
  .kt-mark { max-width: 200px; margin: 0 0 1rem; }
}

.status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--k-muted);
  border: 1px solid var(--k-line);
  border-radius: 999px;
  padding: .35rem .9rem;
  margin-bottom: 2rem;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--k-amber);
  box-shadow: 0 0 0 0 rgba(241,170,28,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(241,170,28,0); } 100% { box-shadow: 0 0 0 0 rgba(241,170,28,0); } }

.display-title {
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: .9;
  margin-bottom: 1.75rem;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  max-width: 34rem;
  color: var(--k-muted);
  line-height: 1.55;
}

/* ---------- Sektioner ---------- */
.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section-title { font-size: clamp(2.5rem, 6vw, 4.75rem); margin-bottom: 1.5rem; }

.label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--k-amber);
  margin-bottom: 1rem;
}
.label::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 50%; }

.section-light { background: var(--k-cream); color: var(--k-night); }
.section-light .label { color: var(--k-night); }

.section-accent { background: var(--k-amber); color: var(--k-night); }
.label-dark { color: var(--k-night); }

/* ---------- Filter ---------- */
.filter-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-filter {
  background: transparent;
  color: var(--k-cream);
  border: 1px solid var(--k-line);
  border-radius: 4px;
  padding: .5rem 1rem;
  font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .1em;
  transition: all .2s;
}
.btn-filter:hover { border-color: var(--k-amber); color: var(--k-amber); }
.btn-filter.active { background: var(--k-amber); border-color: var(--k-amber); color: var(--k-night); }

/* ---------- Projekter ---------- */
.project-list { display: grid; gap: 2rem; }
.project.hide, .project.collapsed { display: none; }
.tag-new { background: var(--k-amber); }
#showMore .count { opacity: .7; }

.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--k-night-2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--k-line);
  transition: box-shadow .25s, transform .25s;
}
.project-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: 1rem 1.25rem;
}
.project-meta h3 {
  font-size: 1.35rem; margin: 0 0 0 .25rem;
  transition: color .2s;
}
.tag {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--k-night);
  background: var(--k-cream);
  border-radius: 3px;
  padding: .2rem .5rem;
}
.project-card img {
  display: block; width: 100%; height: auto;
  transition: transform .6s ease, filter .3s;
}
.project-card:hover, .project-card:focus-visible {
  box-shadow: inset 4px 0 0 var(--k-amber), inset 0 0 0 1px rgba(241,170,28,.5);
  transform: translateY(-3px);
}
.project-card:hover h3 { color: var(--k-amber); }

/* Scroll-ind animation */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Ydelser ---------- */
.service {
  height: 100%;
  border-top: 3px solid var(--k-night);
  padding-top: 1.5rem;
}
.service-no {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700; font-size: 1rem;
  color: rgba(19,9,24,.5);
}
.service h3 { font-size: 2.25rem; margin: .5rem 0 1rem; }
.service p { font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ---------- Om ---------- */
/* Portræt med grafisk "skygge" i accentfarven */
.portrait {
  display: block;
  width: 200px;
  padding: 0; border: 0; background: none;
  margin: 0 0 2.5rem;
  border-radius: 4px;
  box-shadow: 10px 10px 0 var(--k-amber);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.portrait img { display: block; width: 100%; height: auto; }
.portrait:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--k-amber); }
.portrait:active { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--k-amber); }
@media (max-width: 575.98px) { .portrait { width: 150px; } }

.lead-text { font-size: 1.15rem; line-height: 1.65; color: var(--k-muted); }

.sub-label {
  font-family: "Barlow", sans-serif;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--k-amber);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--k-line);
  margin-bottom: 1.5rem;
}

/* Nøgletal */
.stats { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.stats strong {
  display: block;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 3.5rem; line-height: 1; font-weight: 700;
}
.stats li:nth-child(1) strong { color: var(--k-red); }
.stats li:nth-child(2) strong { color: var(--k-cyan); }
.stats li:nth-child(3) strong { color: var(--k-green); }
@media (max-width: 575.98px) {
  .stats { gap: 1.5rem; flex-wrap: nowrap; }
  .stats strong { font-size: 2.75rem; }
}
.stats span { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--k-muted); }

/* Erfaring */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 2rem 1.5rem;
  border-left: 2px solid var(--k-line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--k-amber);
}
.tl-year { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--k-amber); }
.timeline h4 { font-size: 1.6rem; margin: .35rem 0 .6rem; }
.timeline h4 span { color: var(--k-muted); font-weight: 600; }
.timeline p { color: var(--k-muted); line-height: 1.6; margin: 0; }

/* Uddannelse */
.edu { list-style: none; padding: 0; margin: 0; }
.edu li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--k-line); }
.edu strong { font-weight: 600; }
.edu span { color: var(--k-muted); }

.interests { font-size: 1.1rem; line-height: 1.8; color: var(--k-muted); }

.skill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.skill-list li {
  border: 1px solid var(--k-line);
  border-radius: 4px;
  padding: .4rem .85rem;
  font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Kontakt ---------- */
.contact-mail {
  display: inline-block;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  color: var(--k-night);
  text-decoration: none;
  border-bottom: 4px solid var(--k-night);
  word-break: break-word;
  transition: opacity .2s;
}
.contact-mail:hover { color: var(--k-night); opacity: .7; }
.contact-mail .ico { width: .7em; height: .7em; }
.social a { font-size: 1.6rem; color: var(--k-night); margin-right: 1.25rem; transition: opacity .2s; }
.social a:hover { opacity: .6; }

/* ---------- Footer ---------- */
.footer { font-size: .85rem; color: var(--k-muted); }
.footer a { color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.footer a:hover { color: var(--k-amber); }
.stripe-bar { display: flex; height: 6px; }
.stripe-bar span { flex: 1; }
.stripe-bar span:nth-child(1) { background: var(--k-red); }
.stripe-bar span:nth-child(2) { background: var(--k-orange); }
.stripe-bar span:nth-child(3) { background: var(--k-cream); }
.stripe-bar span:nth-child(4) { background: var(--k-cyan); }
.stripe-bar span:nth-child(5) { background: var(--k-green); }

/* ---------- Modal ---------- */
.modal-content {
  background: var(--k-night);
  color: var(--k-cream);
  border: 1px solid var(--k-line);
  border-radius: 4px;
  box-shadow: inset 4px 0 0 var(--k-amber);
}
.modal-header { border-bottom: 1px solid var(--k-line); padding: 1.25rem 1.5rem; align-items: flex-start; }
.modal-title { font-size: 2rem; }
.modal-body { padding: 1.5rem; }
/* Bannerne indeholder tekst — på små skærme kan man scrolle sidelæns i stedet for at teksten bliver ulæselig */
.modal-img-wrap { overflow-x: auto; border-radius: 4px; }
.modal-img-wrap img { display: block; width: 100%; min-width: 760px; height: auto; }
@media (min-width: 800px) { .modal-img-wrap img { min-width: 0; } }

/* Respektér ønske om mindre bevægelse */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kt-mark .kt-piece { opacity: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}