@charset "UTF-8";
/*design tokens*/
:root {
  --bg:#F9FFDE;
  --text:#006633;
  --muted:#006633d4;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --wrap:min(1400px,96vw);
  --space-1:clamp(8px, 1vw, 12px);
  --space-2:clamp(12px,1.4vw,16px);
  --space-3:clamp(16px,2vw,24px);
  --space-4:clamp(24px,3vw,32px);
  --space-5:clamp(32px,4vw,48px);
  --space-6:clamp(40px,5vw,64px);
  --font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-900:clamp(32px,5.5vw,64px);
  --fs-700:clamp(18px,2vw,22px);
  --fs-600:clamp(16px,1.7vw,18px);
  --lh-tight:1.15;
  --lh-normal:1.5;
  --logo-size:84px;
  /* showcase kontrol */
  --showcase-offset: clamp(12px, 3vw, 48px);
  --showcase-width: 90%;
  --showcase-nudge: 8px;
  --showcase-lift: clamp(-40px, -3vw, -16px);
  --img-min-h: 440px;
  --img-resp-h: 38vw;
  --img-max-h: 720px;
  /* kontakt bredde (samlet her for overblik) */
  --contact-width: 980px;
  /* små kontrolmål – ensartede ikonknapper */
  --icon-btn: 52px;
}

/* import knapper (bruger _buttons.scss mixins/klasser) */
.btn {
  display: inline-block;
  background: var(--text);
  color: var(--white);
  text-decoration: none;
  padding: 6px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: var(--fs-600);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  width: -moz-max-content;
  width: max-content;
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  padding: 6px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: var(--fs-600);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  width: -moz-max-content;
  width: max-content;
  border: 2px solid var(--text);
  box-shadow: none;
}

.btn-cta {
  display: inline-block;
  background: var(--text);
  color: var(--white);
  text-decoration: none;
  padding: 6px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: var(--fs-600);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.btn:not(.btn-cta):hover,
.btn:not(.btn-cta):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  outline: none;
}

.btn--sm {
  padding: 4px 16px;
  font-size: clamp(14px, 1.4vw, 16px);
}

.btn--lg {
  padding: 10px 32px;
  font-size: clamp(17px, 2vw, 20px);
}

.btn--block {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.btn--left {
  justify-self: start;
}

.btn--center {
  justify-self: center;
}

.btn--muted {
  display: inline-block;
  background: var(--muted);
  color: var(--white);
  text-decoration: none;
  padding: 6px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: var(--fs-600);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  width: -moz-max-content;
  width: max-content;
}

.btn--light {
  display: inline-block;
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  padding: 6px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: var(--fs-600);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  width: -moz-max-content;
  width: max-content;
  border: 2px solid var(--text);
}

/*base*/
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-normal);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*header / navigation*/
.site-nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: var(--space-4);
       column-gap: var(--space-4);
}

.logo {
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.logo img {
  height: var(--logo-size);
  width: auto;
}

/* desktop: vandret menu */
.menu {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 6vw, 110px);
}

.menu a {
  color: var(--text);
  font-size: var(--fs-700);
  text-decoration: none;
  letter-spacing: 0.2px;
  opacity: 0.95;
  padding: 6px 4px;
  border-radius: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.menu a:hover,
.menu a:focus-visible {
  transform: translateY(-2px);
  opacity: 1;
}

.menu a.is-active {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* burger / drawer (skjult på desktop) */
.nav-pad {
  display: none;
}

.burger {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.burger i {
  font-size: 22px;
  color: var(--text);
}

/* mobil layout: 3 kolonner (spacer | logo | burger) og drawer fra højre */
@media (max-width: 900px) {
  .site-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .logo {
    justify-self: center;
  }
  .nav-pad {
    display: block;
    width: var(--logo-size);
    height: 1px;
  }
  .burger {
    display: inline-flex;
  }
  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 82vw);
    height: 100dvh;
    background: var(--bg);
    padding: var(--space-5) var(--space-4);
    display: grid;
    align-content: start;
    gap: var(--space-4);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -14px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
  }
  .menu.is-open {
    transform: translateX(0);
  }
  .menu a {
    font-size: clamp(18px, 5vw, 22px);
  }
  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
    z-index: 999;
  }
  .menu-backdrop[hidden] {
    display: none;
  }
}
/* lås scroll når menu er åben */
body.no-scroll {
  overflow: hidden;
}

/* logo autoskalerer på mindre skærme */
@media (max-width: 900px) {
  :root {
    --logo-size: 80px;
  }
}
@media (max-width: 540px) {
  :root {
    --logo-size: 75px;
  }
}
/* landing: to kolonner*/
.home {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.6fr);
  -moz-column-gap: var(--space-4);
       column-gap: var(--space-4);
  row-gap: var(--space-4);
  align-items: start;
}

/* intro (venstre) */
.intro {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  align-content: start;
}

.intro h1 {
  font-size: clamp(22px, 3.8vw, 45px);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: 800;
}

.portrait {
  width: 210px;
  border-radius: 0;
  box-shadow: var(--shadow);
  margin: var(--space-2) 0;
  justify-self: center;
}

