/* ============================================
   CertifyClouds Docs — Brand Styling
   Mirrors certifyclouds.com landing page design
   ============================================
   Landing page tokens:
     --brand-azure:   #0078D4   --brand-violet:  #8B5CF6
     --brand-cyan:    #06B6D4   --bg-dark:       #0F0F1A
     --bg-card:       #1A1A2E   --bg-card-hover: #252540
     --text-primary:  #FFFFFF   --text-secondary:#CBD5E1
     --text-muted:    #64748B   --border-subtle: rgba(0,120,212,0.25)
     --nav-bg (dark): rgba(15,15,26,0.95)
     --gradient-cta:  linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%)
   ============================================ */

/* ── MkDocs Material color overrides ── */
:root {
  --md-primary-fg-color: #8B5CF6;
  --md-primary-fg-color--light: #A78BFA;
  --md-primary-fg-color--dark: #6D28D9;
  --md-accent-fg-color: #06B6D4;
  --md-accent-fg-color--transparent: rgba(6, 182, 212, 0.1);
}

/* ── DARK MODE (default — matches landing page) ── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0F0F1A;
  --md-default-bg-color--light: #1A1A2E;
  --md-default-bg-color--lighter: #252540;
  --md-default-fg-color: #FFFFFF;
  --md-default-fg-color--light: #CBD5E1;
  --md-default-fg-color--lighter: #64748B;
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
  --md-typeset-color: #CBD5E1;
  --md-code-bg-color: #1A1A2E;
  --md-code-fg-color: #CBD5E1;
  --md-typeset-a-color: #A78BFA;
  --md-footer-bg-color: #0F0F1A;
  --md-footer-bg-color--dark: #0A0A12;
}

/* ── LIGHT MODE ── */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #F8FAFC;
  --md-default-bg-color--light: #FFFFFF;
  --md-typeset-a-color: #7C3AED;
  --md-footer-bg-color: #1A1A2E;
  --md-footer-bg-color--dark: #0F0F1A;
}


/* ============================================
   HEADER — Landing page nav style
   Dark translucent with backdrop blur, not solid gradient
   ============================================ */
.md-header,
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme] .md-header {
  background: rgba(15, 15, 26, 0.95) !important;
  background-color: rgba(15, 15, 26, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 120, 212, 0.25);
  box-shadow: none;
}

