/*
 * Shared content components -- the ct- ("content") classes.
 *
 * The building blocks an author places inside a body: sections, steps,
 * callouts, figures, tables, questions and so on. Used by help articles and
 * blog posts alike, and inserted through the shared snippets table, so one
 * snippet renders the same wherever it lands.
 *
 * Loaded on every front-side page by includes/header.inc, AFTER the theme,
 * help.css and blog.css. That order is deliberate: each module keeps its own
 * body typography (.help p, .blog-post-body p) and the components here have
 * to win over it at equal specificity -- a callout's paragraph spacing, a
 * code block's reset of the inline-code pill.
 *
 * ⚠️ ct- WAS CHOSEN BECAUSE NOTHING ELSE USES IT. Checked against the theme
 * (main.purge.css), uni-core, forms.css, help.css, blog.css and the icon
 * fonts. Bare names -- .callout, .table, .figure -- are NOT safe here:
 * Bootstrap and the theme own several of them.
 *
 * Nothing here styles bare elements. Every rule hangs off a ct- class, so the
 * file can load site-wide without reaching anything that does not ask for it.
 */

/* --- Sections and rhythm ------------------------------------------------- */

.ct-section {
    margin-bottom: 1.75rem;
}

.ct-section:last-child {
    margin-bottom: 0;
}

/* a small muted line for anything about the piece rather than in it */
.ct-meta {
    font-size: 0.8rem;
    color: #8c959f;
}

/* between major phases of a long piece, not between every section */
.ct-divider {
    height: 0;
    margin: 2.25rem 0;
    border: 0;
    border-top: 1px solid #e6e6e6;
    opacity: 1;
}

/* --- Lists ---------------------------------------------------------------
   Steps get generated numbers in a green disc: the marker is the one thing a
   reader scans for when following along, so it has to be findable.
   ------------------------------------------------------------------------ */

.ct-steps {
    margin: 0 0 0.85rem 0;
    padding: 0;
    list-style: none;
    counter-reset: ct-step;
}

.ct-steps > li {
    position: relative;
    margin-bottom: 0.85rem;
    padding-left: 2.35rem;
    counter-increment: ct-step;
}

.ct-steps > li:last-child {
    margin-bottom: 0;
}

