/* ---------------------------------------------------------------
   Custom type overrides.

   Loaded via customCSS in config.toml, AFTER the theme's compiled
   main.css, so rules of equal specificity here win. Selectors below
   deliberately mirror the theme's own specificity - see notes.

   Tune everything from the variables in :root.
   --------------------------------------------------------------- */

:root {
    --font-sans:          "Lexend", "Nunito Sans", system-ui, sans-serif;
    --title-weight:       400;
    --title-size:         6rem;
    --title-size-mobile:  3rem;
    --subtitle-size:      1.5rem;   /* was 2rem (Bulma is-3) */
}

/* Replace Nunito Sans everywhere. Bulma applies $family-sans-serif to
   the body and to form controls, so both need covering. */
html,
body,
button,
input,
select,
textarea,
.title,
.subtitle,
.bold-title {
    font-family: var(--font-sans);
}

/* .bold-title has no .title class, so $title-weight never reached it -
   it was inheriting Bulma's default 400. Set weight here directly. */
.bold-title {
    font-family: var(--font-sans);
    font-weight: var(--title-weight);
    font-size: var(--title-size);
}

/* Bulma's rule is `.subtitle.is-3` (specificity 0,2,0), so matching it
   with a single `.subtitle` would lose. Match both classes. */
.subtitle,
.subtitle.is-3 {
    font-size: var(--subtitle-size);
}

/* Bulma's `mobile` breakpoint is max-width: 768px. */
@media screen and (max-width: 768px) {
    .bold-title {
        font-size: var(--title-size-mobile);
    }
}