/* ==========================================================================
   Evergreen article list
   Works with the markup from Evergreen.ArticleList (ArticleList.cshtml).
   Sizes are in px to match the site's existing 24px headings.
   Colors are neutral greys - swap them for your site's palette.
   ========================================================================== */

.evergreen-list {
    margin: 32px 0;
}

/* --- Main articles ------------------------------------------------------ */

.evergreen-article {
    padding: 28px 0;
    border-top: 1px solid #e2e2e2;          /* divider between main articles */
}

.evergreen-article:first-child {
    padding-top: 0;
    border-top: 0;
}

.evergreen-title {
    margin: 0 0 8px;
    font-size: 24px;                         /* same as the site's other headings */
    font-weight: 700;
    line-height: 1.25;
}

/* --- Sub articles ------------------------------------------------------- */

.evergreen-subarticle {
    margin-top: 20px;                        /* space between sub articles */
    padding-left: 16px;
    border-left: 3px solid #e2e2e2;          /* visual "belongs to" line */
	border-top: 0;
}

/* Clear breathing room between the main excerpt and its first sub article.
   The #center-column versions outrank the site's
   "#center-column article:first-of-type" rule without needing !important. */
.evergreen-excerpt + .evergreen-subarticle,
.evergreen-title + .evergreen-subarticle,
#center-column .evergreen-excerpt + .evergreen-subarticle,
#center-column .evergreen-title + .evergreen-subarticle {
    margin-top: 28px;
}

.evergreen-subtitle {
    margin: 0 0 6px;
    font-size: 20px;                         /* one step down from 24px */
    font-weight: 600;
    line-height: 1.3;
}

/* More indentation on wider screens; stays compact on phones */
@media (min-width: 48em) {
    .evergreen-subarticle {
        margin-left: 24px;
    }
}

/* --- Shared ------------------------------------------------------------- */

/* Title links keep your site's link color, without the underline until hover */
.evergreen-title a,
.evergreen-subtitle a {
    text-decoration: none;
}

.evergreen-title a:hover,
.evergreen-title a:focus,
.evergreen-subtitle a:hover,
.evergreen-subtitle a:focus {
    text-decoration: underline;
}

.evergreen-excerpt {
    max-width: 65ch;                         /* comfortable reading line length */
    margin: 0;
    color: #555;
    line-height: 1.55;
}