.ct-steps > li::before {
    content: counter(ct-step);
    position: absolute;
    top: 0.15rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #37a901;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

/* alternatives rather than an order */
.ct-list,
.ct-substeps {
    margin: 0.5rem 0 0.85rem 0;
    padding-left: 1.15rem;
}

.ct-list > li,
.ct-substeps > li {
    margin-bottom: 0.35rem;
}

.ct-list > li::marker,
.ct-substeps > li::marker {
    color: #8c959f;
}

/* nested inside a step, so it sits tighter and reads as subordinate */
.ct-substeps {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* --- Naming the interface ------------------------------------------------ */

/* a navigation trail through the app */
.ct-path {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.375rem;
    background: #f6f8fa;
    font-size: 0.9rem;
    font-weight: 600;
}

.ct-path-sep {
    margin: 0 0.4rem;
    color: #8c959f;
    font-weight: 400;
}

/* one control named mid-sentence -- a chip, so it reads as a thing to click
   rather than as emphasis */
.ct-ui {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.25rem;
    background: #f6f8fa;
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Callouts -----------------------------------------------------------
   Three weights, separated by hue and by what happens if the reader ignores
   them. The left bar does the work; the tint is deliberately faint so a
   callout does not shout down the paragraph it belongs to.
   ------------------------------------------------------------------------ */

.ct-callout {
    margin: 0 0 1rem 0;
    padding: 0.85rem 1.1rem;
    border-left: 4px solid #8c959f;
    border-radius: 0 0.375rem 0.375rem 0;
    background: #f6f8fa;
}

.ct-callout:last-child {
    margin-bottom: 0;
}

.ct-callout p {
    margin-bottom: 0.4rem;
}

.ct-callout p:last-child {
    margin-bottom: 0;
}

.ct-callout-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ct-callout-note {
    border-left-color: #2a78d6;
    background: #f1f6fd;
}

.ct-callout-note .ct-callout-title {
    color: #1c5cab;
}

.ct-callout-tip {
    border-left-color: #37a901;
    background: #f2fbee;
}

.ct-callout-tip .ct-callout-title {
    color: #2b7a06;
}

.ct-callout-warning {
    border-left-color: #b45309;
    background: #fdf6ec;
}

.ct-callout-warning .ct-callout-title {
    color: #92400e;
}

/* --- Code ----------------------------------------------------------------
   Light, not the editor's dark theme: a body is read on a white page and
   printed from one.
   ------------------------------------------------------------------------ */

.ct-code {
    margin: 0 0 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.375rem;
    background: #f6f8fa;
    font-size: 0.85rem;
    line-height: 1.55;
    /* a long embed line scrolls rather than stretching the column */
    overflow-x: auto;
}

/* inside a block the pill styling would repeat around every line */
.ct-code code {
    padding: 0;
    background: none;
    font-size: 1em;
}

/* --- Tables -------------------------------------------------------------- */

.ct-table {
    width: 100%;
    margin: 0 0 1rem 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.ct-table th,
.ct-table td {
    padding: 0.55rem 0.75rem;
    border: 1px solid #e6e6e6;
    text-align: left;
    vertical-align: top;
}

.ct-table thead th {
    background: #f6f8fa;
    font-weight: 700;
}

/* --- Terms --------------------------------------------------------------- */

.ct-terms {
    margin: 0 0 1rem 0;
}

.ct-terms dt {
    font-weight: 700;
}

.ct-terms dd {
    margin: 0.15rem 0 0.85rem 0;
    color: #57606a;
}

.ct-terms dd:last-child {
    margin-bottom: 0;
}

/* --- Figures ------------------------------------------------------------- */

.ct-figure {
    margin: 0 0 1rem 0;
}

.ct-figure img,
.ct-media-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e6e6e6;
    border-radius: 0.5rem;
}

.ct-figure figcaption,
.ct-media-figure figcaption {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #8c959f;
}

/* --- Image beside text --------------------------------------------------
   Two variants, differing only in which side the picture sits. Below 768px
   both stack with the image first, so the reader always sees what they are
   about to read about.
   ------------------------------------------------------------------------ */

.ct-media {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 0 1rem 0;
}

.ct-media-figure {
    margin: 0;
}

.ct-media-body > p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ct-media {
        flex-direction: row;
        align-items: flex-start;
    }

    .ct-media-right {
        flex-direction: row-reverse;
    }

    .ct-media-figure {
        flex: 0 0 40%;
    }

    .ct-media-body {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* --- Related links ------------------------------------------------------ */

.ct-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-related li + li {
    margin-top: 0.35rem;
}

.ct-related a {
    font-weight: 600;
    text-decoration: none;
}

.ct-related a::before {
    content: "\203A";
    margin-right: 0.45rem;
    color: #8c959f;
    font-weight: 700;
}

.ct-related a:hover,
.ct-related a:focus {
    text-decoration: underline;
}

/* --- Questions (collapsed) ----------------------------------------------
   A <details> per question. The FAQ page uses the same markup as the
   in-body snippet, so the two cannot drift apart.
   ------------------------------------------------------------------------ */

.ct-faq {
    padding: 0.85rem 0;
    border-bottom: 1px solid #e6e6e6;
}

.ct-faq:first-child {
    padding-top: 0;
}

.ct-faq > summary {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    list-style: none;
}

.ct-faq > summary::-webkit-details-marker {
    display: none;
}

/* its own marker, rotated when the entry is open */
.ct-faq > summary::before {
    content: "\203A";
    display: inline-block;
    margin-right: 0.5rem;
    color: #8c959f;
    transition: transform 0.2s ease;
}

.ct-faq[open] > summary::before {
    transform: rotate(90deg);
}

.ct-faq-answer {
    padding: 0.5rem 0 0 1.1rem;
}

.ct-faq-answer p:last-child {
    margin-bottom: 0;
}

/* --- Lead paragraph -----------------------------------------------------
   The opening paragraph of a post, a step larger so the reader knows where
   the piece starts making its case.
   ------------------------------------------------------------------------ */

.ct-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #24292f;
}

/* --- Key takeaways ------------------------------------------------------
   A summary box. Neutral grey rather than a callout hue: it is not a
   warning or a tip, it is the post in brief.
   ------------------------------------------------------------------------ */

.ct-takeaways {
    margin: 0 0 1.25rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.5rem;
    background: #f6f8fa;
    color: #24292f;
}

.ct-takeaways-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ct-takeaways ul {
    margin: 0;
    padding-left: 1.15rem;
}

.ct-takeaways li + li {
    margin-top: 0.35rem;
}

.ct-takeaways li::marker {
    color: #37a901;
}

/* --- Quotes -------------------------------------------------------------
   A pull quote repeats a line from the post; a testimonial is someone
   else's words with a name under them. Different enough to be two things:
   the pull quote is big and bare, the testimonial is boxed and attributed.
   ------------------------------------------------------------------------ */

.ct-pullquote {
    margin: 1.75rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid #37a901;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.45;
}

.ct-pullquote p {
    margin: 0;
}

.ct-testimonial {
    margin: 0 0 1.25rem 0;
    padding: 1.1rem 1.25rem;
    border-radius: 0.5rem;
    background: #f2fbee;
    color: #24292f;
}

.ct-testimonial blockquote {
    margin: 0;
    font-size: 1.05rem;
    font-style: italic;
}

.ct-testimonial blockquote p:last-child {
    margin-bottom: 0;
}

.ct-testimonial figcaption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b7a06;
}

.ct-testimonial figcaption::before {
    content: "\2014\00a0";
}

/* --- Stat highlight ----------------------------------------------------- */

.ct-stat {
    margin: 0 0 1.25rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.5rem;
    text-align: center;
}

.ct-stat p {
    margin: 0;
}

.ct-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #37a901;
}

.ct-stat .ct-stat-label {
    margin-top: 0.35rem;
    font-weight: 600;
}

.ct-stat .ct-stat-source {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #8c959f;
}

/* --- Call to action -----------------------------------------------------
   The one component allowed to be loud. Brand green, a real link styled as
   a button -- no JavaScript and nothing to break.
   ------------------------------------------------------------------------ */

.ct-cta {
    margin: 1.75rem 0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #f2fbee;
    border: 1px solid #cfeebf;
    text-align: center;
    color: #24292f;
}

.ct-cta p {
    margin: 0 0 0.85rem 0;
}

.ct-cta .ct-cta-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}

.ct-cta-button,
.ct-cta-button:visited {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 0.375rem;
    background: #37a901;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.ct-cta-button:hover,
.ct-cta-button:focus {
    background: #2b8a00;
    color: #ffffff;
    text-decoration: none;
}