/* ==========================================================================
   NexusUC Documentation — Brand Theme

   Brand Colors:
   - Color 1 (Deep Purple):  #6635B3  → Primary / Header / Authority
   - Color 2 (Teal):         #37969C  → Accent / Links / Interactive
   - Color 3 (Magenta):      #AE3081  → Highlight / Warnings / Attention
   ========================================================================== */


/* ============================
   1. CORE THEME COLORS
   ============================ */

:root {
  /* Primary — Header, tabs, scroll indicator */
  --md-primary-fg-color:        #6635B3;
  --md-primary-fg-color--light: #7B4EC9;
  --md-primary-fg-color--dark:  #4E2890;

  /* Accent — Links, search highlights, interactive elements */
  --md-accent-fg-color:         #37969C;
  --md-accent-fg-color--transparent: rgba(55, 150, 156, 0.1);

  /* Link color */
  --md-typeset-a-color:         #37969C;
}


/* ============================
   2. HEADER & NAVIGATION
   ============================ */

/* Header bar */
.md-header {
  background-color: #6635B3;
}

/* Tab bar (Home, Installation Guide, etc.) */
.md-tabs {
  background-color: #6635B3;
}

/* Active tab indicator */
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* Search bar styling */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.15);
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Header icon hover */
.md-header__button:hover {
  color: #AE3081;
}


/* ============================
   3. LINKS
   ============================ */

/* All text links */
.md-typeset a {
  color: #37969C;
}

.md-typeset a:hover {
  color: #2A7478;
}

/* Sidebar navigation links (active) */
.md-nav__link--active {
  color: #6635B3 !important;
  font-weight: 600;
}

/* Table of contents active link */
.md-nav__link:hover {
  color: #37969C;
}


/* ============================
   4. HOMEPAGE — HERO BANNER
   ============================ */

.hero-banner {
  background: linear-gradient(135deg, #6635B3 0%, #4E2890 100%);
  color: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.hero-banner h2,
.hero-banner h2 .twemoji,
.hero-banner p,
.hero-banner em,
.hero-banner strong {
  color: #ffffff !important;
}

.hero-banner em {
  opacity: 0.9;
}


/* ============================
   5. HOMEPAGE — CARDS
   ============================ */

/* Card grid items */
.md-typeset .grid.cards > ul > li {
  border: 1px solid rgba(102, 53, 179, 0.15);
  border-left: 3px solid #6635B3;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-left-color: #37969C;
  box-shadow: 0 4px 16px rgba(102, 53, 179, 0.12);
  transform: translateY(-2px);
}

/* Card title icons */
.md-typeset .grid.cards > ul > li > .middle {
  color: #6635B3;
}

/* Card link arrows */
.md-typeset .grid.cards a {
  color: #37969C;
  font-weight: 500;
}

.md-typeset .grid.cards a:hover {
  color: #2A7478;
}


/* ============================
   6. TABLES
   ============================ */

/* Table header row */
.md-typeset table:not([class]) th {
  background-color: #6635B3;
  color: #ffffff;
  font-weight: 600;
  border-bottom: 2px solid #4E2890;
}

/* Table row hover */
.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(55, 150, 156, 0.06);
}

/* Table borders */
.md-typeset table:not([class]) td {
  border-bottom: 1px solid rgba(102, 53, 179, 0.1);
}


/* ============================
   7. ADMONITION CALLOUT BOXES
   ============================ */

/* Note boxes — Magenta accent */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #AE3081;
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(174, 48, 129, 0.1);
  border-color: #AE3081;
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #AE3081;
}

/* Warning boxes — Magenta accent */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #AE3081;
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(174, 48, 129, 0.1);
  border-color: #AE3081;
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: #AE3081;
}

/* Tip boxes — Teal accent */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #37969C;
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(55, 150, 156, 0.1);
  border-color: #37969C;
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: #37969C;
}


/* ============================
   8. HEADINGS
   ============================ */

.md-typeset h1 {
  color: #6635B3;
  font-weight: 700;
}

.md-typeset h2 {
  color: #4E2890;
  font-weight: 600;
  border-bottom: 2px solid rgba(102, 53, 179, 0.15);
  padding-bottom: 0.4rem;
}

.md-typeset h3 {
  color: #333333;
  font-weight: 600;
}


/* ============================
   9. HORIZONTAL RULES
   ============================ */

.md-typeset hr {
  border-color: rgba(102, 53, 179, 0.15);
}


/* ============================
   10. CODE BLOCKS
   ============================ */

.md-typeset code {
  background-color: rgba(102, 53, 179, 0.06);
  color: #6635B3;
  border-radius: 3px;
}

.md-typeset pre > code {
  background-color: #f8f6fc;
  color: #333333;
}


/* ============================
   11. FOOTER
   ============================ */

.md-footer {
  background-color: #3a3a3a;
}

.md-footer-meta {
  background-color: #2d2d2d;
}


/* ============================
   12. NEED HELP CARD (Homepage)
   ============================ */

/* Targets the last card grid on homepage for the support card */
.md-typeset .grid.cards:last-of-type > ul > li {
  background-color: rgba(102, 53, 179, 0.04);
  border-left-color: #AE3081;
}


/* ============================
   13. SEARCH RESULTS
   ============================ */

.md-search-result__link:hover {
  background-color: rgba(55, 150, 156, 0.08);
}

.md-search-result mark {
  background-color: rgba(55, 150, 156, 0.25);
  color: inherit;
}


/* ============================
   14. SCROLL INDICATOR
   ============================ */

.md-top {
  background-color: #6635B3;
  color: #ffffff;
}

.md-top:hover {
  background-color: #4E2890;
}


/* ============================
   15. LAYOUT (Existing — Preserved)
   ============================ */

/* Swap TOC and site nav */
.md-main__inner {
  display: flex;
  flex-direction: row-reverse;
}

/* TOC (page sections) goes on the left */
.md-content {
  order: 1;
}

/* Site navigation goes on the right */
.md-nav {
  order: 2;
  max-width: 300px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .md-main__inner {
    flex-direction: column;
  }
}


/* ============================
   16. SCREENSHOTS / IMAGES
   ============================ */

/* Add breathing room around all images in docs */
.md-typeset img {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}

/* Image captions (italic text before images) */
.md-typeset em + img,
.md-typeset em + .md-typeset img {
  margin-top: 0.25rem;
}