/* ========================================= */
/* DOCUMENTATION LAYOUT */
/* ========================================= */

body {
  background-color: var(--color-bg-secondary);
}

.docs-layout {
  display: grid;
  grid-template-columns: 28rem 1fr;
  min-height: 100vh;
}

/* ========================================= */
/* MOBILE MENU */
/* ========================================= */

.docs-menu-toggle {
  display: none;

  position: fixed;
  top: 1.6rem;
  left: 1.6rem;

  z-index: 1001;

  width: 4.4rem;
  height: 4.4rem;

  border: none;
  border-radius: var(--radius-md);

  background: var(--color-primary);
  color: var(--color-white);

  font-size: 2rem;
  cursor: pointer;

  box-shadow: var(--shadow-md);
}

.docs-overlay {
  display: none;

  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.45);

  z-index: 999;
}

/* ========================================= */
/* SIDEBAR */
/* ========================================= */

.docs-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;

  overflow-y: auto;
  overflow-x: hidden;

  padding: var(--space-32);

  background-color: var(--color-gray-900);
  color: var(--color-white);
}

.docs-logo {
  margin-bottom: var(--space-8);

  font-size: var(--fs-h5);
  font-weight: var(--font-weight-bold);
}

.docs-version {
  margin-bottom: var(--space-32);

  color: var(--color-gray-400);
}

.docs-search {
  margin-bottom: var(--space-32);
}

.docs-search input {
  width: 100%;
  padding: var(--space-12) var(--space-16);

  border: var(--border-width) var(--border-style) var(--color-gray-700);
  border-radius: var(--radius-md);

  background-color: var(--color-gray-800);
  color: var(--color-white);

  transition: var(--transition-fast);
}

.docs-search input::placeholder {
  color: var(--color-gray-400);
}

.docs-search input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.docs-nav-title {
  margin: var(--space-32) 0 var(--space-12);

  color: var(--color-gray-400);

  font-size: var(--fs-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.docs-sidebar ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.docs-sidebar li:not(:last-child) {
  margin-bottom: var(--space-4);
}

.docs-sidebar a {
  display: block;

  padding: var(--space-12) var(--space-16);

  border-radius: var(--radius-md);

  color: var(--color-gray-200);
  text-decoration: none;

  transition: var(--transition-fast);
}

.docs-sidebar a:hover {
  background-color: var(--color-gray-800);
  color: var(--color-white);
}

.docs-sidebar a.active {
  background-color: var(--color-primary);
  color: var(--color-primary-tint);
}

.docs-sidebar a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========================================= */
/* CONTENT */
/* ========================================= */

.docs-content {
  padding: var(--space-48);
}

.docs-hero,
.section-card {
  margin-bottom: var(--space-48);
  padding: var(--space-48);

  background-color: var(--color-surface);

  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
}

.docs-hero h1 {
  margin-bottom: var(--space-16);
}

/* ========================================= */
/* PREVIEW */
/* ========================================= */

.docs-preview {
  margin-bottom: var(--space-24);
  padding: var(--space-32);

  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
}

.docs-preview .hero {
  min-height: auto;
  padding-block: var(--space-48);
}

.docs-preview .cta {
  padding-block: var(--space-24);
}

.docs-preview--full {
  padding: 0;
  overflow: hidden;
}

.docs-preview--full .hero {
  border-radius: var(--radius-md);
}

/* ========================================= */
/* GRID */
/* ========================================= */

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: var(--space-16);
}

.docs-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--space-24);
}

.docs-principle {
  padding: var(--space-24);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
}

/* ========================================= */
/* FOOTER */
/* ========================================= */

.docs-footer {
  padding: var(--space-48);
  color: var(--color-muted);
  text-align: center;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */
@media (max-width:60em){

  .docs-layout{
    display:block;
  }

  .docs-menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .docs-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:28rem;
    height:100vh;
    transform:translateX(-100%);
    transition:.3s;
    z-index:1000;
  }

  .docs-sidebar.open{
    transform:translateX(0);
  }

  .docs-overlay.show{
    display:block;
  }

  .docs-content{
    padding: 8rem var(--space-24) var(--space-32);
  }
}