/* ============================================================
   LAYOUT — desktop: fixed sidebar + fixed content area
   Tablet/mobile: full-width, nav bar + drawer
   ============================================================ */

/* ----------------------------------------------------------
   DESKTOP BASE (≥ 1000px)
   ---------------------------------------------------------- */

body {
  overflow: hidden;
}

.nav-bar {
  display: none;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w); /* 262px base */
  background: var(--color-black);
  z-index: 10;
}

/* Sidebar width breakpoints */
@media (min-width: 1200px) {
  .sidebar { width: 296px; }
}
@media (min-width: 1440px) {
  .sidebar { width: 356px; }
}
@media (min-width: 1920px) {
  .sidebar { width: 476px; }
}

.content-area {
  position: fixed;
  left: var(--content-left);
  right: var(--content-right);
  top: 0;
  bottom: 0;
  background: var(--color-white);
  overflow: hidden;
}

/* ----------------------------------------------------------
   VIEW SYSTEM
   ---------------------------------------------------------- */

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-view) var(--ease-view);
  z-index: 0;
}

.view.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.view--brand-overview,
.view--logo,
.view--color,
.view--typography,
.view--brand-elements,
.view--motion,
.view--brand-in-use {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.view--brand-overview::-webkit-scrollbar,
.view--logo::-webkit-scrollbar,
.view--color::-webkit-scrollbar,
.view--typography::-webkit-scrollbar,
.view--brand-elements::-webkit-scrollbar,
.view--motion::-webkit-scrollbar,
.view--brand-in-use::-webkit-scrollbar {
  display: none;
}

/* ----------------------------------------------------------
   VIEW INNER
   flex-col with gap between all sections (incl. footer nav)
   ---------------------------------------------------------- */

.view-inner {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  flex-shrink: 0;
  padding-top: var(--content-top); /* 16px: scrollable initial offset, disappears on scroll */
}

/* ----------------------------------------------------------
   TABLET (441px – 999px)
   ---------------------------------------------------------- */

@media (max-width: 999px) {

  body {
    overflow: auto;
    background: var(--color-white);
  }

  .nav-bar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-bar-h);
    background: var(--color-black);
    z-index: 200;
    padding: 0;
  }

  .nav-bar__menu {
    padding-right: 16px;
  }

  .sidebar {
    position: fixed;
    left: auto;
    right: 0;
    top: var(--nav-bar-h);
    bottom: 0;
    width: 356px;
    height: auto;
    z-index: 150;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-drawer) var(--ease-out);
  }

  .sidebar.is-open {
    clip-path: inset(0 0 0% 0);
  }

  .sidebar__logo-wrap {
    display: none;
  }

  .content-area {
    position: static;
    width: 100%;
    height: auto;
    min-height: calc(100vh - var(--nav-bar-h));
    margin-top: var(--nav-bar-h);
    overflow: visible;
  }

  .view {
    position: static;
    display: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    min-height: 0;
    height: auto;
  }

  .view.is-active {
    display: flex;
    z-index: auto;
  }

  .view--brand-overview {
    overflow: visible;
  }

  .view-inner {
    padding: 0 16px 0;
  }
}

/* ----------------------------------------------------------
   MOBILE (≤ 440px)
   ---------------------------------------------------------- */

@media (max-width: 440px) {

  .nav-bar {
    padding: 0; /* logo + menu fill full width flush to edges */
  }

  .sidebar {
    width: 100%;
  }

  .view {
    min-height: 0;
  }

  .view-inner {
    padding: 0;
    gap: 64px;
  }
}