.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Make main content wider */
.md-grid {
  max-width: 1440px;
}

/* docs/stylesheets/extra.css */

/* --- LIGHT MODE (Devlopr White) --- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:               #ffffff;
  --md-default-bg-color--light:        #f8f9fa; /* Light gray for cards/code */

  --md-primary-fg-color:               #ffffff; /* Clean white header */
  --md-primary-fg-color--transparent:  rgba(255, 255, 255, 0.9);
  --md-primary-bg-color:               #212529; /* Text on header (Dark) */

  --md-accent-fg-color:                #007bff; /* Devlopr Blue */
  --md-accent-bg-color:                #007bff;

  --md-default-fg-color:               #212529; /* Dark text */
  --md-default-fg-color--light:        #495057;
  --md-default-fg-color--lighter:      #6c757d;

  --md-code-bg-color:                  #f8f9fa;
  --md-code-fg-color:                  #d63384; /* Typical Jekyll-style pink for inline code */
}

/* --- DARK MODE (Devlopr Midnight) --- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:               #1a1c1d;
  --md-default-bg-color--light:        #212529;

  --md-primary-fg-color:               #1a1c1d;
  --md-primary-fg-color--transparent:  rgba(26, 28, 29, 0.9);

  --md-accent-fg-color:                #007bff;
  --md-accent-bg-color:                #007bff;

  --md-default-fg-color:               #f8f9fa;
  --md-default-fg-color--light:        #adb5bd;
  --md-default-fg-color--lighter:      #6c757d;

  --md-code-bg-color:                  #212529;
  --md-code-fg-color:                  #e9ecef;
}

/* Fix: Ensure the header text is visible in Light Mode */
[data-md-color-scheme="default"] .md-header {
  color: #212529;
  box-shadow: 0 0 0.2rem rgba(0,0,0,0.1), 0 0.2rem 0.4rem rgba(0,0,0,0.1);
}


/* --- LIGHT MODE LINKS --- */
[data-md-color-scheme="default"] {
  /* Standard Devlopr Blue - looks great on white */
  --md-typeset-a-color: #007bff;
}

/* --- DARK MODE LINKS --- */
[data-md-color-scheme="slate"] {
  /* Lighter, high-contrast blue for dark background */
  --md-typeset-a-color: #38b6ff;
}

/* --- HOVER & ACCESSIBILITY --- */
.md-typeset a:hover {
  filter: brightness(120%);
  text-decoration: underline; /* Good practice for accessibility */
}

/* Ensure inline code links are also visible */
.md-typeset a code {
  color: inherit;
}