@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

.large-fixed-text-left {
  font-size:var(--size-large);

  padding-left:50px;
  font-weight: 800;
}

.large-fixed-text-right {
  font-size:var(--size-large);

  padding-right:50px;
  font-weight: 800;
  color: var(--col-text);
}

p {
  color: var(--col-text);
}

.medium-fixed-text {
  font-size:var(--size-medium);

  padding-right:50px;
  color: var(--col-text);
}

.medium-fixed-text p{
  margin-bottom: 100px;
}

/* Narrative block container */
.narrative-block {
  max-width: 700px;        /* keep readable line length */
  margin: 3rem auto;       /* generous vertical space */
  padding: 1.5rem 2rem;
  background-color: #fcfcfc; /* subtle contrast with pure white */
  border-left: 4px solid #dee2e6;
  border-radius: 8px;
  line-height: 1.4;
  font-family: 'Karla', sans-serif;
  color: #212529;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
}

.narrative-block:hover {
  background-color: #f8f9fa;  /* subtle hover cue for interactivity */
}


/* Optional: inline note style */
.note {
  font-style: italic;
  color: #6c757d;
}

/* Optional: section title style */
.narrative-title {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: #495057;
  margin-bottom: 0.5rem;
  display: block;
}

.cr-narrative.text-center {
  text-align: center !important;
}

.small-gif {
  width: 40%;
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
}

:root {
  --size-large: clamp(32px, 4vw, 92px);
  --size-medium-large: clamp(28px, 3.25vw, 80px);  /* NEW */
  --size-medium: clamp(24px, 2.5vw, 69px);
  --size-normal: clamp(18px, 2vw, 52px);
  --col-text:#212529;
  --col-blue: #819ECE;
  --col-gree: #3C886E;
  --col-lavender: #C28AF3;
  --col-orange: #E1937B;
  --col-yellow: #DDD346;
  --col-personal-care: #4288F1;
  --col-eat: #6EBA38;
  --col-edu: #EF8632;
  --col-work: #CA42A0;
  --col-housework: #5DCAF3;
  --col-household-care: #D44A62;
  --col-nonhouse-care: #86594C;
  --col-shopping: #6EAB8A;
  --col-pro-care: #9D79C3;
  --col-leisure: #6175E4;
  --col-sports: #D879BF;
  --col-travel: #BBBBBB;
  --font-serif: 'Merriweather', Georgia, serif;
  --font-sans: 'Karla', sans-serif;
  --col-plum-dark: #4b3a6b;

}

/* === Base bubble styling === */
.message-left,
.message-right {
  position: relative;
  border: 2px solid #ddd;
  border-radius: 15px;
  padding: 35px 20px 15px 20px; /* extra top padding for name line */
  margin: 15px 0;
  max-width: 75%;
  clear: both;
  line-height: 1.4;
  font-family: 'Karla', sans-serif;
  font-size: 1.15rem; /* ✅ slightly larger text */

}

.message-left {
  float: left;
  background-color: #d1e7dd; /* warm mint green */
  margin-right: auto;
}

/* Regina (right) */
.message-right {
  float: right;
  background-color:#fbe3e6; /* soft rose */
  margin-left: auto;
}

/* --- Avatar images --- */
.message-left::before,
.message-right::before {
  content: "";
  position: absolute;
  top: -22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid white;
}

/* Kristin’s avatar */
.message-left::before {
  left: 10px;
  background-image: url("Sainani_podcast.jpeg");
}

/* Regina’s avatar */
.message-right::before {
  right: 10px;
  background-image: url("Regina Nuzzo.jpeg");
}

/* --- Speaker name inside bubble --- */
.message-left strong,
.message-right strong {
  display: block;
  font-weight: 700;
  color: #212529;
  margin-bottom: 6px;
  text-align: left;
}

/* Paragraph text */
.message-left p,
.message-right p {
  text-align: left;
  margin: 0 0 10px 0;
}

.message-left p:last-child,
.message-right p:last-child {
  margin-bottom: 0;
}

/* Clear floats between sections */
.clear-messages {
  clear: both;
}

.message-left::before,
.message-right::before {
  top: -25px; /* lifts avatar above bubble edge */
}

/* Add spacing between paragraphs/lines in messages */
.message-left p, .message-right p {
  text-align: left;
  margin: 0 0 13px 0;  /* 10px spacing between paragraphs */
  line-height: 1.2;     /* Increases space between lines of text */
}

/* Remove margin from last paragraph to avoid extra space at bottom */
.message-left p:last-child, .message-right p:last-child {
  margin-bottom: 0;
}

/* Profile images stay circular */
.message-left img, .message-right img {
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 50%;
}

/* Content images keep their shape */
.message-left .content-image, .message-right .content-image {
  border-radius: 8px;  /* or 0 for no rounding */
  display: block;
  margin: 10px auto;
  max-width: 100%;
  height: auto;
  border-radius: 0;  /* Keeps original shape */
}

body {
  font-family: var(--font-serif);
}

.message-left,
.message-right,
.callout-tip,
code,
pre {
  font-family: var(--font-sans);
}

.cr-section,
.narrative-block,
.callout-tip {
  font-family: var(--font-serif);
}

.message-left,
.message-right,
.caption,
.code,
.callout-tip code {
  font-family: var(--font-sans);
}


/* --- Force custom fonts inside closeread narrative blocks --- */
.cr-narrative,
.narrative,
.cr-section,
.cr-narrative .narrative-block,
.cr-narrative p,
.cr-narrative h1,
.cr-narrative h2,
.cr-narrative h3,
.cr-narrative h4 {
  font-family: var(--font-serif, 'Merriweather', Georgia, serif) !important;
  color: var(--col-text, #212529);
}

/* Optional: if you want Karla instead for main narrative */
.cr-narrative.sans,
.cr-narrative .message-left,
.cr-narrative .message-right {
  font-family: var(--font-sans, 'Karla', sans-serif) !important;
}

/* Make overlay section use the sans font when it has .narrative.sans */
.cr-section.narrative.sans,
.cr-section.narrative.sans * {
  font-family: var(--font-sans, 'Karla', sans-serif) !important;
}

.episode-link {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 1.2rem;
  background-color: #f7ecdc;   /* your warm parchment tone */
  border-radius: 10px;
  font-family: var(--font-sans, 'Karla', sans-serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: #333;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.episode-link a {
  color: #5f507a;   /* your plum accent */
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(95, 80, 122, 0.2);
  transition: all 0.2s ease-in-out;
}

.episode-link a:hover {
  color: var(--col-plum-dark);
  border-bottom-color: rgba(95, 80, 122, 0.5);
}

/* === Final title color override === */
#cr-title,
#cr-title * ,
#cr-description,
#cr-description * ,
.cr-section #cr-title,
.cr-section #cr-description,
.cr-sidebar-text #cr-title,
.cr-sidebar-text #cr-description {
  color: var(--col-plum-dark) !important;   /* darker plum */
}