/**
 * Documentation Layout and Styles
 * Provides the layout for documentation pages with sidebar navigation
 */

.hs-iku {
  .documentation-container {
    padding: 2rem 0;
    min-height: calc(100vh - 400px);
  }

  .documentation-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;

    @media (max-width: 992px) {
      grid-template-columns: 240px 1fr;
      gap: 16px;
    }

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media print {
      grid-template-columns: 1fr;
    }
  }

  .doc-sidebar {
    position: relative;
    min-width: 0;
    width: 100%;

    @media print {
      display: none;
    }
  }

  .doc-content {
    min-width: 0;
    max-width: 900px;
    width: 100%;

    @media (max-width: 768px) {
      max-width: 100%;
    }
  }

  .doc-main-content {
    background: #ffffff;
    border-radius: 8px;
    padding: 2.5rem;

    @media (max-width: 992px) {
      padding: 2rem;
    }

    @media (max-width: 768px) {
      padding: 1.5rem;
      border-radius: 6px;
    }

    @media (max-width: 576px) {
      padding: 1.25rem;
    }

    @media print {
      box-shadow: none;
      padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #1a1a1a;
      font-weight: 600;
      line-height: 1.3;
    }

    h1 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.2;
      padding-bottom: 0.75rem;

      @media (max-width: 992px) {
        font-size: 2.25rem;
      }

      @media (max-width: 768px) {
        font-size: 2rem;
      }

      @media (max-width: 576px) {
        font-size: 1.75rem;
        margin-bottom: 1rem;
      }
    }

    h2 {
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      font-size: 1.875rem;
      font-weight: 600;
      line-height: 1.3;

      @media (max-width: 992px) {
        font-size: 1.75rem;
      }

      @media (max-width: 768px) {
        font-size: 1.5rem;
      }

      @media (max-width: 576px) {
        font-size: 1.375rem;
        margin-top: 2rem;
      }
    }

    h3 {
      margin-top: 2rem;
      margin-bottom: 0.75rem;
      font-size: 1.5rem;
      font-weight: 600;

      @media (max-width: 768px) {
        font-size: 1.25rem;
      }

      @media (max-width: 576px) {
        font-size: 1.125rem;
      }
    }

    h4 {
      margin-top: 1.5rem;
      margin-bottom: 0.625rem;
      font-size: 1.25rem;
      font-weight: 600;
    }

    h5 {
      margin-top: 1.25rem;
      margin-bottom: 0.5rem;
      font-size: 1.125rem;
      font-weight: 600;
    }

    h6 {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-size: 1rem;
      font-weight: 600;
    }

    p {
      margin-bottom: 1.25rem;
      line-height: 1.7;
      color: #333;

      &:last-child {
        margin-bottom: 0;
      }
    }

    a {
      color: var(--primary-color, #007bff);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.15s ease;

      &:hover {
        border-bottom-color: currentColor;
      }

      @media print {
        color: inherit;
        text-decoration: underline;
      }
    }

    ul,
    ol {
      margin-bottom: 1.25rem;
      padding-left: 1.5rem;

      ul,
      ol {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
    }

    li {
      margin-bottom: 0.5rem;
      line-height: 1.6;

      &:last-child {
        margin-bottom: 0;
      }
    }

    blockquote {
      margin: 1.5rem 0;
      padding: 1rem 1.5rem;
      border-left: 4px solid var(--primary-color, #007bff);
      background: #f8f9fa;
      font-style: italic;
      color: #555;

      p {
        margin-bottom: 0.5rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    code {
      padding: 0.2em 0.4em;
      background: #f5f5f5;
      border: 1px solid #e5e5e5;
      border-radius: 3px;
      font-family: "Monaco", "Courier New", monospace;
      font-size: 0.9em;
      color: #d63384;
    }

    pre {
      padding: 1.25rem;
      background: #f8f9fa;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      overflow-x: auto;
      margin-bottom: 1.5rem;

      code {
        padding: 0;
        background: none;
        border: none;
        font-size: 0.875rem;
        color: inherit;
        display: block;
        line-height: 1.5;
      }
    }

    table {
      width: 100%;
      margin-bottom: 1.5rem;
      border-collapse: collapse;
      border: 1px solid #e5e5e5;

      @media (max-width: 576px) {
        font-size: 0.875rem;
      }

      th,
      td {
        padding: 0.75rem 1rem;
        border: 1px solid #e5e5e5;
        text-align: left;

        @media (max-width: 576px) {
          padding: 0.5rem;
        }
      }

      th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
      }

      tbody tr:hover {
        background: #f8f9fa;
      }
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 6px;
      margin: 1.5rem 0;
    }

    figure {
      margin: 1.5rem 0;
    }

    figcaption {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      color: #666;
      text-align: center;
      font-style: italic;
    }

    hr {
      margin: 2rem 0;
      border: none;
      border-top: 2px solid #e5e5e5;
    }

    kbd {
      padding: 0.2em 0.5em;
      background: #f8f9fa;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      font-family: "Monaco", "Courier New", monospace;
      font-size: 0.875em;
    }

    .callout {
      padding: 1rem 1.25rem;
      margin: 1.5rem 0;
      border-left: 4px solid #007bff;
      background: #f8f9fa;
      border-radius: 4px;

      &.callout-info {
        border-left-color: #17a2b8;
        background: #e7f7f9;
      }

      &.callout-warning {
        border-left-color: #ffc107;
        background: #fff8e1;
      }

      &.callout-danger {
        border-left-color: #dc3545;
        background: #f8d7da;
      }

      &.callout-success {
        border-left-color: #28a745;
        background: #d4edda;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  .hs-documentation .doc-main-content {
    background: #1a1a1a;
    color: #e5e5e5;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #ffffff;
    }

    p {
      color: #e5e5e5;
    }

    code {
      background: #2a2a2a;
      border-color: #3a3a3a;
      color: #ff6b9d;
    }

    pre {
      background: #2a2a2a;
      border-color: #3a3a3a;
    }

    blockquote {
      background: #2a2a2a;
      color: #b5b5b5;
    }

    table {
      th {
        background: #2a2a2a;
        color: #e5e5e5;
      }

      td {
        border-color: #3a3a3a;
      }
    }
  }

  // Navigation icon styles - SVG backgrounds with higher specificity
  .doc-tree-navigation .doc-nav-title::before {
    background: url("https://145898348.fs1.hubspotusercontent-eu1.net/hubfs/145898348/raw_assets/public/iku-theme-v1/images/icons/mini-doc.svg") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
  }

  .doc-tree-navigation .toggle-icon::before {
    background: url("https://145898348.fs1.hubspotusercontent-eu1.net/hubfs/145898348/raw_assets/public/iku-theme-v1/images/icons/chevron-right.svg") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
  }

  .doc-tree-navigation
    .doc-nav-toggle[aria-expanded="true"]
    .toggle-icon::before {
    background: url("https://145898348.fs1.hubspotusercontent-eu1.net/hubfs/145898348/raw_assets/public/iku-theme-v1/images/icons/chevron-down.svg") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
  }
}