/* ===== UKY Blue header + white text ===== */
:root {
  --md-primary-fg-color: #0033A0;        /* UKY Blue */
  --md-primary-fg-color--dark: #002D72;  /* darker UKY Blue */
  --md-accent-fg-color: #009CDE;         /* accent (use for focus/hover, not body text) */

  /* Body text colors (ensure high contrast on white background) */
  --md-default-fg-color: #111111;        /* near-black body text */
  --md-default-fg-color--light: #2b2b2b;
  --md-default-fg-color--lighter: #444444;
  --md-default-bg-color: #ffffff;
}

/* Ensure header/nav text is white (robust across Material versions) */
.md-header,
.md-tabs {
  color: #ffffff;
}
.md-header__topic,
.md-header__title,
.md-tabs__link,
.md-header__button,
.md-search__icon {
  color: #ffffff !important;
}

/* ===== Body typography: black text ===== */
.md-typeset {
  color: #111111;
  line-height: 1.65;
}

/* Links: use UKY blue (high contrast on white) */
.md-typeset a {
  color: #0033A0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.md-typeset a:hover {
  color: #002D72;
}

/* Table of contents / side nav links: readable */
.md-nav__link,
.md-nav__title {
  color: #111111;
}
.md-nav__link--active {
  color: #0033A0;
  font-weight: 600;
}

/* Keyboard focus (ADA-friendly) */
:focus-visible {
  outline: 3px solid #009CDE;
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Minimal, no-layout-break styling for image source details
   Purpose:
   - Keep image source present but unobtrusive
   - Avoid Material for MkDocs button/admonition styling
   - Prevent layout breakage or icon overlap
   --------------------------------------------------------- */

/* Let the details container shrink to content */
details.image-source {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.25rem;
}

/* Reset Material button-like styling on summary */
details.image-source > summary {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;

  /* typography */
  font-size: 0.8rem !important;
  color: var(--md-default-fg-color--light) !important;

  /* keep it compact */
  max-width: 100% !important;
  cursor: pointer;
}

/* Disable Material pseudo-icons / chevrons that cause overlaps */
details.image-source > summary::before,
details.image-source > summary::after,
details.image-source > summary .twemoji {
  content: none !important;
  display: none !important;
}

/* Content spacing when expanded */
details.image-source > *:not(summary) {
  font-size: 0.8rem !important;
  margin-top: 0.4rem !important;
}

/* Row layout for side-by-side figures */
.figure-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;   /* Wrap on small screens */
}

/* Each figure keeps its own width */
.figure-row .course-figure {
  width: 280px;      
  max-width: 100%;
}

/* Force equal-height images inside course figures */
.course-figure img {
  width: 100% !important;
  height: 320px !important;      
  object-fit: cover !important;  
  display: block !important;
}

/* ---------- Size tiers for figure rows ---------- */

/* Small*/
.figure-row.size-sm .course-figure {
  width: 200px;
}
.figure-row.size-sm .course-figure img {
  height: 220px !important;
}

/* Medium*/
.figure-row.size-md .course-figure {
  width: 280px;
}
.figure-row.size-md .course-figure img {
  height: 320px !important;
}

/* Large*/
.figure-row.size-lg .course-figure {
  width: 320px;
}
.figure-row.size-lg .course-figure img {
  height: 380px !important;
}

/* When an image is full-img2, make the figure expand */
.course-figure:has(img.full-img) {
  width: 100% !important;
  max-width: 500px !important;
}

/* Full images: show entire image, no cropping */
.course-figure img.full-img {
  width: 100% !important;
  height: auto !important;          /* override fixed height */
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}