.intro .btn {
  justify-self: center;
}

/* showcase (højre) */
.showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-content: start;
  /* samlet offset + lille løft opad */
  margin-top: calc(var(--showcase-offset) + var(--showcase-lift));
  width: var(--showcase-width);
  justify-self: end;
  transform: translateX(var(--showcase-nudge));
  align-self: start;
}

.showcase img {
  width: 100%;
  height: clamp(var(--img-min-h), var(--img-resp-h), var(--img-max-h));
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
  opacity: 0.5;
}

/* generiske side-containere */
.page,
.projects-two-col,
.contact-page,
.skills-page {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-5);
}

/*projects opdelt i to kolonner*/
.projects-two-col {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(640px, 1.6fr);
  -moz-column-gap: var(--space-5);
       column-gap: var(--space-5);
  align-items: start;
}

.projects-intro h1 {
  margin: 0 0 var(--space-3) 0;
  font-size: clamp(24px, 3vw, 50px);
}

.projects-intro p {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(14px, 1.5vw, 17px);
}

.project-stack {
  display: grid;
  gap: var(--space-5);
}

.project-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  min-height: clamp(180px, 20vw, 240px);
  border-radius: 0;
  overflow: hidden;
}

.card-media {
  position: relative;
}

.card-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.card-body {
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.card-title {
  margin: 0;
  line-height: var(--lh-tight);
}

.card-meta {
  opacity: 0.9;
}

.card-desc {
  margin: 0;
}

.project-card .btn {
  width: -moz-max-content;
  width: max-content;
}

/* projekt-filter ui*/
.project-filter {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* aktivt filter */
.filter-btn.is-active {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

/* badge på projektkort */
.card-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--text);
  color: var(--white);
  padding: 4px 10px;
  font-weight: 800;
  font-size: clamp(12px, 1.2vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow);
}

/*contact*/
.lead {
  margin: 0;
  font-size: var(--fs-600);
}

.contact-page h1 {
  margin: 0 0 var(--space-3) 0;
}

.contact-lead {
  margin: 0 0 var(--space-4) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.card {
  border: 2px solid var(--text);
  background: rgba(255, 255, 255, 0.55);
  padding: var(--space-3);
  border-radius: 0;
}

/*diverse*/
.anchor-space {
  min-height: 1px;
}

/*responsiv*/
@media (max-width: 900px) {
  .home {
    grid-template-columns: 1fr;
  }
  /* cta: under billederne og centreret på mobil */
  .btn-cta {
    position: static;
    transform: none;
    grid-column: 1/-1;
    justify-self: center;
    margin-top: var(--space-3);
  }
  .menu {
    gap: clamp(18px, 5vw, 36px);
  }
  .showcase {
    margin-top: var(--space-3);
    width: 100%;
    transform: none;
    justify-self: stretch;
  }
  .showcase img {
    height: clamp(320px, 60vw, 600px);
  }
}
@media (max-width: 760px) {
  .projects-two-col {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }
  .project-card {
    grid-template-columns: 1fr;
    min-height: clamp(200px, 48vw, 320px);
  }
  .project-card .btn {
    justify-self: center;
    margin-left: 0;
  }
}
/* skills side */
.skills-page {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-5);
}

/* wrapper med to rækker */
.skills-rows {
  display: grid;
  gap: var(--space-6);
}

/* øverste række = 3 kolonner, nederste = 2 kolonner */
.skills-row {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

.skills-row.three {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.skills-row.two {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

/* kort */
.skill {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* ikon styling */
.skill-icon {
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 120px);
  height: clamp(84px, 9vw, 120px);
  border: 4px solid var(--text);
  border-radius: 20px;
  border-color: #FFEBCE;
  background: var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-2);
}

.skill-icon i {
  font-size: clamp(36px, 5vw, 56px);
  color: var(--text);
}

/* typografi */
.skills-page h1 {
  font-size: var(--fs-900);
}

.skill h3 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
}

.skill p {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-600);
  line-height: var(--lh-normal);
}

/* responsiv: stack pænt på små skærme */
@media (max-width: 900px) {
  .skills-row.three {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .skills-row.two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .skills-row.three {
    grid-template-columns: 1fr;
  }
}
/* om mig-side: 2 kolonner – venstre stack, højre med tekst+ikon */
.about-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.4fr);
  -moz-column-gap: var(--space-5);
       column-gap: var(--space-5);
  row-gap: var(--space-5);
  align-items: start;
}

/* venstre kolonne: overskrift, billede, tekst */
.about-left {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}

.about-hero {
  margin: 0;
  line-height: var(--lh-tight);
  max-width: 18ch;
}

.about-portrait {
  width: clamp(240px, 35vw, 550px);
  display: block;
  justify-self: center;
  margin: 0 auto var(--space-3);
  border-radius: 0;
  box-shadow: var(--shadow);
}

.about-intro {
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
  line-height: var(--lh-normal);
}

/* højre kolonne: 3 afsnit med ikon til venstre */
.about-right {
  display: grid;
  gap: var(--space-6);
  justify-content: center;
}

