/* ========================================
   SKRIFTTYPER – FÆLLES FOR HELE SITET
======================================== */

@font-face {
  font-family: "Candu";
  src: url("fonte/Candu.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Olive Display";
  src: url("fonte/OliveDisplay-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Olive Display";
  src: url("fonte/OliveDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("fonte/Raleway-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.site-header {
  width: 100%;
  padding: 32px 20px 0px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.main-nav {
  width: min(650px, 100%);
  min-height: 52px;
  padding: 4px 10px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;

  border: 2px solid #eb36ef;
  border-radius: 999px;
  background: #cfe1fa;
}

.nav-link {
  min-height: 40px;
  padding: 7px 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #111118;
  font-family: "Olive Display";
  /* src: url("OliveDisplay-ExtraLight.otf") format("opentype"); */
  font-weight: 200;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  transition:
    color 220ms ease,
    background-color 220ms ease,
    transform 220ms ease;
}

.nav-link:hover {
  color: #eb36ef;
}

.nav-link:active {
  transform: scale(0.97);
}

/* Den aktuelle side */

.nav-link.active {
  background: #eb36ef;
  color: #fff;
}

.nav-link.active:hover {
  color: #fff;
}
/* ========================================
   FONT TIL KONTAKT POPUP
======================================== */

/* @font-face {
  font-family: "Olive Display";
  src: url("OliveDisplay-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
} */

/* Kontakt skal fortsat ligne de andre menupunkter */
.contact-trigger {
  cursor: pointer;
}

/* ========================================
   KONTAKT POPUP – BAGGRUND
======================================== */

.contact-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: grid;
  place-items: center;

  padding: 24px;

  background-color: rgb(207 225 250 / 82%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

.contact-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ========================================
   SELVE DEN LILLA BOKS
======================================== */

.contact-popup-card {
  width: min(665px, calc(100vw - 48px));
  min-height: 395px;

  padding: 110px 53px 95px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;

  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 17px;

  background: linear-gradient(155deg, #f4aef8 0%, #c78ef5 45%, #625cff 100%);

  box-shadow:
    0 24px 60px rgb(64 55 165 / 15%),
    inset 0 1px 0 rgb(255 255 255 / 22%);

  opacity: 0;
  transform: translateY(25px) scale(0.96);

  transition:
    opacity 350ms ease,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-popup.is-open .contact-popup-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ========================================
   BEGGE KONTAKTFELTER
======================================== */

.contact-linkedin,
.contact-email {
  width: 100%;
  min-height: 83px;

  padding: 16px 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  font-family: "Olive Display", sans-serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 200;
  line-height: 1.1;

  text-decoration: none;

  box-shadow: 0 8px 13px rgb(48 35 119 / 28%);

  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
}

/* ========================================
   LINKEDIN-FELT
======================================== */

.contact-linkedin {
  position: relative;

  background-color: #ffffff;
  color: #12121a;
}
.contact-linkedin span {
  position: absolute;
  right: 68px;
  white-space: nowrap;
}
.contact-linkedin img {
  position: absolute;
  left: 68px;

  width: 53px;
  height: 53px;

  display: block;
  object-fit: contain;
}

/* ========================================
   E-MAILFELT
======================================== */

.contact-email {
  border: 1px solid rgb(255 255 255 / 75%);

  background-color: rgb(255 255 255 / 24%);
  color: #12121a;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ========================================
   HOVER
======================================== */

.contact-linkedin:hover,
.contact-email:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 19px rgb(48 35 119 / 34%);
}

/* Fokus ved tastaturnavigation */
.contact-linkedin:focus-visible,
.contact-email:focus-visible,
.contact-trigger:focus-visible {
  outline: 3px solid #eb36ef;
  outline-offset: 4px;
}
/* Mobil */

@media (max-width: 600px) {
  .site-header {
    padding: 20px 14px;
  }

  .main-nav {
    padding: 4px;
  }

  .nav-link {
    min-height: 36px;
    padding: 7px 8px;
    font-size: clamp(0.82rem, 3.6vw, 1rem);
  }
  .contact-popup {
    padding: 18px;
  }

  .contact-popup-card {
    width: 100%;
    min-height: 330px;

    padding: 70px 24px;
  }

  .contact-linkedin,
  .contact-email {
    min-height: 72px;

    padding: 14px 18px;

    font-size: 1.25rem;
  }

  .contact-linkedin {
    justify-content: flex-start;
    gap: 18px;
  }

  .contact-linkedin img {
    position: static;

    width: 45px;
    height: 45px;

    flex-shrink: 0;
  }

  .contact-email {
    overflow-wrap: anywhere;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .contact-linkedin span {
    position: static;
  }
}

@media (max-width: 400px) {
  .contact-popup-card {
    padding: 60px 16px;
  }

  .contact-linkedin,
  .contact-email {
    padding: 14px 12px;
    font-size: clamp(0.95rem, 4.6vw, 1.25rem);
  }

  .contact-linkedin img {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 600px) {
  .contact-linkedin span {
    position: static;
  }
}

@media (max-width: 400px) {
  .contact-popup-card {
    padding: 60px 16px;
  }

  .contact-linkedin,
  .contact-email {
    padding: 14px 12px;
    font-size: clamp(0.95rem, 4.6vw, 1.25rem);
  }

  .contact-linkedin img {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 400px) {
  .footer-content {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  /* Stregen fjernes på lille mobil */
  .footer-line {
    display: none;
  }

  /* Ikonet må ikke blive klemt */
  .linkedin-link {
    display: flex;
    flex-shrink: 0;
  }

  .linkedin-link img {
    width: 36px;
    height: 36px;
  }

  .email-link {
    min-width: 0;
    font-size: clamp(0.8rem, 4vw, 1rem);
    overflow-wrap: anywhere;
  }
}
/* ========================================
   LOGO
======================================== */

.site-header {
  position: relative;
}

.site-logo {
  position: absolute;
  top: 32px;
  left: 40px;

  height: 52px; /* samme højde som menuen, så de flugter */
  display: flex;
  align-items: center;
}

.site-logo img {
  display: block;
  width: 190px;
  height: auto;
}

/* Mellemstore skærme: menuen flyttes til højre, så den ikke rammer logoet */
@media (max-width: 1100px) {
  .site-header {
    justify-content: flex-end;
    padding-right: 30px;
  }

  .site-logo {
    left: 30px;
  }

  .site-logo img {
    width: 140px;
  }
}
@media (min-width: 601px) and (max-width: 1500px) {
  .site-logo {
    display: none;
  }
}
/* Mobil */
@media (max-width: 600px) {
  .site-logo {
    top: 20px;
    left: 16px;
    height: 40px;
  }

  .site-logo img {
    width: 150px;
  }
}