.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}

/* Widen the page grid on large screens. Default MkDocs Material caps at 61rem,
   which leaves generous empty gutters on modern wide displays. 78rem gives
   the content column about 54rem of horizontal space — comfortable for
   reading while letting tables, diagrams, and the plant gallery grids
   breathe. On very wide displays (≥1600px), we go to 86rem. */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 78rem;
  }
}
@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 86rem;
  }
}

/* Faint vertical dividers between sidebars and the center content on
   desktop, so the eye can anchor on the reading column. Light enough
   to be decorative, not heavy enough to compete with content. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
  }
  .md-sidebar--secondary {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
  }
  /* Slight breathing room inside the main content so text doesn't hug
     the divider lines. */
  .md-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Dark-mode aware: Material swaps the scheme via [data-md-color-scheme="slate"]. */
[data-md-color-scheme="slate"] .md-sidebar--primary,
[data-md-color-scheme="slate"] .md-sidebar--secondary {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Collapse the right-sidebar Table of Contents by default, showing only
   top-level section headings (H2). Nested headings (H3, H4) are revealed
   only when the user is viewing that section (toc.follow adds --active to
   the link whose heading is in view) or hovers over the section entry.
   Uses :has() which is supported in all modern browsers. */
@media screen and (min-width: 76.25em) {
  /* Hide nested nav by default */
  .md-sidebar--secondary .md-nav__item > .md-nav {
    display: none;
  }
  /* Reveal when an active link is inside this item (user is in this section)
     OR when the user hovers the item. */
  .md-sidebar--secondary .md-nav__item:has(.md-nav__link--active) > .md-nav,
  .md-sidebar--secondary .md-nav__item:hover > .md-nav {
    display: block;
  }
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 50px;
    width: 50px;
}

/* Container to control the iframe size and scaling */
.iframe-container {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Iframe styles */
  iframe {
    width: 100%;
    border: solid 2px blue;
  }

/* Quiz options are labelled A/B/C/D because every answer explanation says
   "The correct answer is C". The letters live in the markup as <ol type="A">,
   so they survive anywhere the stylesheet does not load — GitHub's markdown
   view, an editor preview, print, plain text. This rule exists because author
   CSS outranks the presentational `type` attribute, so Material's own
   `list-style` on ol would otherwise win and put the numbers back.

   `.upper-alpha ol` is kept for older markup where the class sat on a
   wrapping div. */
.upper-alpha ol,
ol.upper-alpha,
.md-typeset ol.upper-alpha {
  list-style-type: upper-alpha;
}

/* Styling for the Copy Button */
.admonition.prompt {
  position: relative;
}

.admonition.prompt .copy-button {
  position: absolute;
  top: 4px;
  right: 6px;
  background-color: #0056d6;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.3rem;
  cursor: pointer;
  font-size: 0.7rem;
}

.admonition.prompt .copy-button:hover {
  background-color: #0041a4; /* Darker blue on hover */
}

/* Plant Gallery grid styling */
.plant-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.plant-gallery-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plant-gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.plant-gallery-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.plant-gallery-caption {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.3;
}
.plant-gallery-caption em {
  color: #666;
  font-size: 0.85rem;
}
/* Content figure images: cap size and center so they feel like figures, not
   page-dominating walls. Applies to any image that sits alone in a paragraph
   (the standard markdown ![alt](url) pattern). Excludes mascot images and
   plant gallery thumbnails via their own class selectors below. */
.md-typeset p > img:only-child {
  display: block;
  max-width: min(720px, 100%);
  height: auto;
  margin: 1.25rem auto 0.25rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Captions in italics (markdown `*caption*`) that follow a figure should
   center under the image and stay muted. */
.md-typeset p > img:only-child + em,
.md-typeset p:has(> img:only-child) + p > em:only-child {
  display: block;
  text-align: center;
  color: rgba(0, 0, 0, 0.62);
  font-size: 0.88em;
  margin-top: 0.25rem;
}
/* Mascot and plant-gallery images are already styled separately and should
   NOT get the figure treatment. Override just in case. */
.md-typeset img.mascot-admonition-img,
.md-typeset .plant-gallery-card img {
  max-width: none;
  margin: 0;
  box-shadow: none;
}

/* Curtis-style botanical illustrations on species cards.
   The .plant-illustration class is appended via the plant-gallery-generator
   skill's card template when an illustration file exists at
   docs/plants/img/<slug>-illustration.png. */
.md-typeset img.plant-illustration {
  display: block;
  max-width: 360px;
  margin: 1.5rem auto 0.5rem auto;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.18);
  border: 1px solid rgba(170, 150, 110, 0.4);
}

/* MicroSim catalog grid (docs/sims/index.md). Wider cards than the plant
   gallery because sim screenshots are landscape 900x600, and the point of the
   thumbnail is that you can tell what the sim does before clicking. */
.sim-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.sim-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sim-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.md-typeset .sim-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
  display: block;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.sim-card-body {
  padding: 0.7rem 0.85rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
.sim-card-body strong { display: block; margin-bottom: 0.2rem; }
.sim-card-chapter {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: #2e7d32;
  background: #e8f5e9;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}

/* Home page cover. It is the book's own learning graph, so it earns its place
   at the top of the page rather than being decoration. */
.md-typeset img.book-cover {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.75rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

/* Downloads page card. One prominent thing to click, not a wall of links. */
.download-card {
  border: 1px solid #c8e6c9;
  border-left: 4px solid #2e7d32;
  border-radius: 6px;
  background: #f6fbf6;
  padding: 1rem 1.2rem;
  margin: 1.25rem 0 1.75rem;
}
.download-card p { margin: 0.2rem 0; }
.download-card strong a { font-size: 1.05rem; }
[data-md-color-scheme="slate"] .download-card {
  background: rgba(46, 125, 50, 0.10);
  border-color: rgba(46, 125, 50, 0.45);
}