/* AzmX Documentation Custom Styles with Brand Colors */

/* AZMX Brand Colors - Extracted from https://azmx.sa/ */
:root {
  /* AZMX Primary Colors */
  --azmx-primary: #01103F;        /* Dark Blue - Main brand color */
  --azmx-primary-light: #EEF5FF;  /* Light Blue - Secondary background */
  --azmx-white: #FFFFFF;          /* White */
  --azmx-text-primary: #01103F;   /* Primary text color */
  --azmx-text-secondary: #6b7280; /* Secondary text color */

  /* Color variations for different states */
  --azmx-primary-50: #f0f4ff;
  --azmx-primary-100: #e4ecff;
  --azmx-primary-200: #d0dcff;
  --azmx-primary-300: #b3c3ff;
  --azmx-primary-400: #8fa0ff;
  --azmx-primary-500: #6b7eff;
  --azmx-primary-600: #4d5eff;
  --azmx-primary-700: #3d46e6;
  --azmx-primary-800: #2d34b3;
  --azmx-primary-900: #01103F;    /* Main AZMX brand color */

  /* Typography */
  --md-text-font-size: 16px;
  --md-code-font-size: 14px;
}

/* Light mode customization */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--azmx-primary);
  --md-primary-fg-color--light: var(--azmx-primary-light);
  --md-primary-fg-color--dark: var(--azmx-primary);
  --md-accent-fg-color: var(--azmx-primary);
  --md-accent-fg-color--transparent: rgba(1, 16, 63, 0.1);

  /* Navigation colors */
  --md-primary-bg-color: var(--azmx-white);
  --md-primary-bg-color--light: var(--azmx-primary-light);

  /* Text colors */
  --md-default-fg-color: var(--azmx-text-primary);
  --md-default-fg-color--light: var(--azmx-text-secondary);

  /* Header styling */
  --md-typeset-h1-color: var(--azmx-primary);
  --md-typeset-h2-color: var(--azmx-primary);
  --md-typeset-h3-color: var(--azmx-primary);
}

/* Dark mode customization */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--azmx-white);
  --md-primary-fg-color--light: var(--azmx-primary-light);
  --md-primary-fg-color--dark: var(--azmx-primary);
  --md-accent-fg-color: var(--azmx-primary-light);
  --md-accent-fg-color--transparent: rgba(238, 245, 255, 0.1);

  /* Dark mode background */
  --md-default-bg-color: var(--azmx-primary);
  --md-code-bg-color: rgba(238, 245, 255, 0.05);

  /* Navigation in dark mode */
  --md-primary-bg-color: var(--azmx-primary);
  --md-primary-bg-color--light: rgba(238, 245, 255, 0.1);
}

/* Increase base font size for better readability */
.md-typeset {
  font-size: 16px;
  line-height: 1.7;
}

/* Improve header sizes */
.md-typeset h1 {
  font-size: 2.2em;
  font-weight: 600;
  margin-bottom: 1em;
}

.md-typeset h2 {
  font-size: 1.8em;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

.md-typeset h3 {
  font-size: 1.4em;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

.md-typeset h4 {
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Improve code block readability */
.md-typeset code {
  font-size: 14px;
  padding: 2px 6px;
}

.md-typeset pre code {
  font-size: 14px;
  line-height: 1.5;
}

/* Better spacing for lists */
.md-typeset ul, .md-typeset ol {
  margin-bottom: 1em;
}

.md-typeset li {
  margin-bottom: 0.3em;
}

/* Improve details/summary styling for collapsible sections */
.md-typeset details {
  margin: 1.5em 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  overflow: hidden;
}

.md-typeset details summary {
  font-weight: 600;
  padding: 1em 1.2em;
  background-color: var(--md-default-fg-color--lightest);
  cursor: pointer;
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
}

.md-typeset details summary:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset details[open] summary {
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
}

.md-typeset details > *:not(summary) {
  padding: 1em 1.2em;
}

/* Improve table readability */
.md-typeset table {
  font-size: 15px;
}

.md-typeset table th {
  font-weight: 600;
}

/* Better blockquote styling */
.md-typeset blockquote {
  font-size: 16px;
  line-height: 1.6;
  margin: 1.5em 0;
}

/* Improve admonition readability */
.md-typeset .admonition {
  font-size: 15px;
}

/* Better contrast for inline code */
.md-typeset code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
}

/* Improve link visibility */
.md-typeset a {
  font-weight: 500;
}

/* Better spacing between sections */
.md-typeset > * + * {
  margin-top: 1.2em;
}

/* AZMX Brand-Specific Styling */

/* Custom link styling */
.md-content a {
  color: var(--azmx-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s ease;
}

.md-content a:hover {
  border-bottom-color: var(--azmx-primary);
}

[data-md-color-scheme="slate"] .md-content a {
  color: var(--azmx-primary-light);
}

[data-md-color-scheme="slate"] .md-content a:hover {
  border-bottom-color: var(--azmx-primary-light);
}

/* Navigation tabs styling */
.md-tabs__item--active {
  background-color: var(--azmx-primary) !important;
}

.md-tabs__link--active {
  color: var(--azmx-white) !important;
}

/* Button styling */
.md-button {
  background-color: var(--azmx-primary);
  border-color: var(--azmx-primary);
  color: var(--azmx-white);
}

.md-button:hover {
  background-color: var(--azmx-primary-800);
  border-color: var(--azmx-primary-800);
}

.md-button--primary {
  background-color: var(--azmx-primary);
  border-color: var(--azmx-primary);
  color: var(--azmx-white);
}

/* Code block styling with AZMX colors */
.md-typeset code {
  background-color: var(--azmx-primary-light);
  color: var(--azmx-primary);
  border-radius: 4px;
  padding: 2px 6px;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(1, 16, 63, 0.2);
  color: var(--azmx-primary-light);
}

/* Table styling with AZMX brand colors */
.md-typeset table:not([class]) th {
  background-color: var(--azmx-primary);
  color: var(--azmx-white);
}

.md-typeset table:not([class]) tr:nth-child(2n) {
  background-color: var(--azmx-primary-light);
}

/* Header styling with AZMX colors */
.md-header__title {
  color: var(--azmx-white);
  font-weight: 600;
}

/* Footer with AZMX branding */
.md-footer {
  background-color: var(--azmx-primary);
}

.md-footer-meta {
  background-color: rgba(1, 16, 63, 0.9);
}

/* Responsive font sizing */
@media screen and (max-width: 768px) {
  .md-typeset {
    font-size: 15px;
  }

  .md-typeset h1 {
    font-size: 2em;
  }

  .md-typeset h2 {
    font-size: 1.6em;
  }

  .md-typeset h3 {
    font-size: 1.3em;
  }

  /* Mobile responsive adjustments for AZMX styling */
  .md-nav--primary .md-nav__title {
    background-color: var(--azmx-primary);
    color: var(--azmx-white);
  }
}

/* Focus states for accessibility */
.md-nav__link:focus {
  outline: 2px solid var(--azmx-primary);
  outline-offset: 2px;
}

/* Mermaid pie chart sizing - 40% larger for better visibility */
.mermaid svg[aria-roledescription="pie"] {
  max-width: 140% !important;
  height: auto !important;
  transform: scale(1.4);
  transform-origin: top left;
  margin-bottom: 2em; /* Add space below scaled chart */
}