/* =============================================================================
   OpenDepot — Custom Brand Palette & Visual Enhancements
   Brand colors: #03deb8 (mint) · #04cfd0 (teal) · #047df1 (blue)
                 #05b6de (sky) · #059ee8 (azure)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Color variables — Light scheme
   --------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:              #047df1;
  --md-primary-fg-color--light:       #05b6de;
  --md-primary-fg-color--dark:        #0350c7;
  --md-accent-fg-color:               #03deb8;
  --md-accent-fg-color--transparent:  rgba(3, 222, 184, 0.1);
  --md-typeset-a-color:               #047df1;

  /* Subtle surface tint for code blocks */
  --md-code-bg-color:                 #f0f7ff;
}

/* ---------------------------------------------------------------------------
   Color variables — Dark (slate) scheme
   --------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:              #04cfd0;
  --md-primary-fg-color--light:       #03deb8;
  --md-primary-fg-color--dark:        #047df1;
  --md-accent-fg-color:               #03deb8;
  --md-accent-fg-color--transparent:  rgba(3, 222, 184, 0.15);
  --md-typeset-a-color:               #05b6de;

  --md-code-bg-color:                 rgba(4, 207, 208, 0.06);
}

/* ---------------------------------------------------------------------------
   Header — gradient brand bar
   --------------------------------------------------------------------------- */
.md-header {
  background: linear-gradient(135deg, #047df1 0%, #03deb8 100%);
}

/* Keep header icons white regardless of palette */
.md-header__title,
.md-header__button,
.md-header__topic .md-ellipsis {
  color: #fff !important;
}

/* Site name is redundant now that the logo artwork includes the wordmark */
.md-header__topic:not([data-md-component="header-topic"]) {
  display: none;
}

/* Logo sizing on the gradient header/nav — artwork already renders correctly, no color filter needed */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.4rem;
  width: auto;
}

.md-nav__title .md-nav__button.md-logo img,
.md-nav__title .md-nav__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* The header sits on the gradient brand bar, so use the all-white wordmark to avoid
   the full-color artwork clashing with the gradient */
.md-header__button.md-logo img {
  content: url("../img/opendepot_white.svg");
}

@media (max-width: 76.2344em) {
  /* Material reserves 5.6rem of height with top padding for the site-name text
     wrapping below the logo; since that text is hidden, shrink the bar and
     left-align the logo like a normal title instead of stretching/centering it */
  .md-nav--primary .md-nav__title {
    display: flex;
    align-items: center;
    height: 3.4rem;
    padding: 0 .8rem;
  }

  .md-nav--primary .md-nav__title .md-logo {
    display: block;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    padding: 0;
  }

  /* The drawer title bar sits on the solid brand color, not the header gradient,
     so swap in the all-white wordmark to avoid clashing with the colored artwork */
  .md-nav--primary .md-nav__title .md-logo img {
    content: url("../img/opendepot_white.svg");
  }

  /* Hide the redundant site-name text next to the drawer logo (logo already has the wordmark) */
  .md-nav--primary .md-nav__title {
    font-size: 0;
  }

  /* The theme hides the header wordmark logo entirely below the desktop breakpoint
     (it only reappears inside the drawer once opened). Without it, all that's left
     in the mobile header is the page title — so inner pages show no OpenDepot
     branding at all. Bring the compact white wordmark back into the header bar,
     sized down slightly to leave room for the page title next to it. */
  .md-header__button.md-logo {
    display: block !important;
    height: 1.1rem;
    margin: auto .5rem auto 0 !important;
    padding: 0 !important;
  }

  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 1.1rem;
  }

  /* Put the hamburger before the logo in visual order so the drawer toggle
     reads left-to-right, then the wordmark — matches how users expect the
     menu control and brand mark to be laid out together. Negative order
     values keep both ahead of the title/search/theme-toggle buttons, which
     default to order 0. */
  .md-header__button.md-logo {
    order: -1;
  }

  .md-header__button[for="__drawer"] {
    order: -2;
  }
}

.md-header__button.md-logo {
    margin: .1rem;
    padding: .2rem;
}

/* ---------------------------------------------------------------------------
   Navigation tabs — gradient to match header
   --------------------------------------------------------------------------- */
.md-tabs {
  background: linear-gradient(135deg, #0468cc 0%, #04cfd0 100%);
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.85);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Hero section (home page override)
   --------------------------------------------------------------------------- */
.mdx-container .md-grid {
  max-width: 78rem;
}

.mdx-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 1rem 0 3rem;
}

