/* ---------- Fonts & Base ---------- */
@font-face {
  font-family: 'Berthold';
  src: url('fonts/Berthold-Akzidenz-Grotesk-Medium.woff') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* ---------- Root Variables ---------- */
:root {
  /* Base unit */
  --unit: 1rem;

  /* Scaling factors */
  --line-height-multiplier: 1.2;

  /* Font sizes */
  --font-size-xs: calc(var(--unit) * 0.75);
  --font-size-sm: calc(var(--unit) * 0.875);
  --font-size-base: var(--unit);
  --font-size-lg: calc(var(--unit) * 1.25);
  --font-size-xl: calc(var(--unit) * 1.5);

  /* Line heights */
  --line-height-xs: calc(var(--font-size-xs) * var(--line-height-multiplier));
  --line-height-sm: calc(var(--font-size-sm) * var(--line-height-multiplier));
  --line-height-base: calc(var(--font-size-base) * var(--line-height-multiplier));
  --line-height-lg: calc(var(--font-size-lg) * var(--line-height-multiplier));
  --line-height-xl: calc(var(--font-size-xl) * var(--line-height-multiplier));

  /* Spacing */
  --space-xs: calc(var(--unit) * 0.25);
  --space-sm: calc(var(--unit) * 0.5);
  --space-md: var(--unit);
  --space-lg: calc(var(--unit) * 1.5);

  /* Menu specific */
  --menu-font-size: var(--font-size-base);
  --menu-line-height: var(--line-height-base);
  --menu-padding-vertical: var(--space-xs);
  --menu-padding-horizontal: var(--space-xs);
  --menu-indent: var(--space-md);
  --menu-gap: var(--space-sm);

  /* Colors */
  --color-bg: #fff;
  --color-fg: #000;
  --color-accent: #444;
  --color-hover-bg: var(--color-fg);
  --color-hover-text: var(--color-bg);
}

/* Global base */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-fg);
  background: var(--color-bg);
  font-family: 'Berthold', sans-serif;
}

a {
  color: var(--color-fg);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  font-weight: 700 ;
}

/* ---------- Header / Menu ---------- */
#topbar {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--menu-gap);
  background: transparent;
  font-family: 'Berthold', sans-serif;
}

.logo {
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
}

.menu-link,
#lang-toggle-btn {
  cursor: pointer;
  text-decoration: none;
  display: block;
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  padding: var(--menu-padding) 0;
  height: var(--menu-line-height);
}

#close-projects-btn,
.contact-btn {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  padding: var(--menu-padding);
}

#close-projects-btn:hover{
  color: #ff0000;
}

.menu-content-link {
  cursor: pointer;
  text-decoration: none;
  display: block;
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  padding: var(--menu-padding) 0 var(--menu-padding) var(--menu-indent);
  height: var(--menu-line-height);
  transition: background-color 0.2s, color 0.2s;
}

.menu-content-link:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ---------- Filter Chips ---------- */
.filter-chip {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  height: var(--chip-height);
  padding: 0 var(--space-sm);
  margin-right: var(--chip-margin);
  margin-bottom: var(--chip-margin);
  border: 1px solid var(--color-fg);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}

.filter-chip span {
  margin-left: var(--space-xs);
  color: red;
}

/* ---------- Project Windows ---------- */
.project-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: auto;
}

.project-window {
  position: absolute;
  width: 300px;
  background-color: var(--color-bg);
  border-radius: var(--space-xs);
  padding: var(--space-sm);
  animation: fadeIn 0.3s ease forwards;
  backdrop-filter: blur(4px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content-overlay {
  position: absolute;
  max-width: 400px;
  background: var(--color-bg);
  border: 0px solid var(--color-fg);
  border-radius: 0px;
  padding: var(--space-sm);
  box-sizing: border-box;
  overflow: hidden;
  cursor: grab;
  z-index: 9999 !important;
  transition: height 0.3s ease, max-height 0.3s ease;
}

.content-overlay .window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: var(--space-xs);
}

.content-overlay .window-controls button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1;
  margin-left: var(--space-xs);
}

