/* SchoolCMS – Typography
   Text styles are the --text-* tokens in tokens.css (full font
   shorthands, one per text style – per site, one per Figma text
   style – named by metrics: --text-40ob = 40px Open Sans Bold).
   Heading levels carry the styles as element defaults, so wysiwyg
   content gets them without a class.

   TYPOGRAPHY ONLY – no backgrounds, ever. This file rides the
   add_editor_style() list, so it is also the block canvas's type and
   every wysiwyg field's content_css: a background here paints the
   inside of every wysiwyg the site's page colour (it did, on Rikkyo).
   The page ground lives in css/base/default.css, which never loads in
   the admin. */

body {
    font:  var(--text-16or);
    color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
    color:          var(--color-black);
    margin-top:     0;
    margin-bottom:  16px;
}
h1 {
    font: var(--text-48ob);
}
h2, .h2 {
    font: var(--text-40ob);
}
h3 {
    font: var(--text-32ob);
}
h4 {
    font: var(--text-24ob);
}
h5 {
    font: var(--text-20ob);
}
h6 {
    font: var(--text-18ob);
}

p {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Links sit in the ink colour with an underline doing the signalling –
   Innermedia orange is a hover accent only, since orange text on white
   is too low-contrast to carry body copy. */
a {
    color:            var(--color-black);
    text-decoration:  underline;
    transition:       color var(--transition-base);

    &:hover {
        color: var(--color-orange);
    }
}

strong, b {
    font-weight: 700;
}
em, i {
    font-style: italic;
}

ul, ol {
    padding-left: 24px;
    margin-bottom: 16px;
}
li {
    margin-bottom: 4px;
}

blockquote {
    font:         var(--text-24oo);
    border-left:  4px solid var(--color-orange);
    margin:       0 0 24px;
    padding:      12px 0 12px 24px;
    color:        var(--color-grey-dark);
}

/* Section title + subtitle used across all blocks (every block ships the
   pair except Text & Image and Divider; site builds keep or drop each per
   the design) */
.section_title {
    margin-bottom: var(--space-lg);
    text-align:    center;

    h2 {
        /* the darker orange – the brand orange itself falls short of
           3:1 on white even at heading sizes */
        color: var(--color-orange-dark);
    }

    .section_subtitle {
        margin: var(--space-sm) 0 0;
    }
}