/*
 * One type scale for the site (Lea's Trello 620, 6 Nov 2026; SPEC.md D50). Before it, 17 different heading sizes:
 * section headings in 7 sizes from 24 to 48 pt, card titles as H3, H4, H6 or no heading at all.
 *
 * Level and size are kept apart. The markup's level (h1–h4) follows the page's structure: one H1, an H2 per section,
 * H3 for what stands directly under it. These classes set the size, from what the text is:
 *
 *   .bmg-type-h1        48 pt   64 px   the page's H1, and »Overskriftsstørrelse« › Stor
 *   .bmg-type-h2        40 pt   53 px   a section's heading (the default)
 *   .bmg-type-h3        33 pt   44 px   a sub-heading in a text
 *   .bmg-type-h4        25 pt   33 px   a sub-heading under an H3 in a text
 *   .bmg-type-card      18 pt   24 px   bold: a card's title in »Kort med tekst«
 *   .bmg-type-card-sm   13 pt   17 px   bold: »Kompakte kort«, Ikonkort, Produktdemo's steps, the questions
 *   .bmg-type-lede      18 pt   24 px   Manchet, under a heading
 *   .bmg-type-eyebrow   12 pt   16 px   the line over a heading
 *   body text         13.5 pt   18 px   unchanged (--bs-body-font-size in child/style.css)
 *
 * Lea's sizes are Word points measured on a 1920 px screen (px = pt × 4/3). They hold from 1400 px up, where the
 * container stops growing. Below it the headings shrink in the same proportion, to 62.5 % at 390 px; card titles,
 * Manchet and the eyebrow shrink less and stop at what still reads on a phone. Each size is
 * clamp(min, min + (max − min) × (width − 390 px) / 1010 px, max), with --n the size at 1400 px and --min the size at
 * 390 px, both in px. Font sizes are !important because the theme's are (h1.hero, .has-large-font-size).
 *
 * On every page (Views/Layout.cshtml) and in the backoffice previews (appsettings.json, BlockPreview).
 */
:root {
    --bmg-type-ink: var(--bs-black, #0a1835);
    --bmg-type-lede-ink: #2c3e50;
}

.bmg-type-h1       { --n: 64;    --min: 40; }
.bmg-type-h2       { --n: 53.33; --min: 33.33; }
.bmg-type-h3       { --n: 44;    --min: 27.5; }
.bmg-type-h4       { --n: 33.33; --min: 20.83; }
.bmg-type-card     { --n: 24;    --min: 20; }
.bmg-type-card-sm  { --n: 17.33; --min: 16; }
.bmg-type-lede     { --n: 24;    --min: 20; }
.bmg-type-eyebrow  { --n: 16;    --min: 14; }

.bmg-type-h1, .bmg-type-h2, .bmg-type-h3, .bmg-type-h4,
.bmg-type-card, .bmg-type-card-sm, .bmg-type-lede, .bmg-type-eyebrow {
    font-size: clamp(calc(var(--min) / 16 * 1rem), calc(var(--min) * 1px + (var(--n) - var(--min)) * (100vw - 390px) / 1010), calc(var(--n) / 16 * 1rem)) !important;
}

/* Headings and card titles: one weight and one colour for each size, white on a picture or a coloured card. */
.bmg-type-h1, .bmg-type-h2, .bmg-type-h3, .bmg-type-h4, .bmg-type-card, .bmg-type-card-sm {
    font-weight: 700;
    font-variation-settings: "wght" 700;
    color: var(--bmg-type-color, var(--bmg-type-ink));
}
/* The theme forces every .card-title to weight 800 (child/style.css); card titles weigh the same as the others. */
.bmg-type-card, .bmg-type-card-sm { font-weight: 700 !important; font-variation-settings: "wght" 700 !important; }
.bmg-type-h1, .bmg-type-h2 { line-height: 1.12; letter-spacing: -.01em; }
.bmg-type-h3, .bmg-type-h4 { line-height: 1.18; }
.bmg-type-card, .bmg-type-card-sm { line-height: 1.3; }

.bmg-type-lede {
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1.45;
    color: var(--bmg-type-lede-color, var(--bmg-type-lede-ink));
}

/*
 * The line over a heading: the same in every section and in the top banner (»Lille tekst over overskriften«). Capitals
 * in the page's product colour (--bmg-product, child/style.css), white on a picture or a coloured card. Inside an H1 it
 * is a line of its own, and the heading reads »Mailroom Management – Styr på hver pakke …« (the dash is for screen
 * readers and search engines only).
 */
.bmg-type-eyebrow {
    display: block;
    margin: 0 0 .6rem;
    font-weight: 600;
    font-variation-settings: "wght" 620;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bmg-type-eyebrow-color, var(--bmg-product, #1c5f78));
}
:is(h1, h2, h3) > .bmg-type-eyebrow { margin-bottom: .75rem; }

/* A question in »Spørgsmål og svar« is the button inside its H3, which the theme gives a size of its own. */
.wp-block-accordion-heading.bmg-type-card-sm .wp-block-accordion-heading__toggle {
    font-size: inherit;
    font-weight: inherit;
    font-variation-settings: inherit;
    color: inherit;
}

/* On a picture or a coloured card everything is white. */
.bmg-type-on-dark {
    --bmg-type-color: #fff;
    --bmg-type-lede-color: #fff;
    --bmg-type-eyebrow-color: #fff;
}

/*
 * Headings typed in a text, on the ordinary pages (Views/Page.cshtml: the intro and the sections) and in articles
 * (Michael, 6 Nov 2026): the same sizes as everywhere else. Only headings as the text editor writes them, without a
 * class, and those brought over from WordPress (.wp-block-heading); the templates' own headings carry a class of
 * their own. Not the support guides or the landing page: they have templates and type of their own.
 */
:is(.page-template-default, .single-post) :is(.entry-content, .fade-in-element) h2:is(:not([class]), .wp-block-heading) { --n: 53.33; --min: 33.33; }
:is(.page-template-default, .single-post) :is(.entry-content, .fade-in-element) h3:is(:not([class]), .wp-block-heading) { --n: 44;    --min: 27.5; }
:is(.page-template-default, .single-post) :is(.entry-content, .fade-in-element) h4:is(:not([class]), .wp-block-heading) { --n: 33.33; --min: 20.83; }
:is(.page-template-default, .single-post) :is(.entry-content, .fade-in-element) :is(h2, h3, h4):is(:not([class]), .wp-block-heading) {
    font-size: clamp(calc(var(--min) / 16 * 1rem), calc(var(--min) * 1px + (var(--n) - var(--min)) * (100vw - 390px) / 1010), calc(var(--n) / 16 * 1rem));
    font-weight: 700;
    font-variation-settings: "wght" 700;
    line-height: 1.15;
    color: var(--bmg-type-color, var(--bmg-type-ink));
}