/* ========================================
   UPTOWN HEALING - LEARN: TRANSPLANT
   ----------------------------------------
   Page-specific styles for /learn/transplant
   (formerly /learn).

   Requires: learn-shell.css to be loaded FIRST.
   The shell provides:
     - CSS variables (--primary, --diagram-*, etc.)
     - Layout (header, footer, banner, main-content)
     - Tab system + tab navigation
     - Generic info boxes (warning, lifestyle, info-note)
     - Diagram framework (cards, selectors, sliders,
       toggles, badges, metrics, info panels)
     - Color guide pattern (.urine-* classes — reused
       for stool, blood sugar, heart output, lung output)
     - Responsive breakpoints
     - Buttons, benefits grid, services grid, etc.

   This file contains ONLY rules unique to the
   transplant page:
     - .organ-title  (large green organ heading)
     - .organ-description  (body text under organ-title)
     - .urinary-system-card  (overflow override for SVG)
     - #urinary-system-root  (React mount point)
======================================== */


/* ========================================
   ORGAN TITLE
   The large green heading that introduces
   each organ section within a tab
   (e.g., "Your Kidneys", "Your Liver").
======================================== */

.organ-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--primary);
  margin: 40px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.organ-title i {
  font-size: 24px;
}

/* Optional modifier for organ titles that need
 extra top spacing (e.g., second organ section
 inside the same tab). */
.organ-title-spaced {
  margin-top: 50px;
}

/* Body text directly under an organ-title block.
 Reused across all organ tabs to introduce the
 organ-specific narrative. */
.organ-description {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.7;
  font-family: 'Libre Baskerville', serif;
}


/* ========================================
 URINARY SYSTEM DIAGRAM CARD OVERRIDE
 The interactive urinary diagram renders
 inline SVG that can extend beyond the
 card's normal overflow boundary, so this
 one card needs visible overflow. All other
 diagram cards keep the shell's default
 (hidden) overflow.
======================================== */

.urinary-system-card {
  overflow: visible;
}

/* React mount point for the urinary diagram.
 Fills the card's content width so the SVG
 can scale responsively inside it. */
#urinary-system-root {
  width: 100%;
}


/* ========================================
 END OF learn-transplant.css
======================================== */