/*
 * CloudNotes by Mo — Material Theme Overrides
 * Deep-navy / electric-blue aesthetic for cloud architecture notes.
 * Targets Material for MkDocs CSS custom properties.
 */

/* ── 1. Design tokens ──────────────────────────────────────────────────────
 * Override Material's primary and accent colours with the Azure-inspired
 * deep-navy / electric-blue palette.
 * ───────────────────────────────────────────────────────────────────────── */

/* Dark mode (slate scheme) */
[data-md-color-scheme='slate'] {
  --md-primary-fg-color: hsl(215, 88%, 55%);
  --md-primary-fg-color--light: hsl(215, 100%, 78%);
  --md-primary-fg-color--dark: hsl(215, 75%, 35%);
  --md-primary-bg-color: hsl(222, 47%, 7%);
  --md-primary-bg-color--light: hsl(222, 38%, 11%);

  --md-accent-fg-color: hsl(250, 80%, 70%);
  --md-accent-fg-color--transparent: hsl(250, 80%, 70%, 0.1);

  /* Background layers */
  --md-default-bg-color: hsl(222, 47%, 9%);
  --md-default-bg-color--light: hsl(222, 38%, 13%);
  --md-default-bg-color--lighter: hsl(222, 28%, 18%);
  --md-default-bg-color--lightest: hsl(222, 20%, 22%);

  /* Text */
  --md-default-fg-color: hsl(222, 7%, 90%);
  --md-default-fg-color--light: hsl(222, 7%, 72%);
  --md-default-fg-color--lighter: hsl(222, 7%, 55%);
  --md-default-fg-color--lightest: hsl(222, 7%, 38%);

  /* Code */
  --md-code-bg-color: hsl(222, 38%, 12%);
  --md-code-fg-color: hsl(215, 60%, 85%);
}

/* Light mode (default scheme) */
[data-md-color-scheme='default'] {
  --md-primary-fg-color: hsl(215, 88%, 48%);
  --md-primary-fg-color--light: hsl(215, 88%, 60%);
  --md-primary-fg-color--dark: hsl(215, 80%, 30%);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: hsl(222, 20%, 98%);

  --md-accent-fg-color: hsl(250, 75%, 55%);
  --md-accent-fg-color--transparent: hsl(250, 75%, 55%, 0.1);

  --md-code-bg-color: hsl(222, 20%, 96%);
  --md-code-fg-color: hsl(215, 60%, 25%);
}

/* ── 2. Header / navigation bar ────────────────────────────────────────────
 * Dark: deep-navy with a faint electric-blue bottom glow.
 * Light: clean off-white with a subtle shadow.
 * ───────────────────────────────────────────────────────────────────────── */

[data-md-color-scheme='slate'] .md-header {
  background-color: hsl(222, 47%, 7%);
  box-shadow: 0 1px 0 hsl(222, 38%, 14%), 0 2px 24px hsl(215, 88%, 55%, 0.08);
}

[data-md-color-scheme='default'] .md-header {
  background-color: hsl(215, 88%, 48%);
  box-shadow: 0 1px 0 hsl(215, 50%, 42%), 0 2px 12px hsl(215, 88%, 55%, 0.15);
}

