/* ==========================================================================
   base.css - Bare element selectors & typography for councilsepa.org
   One home for body / headings / paragraphs / lists. Load after tokens.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Oxygen:wght@300;400;700&display=swap');

body {
    font-family: "Oxygen", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Lora", serif;
    font-weight: 600 !important;
}

/* --------------------------------------------------------
   Responsive heading scale
   -------------------------------------------------------- */

body .h1, body .h1 > *, body h1 {
    font-size: 36px;
    letter-spacing: .005em;
    line-height: 40px;
}

@media (min-width: 768px) {
    body .h1, body .h1 > *, body h1 {
        font-size: 46px;
        letter-spacing: .005em;
        line-height: 51px;
    }
}

@media (min-width: 1200px) {
    body .h1, body .h1 > *, body h1 {
        font-size: 69px;
        letter-spacing: .005em;
        line-height: 76px;
    }
}

body .h2, body .h2 > *, body h2 {
    font-size: 30px;
    letter-spacing: .200000003px;
    line-height: 48px;
}

@media (min-width: 768px) {
    body .h2, body .h2 > *, body h2 {
        font-size: 42px;
        letter-spacing: .200000003px;
        line-height: 67px;
    }
}

@media (min-width: 1200px) {
    body .h2, body .h2 > *, body h2 {
        font-size: 42px;
        letter-spacing: .200000003px;
        line-height: 67px;
    }
}

body .h3, body .h3 > *, body h3 {
    font-size: 28px;
    letter-spacing: .200000003px;
    line-height: 45px;
}

@media (min-width: 768px) {
    body .h3, body .h3 > *, body h3 {
        font-size: 35px;
        letter-spacing: .200000003px;
        line-height: 56px;
    }
}

@media (min-width: 1200px) {
    body .h3, body .h3 > *, body h3 {
        font-size: 38px;
        letter-spacing: .005em;
        line-height: 61px;
    }
}

body .h4, body .h4 > *, body h4 {
    font-size: 25px;
    letter-spacing: .200000003px;
    line-height: 40px;
}

@media (min-width: 768px) {
    body .h4, body .h4 > *, body h4 {
        font-size: 32px;
        letter-spacing: .200000003px;
        line-height: 51px;
    }
}

@media (min-width: 1200px) {
    body .h4, body .h4 > *, body h4 {
        font-size: 36px;
        letter-spacing: .01em;
        line-height: 47px;
    }
}

body .h5, body .h5 > *, body h5 {
    font-size: 20px;
    letter-spacing: .200000003px;
    line-height: 32px;
}

@media (min-width: 768px) {
    body .h5, body .h5 > *, body h5 {
        font-size: 22px;
        letter-spacing: .200000003px;
        line-height: 35px;
    }
}

@media (min-width: 1200px) {
    body .h5, body .h5 > *, body h5 {
        font-size: 25px;
        letter-spacing: .01em;
        line-height: 32px;
    }
}

body .h6, body .h6 > *, body h6 {
    font-size: 16px;
    letter-spacing: .200000003px;
    line-height: 26px;
}

@media (min-width: 768px) {
    body .h6, body .h6 > *, body h6 {
        font-size: 17px;
        letter-spacing: .200000003px;
        line-height: 27px;
    }
}

@media (min-width: 1200px) {
    body .h6, body .h6 > *, body h6 {
        font-size: 19px;
        letter-spacing: .01em;
        line-height: 25px;
    }
}

/* Uniform letter-spacing across all headings (overrides the per-breakpoint
   values set in the responsive rules above) */
body h1, body .h1, body h2, body .h2, body h3, body .h3,
body h4, body .h4, body h5, body .h5, body h6, body .h6 {
    letter-spacing: .02em;
}

body .subheading {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

@media (min-width: 992px) {
    body .subheading {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* --------------------------------------------------------
   Brand heading colors (h1/h3/h5 lead text)
   -------------------------------------------------------- */

h1 {
    color: #55298a;
    margin-bottom: 0.5rem;
    line-height: 1em;
}

h3 {
    color: #55298a;
    margin-bottom: 0.5rem;
    line-height: 1em;
}

h5 {
    margin-bottom: 1rem;
    line-height: 1em;
}

/* --------------------------------------------------------
   Paragraphs & lists
   (single canonical rule, merged from the former styles.css
   and announcements.css copies that disagreed)
   -------------------------------------------------------- */

body ol > li, body ol > li > *, body p, body ul > li, body ul > li > * {
    font-family: Oxygen, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 22px;
    text-align: left;
}

p {
    font-family: Oxygen, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: #000000;
    line-height: 22px;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

/* h6 inside Bootstrap card bodies (announcement + resource cards) */
.card-body h6 {
    color: #000;
    font-size: 0.9rem;
    line-height: 1em;
    margin-bottom: 0.15em;
}