/* ========================================
   HEADER
   ======================================== */

.site-header {
  width: 100%;
}

/* ========================================
   MAIN NAVIGATION
   ======================================== */

.main-nav {
  /* ========================================
     NAVIGATION VARIABLES
     ======================================== */

  /* USER SETTINGS */

  /* Layout */
  --menu-drop: 2rem;
  --menu-gap: 2rem;
  --left-nav-group-horizontal-shift: 1rem;

  /* Navigation opacity */
  --nav-opacity-common: 0.6;
  --nav-opacity-background: 0.35;
  --nav-opacity-child: 0.6;
  --nav-opacity-active: 0.6;
  --nav-opacity-important: 1;

  /* Navigation weight */
  --nav-weight-common: 490;
  --nav-weight-active: 490;
  --nav-weight-important: 500;

  /* Interaction */
  --nav-color-speed: 0.05s;

  /* Collapse animation */
  --collapse-animation-delay: 0.65s;
  --collapse-animation-speed: 0.5s;
  --collapse-animation-top: 0rem;
  --collapse-animation-height: 1.1rem;

  /* Buttons */
  --collapse-button-size: 1rem;
  --start-button-size: 1.25rem;
  --spielwerk-collapse-horizontal-shift: 0.3rem;

  /* Separators */
  --separator-width: 1px;
  --separator-height: 1rem;
  --separator-color: rgb(0 0 0 / var(--nav-opacity-child));

  /* ========================================
     NAVIGATION LAYOUT
     ======================================== */

  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

/* ========================================
   LEFT NAVIGATION
   ======================================== */

.nav-left {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: var(--menu-gap);
  align-items: center;
}

/* Left navigation group position */
.spiel-werk-slot,
.games-slot,
.architecture-slot {
  translate: var(--left-nav-group-horizontal-shift) 0;
}

/* ========================================
   RIGHT NAVIGATION
   ======================================== */

.nav-right {
  display: flex;
  gap: var(--menu-gap);
  align-items: center;
}

/* ========================================
   NAVIGATION SEPARATORS
   ======================================== */

/* ========================================
   SEPARATOR ANCHORS
   ======================================== */

/* Left navigation */
.games-slot,
.architecture-slot,

/* Right navigation */
.nav-right > *,

/* Drop-down navigation */
.spiel-werk-drop-down > *,
.socials-drop-down > *,
.network-drop-down > *,
.games-drop-down > *,
.digital-drop-down > *,
.tabletop-drop-down > *,
.login-drop-down > *,
.parametric-design-project-rest > *,
.project-management-drop-down > * {
  position: relative;
}

/* ========================================
   STANDARD SEPARATORS
   ======================================== */

/* Left navigation */
.games-slot::before,
.architecture-slot::before,

/* Right navigation */
.nav-right > * + *::before,

/* Drop-down navigation */
.spiel-werk-drop-down > * + *::before,
.socials-drop-down > * + *::before,
.network-drop-down > * + *::before,
.games-drop-down > * + *::before,
.digital-drop-down > * + *::before,
.tabletop-drop-down > * + *::before,
.login-drop-down > * + *::before,
.parametric-design-project-rest > * + *::before,
.project-management-drop-down > * + *::before {
  content: "";
  position: absolute;

  left: calc(var(--menu-gap) / -2);
  top: 50%;

  width: var(--separator-width);
  height: var(--separator-height);

  background: var(--separator-color);
  transform: translateY(-50%);
}

/* ========================================
   ARCHITECTURE SEPARATORS
   ======================================== */

/* Top row */
.main-nav.architecture-open .architecture-slot::before,
.main-nav.architecture-open .architecture-slot::after {
  content: "";
  position: absolute;

  top: 50%;

  width: var(--separator-width);
  height: var(--separator-height);

  background: var(--separator-color);
  transform: translateY(-50%);
}

.main-nav.architecture-open .architecture-slot::before {
  left: calc(var(--menu-gap) / -2);
}

.main-nav.architecture-open .architecture-slot::after {
  right: calc(var(--menu-gap) / -2);
}

/* Start column */
.main-nav.architecture-open .start-button-placeholder {
  position: relative;
}

.main-nav.architecture-open .start-button-placeholder::after {
  content: "";
  position: absolute;

  top: 50%;
  right: calc(var(--menu-gap) / -2);

  width: var(--separator-width);
  height: var(--separator-height);

  background: var(--separator-color);
  transform: translateY(-50%);
}

/* Second row */
#architecture-button {
  position: relative;
}

.architecture-slot.is-open > #architecture-button::before,
.architecture-slot.is-open > #architecture-button::after {
  content: "";
  position: absolute;

  top: 50%;

  width: var(--separator-width);
  height: var(--separator-height);

  background: var(--separator-color);
  transform: translateY(-50%);
}

.architecture-slot.is-open > #architecture-button::before {
  left: calc(var(--menu-gap) / -2);
}

