/* === Base === */
body {
    background-color: #fff;
}

/* === Headings === */
h2 {
    /* Adjust for fixed navbar height */
    scroll-margin-top: 5em;
}

.small-feature h2 {
    /* Adjust for fixed navbar height */
    scroll-margin-top: 10em;
}

h3 {
    margin: 2em 0 0.5em;
}

/* === Lists === */
ol {
    margin-left: 2em;
}

ol li,
ul.multi-column li {
    margin-bottom: 0.25em;
}

/* === Layout: Header and Image === */
.h-and-img {
    display: flex;
    align-items: center;
}

.h-and-img img {
    width: 3em;
    margin-right: 0.5em;
}

/* === Typography === */
.example .before p {
    font-family: 'Times New Roman', Times, serif;
}

/* === Multi-Column List === */
ul.multi-column {
    column-count: 3;
    column-gap: 3rem;
    column-width: 200px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

/* === small Features Section === */
.small-features {
    display: flex;
    flex-wrap: wrap;
}

.small-feature {
    flex-basis: 50%;
    padding: 1.5em 2.5em;
}

.small-feature .icon img {
    width: 4em;
    margin-bottom: 0.5em;
}

.small-feature .content h2 {
    font-size: inherit;
    display: inline;
}

.small-feature .content h2::after {
    content: '. ';
}

.small-feature .content p:first-of-type {
    display: inline;
}

/* Inline heading with paragraph continuation */
.small-feature .content p:first-of-type::after {
    content: "\A\A";
    white-space: pre;
    /* Allows \A (line break) to render */
}

/* === Button Row === */
.just-btn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}

/* if we like this we should move it to s_standard-format.css */
.Hyperlink {
    /* Ensures wrapping even mid-word */
    word-break: break-all;
    /* Preferred for modern behavior */
    overflow-wrap: anywhere;
}

/* === Responsive === */
@media screen and (max-width: 600px) {
    .small-feature {
        flex-basis: 100%;
    }
}