/* Sponsor Navigation Menu Button */
.md-tabs__item--sponsor {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.md-tabs__link--sponsor {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.75rem !important;
  margin: auto 0;
  height: 1.55rem;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.55rem !important;
  color: #ffffff !important;
  background-color: #ea4c89 !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 4px rgba(234, 76, 137, 0.3);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  opacity: 1 !important;
}

.md-tabs__link--sponsor .twemoji {
  display: inline-flex;
  align-items: center;
}

.md-tabs__link--sponsor svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
}

.md-tabs__link--sponsor:hover {
  background-color: #d83b77 !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(234, 76, 137, 0.45);
}

/* ==========================================================================
   Sidebar Navigation Subtle Section Spacing
   ========================================================================== */
/* Subtle top spacing before section headers */
.md-nav--primary .md-nav__item--section {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Interactive Canvas Simulators & Playground Cards
   ========================================================================== */
.interactive-card {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-radius: 8px;
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   EthicalAds Integration (Privacy-Preserving Developer Advertising)
   ========================================================================== */
.ethical-ad-footer-container {
  margin: 2.5rem 0 1.5rem 0;
  padding: 1rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
}

.ethical-ad-footer-container [data-ea-publisher] {
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
}

.ea-sidebar-container {
  margin-top: 1.5rem;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
}

[data-ea-publisher].adaptive {
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   EthicalAds Integration (Privacy-Preserving Developer Advertising)
   ========================================================================== */
.ethical-ad-article-wrapper {
  margin: 3rem auto 1.5rem auto;
  padding: 1rem 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.ethical-ad-article-wrapper [data-ea-publisher] {
  margin: 0 auto;
}

.ea-sidebar-wrapper {
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  border-top: 1px dashed var(--md-default-fg-color--lightest);
}

.ea-sidebar-wrapper [data-ea-publisher] {
  width: 100%;
}

/* Light / Dark Mode adaptive borders */
[data-ea-publisher].bordered {
  border: 1px solid var(--md-default-fg-color--lighter) !important;
  border-radius: 8px !important;
  background-color: var(--md-code-bg-color) !important;
}

[data-ea-publisher].flat {
  background: transparent !important;
}

/* ==========================================================================
   EthicalAds Integration (Privacy-Preserving Developer Advertising)
   ========================================================================== */
.ea-sidebar-wrapper {
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--md-default-fg-color--lightest);
}

.ea-sidebar-wrapper [data-ea-publisher] {
  width: 100%;
}

.ethical-ad-article-wrapper {
  margin: 3rem auto 1.5rem auto;
  padding: 1rem 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

/* Hide article bottom ad on desktop when sidebar ad is present */
@media screen and (min-width: 76.25em) {
  .ethical-ad-article-wrapper {
    display: none;
  }
}

/* Light / Dark Mode adaptive styling */
[data-ea-publisher].bordered {
  border: 1px solid var(--md-default-fg-color--lighter) !important;
  border-radius: 8px !important;
  background-color: var(--md-code-bg-color) !important;
}

[data-ea-publisher].flat {
  background: transparent !important;
}

/* ==========================================================================
   EthicalAds Integration (Privacy-Preserving Developer Advertising)
   ========================================================================== */
.ea-sidebar-wrapper {
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--md-default-fg-color--lightest);
}

.ea-sidebar-wrapper [data-ea-publisher] {
  width: 100%;
}

.ethical-ad-article-wrapper {
  margin: 3rem auto 1.5rem auto;
  padding: 1rem 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

/* Hide article bottom ad on desktop when sidebar ad is present */
@media screen and (min-width: 76.25em) {
  .ethical-ad-article-wrapper {
    display: none;
  }
}

/* Hide 1x1 tracking/impression pixels so they never render as broken image thumbnails */
[data-ea-publisher] img[width="1"],
[data-ea-publisher] img[height="1"],
[data-ea-publisher] img[src*="impression"],
[data-ea-publisher] img[src*="pixel"],
.ea-pixel,
.ea-sidebar-wrapper img[width="1"],
.ea-sidebar-wrapper img[height="1"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Adaptive styling */
[data-ea-publisher].bordered {
  border: 1px solid var(--md-default-fg-color--lighter) !important;
  border-radius: 8px !important;
  background-color: var(--md-code-bg-color) !important;
  padding: 0.75rem !important;
}

[data-ea-publisher].flat {
  background: transparent !important;
}

[data-ea-publisher] img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.ea-sidebar-wrapper [data-ea-type="text"] img {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

/* ==========================================================================
   EthicalAds Integration (Privacy-Preserving Developer Advertising)
   ========================================================================== */
.ea-sidebar-wrapper {
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--md-default-fg-color--lightest);
}

.ethical-ad-article-wrapper {
  margin: 3rem auto 1.5rem auto;
  padding: 1rem 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

/* Hide article bottom ad on desktop when sidebar ad is present */
@media screen and (min-width: 76.25em) {
  .ethical-ad-article-wrapper {
    display: none;
  }
}

/* Always style the ad container box consistently across all navigations */
[data-ea-publisher],
.ea-sidebar-wrapper [data-ea-publisher],
.ethical-ad-article-wrapper [data-ea-publisher] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--md-default-fg-color--lighter, rgba(255,255,255,0.12)) !important;
  border-radius: 6px !important;
  background-color: var(--md-code-bg-color, #1a1e24) !important;
  padding: 0.85rem 1rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

[data-ea-publisher]:hover {
  border-color: var(--md-typeset-a-color, #00b0ff) !important;
}

/* Typography & Links */
[data-ea-publisher] .ea-content {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--md-default-fg-color, #e0e0e0) !important;
}

[data-ea-publisher] .ea-content a {
  color: inherit !important;
  text-decoration: none !important;
  display: block !important;
}

[data-ea-publisher] .ea-content a strong,
[data-ea-publisher] .ea-content strong {
  color: var(--md-typeset-a-color, #29b6f6) !important;
  font-weight: 600 !important;
}

[data-ea-publisher] .ea-content a:hover strong {
  text-decoration: underline !important;
}

/* "Ads by EthicalAds" Footer */
[data-ea-publisher] .ea-call-to-action,
[data-ea-publisher] .ea-call-to-action a,
.ea-sidebar-wrapper .ea-call-to-action a {
  display: block !important;
  margin-top: 0.45rem !important;
  text-align: right !important;
  font-size: 0.65rem !important;
  font-style: italic !important;
  color: var(--md-default-fg-color--lighter, #888888) !important;
  text-decoration: none !important;
  opacity: 0.8;
}

[data-ea-publisher] .ea-call-to-action a:hover {
  opacity: 1;
  text-decoration: underline !important;
}

/* Hide 1x1 tracking/impression pixels so they never render as broken image thumbnails */
[data-ea-publisher] img[width="1"],
[data-ea-publisher] img[height="1"],
[data-ea-publisher] img[src*="impression"],
[data-ea-publisher] img[src*="pixel"],
.ea-pixel,
.ea-sidebar-wrapper img[width="1"],
.ea-sidebar-wrapper img[height="1"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

[data-ea-publisher] img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.ea-sidebar-wrapper img {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

/* ==========================================================================
   utiLITI Panel Screenshots (Compact, Centered Vertical Inspectors)
   ========================================================================== */
.md-typeset img.panel-screenshot,
.md-typeset img[src*="-panel"],
.md-typeset img[src*="tileset-editor"] {
  display: block;
  max-width: 360px;
  width: 100%;
  margin: 1.5rem auto 0.5rem auto;
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lighter, rgba(255, 255, 255, 0.1));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.md-typeset p:has(> img.panel-screenshot) + p em,
.md-typeset p:has(> img[src*="-panel"]) + p em,
.md-typeset p:has(> img[src*="tileset-editor"]) + p em {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light, #888888);
  margin-bottom: 1.5rem;
}