/* Custom styles for NextPresser documentation */

/* Match Next.js app background color exactly (no dots) */
html,
body,
.md-main,
.md-content,
.md-content__inner,
.md-typeset,
.md-typeset__inner {
  /* Background color: hsl(0, 0%, 3.9%) - same as Next.js app */
  background-color: hsl(0, 0%, 3.9%) !important;
  background-image: none !important;
}

/* Header - same background color */
.md-header {
  background-color: hsl(0, 0%, 3.9%) !important;
  background-image: none !important;
}

/* Footer - same background color */
.md-footer,
.md-footer-meta,
.md-footer-meta__inner {
  background-color: hsl(0, 0%, 3.9%) !important;
  background-image: none !important;
}

/* Move search to the right */
.md-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.md-header__option[data-md-component="search"] {
  margin-left: auto !important;
  order: 999 !important;
}

.md-search {
  margin-left: auto !important;
  order: 999 !important;
}

/* Ensure logo is white in dark theme */
[data-md-color-scheme="slate"] .md-header .md-logo img,
[data-md-color-scheme="slate"] .md-nav .md-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Ensure logo is black in light theme */
[data-md-color-scheme="default"] .md-header .md-logo img,
[data-md-color-scheme="default"] .md-nav .md-logo img {
  filter: none !important;
}

/* Hide palette switcher in header */
.md-header .md-header__option[data-md-component="palette"] {
  display: none !important;
}

/* Style palette switcher in footer */
.md-footer__palette {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.md-footer__palette .md-header__option {
  margin: 0;
}

.md-footer__palette .md-header__button {
  margin: 0;
  padding: 0.4rem;
}

/* Move palette from header to footer using CSS */
.md-footer-meta__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Footer background removed - using same color as body above */

/* Replace headerlink paragraph symbol with link icon */
.headerlink {
  text-decoration: none !important;
  color: inherit !important;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.headerlink:hover {
  opacity: 1;
}

/* Replace ¶ with link icon using CSS */
.headerlink::before {
  content: "🔗" !important;
  font-size: 0.8em;
  margin-left: 0.3em;
}

/* Alternative: Use SVG link icon */
.headerlink {
  display: inline-flex;
  align-items: center;
  margin-left: 0.3em;
}

.headerlink::before {
  content: "" !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.headerlink:hover::before {
  opacity: 1;
}