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

/*
 * ARCHITECTURAL DESIGN POLICY (DO NOT REMOVE!):
 * This styles 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 or #doc-container selector coupling, the entire stylesheet is 100% DRY,
 * reusable, and styles both rendering states identically!
 */

.dynamic-app-content {
  background: transparent;

  /* Heading elements styling */
  h1 {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--font-size-4xl);
    line-height: 1.1;
    font-weight: 800;
  }

  h2 {
    font-size: var(--font-size-xl);
    border-bottom-color: var(--color-border);
  }

  h2,
  h3,
  p,
  ul li,
  ol li {
    color: var(--color-text-base);
  }

  h1,
  h2,
  h3,
  h4 {
    .emoji {
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      -webkit-text-fill-color: initial !important;
    }
  }

  p {
    line-height: 1.8;
    font-size: var(--font-size-lg);
  }

  /* Blockquotes */
  blockquote {
    background: var(--color-bg-surface);
    border-left-color: var(--color-border);
    color: var(--color-text-muted);
    font-style: italic;
  }

  /* Inline code */
  code {
    border-color: var(--color-border);
    font-size: 0.9em;
    color: var(--color-brand);
  }

  /* Tables */
  table {
    th {
      background-color: var(--color-bg-base);
      font-weight: var(--font-weight-bold);
      color: var(--color-text-base);
    }

    th,
    td {
      border-color: var(--color-border);
      color: var(--color-text-base);
    }
  }

  /* Premium Code Blocks */
  .code-block-wrapper {
    background: var(--color-bg-surface);
    border-color: var(--color-border);

    .code-block-header {
      background: var(--color-bg-base);
      border-bottom-color: var(--color-border);

      .code-block-lang {
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.05em;
      }

      .code-block-copy {
        background: transparent;
        border-color: var(--color-border);
        color: var(--color-text-muted);
        font-family: inherit;
        font-size: var(--font-size-xs);
      }
    }

    pre {
      background: var(--color-bg-surface);

      code {
        color: var(--color-text-base) !important;
      }
    }
  }

  /* Premium Alerts - 100% Redundancy-Free using dynamic variables */
  .markdown-alert {
    background: var(--color-bg-surface);
    border-left-color: var(--alert-color, var(--color-brand));

    /* Map variant alert colors flatly */
    &.markdown-alert-note {
      --alert-color: var(--color-brand);
    }

    &.markdown-alert-tip {
      --alert-color: var(--color-success);
    }

    &.markdown-alert-important {
      --alert-color: var(--color-important);
    }

    &.markdown-alert-warning {
      --alert-color: var(--color-warning);
    }

    &.markdown-alert-caution {
      --alert-color: var(--color-error);
    }

    .markdown-alert-title {
      font-weight: var(--font-weight-bold);
      color: var(--alert-color, var(--color-brand));
    }
  }

  /* Mermaid Diagrams */
  .mermaid-container {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
  }
}