/*------------------------------*/
/* Universelle                  */
/*------------------------------*/

/* Define color scheme and custom colors for light and dark modes,
based on user preference  */

:root {
  color-scheme: light dark;
  --nav_background: light-dark(hsl(0, 0%, 18%), hsl(0, 0%, 18%));
  --nav_text: light-dark(#e7e7e7, #e7e7e7);
  --kimchi_black: light-dark(#303030, #e7e7e7);
  --kimchi_white: light-dark(#e7e7e7, #303030);
  --kimchi_pink: light-dark(#fc9ae6, #f09adc);
  --kimchi_turquoise: light-dark(#9afcc2, #a3fcb6);
  --kimchi_green: light-dark(#adfc9a, #acd2a3);
  --kimchi_lavender: light-dark(#7b5f76, #a78fa2);
  --kimchi_purple: light-dark(#d29afc, #bea3d2);
}

body {
  font-family: "Catamaran", sans-serif;
  background-color: var(--kimchi_); /* Light gray background */
}

h1 {
  font-family: "Bangers", sans-serif;
  font-size: 3rem;
  color: var(--kimchi_pink);
  text-shadow: var(--kimchi_turquoise) 0.1rem 0.2rem;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.25); /* stroke for better readability */
}

h2 {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 2rem;
  color: var(--kimchi_turquoise);
  text-shadow: var(--kimchi_lavender) 0.15rem 0.15rem;
  -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.5); /* stroke for better readability */
}

h3 {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 1.5rem;
  color: var(--kimchi_turquoise);
  text-shadow: var(--kimchi_lavender) 0.12rem 0.12rem;
}

p {
  font-family: "Catamaran", sans-serif;
  font-size: 1.2rem;
  color: var(--kimchi_black);
  text-align: left;
}

aside {
  background-color: var(--kimchi_white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

aside > * {
  font-family: "Catamaran", sans-serif;
  font-size: 1rem;
  color: var(--kimchi_black);
  max-width: 100ch;
  text-align: center;
  margin: auto;
}

aside div:first-child,
details > summary {
  font-family: "Bangers", sans-serif;
  font-size: 1.2rem;
  color: var(--kimchi_green);
  text-shadow: var(--kimchi_lavender) 0.1rem 0.1rem;
  text-transform: uppercase;
  text-align: center;
  -webkit-text-stroke: 0.25px rgba(28, 26, 26, 0.25);
}

details > summary {
  cursor: pointer;
  background-color: var(--kimchi_white);
  margin-bottom: 0;
  margin-top: 0;
  padding: 0.5rem;
}

#about-me-image-section {
  width: 100%;
}

#about-me-image-section img {
  display: block;
  max-width: 100%;
  height: auto;
}

li {
  list-style: none;
}

.content-description p {
  font-size: 1rem;
  font-style: italic;
}

hr {
  border: none;
  height: 0.2rem;
  width: 40vw;
  background-color: var(--kimchi_purple);
  margin: 1rem auto 1rem auto;
}

/* manuel import fordi den anden ikke virkede */
/* @font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivonarrow/v35/tss0ApVBdCYD5Q7hcxTE1ArZ0bbwiXxw2d8o.woff2)
    format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivonarrow/v35/tss2ApVBdCYD5Q7hcxTE1ArZ0bb1uX563v0qNxg.woff2)
    format("woff2");
} */

/*------------------------------*/
/* Ikoner                       */
/*------------------------------*/
.icon-facebook {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M23 2v20h-1v1h-8v-8h2v-1h1v-2h-3V9h1V8h2V5h-4v1h-2v2h-1v4H7v3h3v8H2v-1H1V2h1V1h20v1z'/%3E%3C/svg%3E");
  background-color: #0165e1;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.icon-instagram {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V8h-1V7h-1V6H9v1H8v1H7v1H6v6h1v1h1v1h1v1h6v-1h1v-1h1v-1h1V9zm-1 5h-1v1h-1v1h-4v-1H9v-1H8v-4h1V9h1V8h4v1h1v1h1z'/%3E%3Cpath fill='%23000' d='M22 5V3h-1V2h-2V1H5v1H3v1H2v2H1v14h1v2h1v1h2v1h14v-1h2v-1h1v-2h1V5zm-1 14h-1v1h-1v1H5v-1H4v-1H3V5h1V4h1V3h14v1h1v1h1z'/%3E%3Cpath fill='%23000' d='M17 5h2v2h-2z'/%3E%3C/svg%3E");
  background-color: #ee2a7b;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.icon-linkedin {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 2V1H2v1H1v20h1v1h20v-1h1V2zm-9 10v8h-3V9h3v1h1V9h4v1h1v10h-3v-8zM4 8V5h3v3zm3 1v11H4V9z'/%3E%3C/svg%3E");
  background-color: #0a66c2;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#social-links a {
  margin: 0.2rem;
  text-decoration: none;
}

/*------------------------------*/
/* Animations                   */
/*------------------------------*/

.wiggle {
  animation: wiggle 10s ease-in-out infinite;
}
.hide {
  visibility: hidden;
}

/*------------------------------*/
/* Herosite Animations          */
/*------------------------------*/

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(-2deg);
  }

  30% {
    transform: rotate(2deg);
  }

  40% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

/*------------------------------*/
/* Navigation                   */
/*------------------------------*/

header {
  background-color: var(--nav_background);
}

.nav-hovedmenu a {
  color: var(--nav_text);
  text-decoration: none;
}

.nav-logo {
  font-size: 2rem; /* size of logo text */
  font-weight: bold;
}

.nav-logo img {
  height: 2rem; /* Match font-size for visibility */
  width: auto;
}

.nav-link {
  transition: 0.3s ease; /* smooth transition */
  font-family: "Catamaran", sans-serif;
  font-weight: bold;
}

.nav-link:hover {
  color: var(--kimchi_pink); /* hover effect */
}

.hamburger-menu {
  display: none; /* Hidden by default, shown in mobile version */
  cursor: pointer;
}

.hamburger-part {
  background-color: var(--nav_text);
  border-radius: 1rem; /* rounded edges */
  transition: all 0.3s ease;
}

/*------------------------------*/
/* Herosite                     */
/*------------------------------*/

.hero-section {
  background-image: url("../assets/forside/shibuya-horisontal.webp");
}
#om-mig-hero:hover img {
  content: url("../assets/forside/paper-me-hover.webp");
}

#intro-hero:hover img {
  content: url("../assets/forside/paper-money-hover.webp");
}

#web-hero:hover img {
  content: url("../assets/forside/paper-briefcase-hover.webp");
}

#uxui-hero:hover img {
  content: url("../assets/forside/paper-figure-hover.webp");
}

#content-hero:hover img {
  content: url("../assets/forside/paper-ramen-hover.webp");
}