/* Site title: gradient text */
[data-md-color-scheme='slate'] .md-header__title {
  background: linear-gradient(125deg, #60a5fa 10%, #818cf8 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ── 3. Navigation tabs ────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────── */

[data-md-color-scheme='slate'] .md-tabs {
  background-color: hsl(222, 38%, 10%);
  border-bottom: 1px solid hsl(222, 28%, 17%);
}

[data-md-color-scheme='slate'] .md-tabs__link--active,
[data-md-color-scheme='slate'] .md-tabs__link:hover {
  color: hsl(215, 100%, 78%);
}

/* ── 4. Sidebar ────────────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────── */

[data-md-color-scheme='slate'] .md-sidebar {
  background-color: hsl(222, 38%, 8%);
}

/* Active nav link */
[data-md-color-scheme='slate'] .md-nav__link--active {
  color: hsl(215, 100%, 78%);
  font-weight: 600;
}

[data-md-color-scheme='slate'] .md-nav__link:hover {
  color: hsl(215, 88%, 68%);
}

/* ── 5. Content area ───────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────── */

/* h2 section divider */
[data-md-color-scheme='slate'] .md-content h2 {
  border-bottom: 1px solid hsl(222, 28%, 20%);
  padding-bottom: 0.35rem;
}

[data-md-color-scheme='default'] .md-content h2 {
  border-bottom: 1px solid hsl(222, 15%, 88%);
  padding-bottom: 0.35rem;
}

/* Link underline styling */
.md-content a {
  text-underline-offset: 3px;
}

/* ── 6. Code blocks ────────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────── */

[data-md-color-scheme='slate'] .highlight pre,
[data-md-color-scheme='slate'] code {
  border-radius: 0.4rem;
}

/* ── 7. Home page hero ─────────────────────────────────────────────────────
 * Custom hero banner on the index page.
 * ───────────────────────────────────────────────────────────────────────── */

.hero-banner {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) 2rem;
  text-align: center;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
}

/* Ambient gradient backdrop */
[data-md-color-scheme='slate'] .hero-banner {
  background:
    radial-gradient(ellipse 65% 55% at 25% 40%, hsl(215, 88%, 55%, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 65%, hsl(255, 80%, 60%, 0.1) 0%, transparent 70%),
    hsl(222, 47%, 9%);
  border: 1px solid hsl(222, 28%, 18%);
}

[data-md-color-scheme='default'] .hero-banner {
  background:
    radial-gradient(ellipse 65% 55% at 25% 40%, hsl(215, 88%, 55%, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 65%, hsl(255, 80%, 60%, 0.06) 0%, transparent 70%),
    hsl(222, 20%, 99%);
  border: 1px solid hsl(222, 15%, 88%);
}

.hero-banner h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero-banner h1 .headerlink {
  display: none;
}

[data-md-color-scheme='slate'] .hero-banner h1 {
  background: linear-gradient(140deg, hsl(222, 5%, 96%) 25%, hsl(215, 100%, 78%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-md-color-scheme='default'] .hero-banner h1 {
  background: linear-gradient(140deg, hsl(222, 47%, 10%) 25%, hsl(215, 88%, 40%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-banner .hero-tagline {
  font-size: 1.2rem;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 0.4rem;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hero-btn-primary {
  background: linear-gradient(135deg, hsl(215, 88%, 50%), hsl(250, 80%, 58%));
  color: #ffffff !important;
  box-shadow: 0 4px 20px hsl(215, 88%, 55%, 0.4);
  -webkit-text-fill-color: #ffffff !important;
}

.hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px hsl(215, 88%, 55%, 0.6);
}

.hero-btn-secondary {
  border: 1px solid hsl(215, 88%, 55%);
  color: hsl(215, 100%, 78%) !important;
  -webkit-text-fill-color: hsl(215, 100%, 78%) !important;
}

[data-md-color-scheme='default'] .hero-btn-secondary {
  border-color: hsl(215, 88%, 48%);
  color: hsl(215, 88%, 40%) !important;
  -webkit-text-fill-color: hsl(215, 88%, 40%) !important;
}

.hero-btn-secondary:hover {
  transform: translateY(-2px);
  background: hsl(215, 88%, 55%, 0.1);
}

/* ── 8. Knowledge area cards ───────────────────────────────────────────────
 * Grid of cards on the home page.
 * ───────────────────────────────────────────────────────────────────────── */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border-radius: 0.6rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

[data-md-color-scheme='slate'] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme='slate'] .md-typeset .grid.cards > ol > li:hover {
  transform: translateY(-3px);
  border-color: hsl(215, 88%, 55%);
  box-shadow: 0 8px 32px hsl(215, 88%, 55%, 0.2);
}

[data-md-color-scheme='default'] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme='default'] .md-typeset .grid.cards > ol > li:hover {
  transform: translateY(-3px);
  border-color: hsl(215, 88%, 48%);
  box-shadow: 0 6px 24px hsl(215, 88%, 48%, 0.15);
}

/* ── 9. Scrollbar ──────────────────────────────────────────────────────────
 * Thin rounded scrollbar matching the dark palette.
 * ───────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

[data-md-color-scheme='slate'] ::-webkit-scrollbar-thumb {
  background: hsl(222, 20%, 30%);
  border-radius: 3px;
}

[data-md-color-scheme='slate'] ::-webkit-scrollbar-thumb:hover {
  background: hsl(222, 14%, 45%);
}

[data-md-color-scheme='default'] ::-webkit-scrollbar-thumb {
  background: hsl(222, 10%, 75%);
  border-radius: 3px;
}