/* SchoolCMS – Typography
   Text styles are the --text-* tokens in tokens.css (full font
   shorthands, one per Figma text style, named by desktop metrics:
   --text-40kl = 40px Kievit OT Light; the tokens themselves carry the
   design's mobile mode below 992px). 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. */

/* Self-hosted families from the developer's font drop – only the faces
   the design's text styles use. Kievit OT Light is the drop's lightest
   face: it serves both the design's Light (300) and "book" (350) at a
   single 300 descriptor.

   Cultura New LIGHT is the serif the design draws, at every size: the
   page title, the home headline, the menu's tier-1 words, the callout
   and quote. The first drop held Book and Bold only, so Book stood in
   at 400 from the 2026-09-08 build and read visibly heavier than the
   mockups; the designer supplied the Light cut on 2026-09-15 and it is
   declared below at 300, which is what every --text-*cl token now asks
   for. Book stays declared at 400 – nothing in the design calls for it
   any more, but the family should still answer a 400 request with the
   right face rather than falling back to Palatino. */
@font-face {
    font-family:  'Kievit OT';
    font-style:   normal;
    font-weight:  300;
    font-display: swap;
    src:          url('../../fonts/kievit-ot/kievit-ot-light.woff2') format('woff2'),
                  url('../../fonts/kievit-ot/kievit-ot-light.otf') format('opentype');
}
@font-face {
    font-family:  'Kievit OT';
    font-style:   normal;
    font-weight:  800;
    font-display: swap;
    src:          url('../../fonts/kievit-ot/kievit-ot-extra-bold.woff2') format('woff2'),
                  url('../../fonts/kievit-ot/kievit-ot-extra-bold.otf') format('opentype');
}
@font-face {
    font-family:  'Cultura New';
    font-style:   normal;
    font-weight:  300;
    font-display: swap;
    src:          url('../../fonts/cultura-new/cultura-new-light.woff2') format('woff2'),
                  url('../../fonts/cultura-new/cultura-new-light.otf') format('opentype');
}
@font-face {
    font-family:  'Cultura New';
    font-style:   normal;
    font-weight:  400;
    font-display: swap;
    src:          url('../../fonts/cultura-new/cultura-new-book.woff2') format('woff2'),
                  url('../../fonts/cultura-new/cultura-new-book.otf') format('opentype');
}

/* Greyscale antialiasing, as Figma renders text. macOS's default
   rendering thickens every stem – the light weights most, and light ink
   on dark grounds most of all – so a site reads heavier than its design
   (Charlie, 2026-10-26: ported from St Catherine's, as in the base
   theme). It reaches the editor canvas as well, as this file does. */
body {
    font:                    var(--text-18kl);
    color:                   var(--color-grey-800);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading levels follow the inner template's labels (10001:987 – "H2
   Heading" is drawn in the Figma `h3` style, "H3 Heading" in `h4`), which
   is what the wysiwyg Formats dropdown produces and what every standard
   block's section title shows. The Figma `h2` style (Cultura 70/70) is
   the display size: the inner page title, the home blocks, callout,
   quote and alert apply --text-70cl themselves. */
h1, h2, h3, h4, h5, h6 {
    color:          var(--color-purple);
    margin-top:     0;
    margin-bottom:  16px;
}
h1 {
    /* the home banner headline (129:986) – the inner banner's page
       title (10001:1332) is that component's state at --text-70cl */
    font: var(--text-80cl);
}
h2, .h2 {
    font: var(--text-40kl);
}
h3 {
    font: var(--text-30kl);
}
h4 {
    font: var(--text-20kl);
}
h5, h6 {
    /* nothing smaller is declared – body metrics in the heading colour */
    font: var(--text-18kl);
}

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

/* Links are TEAL and undecorated; the underline is the hover state. The
   body-content mockup (10001:1333) labels its two runs "hyperlink here"
   (#088caa, no rule) and "hyperlink underline hover" (#088caa, underlined),
   i.e. one colour, the underline arriving on hover.

   The underline is always PRESENT but transparent, and the hover fades in
   its colour: `text-decoration` is not an animatable property, so toggling
   none -> underline snaps however long a transition is declared, while
   `text-decoration-color` tweens. Every link on the site inherits this, so
   a block that recolours its links (callout uses gold on the plum band)
   overrides `color` alone and the underline follows through currentColor. */
a {
    color:                     var(--color-teal);
    text-decoration:           underline;
    text-decoration-color:     transparent;
    /* the rule rides the FONT's own underline metrics, which is what the
       mockup declares (text-underline-position / thickness both from-font)
       and why its line sits close enough to cross a descender. A manual
       offset pushed it well below them. */
    text-underline-position:   from-font;
    text-decoration-thickness: from-font;
    transition:                color var(--transition-base), text-decoration-color var(--transition-base);

    &:hover,
    &:focus-visible {
        text-decoration-color: currentColor;
    }
}

/* Kievit ships no 700 – Extrabold (800) is the drop's one bold face, and
   the design's only bold style (button) is Extrabold too. */
strong, b {
    font-weight: 800;
}
em, i {
    font-style: italic;
}

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

/* No blockquote is drawn – the serif quote face at the menu-heading
   size (h3 serif) reads as a pull quote inside copy; the quote block
   sets its own --text-70cl. */
blockquote {
    font:         var(--text-40cl);
    border-left:  4px solid var(--color-plum);
    margin:       0 0 24px;
    padding:      12px 0 12px 24px;
    color:        var(--color-purple);
}

/* 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,
.contentBlock .im-2d-map__header {
    /* the design: 12kl caps kicker, then the 40kl title, 45px to the
       content. Blocks print the h2 first and the subtitle after it – the
       flex order puts the kicker above without touching every template.
       RANGED LEFT: every drawn section title is a column-width text box
       with no alignment set (downloads 10001:1277, faq 10001:1441, POI
       10001:1204 …). Image / Video (10001:1324) is the one node carrying
       text-center and centres it in its own stylesheet.
       The Innermedia 2D Map plugin's block draws its own h2 + subtitle
       header, so it is matched by class; .contentBlock (its shell,
       inc/plugin-specifics.php) lifts these rules over the plugin's own. */
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    margin-bottom:  40px;
    text-align:     left;

    h2 {
        margin: 0;
        color:  var(--color-purple);
    }

    .section_subtitle,
    .im-2d-map__subtitle {
        order:          -1;
        margin:         0 0 16px;
        font:           var(--text-12kl);
        letter-spacing: 3.6px;
        text-transform: uppercase;
    }
}