/* ============================================================
   Bioethics OER — shared HTML site styles
   Reveal.js styling lives in styles/slides.scss; this file
   handles the website (HTML notes) only.

   Custom components (work in both formats):
     .learning-outcomes  — boxed list of outcomes
     .thought-question   — in-class discussion prompt
     .key-term           — inline first-use of a defined term
     .case-at-a-glance   — top-of-case-study summary
     .context-box        — background scaffolding
     .recap              — end-of-section synthesis
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:wght@400;500;600&display=swap');

:root {
  --primary:      #0e7c86;
  --primary-dark: #095058;
  --primary-tint: #e6f1f2;
  --accent:       #c0392b;
  --warm:         #b07d1a;
  --ink:          #0f172a;
  --muted:        #64748b;
  --rule:         #e5e7eb;
  --soft:         #f8fafc;
}

/* ===== HTML site (cosmo theme base) ===== */
body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}

h1, h2, h3, h4 {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--primary);
  letter-spacing: -0.015em;
  font-weight: 700;
}

h2 {
  border-bottom: 2px solid var(--primary-tint);
  padding-bottom: 0.3em;
  margin-top: 2em;
}

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 124, 134, 0.25);
  transition: color 0.15s, border-color 0.15s;
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

blockquote {
  border-left: 4px solid var(--accent);
  background: var(--soft);
  padding: 0.75em 1.2em;
  border-radius: 0 8px 8px 0;
  margin: 1.5em 0;
  font-style: normal;
  color: var(--ink);
}

.quote-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--soft) 100%);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding: 1em 1.15em 0.9em;
  margin: 1.5em 0;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.08),
              0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.quote-card blockquote {
  margin: 0;
  border-left: none;
  background: transparent;
  padding: 0;
}

.quote-card .attribution {
  margin-top: 0.85em;
  font-family: "Inter", sans-serif;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table {
  border-collapse: collapse;
}
th {
  background: var(--primary);
  color: white;
  padding: 0.55em 0.9em;
  font-weight: 600;
  text-align: left;
}
td {
  padding: 0.5em 0.9em;
  border-bottom: 1px solid var(--rule);
}
tr:nth-child(even) td { background: var(--soft); }

/* ===== Card-style callouts ===== */
.learning-outcomes,
.thought-question,
.case-at-a-glance,
.context-box,
.argument,
.objection,
.recap {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 2em 1.5em 1.25em;
  margin: 1.75em 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
              0 2px 4px -1px rgba(0, 0, 0, 0.04);
  position: relative;
}

.learning-outcomes > :first-child,
.thought-question > :first-child,
.case-at-a-glance > :first-child,
.context-box > :first-child,
.argument > :first-child,
.objection > :first-child,
.recap > :first-child {
  margin-top: 0;
}
.learning-outcomes > :last-child,
.thought-question > :last-child,
.case-at-a-glance > :last-child,
.context-box > :last-child,
.argument > :last-child,
.objection > :last-child,
.recap > :last-child {
  margin-bottom: 0;
}

/* Pill chip in the top-left */
.learning-outcomes::before,
.thought-question::before,
.case-at-a-glance::before,
.context-box::before,
.argument::before,
.objection::before,
.recap::before {
  position: absolute;
  top: -0.7em;
  left: 1.25em;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  display: inline-block;
}

.learning-outcomes::before { content: "Learning Outcomes"; background: var(--primary); }
.thought-question::before  { content: "Discuss";           background: var(--warm); }
.case-at-a-glance::before  { content: "At a Glance";       background: var(--accent); }
.context-box::before       { content: "Background";        background: var(--muted); }
.argument::before          { content: "Argument";          background: var(--primary-dark); }
.objection::before         { content: "Objection";         background: var(--accent); }
.recap::before             { content: "Recap";             background: var(--primary); }

/* Subtle accent edge on each card type */
.learning-outcomes { border-top: 3px solid var(--primary); }
.thought-question  { border-top: 3px solid var(--warm); }
.case-at-a-glance  { border-top: 3px solid var(--accent); }
.context-box       { border-top: 3px solid var(--muted); }
.argument          { border-top: 3px solid var(--primary-dark); }
.objection         { border-top: 3px solid var(--accent); }
.recap             { border-top: 3px solid var(--primary); }

/* Argument & objection cards: tighten the premise list, set off the conclusion */
.argument ol,
.objection ol { margin: 0.4em 0 0; padding-left: 1.4em; }
.argument ol li,
.objection ol li { margin: 0.35em 0; }
.argument ol li:last-child,
.objection ol li:last-child {
  list-style: none;
  margin-left: -1.4em;
  padding-top: 0.5em;
  border-top: 1px solid var(--rule);
  font-weight: 600;
}
.argument ol li:last-child::before,
.objection ol li:last-child::before { content: "\2234\00a0"; font-weight: 700; }

/* Argument-card header: name of the argument + source line */
.argument .arg-source,
.objection .arg-source {
  font-family: "Inter", sans-serif;
  font-size: 0.78em;
  color: var(--muted);
  font-style: italic;
  margin: -0.4em 0 0.6em;
}
.argument .arg-name,
.objection .arg-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.02em;
  margin: 0 0 0.1em;
}
.objection .arg-name { color: var(--accent); }