/*------------------------------*/
/* Kode styling              */
/*------------------------------*/
/* Centrer kodeblokken på siden */
.kode-blok {
  position: relative;
  width: fit-content;
  max-width: 100ch;
  margin: 0 auto;
  background-color: var(--kimchi_white);
  border-radius: 0.5rem;
}

/* Label i øverste venstre hjørne */
.kode-blok::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--kimchi_green);
  color: var(--nav_background);
  font-family: "Bangers", sans-serif;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Pre = selve boksen */
.kode-blok pre {
  margin: 0;
  padding: 1.75rem 1rem 1rem; /* plads til label */
  overflow-x: auto;
  text-align: left; /* 👈 tekst mod venstre */
}

/* Code = teksten */
.kode-blok code {
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--kimchi_black);

  /* reset AL styling der kan arves */
  text-transform: none;
  text-shadow: none;
  letter-spacing: normal;
}

.next-pre-knap {
  margin: 1rem auto 1rem auto;
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
  border: 0.1rem solid var(--kimchi_black);
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, var(--kimchi_pink), var(--kimchi_turquoise));
  box-shadow: 0 4px 8px rgba(2, 2, 2, 0.2);
  color: var(--nav_background);
  text-decoration: none;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: inline-block;
}

.next-pre-knap:hover {
  background: linear-gradient(to bottom, var(--kimchi_lavender), var(--kimchi_green));
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(2, 2, 2, 0.3);
  color: var(--kimchi_black);
}

/*------------------------------*/
/* Mobil version                */
/*------------------------------*/

@media (max-width: 768px) {
  .hamburger-menu.active .hamburger-part:nth-child(1) {
    transform: translateY(0.9rem) rotate(45deg); /* Move down and rotate */
  }
  .hamburger-menu.active .hamburger-part:nth-child(2) {
    opacity: 0; /* Hide middle bar */
  }
  .hamburger-menu.active .hamburger-part:nth-child(3) {
    transform: translateY(-0.9rem) rotate(-45deg); /* Justér for bedre kryds */
  }

  .nav-menupunkter {
    background-color: var(--nav_background);
  }

  .hero-section {
    background-image: url("../assets/forside/shibuya-vertical.webp");
  }

  h1 {
    font-size: 2.5rem;
    max-width: 15ch;
  }
}