/* Shared side navigation — loaded by every page. Do not copy .sitenav rules into pages. */
:root {
  --sidenav-w: 216px;
  --sidenav-top: 52px;
  --terra: #ac6048;
}

html body {
  margin-left: var(--sidenav-w);
  transition: margin-left 0.18s ease;
}

.sitenav-mobilebar,
.sitenav-backdrop,
.sitenav-toggle,
.sitenav-reopen { display: none; }

.sitenav-shell {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidenav-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--panel, #fff);
  border-right: 1px solid var(--line, #e3e2dd);
  border-top: 3px solid var(--terra);
  overflow: auto;
  overscroll-behavior: contain;
  transition: transform 0.18s ease;
}

.sitenav-brandrow {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  border-bottom: 1px solid var(--line, #e3e2dd);
}

.sitenav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 18px 8px 14px 16px;
  text-decoration: none;
  color: var(--text, #23262e);
}
.sitenav-brand img {
  display: block;
  width: 92px;
  height: auto;
  background: transparent;
}
.sitenav-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  min-width: 0;
}
.sitenav-brand-street {
  font-size: 11px;
  font-weight: 550;
  line-height: 1.25;
  color: var(--muted, #7a7f8c);
  letter-spacing: 0;
}
.sitenav-brand-name {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.sitenav-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 10px 8px 0 0;
  flex: none;
  border: 1px solid var(--line, #e3e2dd);
  border-radius: 8px;
  background: var(--bg, #f7f7f5);
  color: var(--text, #23262e);
  cursor: pointer;
  padding: 0;
}
.sitenav-collapse svg { width: 16px; height: 16px; }
.sitenav-collapse:hover { background: rgba(0,0,0,0.05); }

.sitenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px 16px;
  flex: 1;
}
.sitenav a {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted, #7a7f8c);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.2;
}
.sitenav a:hover { color: var(--text, #23262e); background: rgba(0,0,0,0.04); }
.sitenav a.active {
  background: var(--select, #5c6370);
  color: var(--select-ink, #fff);
  font-weight: 600;
}
.sitenav a.icon-only { padding: 8px 10px; }
.sitenav a[hidden] { display: none !important; }
.sitenav svg { width: 15px; height: 15px; flex: none; }
.sitenav img.sitenav-favicon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: none;
  border-radius: 2px;
}
.sitenav-euro {
  width: 15px;
  flex: none;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

.sitenav-foot {
  margin-top: auto;
  padding: 10px 8px 14px;
  border-top: 1px solid var(--line, #e3e2dd);
}
.sitenav-lang {
  display: flex;
  gap: 3px;
  background: var(--bg, #f7f7f5);
  border: 1px solid var(--line, #e3e2dd);
  border-radius: 9px;
  padding: 3px;
}
.sitenav-lang button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted, #7a7f8c);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}
.sitenav-lang button.on {
  background: var(--select, #5c6370);
  color: var(--select-ink, #fff);
}

/* Per-page top-right switchers — language lives in the sidebar footer. */
.langswitch,
.langsw,
#lang-switch { display: none !important; }

.sitenav-reopen {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 45;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line, #e3e2dd);
  border-radius: 8px;
  background: var(--panel, #fff);
  color: var(--text, #23262e);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sitenav-reopen svg { width: 18px; height: 18px; }

@media (min-width: 881px) {
  html body.sitenav-collapsed { margin-left: 0; }
  html body.sitenav-collapsed .sitenav-shell {
    transform: translateX(-105%);
    pointer-events: none;
  }
  html body.sitenav-collapsed .sitenav-reopen { display: inline-flex; }
}

@media (max-width: 880px) {
  html body { margin-left: 0; }
  html { padding-top: var(--sidenav-top); }

  .sitenav-collapse,
  .sitenav-reopen { display: none !important; }

  .sitenav-mobilebar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sidenav-top);
    z-index: 50;
    padding: 0 10px;
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--line, #e3e2dd);
  }
  .sitenav-mobilebar .sitenav-brand-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text, #23262e);
    min-width: 0;
  }
  .sitenav-mobilebar .sitenav-brand-sm img {
    display: block;
    height: 32px;
    width: auto;
    flex: none;
  }
  .sitenav-mobilebar .sitenav-brand-text { align-items: flex-start; text-align: left; }
  .sitenav-mobilebar .sitenav-brand-street { font-size: 10px; }
  .sitenav-mobilebar .sitenav-brand-name { font-size: 13px; }

  .sitenav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--line, #e3e2dd);
    border-radius: 8px;
    background: var(--bg, #f7f7f5);
    color: var(--text, #23262e);
    cursor: pointer;
    padding: 0;
    flex: none;
  }
  .sitenav-toggle svg { width: 18px; height: 18px; }

  .sitenav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 48;
    background: rgba(0,0,0,0.35);
  }
  body.sitenav-open .sitenav-backdrop { display: block; }

  .sitenav-shell {
    transform: translateX(-105%);
    z-index: 49;
    box-shadow: none;
  }
  body.sitenav-open .sitenav-shell {
    transform: none;
    box-shadow: 8px 0 24px rgba(0,0,0,0.12);
  }
}