.architecture-slot.is-open > #architecture-button::after {
  right: calc(var(--menu-gap) / -2);
}

/* Studio row */
.architecture-slot:has(.parametric-design-slot.is-open)
  > #architecture-button::before {
  box-shadow: 0 var(--menu-drop) 0 var(--separator-color);
}

.architecture-slot:has(.project-management-slot.is-open)
  > #architecture-button::after {
  box-shadow: 0 var(--menu-drop) 0 var(--separator-color);
}

/* ========================================
   PARENT-TO-DROP-DOWN SEPARATORS
   ======================================== */

.spiel-werk-slot.is-open > .spiel-werk-drop-down > :first-child::before,
.socials-slot.is-open > .socials-drop-down > :first-child::before,
.network-slot.is-open > .network-drop-down > :first-child::before,
.games-slot.is-open > .games-drop-down > :first-child::before,
.digital-slot.is-open > .digital-drop-down > :first-child::before,
.tabletop-slot.is-open > .tabletop-drop-down > :first-child::before,
.parametric-design-project-rest > :first-child::before {
  content: "";
  position: absolute;

  left: calc(var(--menu-gap) / -2);
  top: 50%;

  width: var(--separator-width);
  height: var(--separator-height);

  background: var(--separator-color);
  transform: translateY(-50%);
}

/* Login */
.login-slot.is-open > .login-drop-down > :last-child::after {
  content: "";
  position: absolute;

  right: calc(var(--menu-gap) / -2);
  top: 50%;

  width: var(--separator-width);
  height: var(--separator-height);

  background: var(--separator-color);
  transform: translateY(-50%);
}

/* ========================================
   GLOBAL NAVIGATION MECHANICS
   ======================================== */

/* Default hidden elements */
.collapse-button,
.spiel-werk-drop-down,
.socials-drop-down,
.network-drop-down,
.games-drop-down,
.digital-drop-down,
.tabletop-drop-down,
.architecture-drop-down,
.parametric-design-slot,
.parametric-design-drop-down,
.project-management-slot,
.project-management-drop-down,
.login-drop-down {
  display: none;
}

/* Positioning anchors */
.spiel-werk-slot,
.socials-slot,
.network-slot,
.games-slot,
.digital-slot,
.tabletop-slot,
.architecture-slot,
.parametric-design-slot,
.project-management-slot,
.search-slot,
.login-slot,
.shop-slot {
  position: relative;
}

/* ========================================
   START
   ======================================== */

/* Start button position */
.start-button-placeholder {
  position: relative;
  width: var(--start-button-size);
  height: var(--start-button-size);
}

.start-button {
  position: absolute;
  inset: 0;

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

/* Start button icon */
.start-button svg {
  width: var(--start-button-size);
  height: var(--start-button-size);
  display: block;
}

/* Start button + Spiel-Werk share the same grid space */
.start-button-placeholder,
.spiel-werk-slot {
  grid-column: 1;
  grid-row: 1;
}

/* Show Start button when Architecture is open */
.main-nav.architecture-open .start-button {
  display: flex;
}

/* ========================================
   SPIEL-WERK
   ======================================== */

/* Spiel-Werk drop-down position */
.spiel-werk-drop-down {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));

  gap: var(--menu-gap);
}

/* Spiel-Werk open state */
.spiel-werk-slot.is-open > #spiel-werk-button {
  transform: translateY(var(--menu-drop));
}

.spiel-werk-slot.is-open > .spiel-werk-drop-down {
  display: flex;
  transform: translateY(var(--menu-drop));
}

.spiel-werk-slot.is-open > #spiel-werk-collapse-button {
  display: block;
}

/* ========================================
   SOCIALS
   ======================================== */

/* Socials drop-down position */
.socials-drop-down {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));
}

/* Socials open state */
.socials-slot.is-open > #socials-button {
  transform: translateY(var(--menu-drop));
}

.socials-slot.is-open > .socials-drop-down {
  display: flex;
  gap: var(--menu-gap);
  transform: translateY(var(--menu-drop));
}

.socials-slot.is-open > #socials-collapse-button {
  display: block;
}

/* ========================================
   NETWORK
   ======================================== */

/* Network drop-down position */
.network-drop-down {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));
}

/* Network open state */
.network-slot.is-open > #network-button {
  transform: translateY(var(--menu-drop));
}

.network-slot.is-open > .network-drop-down {
  display: flex;
  gap: var(--menu-gap);
  transform: translateY(var(--menu-drop));
}

.network-slot.is-open > #network-collapse-button {
  display: block;
}

/* Network drop-down items */
.network-drop-down > .nav-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================
   GAMES
   ======================================== */

/* Games drop-down position */
.games-drop-down {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));

  gap: var(--menu-gap);
}

/* Games open state */
.games-slot.is-open > #games-button {
  transform: translateY(var(--menu-drop));
}

