/* Side menu, same look and behaviour as Bouwplan. */
x-navigation {
  flex: none;
  width: var(--rail);
  position: relative;
  z-index: 40;
  transition: width var(--dur) var(--ease);

  .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nav-bg);
    color: var(--nav-fg);
    border-top: 1px solid var(--nav-line);
    transition: width var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .label { transition: opacity var(--dur) var(--ease); }

  .head {
    flex: none;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 10px 0;
  }

  .pin {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--nav-dim);
    display: grid;
    place-items: center;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);

    &:hover { background: var(--nav-hover); color: var(--nav-strong); }
    &.on { color: var(--nav-accent); }
    & .ic { width: 18px; height: 18px; }
  }

  /* Several menus side by side; setMenu() slides the track */
  .viewport { flex: 1; min-height: 0; overflow: hidden; position: relative; }
  .track { display: flex; height: 100%; transition: transform 0.55s var(--ease); }

  .menu {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
  }

  .item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 46px;
    flex: none;
    padding: 0 15px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--nav-fg);
    text-align: left;
    white-space: nowrap;
    position: relative;
    font-weight: 500;
    font-size: 15px;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);

    & .ic { width: 22px; height: 22px; transition: color 0.25s var(--ease); }
    &:hover { background: var(--nav-hover); color: var(--nav-strong); }
    &.active, &.has-active { color: var(--nav-strong); }
    &.active { background: var(--nav-active); }
    &.active .ic, &.has-active .ic { color: var(--nav-accent); }

    /* Accent bar on the left of the active item */
    &::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 11px;
      bottom: 11px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--nav-accent);
      opacity: 0;
      transition: opacity 0.3s var(--ease);
    }
    &.active::before, &.has-active::before { opacity: 1; }

    & .caret { margin-left: auto; width: 16px; height: 16px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  }

  /* Groups with sub pages */
  .group.open .caret { transform: rotate(180deg); }
  .children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
  .group.open .children { grid-template-rows: 1fr; }
  .children-inner { overflow: hidden; min-height: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
  .group.open .children-inner { opacity: 1; }
  .children-list { margin: 4px 0 6px 25px; padding-left: 12px; border-left: 1px solid var(--nav-line); display: flex; flex-direction: column; gap: 2px; }

  .sub {
    display: flex;
    align-items: center;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--nav-dim);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);

    &:hover { color: var(--nav-strong); background: var(--nav-hover); }
    &.active { color: var(--nav-strong); background: var(--nav-active); font-weight: 600; }
  }

  /* Headings and lines */
  .separator { height: 1px; background: var(--nav-line); margin: 8px 6px; flex: none; }
  .section { padding: 2px 15px; font-size: 12px; color: var(--nav-dim); white-space: nowrap; flex: none; }

  .foot {
    flex: none;
    padding: 10px;
    border-top: 1px solid var(--nav-line);

    & .item { font-size: 14px; color: var(--nav-dim); }
    & .item:hover { color: var(--nav-strong); }
  }

  .version {
    padding: 6px 15px 2px;
    font-size: 12px;
    color: var(--nav-dim);
    white-space: nowrap;
  }

  .scrim { display: none; }
}

/* Desktop: collapsed to icons, opens on hover */
@media (min-width: 768px) {
  x-navigation:hover .inner,
  x-navigation:focus-within .inner {
    width: var(--nav-w);
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.2);
    transition-delay: 0.08s;
  }

  x-navigation:not(:hover):not(:focus-within) {
    .label { opacity: 0; pointer-events: none; }
    .children { grid-template-rows: 0fr; }
    .children-inner { opacity: 0; }
  }
}

/* Between 768px and 1100px there is no room to pin the menu */
@media (min-width: 768px) and (max-width: 1099px) {
  x-navigation .head { visibility: hidden; }
}

/* Wide screens: pinned = always open.
   The selectors repeat ":not(:hover):not(:focus-within)" on purpose: they must be at least as specific as
   the "collapsed" rules above, otherwise the labels would only show on hover. */
@media (min-width: 1100px) {
  body.navigation-pinned x-navigation { width: var(--nav-w); }
  body.navigation-pinned x-navigation .inner { width: var(--nav-w); box-shadow: none; }

  body.navigation-pinned x-navigation,
  body.navigation-pinned x-navigation:not(:hover):not(:focus-within) {
    .label { opacity: 1; pointer-events: auto; }
    .group.open .children { grid-template-rows: 1fr; }
    .group.open .children-inner { opacity: 1; }
  }
}

/* Mobile: a drawer that slides in from the left */
@media (max-width: 767px) {
  x-navigation {
    position: fixed;
    top: var(--top-h);
    bottom: 0;
    left: 0;
    width: min(var(--nav-w), 84vw);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    z-index: 60;

    .inner { width: 100%; }
    .head { display: none; }

    .scrim {
      display: block;
      position: fixed;
      inset: var(--top-h) 0 0 0;
      left: min(var(--nav-w), 84vw);
      background: rgba(8, 12, 16, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur) var(--ease);
    }
  }

  body.navigation-open x-navigation { transform: none; box-shadow: 16px 0 40px rgba(0, 0, 0, 0.3); }
  body.navigation-open x-navigation .scrim { opacity: 1; pointer-events: auto; }
}