/* Color scheme vars (custom scheme: midnightcodex) */
[data-md-color-scheme="froogz"] {
  --md-primary-fg-color: #fcfcfc;
  --md-primary-fg-color--light: #fcfcfc;
  --md-primary-fg-color--dark: #1b1b1b;
}

/* Minor tweak for light-pref users */
@media (prefers-color-scheme: light) {
  .md-nav__source {
    background-color: var(--md-primary-fg-color--light);
  }
}

/* Base text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: "Google Sans", "Google Sans Text", Roboto, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.md-typeset {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}
.md-typeset h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.12 !important;
}
.md-typeset h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.18 !important;
}
.md-typeset h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.22 !important;
}

/* AGGRESSIVE FIX FOR BLOTCHY BOLD TEXT */
.md-typeset,
.md-typeset strong,
.md-typeset b,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  /* Forces color anti-aliasing for smooth, sharp text */
  -webkit-font-smoothing: antialiased !important;
  /* Forces browser to prioritize smooth edges */
  text-rendering: optimizeLegibility !important;

  /* A trick to force high-quality rendering on Webkit browsers (Chrome/Safari) */
  -webkit-text-stroke: 0.1px transparent !important;

  /* Sometimes this helps on systems with poor rendering */
  transform: translateZ(0);
}

.md-header--shadow {
  box-shadow: none !important;
}
.md-header {
  background-color: #ffffff !important;
}

/* ===========================
   Thumbnail grid (index)
   =========================== */

/* Grid: 1 col mobile, 2 cols ≥768px */
.books-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-block: clamp(1rem, 2.5vw, 1.25rem);
}
@media (min-width: 768px) {
  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card */
.book-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  margin: 0; /* neutralize UA margins (e.g., <article>) */
}

/* Media wrapper (modern + fallback) */
.book-card .thumb {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f2f2f5;
  aspect-ratio: 3 / 4; /* modern browsers */
  position: relative;
}
@supports not (aspect-ratio: 1 / 1) {
  .book-card .thumb::before {
    content: "";
    display: block;
    padding-top: calc(4 / 3 * 100%); /* 3:4 box = 133.333% */
  }
  .book-card .thumb > * {
    position: absolute;
    inset: 0; /* img or overlays fill the box */
  }
}

/* Image inside the wrapper */
.book-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Titles + blurbs */
.book-title {
  margin: 0.5rem 0 0;
  font-weight: 700;
  text-align: center;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--md-typeset-color);
}
.book-desc {
  margin: 0.25rem auto 0;
  text-align: center;
  color: var(--md-default-fg-color--light);
  max-width: 40ch;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* keeps rows tidy */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1; /* compact */
}

/* Coming-soon placeholder overlays the same wrapper */
.book-card.soon {
  pointer-events: none;
}
.book-card.soon .thumb {
  background: repeating-linear-gradient(
    135deg,
    #f6f7fb 0 12px,
    #eef0f6 12px 24px
  );
}
.book-card.soon .thumb::after {
  content: "COMING SOON";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.78);
}

/* ===========================
   Book page hero (single source of truth)
   =========================== */

/* Shared width: matches the grid tile feel */
.md-typeset {
  --book-hero-w: clamp(240px, 42vw, 360px);
}

/* Container */
.book-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
  margin: 1rem auto 2rem;
  max-width: 100%;
}

/* Cover (same width as button) */
.book-hero .thumb {
  width: var(--book-hero-w);
  aspect-ratio: 3 / 4;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #f2f2f5;
  position: relative;
}
@supports not (aspect-ratio: 1 / 1) {
  .book-hero .thumb::before {
    content: "";
    display: block;
    padding-top: 133.333%;
  }
  .book-hero .thumb > * {
    position: absolute;
    inset: 0;
  }
}
.book-hero .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title + blurb */
.book-hero .book-title {
  margin: 0.6rem 0 0;
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--md-typeset-color);
}
.book-hero .book-desc {
  margin: 0.25rem 0 0;
  color: var(--md-default-fg-color--light);
  max-width: 60ch;
}

/* Buy button wrapper — exact same width as image */
.book-hero .buy-wrap {
  display: grid; /* makes stretching trivial */
  width: var(--book-hero-w);
  margin-top: 0.6rem;
}

/* Force any injected Payhip element to the same width */
.buy-wrap > * {
  justify-self: stretch;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Anchor before Payhip replaces it */
.book-hero .payhip-buy-button {
  display: block;
  text-align: center;
}

/* Mobile: hero fills content width like an index tile */
@media (max-width: 767.98px) {
  .book-hero .thumb,
  .book-hero .buy-wrap {
    width: 100%;
  }
}

/* --- Fix Payhip button overflow on mobile --- */
@media (max-width: 767.98px) {
  /* keep wrapper same width as the image and clip any excess */
  .book-hero .buy-wrap {
    width: 100%;
    overflow: hidden; /* prevents 1–2px bleed from injected elems */
  }

  /* force ALL injected Payhip elements to fit the wrapper */
  .book-hero .buy-wrap > *,
  .book-hero .buy-wrap .payhip-buy-button,
  .book-hero .buy-wrap [class*="payhip"],
  .book-hero .buy-wrap [id*="payhip"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* allow wrapping instead of stretching */
  }
}
/* (optional) avoid subpixel overflow from borders/padding on any screen */
.book-hero .buy-wrap > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Payhip button: force 16px text and keep sizing sane --- */
.book-hero .buy-wrap .payhip-buy-button,
.book-hero .buy-wrap [class*="payhip"] a,
.book-hero .buy-wrap [class*="payhip"] button {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* (optional) add a touch more padding for better tap target */
.book-hero .buy-wrap .payhip-buy-button,
.book-hero .buy-wrap [class*="payhip"] a,
.book-hero .buy-wrap [class*="payhip"] button {
  padding: 0.75rem 1rem !important;
  box-sizing: border-box !important;
}

/* Keep mobile overflow fixes */
@media (max-width: 767.98px) {
  .book-hero .buy-wrap {
    width: 100%;
    overflow: hidden;
  }
  .book-hero .buy-wrap > *,
  .book-hero .buy-wrap .payhip-buy-button,
  .book-hero .buy-wrap [class*="payhip"],
  .book-hero .buy-wrap [id*="payhip"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}
.md-typeset h3 {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

.md-typeset h1 {
  font-weight: bold;
  line-height: 1 !important;
}
.md-typeset {
  line-height: 1.3 !important;
}
/* Target the main MkDocs content area */
.md-container {
  overflow-x: hidden;
}
/* GLOBAL FIX FOR HORIZONTAL SCROLL ON MOBILE */
html,
body {
  overflow-x: hidden;
}

* {
  max-width: 100vw;
}