/* User Provided Stylesheet */

/* Custom tweaks for MyST site */
/* Nudge the logo away from the left edge and make it 2x size */
img[src="/test.png"],
img[src^="/test-"],
img[src="/temp_logo.png"],
img[src^="/temp_logo-"] {
  margin-left: 12px;
  transform: scale(2);
  transform-origin: left center;
}

/* Make the new logo larger (~3x) while keeping left margin */
/* Use contains selector to match absolute + hashed src */
img[src*="inhabited_initial"] {
  margin-left: 12px;
  height: 135px !important; /* ~1.5x larger than prior */
  width: auto !important;
  max-height: none !important;
  object-fit: contain;
  margin-top: 0;
  margin-bottom: 0;
}

/* Fallback ONLY when no <img> present (production static)
   Use :not(:has(img)) so localhost keeps the inline image */
.sticky nav a[href="/"]:not(:has(img)) {
  background-image: url('/inhabited_initial.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 135px;
  height: 135px;
  display: block;
  margin: 0 auto;
}
.light .sticky nav a[href="/"]:not(:has(img)) {
  background-color: var(--parchment);
}
.sticky nav a[href="/"]:not(:has(img)) span { /* hide placeholder text */
  display: none !important;
}

/* Use the PNG as-is; no blending or tinting (to respect transparency) */
.light .sticky nav a[href="/"] > div { background: transparent !important; }
.light .sticky nav a[href="/"] > div img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* Remove wrapper padding/margins to avoid horizontal bands on mobile */
.sticky nav a[href="/"] > div {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Remove header shadow; restore a clean black separator line */
.sticky {
  box-shadow: none !important;
  border-bottom: 1px solid #000 !important;
}

/* On small screens, avoid any blending to reduce artifacts */
@media (max-width: 640px) {
  .light .sticky nav a[href="/"] > div { background: transparent !important; }
  .light .sticky nav a[href="/"] > div img { mix-blend-mode: normal !important; }
}

/* Expand the top header bar to accommodate larger logo */
.sticky.h-\[60px\],
.sticky[class*="h-\\[60px\\]"] {
  height: 160px !important;
}

.sticky.h-\[60px\] nav,
.sticky[class*="h-\\[60px\\]"] nav {
  height: 100%;
  align-items: center;
}

/* Subtle parchment theme (light mode only) */
:root {
  --parchment: #F7F2E3;
  --parchment-overlay: rgba(247, 242, 227, 0.85);
  --parchment-accent: rgba(173, 131, 57, 0.18);
  --parchment-accent-hover: rgba(173, 131, 57, 0.10);
}

/* Apply parchment background in light theme */
.light body {
  background-color: var(--parchment) !important;
}

/* Make header solid parchment (avoid iOS banding) */
.light .sticky {
  background-color: var(--parchment) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Left nav highlights (selected + hover) */
.light nav[aria-label="Table of Contents"] a.active,
.light nav[aria-label="Navigation"] a.active {
  background-color: var(--parchment-accent) !important;
}
.light nav[aria-label="Table of Contents"] a:hover,
.light nav[aria-label="Navigation"] a:hover {
  background-color: var(--parchment-accent-hover) !important;
}

/* Hide theme toggle button */
button.theme { display: none !important; }

/* Force dark theme to visually match light (parchment) */
.dark body { background-color: var(--parchment) !important; }
/* Make header solid parchment in dark too (avoid iOS banding) */
.dark .sticky {
  background-color: var(--parchment) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.dark nav[aria-label="Table of Contents"] a.active,
.dark nav[aria-label="Navigation"] a.active { background-color: var(--parchment-accent) !important; }
.dark nav[aria-label="Table of Contents"] a:hover,
.dark nav[aria-label="Navigation"] a:hover { background-color: var(--parchment-accent-hover) !important; }
/* Neutralize common dark text/border utilities so text stays dark */
.dark .dark\:text-white { color: #111 !important; }
.dark .dark\:border-white { border-color: #444 !important; }

/* Ensure headings and body copy are dark in dark mode (mobile respects OS dark) */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark li,
.dark main,
.dark article,
.dark .article,
.dark .content {
  color: #111 !important;
}

/* Ensure links are dark in dark mode (iOS forced dark) */
.dark a,
.dark a:visited {
  color: #111 !important;
}
.dark a:hover {
  color: #000 !important;
}
.dark nav[aria-label="Table of Contents"] a,
.dark nav[aria-label="Navigation"] a {
  color: #111 !important;
}

/* Push the left fixed navigation down to clear the taller header */
.fixed.xl\:article-grid {
  top: 160px !important;
}

/* Center the logo without transforms: use grid in the header nav */
.sticky nav {
  display: grid !important;
  /* Slight left shift, closer to centered over content */
  grid-template-columns: 0.9fr auto 1.1fr;
  align-items: center;
}
.sticky nav > div:first-child { /* left group containing logo */
  grid-column: 2;
  justify-self: center;
}
.sticky nav > div:last-child { /* right utilities (theme toggle etc.) */
  grid-column: 3;
  justify-self: end;
}
.sticky nav a[href="/"] img {
  margin-left: 0 !important; /* ensure centered logo has no left offset */
  display: block;
}