/* kort-række med ikon + tekst */
.about-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.about-item p {
  max-width: 68ch;
  text-align: left;
  margin: 0;
}

/* download-knap under højre kolonne */
.about-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}

.about-actions .btn {
  min-width: 260px;
  text-align: center;
}

@media (max-width: 900px) {
  .about-actions .btn {
    width: 100%;
  }
}
/* ikon-stil */
.about-icon {
  width: clamp(28px, 2.6vw, 36px);
  height: clamp(28px, 2.6vw, 36px);
  display: grid;
  place-items: center;
  border: 2px solid var(--text);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5019607843);
  box-shadow: var(--shadow);
}

.about-icon i {
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--text);
}

/* holder kolonner ens i højde */
.about-grid {
  align-items: stretch;
}

.about-hero {
  font-size: clamp(26px, 4.2vw, 48px);
}

.about-intro {
  font-size: clamp(14px, 1.3vw, 16px);
}

/* centrer afsnittene lodret i højre kolonne */
.about-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  justify-content: center;
  min-height: 100%;
}

/* responsiv: stack kolonner på mobil */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-portrait {
    justify-self: center;
  }
  .about-intro {
    max-width: 58ch;
  }
}
/* sektionens ramme */
.contact-page {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-5);
}

/* overskrift: centreret med lille ikon */
.contact-hero {
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: var(--lh-tight);
  text-align: center;
  align-items: center;
  gap: 10px;
}

.contact-hero i {
  font-size: 0.9em;
}

/* intro: venstrestillet og flugter med formularens venstrekant */
.contact-intro {
  margin: 0 0 var(--space-4) 0;
  text-align: left;
  max-width: calc(var(--contact-width) / 2);
  padding-left: 0;
}

/* formular: centreret med fast max-bredde */
.contact-form {
  border: 3px solid var(--text);
  background: transparent;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
  max-width: var(--contact-width);
  width: min(var(--contact-width), 100%);
  margin-inline: auto;
}

/* felter i formularen */
.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-600);
  border: 3px solid var(--text);
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
}

/* send-knap til højre inde i formen */
.form-footer {
  display: flex;
  justify-content: flex-end;
}

.contact-social .social-link {
  display: inline-grid;
  place-items: center;
}

.contact-social .fa-linkedin {
  font-size: 22px;
  line-height: 1;
  color: #0A66C2;
}

/* skjul visuelt, behold for skærmlæsere */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* bred skærm: skub intro + linkedin så de starter hvor formularen starter */
@media (min-width: 1000px) {
  .contact-intro,
  .contact-social {
    margin-left: calc((100% - var(--contact-width)) / 2);
    max-width: calc(var(--contact-width) / 2);
  }
}
/* mobil: centrer alt og giv mere luft */
@media (max-width: 999px) {
  .contact-intro {
    margin: 0 auto var(--space-4);
    max-width: min(520px, 92%);
  }
  .contact-social {
    justify-content: flex-start;
    margin-left: 0;
  }
}
/* projekt-detalje side */
.detail-head {
  max-width: var(--wrap);
}

.detail-head h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: var(--lh-tight);
}

.detail-sub {
  margin: 0 0 var(--space-4) 0;
  max-width: 60ch;
  font-size: var(--fs-600);
}

/* hovedrække: pil, billede, tekst, pil */
.detail-layout {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(340px, 1.15fr) minmax(320px, 0.85fr) auto;
  align-items: center;
  gap: var(--space-4);
}

/* venstre kolonne (billeder) */
.detail-media {
  margin: 0;
  border: 2px solid var(--text);
  background: rgba(255, 255, 255, 0.4);
  padding: var(--space-3);
}

.detail-slide {
  display: none;
  width: 100%;
  height: clamp(220px, 45vh, 520px);
  -o-object-fit: contain;
     object-fit: contain;
}

.detail-slide.is-active {
  display: block;
}

/* højre kolonne (tekst) */
.detail-copy {
  display: grid;
  align-content: start;
}

.detail-panel {
  display: none;
}

.detail-panel.is-active {
  display: block;
}

.detail-panel p {
  margin: 0;
  font-size: var(--fs-600);
  line-height: var(--lh-normal);
  max-width: 52ch;
}

/* pile i siderne */
.detail-arrow {
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  width: var(--icon-btn);
  height: var(--icon-btn);
  display: grid;
  place-items: center;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 2;
}

.detail-arrow:hover,
.detail-arrow:focus-visible {
  background: var(--text);
  color: var(--white);
  outline: none;
  transform: translateY(-2px);
}

.detail-arrow i {
  font-size: 22px;
  line-height: 1;
}

/* responsiv: stack billede over tekst, pile over/under */
@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
  }
  .detail-arrow.prev {
    order: -1;
    justify-self: start;
  }
  .detail-arrow.next {
    order: 1;
    justify-self: end;
  }
  .detail-media {
    padding: var(--space-2);
  }
  .detail-slide {
    height: clamp(220px, 56vw, 440px);
  }
}/*# sourceMappingURL=style.css.map */