/* General annual-report typography — heading sizes, custom properties, base colour.
   Intentionally includes main#main so sub-pages in the annual-report section pick
   up the design system. Does NOT touch <a> elements here (see below). */
.annual-report-header,
.annual-report-hero,
main#main {
    --c-heading-h2-text: var(--c-white);
    --c-heading-h2-underline: #234B4B;

    font-variant-ligatures: none;
    font-size: 16px;
    color: var(--c-secondary);

    .h1,
    .h2,
    .h3,
    .h4,
    .h5 {
        line-height: 1;
    }

    .h1 {
        font-size: 4rem;
        font-family: 'proxima-nova', sans-serif;
        color: var(--c-secondary);
    }

    .h2 {
        font-size: 2.8rem;
        color: var(--c-secondary);
    }

    .h3 {
        font-size: 1.375rem;
    }

    .h4 {
        font-size: 1em;
    }

    .h5 {
        font-size: 1em;
        font-weight: bold;
    }

    .text-normal {
        font-size: 1em;
    }

    .text-info {
        font-size: 1em;
    }

    .lang-code {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.125rem;
        line-height: 1;
        cursor: pointer;
        margin-right: 0;
    }

    @media (max-width: 767px) {
        .lang-code {
            font-size: 20px;
        }
    }

    /* Numbers in diagrams use proxima-nova */
    .num,
    .stats-number,
    .panel-percentage,
    .placement-percentage,
    .bar-inner span {
        font-family: 'proxima-nova', sans-serif;
    }

    @media (width >=768px) {
        .h1 {
            font-size: clamp(4rem, 5.5vw, 6rem);
        }

        .h2 {
            font-size: 2.5rem;
        }

        .h3 {
            font-size: 1.5rem;
        }

        .h4 {
            font-size: 1em;
        }

        .h5 {
            font-size: 1em;
        }
    }
}

/* Subpage body text uses grey to match ZEW main site.
   Headings keep their explicit teal override above.
   This CSS is only loaded on annual-report pages via f:asset.css. */
main#main {
    color: var(--color-grey);
}

/* Link reset — annual-report containers only.
   nav.annual-report-nav listed explicitly for mega-menu coverage.
   main#main .container.filled scopes the reset to chart content elements,
   leaving sitepackage links (breadcrumbs, sub-nav) untouched so their
   hover and cursor styles continue to work. */
.annual-report-header a,
.annual-report-hero a,
nav.annual-report-nav a,
main#main .container.filled a {
    all: unset;
    display: inline-block;
    cursor: pointer;
}

/* Header / nav links: colour only, no font-size override —
   sizes are driven by the .h2 class and nav.css. */
.annual-report-header a,
nav.annual-report-nav a {
    color: var(--c-secondary);
}

/* Hero link / paragraph defaults. */
.annual-report-hero p,
.annual-report-hero a {
    color: var(--c-secondary);
    margin: 0;
    line-height: normal;
    font-size: 16px;
}

/* Paragraph baseline for main content — grey to match ZEW main site.
   Kept at main#main specificity so diagrams.css rules like
   `main#main .diagram > p` can still override without a specificity fight. */
main#main p {
    color: var(--color-grey);
    margin: 0;
    line-height: normal;
    font-size: 16px;
}

/* Content-element links keep teal (interactive elements stay branded).
   Same specificity as the all:unset rule above; later source order wins. */
main#main .container.filled a {
    color: var(--c-secondary);
    font-size: 16px;
    line-height: normal;
}