/* ===== Inline key term ===== */
.key-term {
  color: var(--primary-dark);
  font-weight: 700;
  border-bottom: none;
  background: linear-gradient(180deg, transparent 58%, rgba(14, 124, 134, 0.14) 58%);
  padding: 0 0.08em;
  border-radius: 0.18em;
}

/* ===== Image attribution caption ===== */
figure figcaption {
  font-size: 0.85em;
  color: var(--muted);
  font-style: italic;
}

/* ===== Quarto callout-note customization ===== */
.callout-note {
  border-left-color: var(--primary);
}

/* ===== Image attribution caption (small italic credit line) ===== */
.attribution {
  font-size: 0.78em;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.4em;
  line-height: 1.35;
}

/* ===== Color-coded principle pills (used inline) =====
   Use as: [Autonomy]{.pill .pill-autonomy} */
.pill {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  margin: 0 0.1em;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.4;
}
.pill-autonomy    { background: #e6f1f2; color: #0e7c86; }
.pill-beneficence { background: #fce9d6; color: #8a5f12; }
.pill-nonmal      { background: #fad7d2; color: #9d2f23; }
.pill-justice     { background: #dfe6ee; color: #334155; }

/* ===== Principle marker row (pill + tag) at top of "in practice" slides ===== */
.principle-marker {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25em 0 0.5em;
  font-family: "Inter", sans-serif;
}
.principle-marker .tag {
  font-size: 0.85em;
  color: var(--muted);
  font-style: italic;
}

/* ===== Fallacy card grid ===== */
.fallacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 0.75em 0;
}
.fallacy-card {
  background: var(--soft);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.7rem 0.95rem;
  font-size: 0.88em;
  line-height: 1.45;
}
.fallacy-card .name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: 0.2em;
}
.fallacy-card .defn {
  color: var(--ink);
}
.fallacy-card .ex {
  color: var(--muted);
  font-style: italic;
  display: block;
  margin-top: 0.35em;
}


/* ===== Four-principles grid ("The Four Together") =====
   Four equal cards, 2x2. Deliberately ungrouped: the principles do not
   sort cleanly by scope (beneficence reaches past the patient too).
   Use as: ::: {.principle-grid} containing .pg-card items. */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 1em 0;
}

.pg-card {
  border-radius: 8px;
  border-left: 5px solid;
  padding: 0.6rem 0.85rem;
  line-height: 1.4;
}
.pg-card .pg-name {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  margin-bottom: 0.15em;
}
.pg-card .pg-gloss {
  display: block;
  font-size: 0.9em;
  color: var(--ink);
}
.pg-card .pg-q {
  display: block;
  margin-top: 0.35em;
  font-size: 0.9em;
  font-style: italic;
  color: var(--muted);
}

.pg-autonomy    { background: #e6f1f2; border-left-color: #0e7c86; }
.pg-beneficence { background: #fce9d6; border-left-color: #b07d1a; }
.pg-nonmal      { background: #fad7d2; border-left-color: #c0392b; }
.pg-justice     { background: #dfe6ee; border-left-color: #334155; }
.pg-autonomy    .pg-name { color: #0e7c86; }
.pg-beneficence .pg-name { color: #8a5f12; }
.pg-nonmal      .pg-name { color: #9d2f23; }
.pg-justice     .pg-name { color: #334155; }

@media (max-width: 700px) {
  .principle-grid { grid-template-columns: 1fr; }
}

/* ===== Closing review questions ===== */
.review-questions {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 1.25rem;
}

.review-item {
  background: white;
  border: 1px solid var(--rule);
  border-left: 6px solid var(--primary);
  border-radius: 10px;
  padding: 0.95rem 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
              0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.review-item > :first-child {
  margin-top: 0;
}

.review-item > :last-child {
  margin-bottom: 0;
}

.review-item h4 {
  font-family: "Inter", sans-serif;
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.review-recall {
  border-left-color: var(--primary);
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
}

.review-recall h4 {
  color: var(--primary);
}

.review-apply {
  border-left-color: var(--warm);
  background: linear-gradient(135deg, #ffffff 0%, #fff9ef 100%);
}

.review-apply h4 {
  color: var(--warm);
}

.review-debate {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, #ffffff 0%, #fff5f4 100%);
}

.review-debate h4 {
  color: var(--accent);
}

/* ===== Reader aside =====
   A quiet note addressed to the person reading the notes — not a stage
   direction to the instructor. Lighter than .callout-note on purpose, so it
   does not compete with the callouts that carry the lecture's structure.
   Hidden in the slide deck (see slides.scss). */
.aside-note {
  border-left: 3px solid var(--rule);
  padding: 0.1em 0 0.1em 0.9em;
  margin: 1.1em 0;
  color: var(--muted);
  font-size: 0.92em;
  line-height: 1.5;
}
.aside-note::before {
  content: "Note";
  display: block;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.25em;
}

/* ===== Dialogue (cartoon conversation) =====
   Two figures from images/characters/figures/ facing each other, with
   speech bubbles stacked between them. Markup (see the lecture template):
     ::::: {.dialogue}
     :::: {.speaker}          figure + [Name]{.who}
     :::: {.bubbles}          ::: {.bubble .left} / ::: {.bubble .right}
     :::: {.speaker .flip}    the right-hand figure, mirrored to face left
   Figures show at their native pixel size, so the cast keeps one scale
   (a child stays shorter than an adult). Slide sizing is in slides.scss. */
.dialogue {
  display: grid;
  grid-template-columns: 22% 1fr 22%;
  align-items: end;
  column-gap: 0.5em;
  margin: 1em 0;
}
.dialogue .speaker { text-align: center; }
.dialogue .speaker p { margin: 0; }
.dialogue .speaker img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 260px;
  margin: 0;
}
.dialogue .speaker.flip img { transform: scaleX(-1); }
.dialogue .who {
  display: block;
  margin-top: 0.3em;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dialogue .bubbles {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55em;
  padding-bottom: 1.8em;
}
.dialogue .bubble {
  position: relative;
  max-width: 86%;
  padding: 0.5em 0.85em;
  border-radius: 18px;
  border: 2px solid;
  line-height: 1.35;
}
.dialogue .bubble p { margin: 0; }
.dialogue .bubble.left  { align-self: flex-start; background: var(--primary-tint); border-color: var(--primary); }
.dialogue .bubble.right { align-self: flex-end;   background: #fdf3e1;            border-color: var(--warm); }
/* the tail: a small rotated square tucked under the bubble's edge */
.dialogue .bubble::after {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 14px;
  height: 14px;
  background: inherit;
  border: inherit;
  border-width: 0 0 2px 2px;
}
.dialogue .bubble.left::after  { left: -9px;  transform: rotate(45deg); }
.dialogue .bubble.right::after { right: -9px; transform: rotate(-135deg); }