/* palette v0 with yellow */
/* :root {
  --bg: #fefedf;
  --primary: #FF5852;      
  --secondary: #F9F871;          
  --brand: #5A4FCF;   
  --text: #494554;        
  --muted: #A29BB0;       
}  */

:root {
  /* palette v1  */
  /* --text: #ffffff;
  --primary: #ff5852;      
  --secondary: #00C2A8;          
  --brand: #5A4FCF;   
  --bg: #2C2B30;        
  --muted: #8E8D94;       */

  /* palette v2 - SOFT */
  --bg: #fff7e5;
  --primary: #ffc255;
  --secondary: #007c7a;
  --brand: #5a4fcf;
  --text: #0a1a1a;
  --muted: #5e5c64;
  /* alternativ: */
  /* --muted: #9b98a6 */
  /* --muted: #a29bb0 */

  /* reusable */
  --header-height: 4rem;

  /* font weights */
  --font-weight-normal: 500;
  --font-weight-bold: 600;

  /* font sizes */
  --font-size-xs: 0.95rem;
  --font-size-s: clamp(1.2rem, 3.5vw, 1.4rem);
  --font-size-m: clamp(1.5rem, 4vw, 2.2rem);
  --font-size-l: clamp(1.8rem, 3.5vw, 2.2rem);
  --font-size-xl: clamp(2.2rem, 4.5vw, 3rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  font-family:
    "Lexend",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-s);
  text-transform: lowercase;
  text-align: justify;
  background: var(--primary);
  color: var(--text);
  line-height: 1.85;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url("../assets/bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-position-y: -100vh;
}

/* ul li::marker {
  content: "▶ ";
} */

/* Header / Nav */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  backdrop-filter: saturate(140%) blur(8px);
  background: var(--bg);
  z-index: 1000;
}

.nav {
  display: flex;
  gap: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav__link {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  padding: 0.25rem 0.75rem;
  position: relative;
}

.nav__link:hover {
  color: var(--primary);
  text-decoration: none;
  transition: none;
}

.nav__link.active {
  color: var(--primary);
}

.lang__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted);
  padding: 0.45rem 0.6rem;
  border-radius: 0.6rem;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

.lang__toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Base Section Styles */
.section {
  min-height: 100vh;
  padding: 7rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: justify;
  gap: 0.75rem;
  opacity: 0;
  /* transform: translateY(40px); */
  transition:
    opacity 800ms ease,
    transform 800ms ease;
  scroll-snap-align: start;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
.site-footer {
  text-align: center;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--bg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  width: 100vw;
  margin-top: 2rem;
  position: relative;
  z-index: 10;
  flex-wrap: wrap;
}

.site-footer p {
  margin: 0;
  white-space: nowrap;
}

/* Small screens */
@media (max-width: 767px) {
  .nav {
    gap: 0.6rem;
    position: static;
    transform: none;
    justify-content: center;
    width: 100%;
  }

  .nav__link {
    font-size: var(--font-size-xs);
  }

  .lang__toggle {
    display: none;
  }

  .section {
    padding-top: 6.5rem;
  }

  .site-footer {
    font-size: 0.85rem;
    padding: 1rem 1rem;
    gap: 0.25rem;
    width: calc(100vw - var(--header-height));
    flex-wrap: wrap;
    height: auto;
  }

  .footer__separator {
    display: none;
  }

  .site-footer p {
    white-space: normal;
  }
}