/*
Page-specific styles for individual guides (/guides/:slug) and posts
(/blog/:slug), loaded after marketing.css via content_for :page_stylesheet.

An article is a Publication written in Markdown, so like legal.css this has
to cover whatever the document contains (headings, lists, images, quotes),
rather than a known layout. It's a sibling of legal.css rather than a shared
sheet because the two read differently: a contract repeats numbered clauses;
an article carries pictures and pull-quotes. Keep the two in step where they
overlap (measure, heading scale, links, lists, tables).

TKTK: refactor to a shared overlapping stylesheet for legal and publications
*/

/* A reading measure. */
.publication-content {
  max-width: 44rem;
  font-size: 1.25em;
}

/*
The marketing heading scale is display-sized.
Inside an article it steps down to something a document can repeat.
*/
.publication-content h2,
.publication-content h3,
.publication-content h4,
.publication-content h5,
.publication-content h6 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.publication-content h2 { font-size: 1.75em; }
.publication-content h3 { font-size: 1.5em; }
.publication-content h4,
.publication-content h5,
.publication-content h6 { font-size: 1.25em; }

.publication-content ul,
.publication-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.publication-content li {
  margin-bottom: 0.5rem;
}

.publication-content li > ul,
.publication-content li > ol {
  margin-top: 0.5rem;
}

.publication-content :not(.filters) a {
  color: var(--tt-pink);
}

.publication-content a:hover {
  color: var(--tt-pink-hover);
}

/*
Pictures come in at whatever size they were uploaded.
Keep them inside the measure and give them the site's corner radius.
Markdown images and the `[[ url caption ]]` <figure> embeds
(see Publication.render_markdown) both land here.
*/
.publication-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius);
}

.publication-content figure {
  margin: 0 0 1.5rem;
}

.publication-content figure iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--bs-border-radius);
}

.publication-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.publication-content blockquote {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 0.25rem solid var(--tt-teal-500);
  color: var(--bs-secondary-color);
}

.publication-content table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.publication-content th,
.publication-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  text-align: left;
  vertical-align: top;
}