/* --- BASE STYLES --- */
body {
    font-family: var(--font-body);
    font-weight: var(--font-body-weight, 400);
    color: var(--site-color-text);
    background-color: var(--site-color-background);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 85%;
}

/* Apply global image border-radius token to images site-wide.
   NOTE: We intentionally exclude images inside the Gutenberg
   `.wp-block-image` container so that block-level style choices
   (ex. the user-selected `.is-style-rounded`) can take effect. */
img, figure img, .entry-content img {
    border-radius: var(--site-image-border-radius, 5px);
}

/* html {
    scroll-padding-top: 150px;
} */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-headings-weight, 400);
    color: var(--site-color-title);
    /* margin-top: 1.5em; */
    margin-bottom: 0.5em;
    /* Use server-emitted token so published site reflects the saved setting */
    letter-spacing: var(--font-headings-letter-spacing, normal);
}

/* Apply body letter-spacing token site-wide while preserving
   .site-description which has its own token */
body {
    letter-spacing: var(--font-body-letter-spacing, normal);
}

h1, .section-title {
    font-size: 2.2em;
}

h2  {
    font-size: 2em;
}

h3, .section-subtitle {
    font-size: 1.6em;
}

/* .front-page-section h2 {
    color: var(--site-color-accent-secondary);
    font-weight: 600;
    margin-bottom: 1.5em;
} */

.section-title,
.section-subtitle {
    /* color: var(--site-color-accent-secondary);  */
    font-weight: var(--section-title-weight, 500);
    margin-bottom: 1.5em;
}

p {
    margin-bottom: 1em;
}

a {
    /* color: var(--accent-text, var(--accent-main)); */
    text-decoration: none;
}

a:hover {
    color: var(--site-color-text);
    text-decoration: none;
}

/* Responsive Base Styles */
@media screen and (min-width: 450px) and (max-width: 700px) {
    body {
        font-size: 85%;
    }
    h1, h2.section-title {
        font-size: 2em;
    }
    h2, h3.section-subtitle {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.3em;
    }
    p { /* Includes .presentation-text p, .service-item p */
        font-size: 1em;
    }
}

@media screen and (max-width: 450px) {
    body {
        font-size: 82%;
    }
    h1, h2.section-title {
        font-size: 2em;
        line-height: 1.25;
        margin-bottom: 0.5em;
    }
    h2, h3.section-subtitle {
        font-size: 1.5em;
        margin-bottom: 2em; /* This was specific to .front-page-section h2 */
    }
    h3 {
        font-size: 1.3em;
        margin-bottom: 1.5em; /* This was specific to .front-page-section h3 */
    }
}