/* src/shared/components/content/css/layout.css */

/*
 * ARCHITECTURAL DESIGN POLICY (DO NOT REMOVE!):
 * This layout engine is bound exlusively to the class ".dynamic-app-content".
 * It is used for both:
 * 1. The Light DOM slotted wrapper element in EJS templates (<div slot="content" class="dynamic-app-content">)
 * 2. The Shadow DOM container element inside xs-content (<div class="dynamic-app-content">)
 *
 * By avoiding :host selector coupling, the entire stylesheet is 100% DRY,
 * reusable, and styles both rendering states identically!
 */

:host {
  display: block;
  width: 100%;
  height: 100%;
}

.dynamic-app-content {
  height: 100%;
  width: 100%;

  /* Heading elements */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    max-width: 100%;
    scroll-margin-top: var(
      --scroll-margin-top-offset,
      calc(var(--header-height, 56px) + var(--spacing-6, 24px))
    );
  }

  h1 {
    margin-bottom: var(--spacing-4);
    display: inline-block;
  }

  h2 {
    margin-top: var(--spacing-6);
    padding-bottom: var(--spacing-2);
    display: block;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }

  h3 {
    margin-top: var(--spacing-6);
  }

  /* Paragraphs and Media */
  p,
  img,
  video {
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  /* Lists */
  ul,
  ol {
    max-width: 100%;
    padding-left: 1rem;
    margin-bottom: var(--spacing-6);

    li {
      margin-bottom: var(--spacing-2);

      &:has(> input) {
        list-style-type: none;
      }
    }
  }

  /* Blockquotes */
  blockquote {
    max-width: 100%;
    margin: var(--spacing-6) 0;
    padding: var(--spacing-4) var(--spacing-6);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: var(--radius-sm);
  }

  /* Inline code */
  code {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
  }

  /* Tables */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin-bottom: var(--spacing-6);

    th,
    td {
      padding: var(--spacing-2) var(--spacing-4);
      border-width: 1px;
      border-style: solid;
    }
  }

  /* Premium Code Blocks */
  .code-block-wrapper {
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .code-block-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-2) var(--spacing-4);
      border-bottom-width: 1px;
      border-bottom-style: solid;

      .code-block-lang {
        text-transform: uppercase;
      }

      .code-block-copy {
        border-radius: var(--radius-sm);
        padding: var(--spacing-1) var(--spacing-2);
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
      }
    }

    pre {
      margin: 0;
      padding: 0;
      overflow-x: auto;
      max-width: 100%;

      code {
        padding: var(--spacing-4) !important;
        border-radius: 0 !important;
        border: none !important;
        display: inline-block;
        min-width: 100%;
        box-sizing: border-box;
      }
    }
  }

  /* Premium Alerts */
  .markdown-alert {
    margin: var(--spacing-6) 0;
    padding: var(--spacing-4);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);

    .markdown-alert-title {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      margin: 0;
    }

    p {
      margin: 0;
    }
  }

  /* Mermaid Diagrams */
  .mermaid-container {
    overflow-x: auto;
    margin: var(--spacing-6) 0;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-4);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-lg);
  }
}