/* Custom styling for DevOps Roadmap documentation */

/* Arabic text support */
.md-typeset {
  direction: ltr;
}

/* Custom DevOps brand color scheme - extracted from actual logo */
:root {
  /* Primary colors - Teal from logo (now primary as requested) */
  --md-primary-fg-color: #4ECDC4;        /* Main teal from logo */
  --md-primary-fg-color--light: #80E4DD;  /* Lighter teal variant */
  --md-primary-fg-color--dark: #26A69A;   /* Darker teal variant */
  
  /* Accent colors - Navy Blue from logo */
  --md-accent-fg-color: #2E3A87;          /* Main navy from logo */
  --md-accent-fg-color--transparent: rgba(46, 58, 135, 0.1);
  
  /* Additional brand colors from actual logo */
  --devops-teal: #4ECDC4;        /* Primary teal from logo */
  --devops-navy: #2E3A87;        /* Navy blue from logo */
  --devops-teal-light: #80E4DD;  /* Light teal */
  --devops-teal-dark: #26A69A;   /* Dark teal */
  --devops-navy-light: #5C6BC0;  /* Light navy */
  --devops-navy-dark: #1A237E;   /* Dark navy */
}

/* Code block enhancements */
.md-typeset code {
  padding: .1em .3em;
  border-radius: .2em;
  background-color: var(--md-code-bg-color);
  font-family: 'Roboto Mono', 'Courier New', monospace;
}

/* Logo styling */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: auto;
  filter: drop-shadow(0 0 0.2rem rgba(0,0,0,0.1));
}

/* Custom admonition styles for DevOps content */
.md-typeset .admonition.devops {
  border-left: .2rem solid var(--devops-teal);
}

.md-typeset .admonition.devops > .admonition-title {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .admonition.devops > .admonition-title::before {
  background-color: var(--devops-teal);
  mask-image: var(--md-admonition-icon--tip);
}

/* DevOps-specific styling enhancements */
.md-typeset .admonition.pipeline {
  border-left: .2rem solid var(--devops-navy);
}

.md-typeset .admonition.pipeline > .admonition-title {
  background-color: rgba(57, 73, 171, 0.1);
}

.md-typeset .admonition.automation {
  border-left: .2rem solid var(--devops-teal-dark);
}

/* Navigation enhancements */
.md-nav__title {
  font-weight: 600;
}

/* Table styling improvements */
.md-typeset table:not([class]) {
  border-radius: 0.3em;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: white;
  font-weight: 600;
}

/* Button styling */
.md-button {
  border-radius: 0.3em;
  transition: all 0.2s ease;
}

.md-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Mermaid diagram styling and optimization */
.mermaid {
  text-align: center;
  margin: 1em 0;
  /* Prevent flash of unstyled content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  /* Improve rendering performance */
  contain: layout;
  will-change: opacity, visibility;
}

.mermaid[data-processed="true"] {
  opacity: 1;
  visibility: visible;
}

/* Mermaid loading state */
.mermaid:not([data-processed]) {
  position: relative;
  min-height: 200px;
}

.mermaid:not([data-processed])::before {
  content: "Loading diagram...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--md-default-fg-color--light);
  font-style: italic;
  opacity: 0.7;
}

/* Dark mode Mermaid adjustments */
[data-md-color-scheme="slate"] .mermaid {
  filter: brightness(0.9) contrast(1.1);
}

/* Mermaid responsive improvements */
@media screen and (max-width: 768px) {
  .mermaid {
    margin: 0.5em 0;
    font-size: 0.9em;
  }
}

/* Custom icons for different content types */
.md-typeset .podcast-link::before {
  content: "🎙️ ";
  margin-right: 0.3em;
}

.md-typeset .youtube-link::before {
  content: "📹 ";
  margin-right: 0.3em;
}

.md-typeset .documentation-link::before {
  content: "📚 ";
  margin-right: 0.3em;
}

/* Arabic content support */
.arabic-content {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Sans Arabic', 'Arial Unicode MS', sans-serif;
}

/* Progress indicator for learning paths */
.progress-indicator {
  display: flex;
  align-items: center;
  margin: 1em 0;
}

.progress-step {
  flex: 1;
  text-align: center;
  padding: 0.5em;
  background-color: #f5f5f5;
  margin: 0 0.2em;
  border-radius: 0.3em;
  position: relative;
}

.progress-step.completed {
  background-color: #4caf50;
  color: white;
}

.progress-step.current {
  background-color: #2196f3;
  color: white;
}

/* Responsive improvements */
@media screen and (max-width: 768px) {
  .md-typeset table {
    font-size: 0.8em;
  }
  
  .progress-indicator {
    flex-direction: column;
  }
  
  .progress-step {
    margin: 0.2em 0;
  }
}