/* Light mode: white transparent nav (matches landing page light mode) */
[data-md-color-scheme="default"] .md-header {
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(0, 120, 212, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Header text — white on dark nav, dark on light nav */
.md-header__title {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="default"] .md-header__title {
  color: #0F172A !important;
}

/* Header icon/link colors */
.md-header .md-header__topic {
  color: #FFFFFF;
}

[data-md-color-scheme="default"] .md-header .md-header__topic {
  color: #0F172A;
}

/* Search icon in header */
.md-search__icon {
  color: #CBD5E1;
}

[data-md-color-scheme="default"] .md-search__icon {
  color: #475569;
}

/* Logo — light/dark switching (mirrors landing page pattern)
   Dark mode (slate): show logo-dark (white text, for dark bg)
   Light mode (default): show logo-light (dark text, for light bg)
   Uses high specificity to override Material's .md-header__button.md-logo img */
.md-header__button.md-logo img.logo-dark,
.md-header__button.md-logo img.logo-light {
  height: 3rem;
  width: auto;
}

.md-header__button.md-logo img.logo-dark {
  display: block;
}

.md-header__button.md-logo img.logo-light {
  display: none;
}

[data-md-color-scheme="default"] .md-header__button.md-logo img.logo-dark {
  display: none;
}

[data-md-color-scheme="default"] .md-header__button.md-logo img.logo-light {
  display: block;
}

/* Search bar in header */
.md-search__input {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="default"] .md-search__input {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

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

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Theme toggle icon */
.md-header__button:not(.md-logo) {
  color: #CBD5E1;
  transition: color 0.3s ease;
}

.md-header__button:not(.md-logo):hover {
  color: #2899F5;
}

[data-md-color-scheme="default"] .md-header__button:not(.md-logo) {
  color: #475569;
}


/* ============================================
   NAVIGATION TABS — Landing page nav link style
   ============================================ */
.md-tabs,
[data-md-color-scheme="slate"] .md-tabs,
[data-md-color-scheme] .md-tabs {
  background: rgba(15, 15, 26, 0.85) !important;
  background-color: rgba(15, 15, 26, 0.85) !important;
  border-bottom: 1px solid rgba(0, 120, 212, 0.15);
}

[data-md-color-scheme="default"] .md-tabs {
  background: rgba(248, 250, 252, 0.95) !important;
  background-color: rgba(248, 250, 252, 0.95) !important;
  border-bottom: 1px solid rgba(0, 120, 212, 0.1);
}

.md-tabs__link {
  color: #CBD5E1;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 1;
  transition: color 0.3s ease;
}

.md-tabs__link:hover {
  color: #2899F5;
}

.md-tabs__link--active {
  color: #FFFFFF;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: #475569;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: #7C3AED;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #0F172A;
}


/* ============================================
   SIDEBAR — Left navigation
   ============================================ */
[data-md-color-scheme="slate"] .md-sidebar {
  border-right-color: rgba(0, 120, 212, 0.15);
}

.md-nav__link--active {
  color: #8B5CF6 !important;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-nav__link--active {
  color: #7C3AED !important;
}


/* ============================================
   CONTENT — Typography & links
   ============================================ */
.md-typeset h1 {
  font-weight: 700;
}

.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-tabs__link):not(.md-header__button):not(.md-social__link):not(.headerlink) {
  color: var(--md-typeset-a-color);
  transition: color 0.3s ease;
}

.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-tabs__link):not(.md-header__button):not(.md-social__link):not(.headerlink):hover {
  color: #06B6D4;
}

/* Code blocks */
.md-typeset code {
  border-radius: 6px;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(26, 26, 46, 0.8);
  border: 1px solid rgba(0, 120, 212, 0.15);
}

[data-md-color-scheme="slate"] .highlight pre,
[data-md-color-scheme="slate"] .highlighttable {
  background: #1A1A2E;
  border: 1px solid rgba(0, 120, 212, 0.15);
  border-radius: 8px;
}


/* ============================================
   CARDS & TABLES — Match landing page card style
   ============================================ */
.md-typeset .grid .card {
  border: 1px solid rgba(0, 120, 212, 0.25);
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-md-color-scheme="slate"] .md-typeset .grid .card {
  background: #1A1A2E;
}

.md-typeset .grid .card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Table headers */
.md-typeset table:not([class]) th {
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(139, 92, 246, 0.12);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background-color: rgba(139, 92, 246, 0.06);
}

/* Table borders */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td,
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  border-color: rgba(0, 120, 212, 0.15);
}


/* ============================================
   ADMONITIONS — PRO feature styling
   ============================================ */
.md-typeset .admonition.pro,
.md-typeset details.pro {
  border-color: #8B5CF6;
}

.md-typeset .pro > .admonition-title,
.md-typeset .pro > summary {
  background-color: rgba(139, 92, 246, 0.1);
}

.md-typeset .pro > .admonition-title::before,
.md-typeset .pro > summary::before {
  background-color: #8B5CF6;
}


/* ============================================
   FOOTER — Matches landing page footer
   ============================================ */
.md-footer {
  border-top: 1px solid rgba(0, 120, 212, 0.25);
}

.md-footer-meta {
  background: #0A0A12;
}

[data-md-color-scheme="default"] .md-footer-meta {
  background: #0F0F1A;
}

.md-copyright {
  color: #64748B;
  font-size: 0.875rem;
}

.md-social__link svg {
  fill: #CBD5E1;
  transition: fill 0.3s ease;
}

.md-social__link:hover svg {
  fill: #2899F5;
}


/* ============================================
   MISC
   ============================================ */

/* Scrollbar (dark mode) */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 8px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #0F0F1A;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #252540;
  border-radius: 4px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: rgba(139, 92, 246, 0.3);
}