/** Yusaso Teal — shared public typography presentation. */

:is(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 0.65rem;
    color: var(--font-heading-color);
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
}

h1 { font-size: var(--font-xl); }

:is(.page_heading, .page_content_header) h1 {
    text-align: center;
}

h2 {
    margin-bottom: 8px;
    color: var(--yusaso-blue);
    font-size: var(--font-h2-size);
    text-align: left;
}

h3 { font-size: var(--font-lg); }
h4, h5, h6 { font-size: var(--font-md); }

/* Mobile typography steps headings down twice and paragraph copy once while
   leaving every wider presentation unchanged. */
@media (max-width: 480px) {
    h1 { font-size: var(--font-md); }
    h2 { font-size: var(--font-md); }
    h3 { font-size: var(--font-sm); }
    p { font-size: var(--font-sm); }
}

body.public_shell p {
    margin-block: 0 0.625rem;
    color: var(--page-card-text);
    font-family: var(--font-body-family);
    font-size: var(--paragraph-font-size, 1.125rem);
    line-height: var(--font-body-line-height);
}

h2.breadcrumbs.page_heading_context {
    color: var(--yusaso-blue);
    font-size: var(--font-h2-size);
    font-weight: var(--font-heading-weight);
}

h2.breadcrumbs .page_heading_context_arrow {
    font-size: 1.15rem;
}