/* collapsed project window docked at bottom */
.content-overlay.collapsed {
  /*position: fixed !important;*/
  bottom: var(--space-sm);
  left: auto; /* will be handled in JS for stacking */
  top: auto !important;
  height: auto;
  max-height: none;
  overflow: hidden;
  white-space: nowrap; /* shrink to text width */
  padding: var(--space-xs) var(--space-xs);
  border: 0px solid var(--color-fg);
  border-radius: 0px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

/* hide body when collapsed */
.content-overlay.collapsed .window-body {
  display: none;
}

/* ---------- Image Gallery ---------- */
.image-gallery {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
}

#global-gallery {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}

/* ---------- Contact Button ---------- */
.contact-btn {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
  padding: var(--space-xs);
  border-radius: var(--space-xs);
  background-color: transparent;
  color: var(--color-fg);
  cursor: pointer;
  z-index: 9999;
}

.contact-btn:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ---------- Responsiveness ---------- */
@media (max-width: 768px) {
  :root {
    --unit: 1.25rem;
    --line-height-multiplier: 1.2;
    --menu-gap: var(--space-sm);      /* smaller vertical spacing */
    --menu-padding: var(0);  /* padding inside each item */
    --menu-indent: var(--space-xs);   /* submenu indent */
    --menu-font-size: calc(var(--font-size-lg) * 1.5); /* uniform text size */
    --menu-line-height: calc(var(--menu-font-size) * var(--line-height-multiplier));
  }

  #topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*flex-direction: column;*/
    align-items: flex-start;
    gap: var(--menu-gap); /* consistent small gap */
    padding: var(--menu-gap);
    background: rgba(255,255,255);
    z-index: 10001;
  }

  .logo{
    display: block !important; 
    line-height: var(--menu-line-height);
    width: 100%;
    padding: var(--menu-gap);
    margin: 0; /* remove extra margin */
    height: var(--menu-line-height);
  }

  .menu-link,
  #lang-toggle-btn,
  .menu-content-link {
    display: block;
    font-size: var(--menu-font-size);
    line-height: var(--menu-line-height);
    padding-left: var(--menu-padding);
    padding-right: var(--menu-padding);
    margin: 0; /* remove extra margin */
    height: var(--menu-line-height);
  }

  .menu-content-link {
    padding-left: var(--menu-indent); /* consistent submenu indent */
  }

  .menu-link:hover,
  .menu-content-link:hover {
    background-color: var(--color-fg);
    color: var(--color-bg);
  }

  .filter-chip {
    margin: 0 var(--space-xs) var(--space-xs) 0; /* small spacing */
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    height: var(--chip-height);
    padding: 0 var(--space-sm);
  }

  .content-overlay {
    position: fixed !important;
    top: 10%;
    left: 5% !important;
    width: 90% !important;
    max-height: 80%;
    border-radius: var(--space-sm);
  }
}

#project-list {
  display: inline-flex;      /* inline block behavior with flex features */
  flex-wrap: wrap;           /* wrap to next line */
  gap: var(--space-sm);      /* spacing between project links */
  margin-top: var(--space-sm);
}

#project-list .project-link {
  display: inline-block;     /* allows wrapping like text */
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-base); /* consistent with menu text */
  line-height: var(--line-height-base);
  cursor: pointer;
  background-color: transparent; /* will change on hover */
  transition: background-color 0.2s, color 0.2s;
}

#project-list .project-link:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.content-overlay.collapsed {
  position: fixed !important;
  bottom: var(--space-sm);
  left: auto; /* will be handled in JS for stacking */
  top: auto !important;
  height: auto;
  max-height: none;
  overflow: hidden;
  white-space: nowrap; /* shrink to text width */
  padding: var(--space-xs) var(--space-xs);
  border: 0px solid var(--color-fg);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}


@media (max-width: 480px) {
  :root {
    --unit: 0.8rem;
    --line-height-multiplier: 1.6;
  }
}