/* Bond Home Technical Blog - Custom Styles */
/* Aligned with bondhome.io design language */

/* ===== Color Variables ===== */
:root {
  /* Bond brand colors */
  --bond-blue: #0057F1;
  --bond-blue-dark: #0046c1;
  --bond-text: #212529;
  --bond-background: #ffffff;
  --bond-background-alt: #f4f4f4;
  --bond-border: #efefef;
  --bond-border-dark: #dbdfe6;

  /* Material theme overrides - Light mode */
  --md-primary-fg-color: var(--bond-blue);
  --md-primary-fg-color--light: #4d8af4;
  --md-primary-fg-color--dark: var(--bond-blue-dark);
  --md-accent-fg-color: var(--bond-blue);
  --md-typeset-a-color: var(--bond-blue);
}

/* Dark mode color adjustments */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--bond-blue);
  --md-accent-fg-color: #4d8af4;
  --md-typeset-a-color: #4d8af4;
  --md-typeset-color: #d8dee9;
  --md-default-fg-color: rgba(255, 255, 255, 0.87);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.54);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.32);
}

/* ===== Typography ===== */
[data-md-color-scheme="default"] .md-typeset {
  color: var(--bond-text);
}

/* ===== Header Styling ===== */
.md-header {
  background-color: var(--bond-blue);
}

/* Logo styling */
.md-header__button.md-logo img {
  height: 1.5rem !important;
  width: auto !important;
}

.md-header__title {
  margin-left: 0.5rem;
}

/* Mobile logo */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo img {
    height: 1.25rem !important;
  }
}

/* ===== Links ===== */
.md-typeset a {
  color: var(--bond-blue);
}

.md-typeset a:hover {
  color: var(--bond-blue-dark);
}

/* ===== Buttons and Interactive Elements ===== */
.md-button {
  border-radius: 9999px;
}

.md-button--primary {
  background-color: var(--bond-blue);
  border-color: var(--bond-blue);
}

.md-button--primary:hover {
  background-color: var(--bond-blue-dark);
  border-color: var(--bond-blue-dark);
}

/* Search highlight */
.md-search__input {
  border-radius: 9999px;
}

/* ===== Content Area ===== */
.md-main__inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  scroll-padding-top: 6rem;
}

/* Light theme content */
[data-md-color-scheme="default"] .md-content {
  background-color: var(--bond-background);
  border: 1px solid var(--bond-border);
  color: var(--bond-text);
}

/* Dark theme content */
[data-md-color-scheme="slate"] .md-content {
  background-color: #1a1d23;
  border: 1px solid #434c5e;
  color: #d8dee9;
}

/* Common content styles */
.md-content {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 2rem;
  margin: 1rem;
}

/* ===== Navigation ===== */
.md-nav__link--active {
  color: var(--bond-blue);
}

/* ===== Code Blocks ===== */
.md-typeset code {
  border-radius: 4px;
}

.md-typeset pre {
  border-radius: 8px;
}

/* ===== Tables ===== */
.md-typeset table:not([class]) {
  border: 1px solid var(--bond-border);
  border-radius: 8px;
}

/* ===== Scroll Positioning ===== */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
  scroll-margin-top: 6rem;
}

.md-content .headerlink {
  scroll-margin-top: 6rem;
}

/* ===== Mobile Optimization ===== */
@media screen and (max-width: 768px) {
  .md-main__inner {
    max-width: 100%;
  }

  .md-content {
    padding: 1rem;
    margin: 0.5rem;
  }

  .md-grid {
    max-width: 100%;
    margin: 0;
  }
}

@media screen and (max-width: 480px) {
  .md-content {
    padding: 0.75rem;
    margin: 0.25rem;
  }
}

/* ===== Copy as Markdown Button ===== */
/* Position in upper-right corner of content area */
.md-content__inner {
  position: relative;
}

.copy-markdown-container {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  z-index: 10;
}

.copy-markdown-button {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--bond-blue) !important;
  background-color: transparent !important;
  border: 1px solid var(--bond-border-dark) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-markdown-button:hover {
  background-color: var(--bond-blue) !important;
  color: white !important;
  border-color: var(--bond-blue) !important;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .copy-markdown-button {
  color: #4d8af4 !important;
  border-color: #434c5e !important;
  background-color: transparent !important;
}

[data-md-color-scheme="slate"] .copy-markdown-button:hover {
  background-color: #4d8af4 !important;
  color: #1a1d23 !important;
  border-color: #4d8af4 !important;
}

/* ===== Blog-specific Styles ===== */
.md-post__meta {
  color: #666;
}

.md-post__meta a {
  color: var(--bond-blue);
}

/* ===== SVG Diagram Dark Mode Support ===== */
/* SVGs loaded as <img> need filter-based inversion for dark mode */
[data-md-color-scheme="slate"] .md-content img[src$=".svg"] {
  filter: invert(0.85) hue-rotate(180deg);
}

/* For inline/embedded SVGs (if used in future) */
.md-content svg {
  color: #333;
}

[data-md-color-scheme="slate"] .md-content svg {
  color: #d8dee9;
}

[data-md-color-scheme="slate"] .md-content svg line[stroke="#666"],
[data-md-color-scheme="slate"] .md-content svg text[fill="#666"] {
  stroke: #8fbcbb;
  fill: #8fbcbb;
}

[data-md-color-scheme="slate"] .md-content svg line[stroke="#999"] {
  stroke: #6c7a89;
}

[data-md-color-scheme="slate"] .md-content svg rect[fill="#f5f5f5"] {
  fill: #2e3440;
}

[data-md-color-scheme="slate"] .md-content svg rect[fill="#e8f4e8"] {
  fill: #3b4252;
}