/*
 * Extra Mile front-end masthead, TOC, intro panel, date bar, and body-image styles.
 *
 * Hand-written, framework-free. Scoped to the .tt-extra-mile-* classes that
 * includes/render.php emits, so it never leaks onto other content. Values are
 * hardcoded (not pulled from any framework) so the plugin survives theme rebuilds:
 *   - date bar bg #034987
 *   - intro panel bg #d6e2fd
 *   - TOC links #0074d9 / hover #0062b8 (brand primary / primary-dark)
 *   - body images centered, max-width 640px on large screens
 *   - heading scroll-margin-top 6rem (72px sticky header + buffer)
 */

/* ---- Masthead wrapper: overflow-hidden rounded-lg ---- */
.tt-extra-mile-masthead {
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

/*
 * Header banner image (native 900x241). Scoped under .tt-extra-mile-masthead so
 * margin:0 outranks theme `.entry-content img` margins — that bottom margin was
 * the blank gap between the banner and the date bar.
 */
.tt-extra-mile-masthead .tt-extra-mile-masthead__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  vertical-align: bottom;
}

/* ---- Date bar: bg-[#034987] text-white text-center font-bold py-2 px-4 ---- */
.tt-extra-mile-masthead .tt-extra-mile-date {
  background-color: #034987;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  padding: 0.5rem 1rem;
  margin: 0;
}

/* ---- Intro panel: bg-[#d6e2fd] flex flex-col gap-4 px-6 py-6 md:px-10 md:py-8 ---- */
.tt-extra-mile-panel {
  background-color: #d6e2fd;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .tt-extra-mile-panel {
    padding: 2rem 2.5rem;
  }
}

/* ---- Intro prose: newsletter-issue__intro italic ---- */
.tt-extra-mile-intro {
  font-style: italic;
}

.tt-extra-mile-intro p {
  margin: 0 0 0.75rem;
}

.tt-extra-mile-intro p:last-child {
  margin-bottom: 0;
}

.tt-extra-mile-intro a {
  color: #0074d9;
  text-decoration: none;
}

.tt-extra-mile-intro a:hover {
  color: #0062b8;
  text-decoration: underline;
}

/* ---- In-panel TOC: tight flex column, list-none m-0 p-0 ---- */
.tt-extra-mile-toc,
.tt-extra-mile-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Scoped under .tt-extra-mile-panel to outrank theme `.entry-content li` margins
 * that would otherwise re-introduce large gaps between the topics. */
.tt-extra-mile-panel .tt-extra-mile-toc__item,
.tt-extra-mile-panel .tt-extra-mile-toc__list li {
  margin: 0;
  padding: 0;
  line-height: 1.35;
}

/* ---- TOC link: text-primary font-medium hover:text-primary-dark hover:underline ---- */
.tt-extra-mile-toc__link {
  color: #0074d9;
  font-weight: 500;
  text-decoration: none;
}

.tt-extra-mile-toc__link:hover {
  color: #0062b8;
  text-decoration: underline;
}

/* ---- Reading time: text-center font-bold italic ---- */
.tt-extra-mile-reading-time {
  text-align: center;
  font-weight: 700;
  font-style: italic;
}

/* ---- Body content: heading scroll offset for the sticky site header ---- */
.tt-extra-mile-content h2,
.tt-extra-mile-content h3 {
  scroll-margin-top: 6rem;
}

/*
 * Body images. Sizing is scoped to `.tt-em-img` (the class images.php stamps on
 * images it sideloads) so it never restyles pre-existing/manual images:
 *   - img.tt-em-img: the baked width wins (640 landscape / 450 portrait), responsive.
 *   - img:not(.tt-em-img): original behavior (width:auto, object-fit, capped at 640).
 */
.tt-extra-mile-content img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 1.5rem auto;
  border-radius: 0.5rem;
}

.tt-extra-mile-content img:not(.tt-em-img) {
  width: auto;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .tt-extra-mile-content img:not(.tt-em-img) {
    max-width: 640px;
  }
}

.tt-extra-mile-content figure {
  margin: 1.5rem auto;
  text-align: center;
}

.tt-extra-mile-content figure img {
  margin-top: 0;
  margin-bottom: 0;
}

.tt-extra-mile-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
}