.games-slot.is-open > .games-drop-down {
  display: flex;
  transform: translateY(var(--menu-drop));
}

.games-slot.is-open > #games-collapse-button {
  display: block;
}

/* ========================================
   DIGITAL
   ======================================== */

/* Digital drop-down position */
.digital-drop-down {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));
}

/* Digital open state */
.digital-slot.is-open > #digital-button {
  transform: translateY(var(--menu-drop));
}

.digital-slot.is-open > .digital-drop-down {
  display: flex;
  gap: var(--menu-gap);
  transform: translateY(var(--menu-drop));
}

.digital-slot.is-open > #digital-collapse-button {
  display: block;
}

/* ========================================
   TABLETOP
   ======================================== */

/* Tabletop drop-down position */
.tabletop-drop-down {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));
}

/* Tabletop open state */
.tabletop-slot.is-open > #tabletop-button {
  transform: translateY(var(--menu-drop));
}

.tabletop-slot.is-open > .tabletop-drop-down {
  display: flex;
  gap: var(--menu-gap);
  transform: translateY(var(--menu-drop));
}

.tabletop-slot.is-open > #tabletop-collapse-button {
  display: block;
}

/* ========================================
   ARCHITECTURE
   ======================================== */

/* Architecture drop-down position */
.architecture-drop-down {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Architecture open state */
.architecture-slot.is-open > #architecture-button {
  transform: translateY(var(--menu-drop));
}

.architecture-slot.is-open > .architecture-drop-down {
  display: block;
  transform: translateY(var(--menu-drop));
}

.architecture-slot.is-open > #architecture-collapse-button {
  display: block;
}

/* Hide standard left navigation while Architecture is open */
.main-nav.architecture-open .spiel-werk-slot,
.main-nav.architecture-open .games-slot {
  visibility: hidden;
}

/* Architecture first row */
.architecture-slot.is-open > .parametric-design-slot {
  display: block;
  position: absolute;

  top: 0;
  right: calc(100% + var(--menu-gap));

  width: max-content;
}

.architecture-slot.is-open > .project-management-slot {
  display: block;
  position: absolute;

  top: 0;
  left: calc(100% + var(--menu-gap));

  width: max-content;
}

/* Nils */
#nils-link {
  position: absolute;
  top: 0;
  right: calc(100% + var(--menu-gap));
}

/* Kai */
#kai-link {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));
}

/* Studio */
#studio-link {
  position: absolute;
  top: var(--menu-drop);
  left: 50%;

  transform: translateX(-50%);
}

/* ========================================
   PARAMETRIC DESIGN
   ======================================== */

/* Parametric Design open state */
.parametric-design-slot.is-open > #parametric-design-button {
  transform: translateY(var(--menu-drop));
}

.parametric-design-slot.is-open > #parametric-design-collapse-button {
  display: block;
}

.parametric-design-slot.is-open > .parametric-design-drop-down {
  display: block;
  position: absolute;

  top: calc(var(--menu-drop) * 3);
  right: 0;

  width: max-content;
}

/* Parametric Design drop-down */
.parametric-design-drop-down {
  position: relative;
}

.parametric-design-drop-down > .nav-item {
  white-space: nowrap;
}

/* Parametric Design project row */
.parametric-design-project-rest {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap));

  display: flex;
  gap: var(--menu-gap);

  width: max-content;
}

.parametric-design-project-rest > .nav-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Move Nils down when Parametric Design is open */
.architecture-slot:has(.parametric-design-slot.is-open) #nils-link {
  transform: translateY(var(--menu-drop));
}

/* ========================================
   PROJECT MANAGEMENT
   ======================================== */

/* Project Management open state */
.project-management-slot.is-open > #project-management-button {
  transform: translateY(var(--menu-drop));
}

.project-management-slot.is-open > #project-management-collapse-button {
  display: block;
}

/* Project Management drop-down */
.project-management-slot.is-open > .project-management-drop-down {
  display: flex;
  position: absolute;

  top: calc(var(--menu-drop) * 3);
  left: 0;

  gap: var(--menu-gap);
  width: max-content;
}

.project-management-drop-down > .nav-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Move Kai down when Project Management is open */
.architecture-slot:has(.project-management-slot.is-open) #kai-link {
  transform: translateY(var(--menu-drop));
}

/* ========================================
   LOGIN
   ======================================== */

/* Login drop-down position */
.login-drop-down {
  position: absolute;
  top: 0;
  right: calc(100% + var(--menu-gap));
}

/* Login open state */
.login-slot.is-open > #login-button {
  transform: translateY(var(--menu-drop));
}

.login-slot.is-open > .login-drop-down {
  display: flex;
  gap: var(--menu-gap);
  transform: translateY(var(--menu-drop));
}

.login-slot.is-open > #login-collapse-button {
  display: block;
}

/* Login drop-down items */
.login-drop-down > .nav-item {
  white-space: nowrap;
  flex-shrink: 0;
}