.mdx-hero__content {
  max-width: min(880px, 90%);
}

.mdx-hero__content h1 {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #047df1 0%, #03deb8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-md-color-scheme="slate"] .mdx-hero__content h1 {
  background: linear-gradient(135deg, #04cfd0 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mdx-hero__content p {
  line-height: 1.7;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1.75rem;
}

.mdx-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(420px, 30vw, 560px);
  margin: 0 auto 1rem;
  margin-top: 0.1rem;
}

.mdx-hero__image img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Light/dark logo switching in the hero */
.mdx-logo--dark { display: none; }
[data-md-color-scheme="slate"] .mdx-logo--light { display: none; }
[data-md-color-scheme="slate"] .mdx-logo--dark { display: block; }

/* Hero stats pills */
.mdx-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.mdx-hero__stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  border: 1px solid rgba(3, 222, 184, 0.3);
  white-space: nowrap;
}

/* Container for the hero section */
.mdx-container {
  padding-top: 1rem;
  background: var(--md-default-bg-color);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.md-button--primary {
  background: linear-gradient(135deg, #047df1 0%, #04cfd0 100%) !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(4, 125, 241, 0.35);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.md-button--primary:hover,
.md-button--primary:focus,
.md-button--primary:focus-visible {
  background: linear-gradient(135deg, #0365cc 0%, #0468cc 100%) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 6px 20px rgba(4, 125, 241, 0.45) !important;
  transform: translateY(-1px);
}

.md-button {
  border-radius: 6px;
  font-weight: 600;
}

/* Secondary button (e.g. "View on GitHub") */
.mdx-hero .md-button:not(.md-button--primary) {
  background: rgba(4, 125, 241, 0.08) !important;
  border: none !important;
  color: var(--md-primary-fg-color) !important;
  box-shadow: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.mdx-hero .md-button:not(.md-button--primary):hover,
.mdx-hero .md-button:not(.md-button--primary):focus,
.mdx-hero .md-button:not(.md-button--primary):focus-visible {
  background: rgba(4, 125, 241, 0.15) !important;
  border: none !important;
  outline: none !important;
  transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .mdx-hero .md-button:not(.md-button--primary) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--md-primary-fg-color) !important;
}

[data-md-color-scheme="slate"] .mdx-hero .md-button:not(.md-button--primary):hover,
[data-md-color-scheme="slate"] .mdx-hero .md-button:not(.md-button--primary):focus-visible {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ---------------------------------------------------------------------------
   Grid cards — hover lift
   --------------------------------------------------------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(4, 125, 241, 0.12);
  border-color: var(--md-primary-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme="slate"] .md-typeset .grid > .card:hover {
  box-shadow: 0 8px 24px rgba(3, 222, 184, 0.14);
}

/* ---------------------------------------------------------------------------
   Admonitions — brand accent strips
   --------------------------------------------------------------------------- */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #03deb8;
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(3, 222, 184, 0.12);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: #03deb8;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #04cfd0;
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(4, 207, 208, 0.1);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #04cfd0;
}

/* ---------------------------------------------------------------------------
   Code blocks
   --------------------------------------------------------------------------- */
.md-typeset pre > code {
  font-size: 0.9em;
  border-radius: 6px;
}

.md-typeset code {
  font-size: 0.88em;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) th {
  background: rgba(4, 125, 241, 0.08);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(4, 207, 208, 0.1);
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background: rgba(4, 125, 241, 0.03);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background: rgba(3, 222, 184, 0.04);
}

/* ---------------------------------------------------------------------------
   Navigation sidebar — active link accent
   --------------------------------------------------------------------------- */
.md-nav__link--active {
  color: var(--md-primary-fg-color) !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.md-footer {
  background: linear-gradient(135deg, #0468cc 0%, #046e73 100%);
}

/* ---------------------------------------------------------------------------
   Responsive — tighten spacing and type scale on small screens
   --------------------------------------------------------------------------- */
@media screen and (max-width: 76.1875em) {
  .mdx-container {
    padding-top: 0;
  }
  .mdx-hero {
    padding: 0.5rem 0 2rem;
    padding-top: 1rem;
  }
  .mdx-hero__content h1 {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 480px) {
  .mdx-hero__image {
    max-width: 75%;
  }
}