/* ==========================================================================
   HG HomeClub - WordPress Page baseline (page.php only).

   style.css already styles .hg-article-content for p / h2 / h3 / a / img /
   blockquote, which is everything an article body uses. Arbitrary page HTML
   brings the rest: lists, tables, figures, h4, rules, buttons. Those are the
   only things added here. Rules carry !important for the same documented
   reason the article block in style.css does - the Customizer "Additional
   CSS" field still holds an old dark-navy .hg-article* sheet that WP injects
   late in wp_head.
   ========================================================================== */

/* No dek, no meta row on a page: the headline owns the header block. */
.hg-page .hg-article-header-inner {
    padding-bottom: 2px !important;
}

.hg-page-content {
    padding-bottom: 56px !important;
}

/* Lists. The Top 15 Leaders pages are long people-lists, so the vertical
   rhythm here matters as much as the paragraph rhythm. */
.hg-article-content ul,
.hg-article-content ol {
    margin: 0 0 22px 0 !important;
    padding-left: 1.35em !important;
}

.hg-article-content li {
    margin-bottom: 10px !important;
    line-height: 1.65 !important;
}

.hg-article-content li:last-child {
    margin-bottom: 0 !important;
}

.hg-article-content li > ul,
.hg-article-content li > ol {
    margin: 10px 0 0 0 !important;
}

.hg-article-content ul {
    list-style: disc !important;
}

.hg-article-content ol {
    list-style: decimal !important;
}

.hg-article-content li::marker {
    color: var(--hg-blue) !important;
}

/* h4 and below: one step quieter than the h3 blue label, still Sora. */
.hg-article-content h4,
.hg-article-content h5,
.hg-article-content h6 {
    font-family: var(--hg-font-ui) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.35 !important;
    color: var(--hg-ink) !important;
    margin: 28px 0 10px 0 !important;
}

/* Images and figures inside arbitrary page HTML: never break the measure,
   never inherit a fixed width/height attribute pair. */
.hg-article-content img {
    max-width: 100% !important;
    height: auto !important;
}

.hg-article-content figure {
    margin: 28px 0 !important;
}

.hg-article-content figcaption {
    font-family: var(--hg-font-serif) !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: var(--hg-ink-faint) !important;
    margin-top: 8px !important;
}

.hg-article-content .alignleft,
.hg-article-content .alignright {
    max-width: 42% !important;
    height: auto !important;
}

.hg-article-content .alignleft {
    float: left !important;
    margin: 6px 24px 18px 0 !important;
}

.hg-article-content .alignright {
    float: right !important;
    margin: 6px 0 18px 24px !important;
}

.hg-article-content .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tables: readable at the article measure, scrollable when the page HTML
   brings something wider than the column. */
.hg-article-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 24px 0 !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 15px !important;
}

.hg-article-content th,
.hg-article-content td {
    text-align: left !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--hg-border) !important;
    vertical-align: top !important;
}

.hg-article-content th {
    font-weight: 700 !important;
    color: var(--hg-ink) !important;
}

.hg-article-content hr {
    border: 0 !important;
    border-top: 1px solid var(--hg-border) !important;
    margin: 34px 0 !important;
}

.hg-article-content iframe,
.hg-article-content video {
    max-width: 100% !important;
}

/* Multi-page pages (<!--nextpage-->) */
.hg-page-links {
    margin-top: 26px !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.hg-page-links a {
    margin-right: 10px !important;
}

@media (max-width: 600px) {
    .hg-article-content .alignleft,
    .hg-article-content .alignright {
        float: none !important;
        max-width: 100% !important;
        margin: 18px 0 !important;
    }
}