/*
 * VTA design foundation.
 * Page styles should consume these tokens instead of declaring new brand
 * colours, typefaces, radii and container behaviour for every template.
 */
:root {
    --vta-color-blue: #072F77;
    --vta-color-blue-dark: #06275f;
    --vta-color-red: #d50000;
    --vta-color-yellow: #f2b400;
    --vta-color-text: #333;
    --vta-color-muted: #777;
    --vta-color-line: #ddd;
    --vta-color-paper: #f6f4f1;
    --vta-color-white: #fff;
    --vta-font-body: "Montserrat", Arial, sans-serif;
    --vta-font-display: "Prata", Georgia, serif;
    --vta-radius-sm: 4px;
    --vta-radius-md: 7px;
    --vta-radius-lg: 12px;
    --vta-container-max: 1150px;
    --vta-container-gutter: 32px;

    /* Compatibility aliases used by existing page modules. */
    --topic-blue: var(--vta-color-blue);
    --topic-red: var(--vta-color-red);
    --event-blue: var(--vta-color-blue);
    --event-red: var(--vta-color-red);
    --ks-blue: var(--vta-color-blue);
    --ks-red: var(--vta-color-red);
    --ks-bg: var(--vta-color-paper);
    --rs-blue: var(--vta-color-blue);
    --rs-red: var(--vta-color-red);
    --rel-blue: var(--vta-color-blue);
    --rel-red: var(--vta-color-red);
    --home-blue: var(--vta-color-blue);
    --home-red: var(--vta-color-red);
    --home-yellow: var(--vta-color-yellow);
    --ab-blue: var(--vta-color-blue);
    --ab-red: var(--vta-color-red);
}

/* All VTA page roots inherit one body typeface and consistent rendering. */
.vta-home,
.vta-about,
.vta-topics,
.vta-topic-single,
.vta-viewpoints,
.vta-viewpoint-single,
.vta-resources,
.vta-resource-single,
.vta-knowledge,
.vta-knowledge-single,
.vta-events,
.vta-event-single,
.vta-activity {
    color: var(--vta-color-text);
    font-family: var(--vta-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Shared container behaviour; modules only need to override max width. */
:where(
    .vta-home-container,
    .vta-about-container,
    .vta-topics__container,
    .vta-topic-single__container,
    .vta-viewpoints__container,
    .vta-viewpoint-single__container,
    .vta-resources__container,
    .vta-resource-single__container,
    .vta-knowledge-container,
    .vta-events__container,
    .vta-event-single__container,
    .vta-activity__container
) {
    box-sizing: border-box;
    width: min(calc(100% - var(--vta-container-gutter)), var(--vta-container-max));
    margin-inline: auto;
}

/* Reusable primitives inherited by cards and sliders across modules. */
:where(.vta-home,.vta-about,.vta-topics,.vta-topic-single,.vta-viewpoints,.vta-viewpoint-single,.vta-resources,.vta-resource-single,.vta-knowledge-single,.vta-events,.vta-event-single,.vta-activity) img {
    max-width: 100%;
}

:where(.vta-home,.vta-about,.vta-topics,.vta-topic-single,.vta-viewpoints,.vta-viewpoint-single,.vta-resources,.vta-resource-single,.vta-knowledge-single,.vta-events,.vta-event-single,.vta-activity) :is(h1,h2,h3,h4) {
    text-wrap: balance;
}

/* Blue capsule titles used above related-content sliders. */
:where(
    .vta-analysis-series > .vta-topics__container > h2,
    .vta-resource-topics > .vta-resource-single__container > h2,
    .vta-resource-knowledge > .vta-resource-single__container > h2,
    .vta-resource-events > .vta-resource-single__container > h2,
    .vta-event-related > .vta-event-single__container > h2,
    .vta-knowledge-related > .vta-knowledge-container > h2,
    .vta-knowledge-events > .vta-knowledge-container > h2,
    .vta-knowledge-resources > .vta-knowledge-container > h2,
    .vta-viewpoint-resources > .vta-resource-single__container > h2
) {
    font-family: var(--vta-font-body);
    text-transform: uppercase;
}

/* Slick pagination has one visual language site-wide. */
:where(.vta-home,.vta-topics,.vta-topic-single,.vta-viewpoints,.vta-viewpoint-single,.vta-resource-single,.vta-knowledge-single,.vta-event-single) .slick-dots {
    padding-left: 0;
    list-style: none;
}

@media (max-width: 549px) {
    :root { --vta-container-gutter: 24px; }
}