﻿/**
 * Heading scale.
 *
 * Headings across the site were sized per section, so the same level rendered at
 * 26px on one page and 44px on another. This layer gives h2/h3/h4 one scale,
 * weight and rhythm. Hero headings are the approved exception and are left
 * exactly as designed.
 */

/* Section headings. */
#unoc-main h2:not(.hero h2):not(.nm-hero h2) {
	font-size: clamp(30px, 3.1vw, 44px) !important;
	font-weight: 800 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
}

/* Card and panel headings. */
#unoc-main h3:not(.hero h3):not(.nm-hero h3) {
	font-size: clamp(19px, 1.75vw, 24px) !important;
	font-weight: 700 !important;
	line-height: 1.24 !important;
	letter-spacing: -0.015em !important;
}

/* Minor headings. */
#unoc-main h4:not(.hero h4):not(.nm-hero h4) {
	font-size: clamp(15px, 1.35vw, 18px) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em !important;
}

/* Heroes are the approved exception: keep their designed scale untouched. */
#unoc-main .hero h2,
#unoc-main .hero h3,
#unoc-main .nm-hero h2,
#unoc-main .nm-hero h3,
#unoc-main .unoc-page-hero h1,
#unoc-main .unoc-page-hero h2,
#unoc-main .pghero h1,
#unoc-main .pghero h2 {
	font-size: inherit;
}

/* ================================================= board of directors cards === */

/* The card already links to the profile, so the "View profile" row repeated the
 * affordance on every card. */
body.page-id-148 .unoc-member .more,
body.page-id-148 .unoc-member .more i {
	display: none !important;
}

/* Gold micro-caps on white were hard to read; the role uses the same red
 * eyebrow treatment as the rest of the site. */
body.page-id-148 .unoc-role {
	color: #e10032 !important;
	font-weight: 800 !important;
	letter-spacing: 0.14em !important;
}

/* ==================================================== resources: report card === */

/* The report meta ("Report Â· 2020-21") was salmon on charcoal - about 2.4:1.
 * Gold for the label, white for the PDF mark, both above 7:1. */
body.page-id-160 .feat .l small {
	color: #ffc808 !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
}

body.page-id-160 .feat .l .pdf {
	color: #ffffff !important;
}

/* Report card meta: out-specify the page's own inline colour rule. */
body.page-id-160 .unoc-resources-page .feat .l small,
body.page-id-160 .feat .l small {
	color: #ffc808 !important;
}

body.page-id-160 .unoc-resources-page .feat .l .pdf,
body.page-id-160 .feat .l .pdf {
	color: #ffffff !important;
}

/* Out-rank the page's inline rules for the report card meta. */
body.page-id-160 #unoc-main .unoc-resources-page .spot .feat .l small {
	color: #ffc808 !important;
}

body.page-id-160 #unoc-main .unoc-resources-page .spot .feat .l b.pdf {
	color: #ffffff !important;
}

/* The report card sits in <main> directly (no .unoc-resources-page wrapper), so
 * this selector carries enough weight to beat the inline rule. */
body.page-id-160 main .spot .feat .l small {
	color: #ffc808 !important;
}

body.page-id-160 main .spot .feat .l b.pdf {
	color: #ffffff !important;
}

/* ================================================= graduate training cards === */

/* Card copy was 12.8px in a near-white at low weight - light text on charcoal
 * reads thinner than it measures. Larger, heavier and pure white. */
body.page-id-341 .area,
body.page-id-341 .area p,
body.page-id-341 .area span:not(.icon) {
	font-size: 14.5px !important;
	line-height: 1.62 !important;
	font-weight: 500 !important;
	color: #ffffff !important;
}

/* Headings keep the red accent, lifted a step for contrast on charcoal. */
body.page-id-341 .area h3,
body.page-id-341 .area h4 {
	font-size: clamp(19px, 1.75vw, 24px) !important;
	color: #ff5470 !important;
}

/* Long paragraphs on the graduate page run the full column width. A shorter
 * measure makes the copy easier to scan without cutting any of it. */
body.page-id-341 .section p,
body.page-id-341 .wrap > p,
body.page-id-341 .intro p {
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.68;
}

/* On the graduate page the closing band's eyebrow inherited charcoal on
 * charcoal (~1:1). Gold matches the eyebrow treatment on other dark bands. */
body.page-id-341 section.process .eyebrow {
	color: #ffc808 !important;
}

body.page-id-341 section.process .eyebrow::before {
	background: #ffc808 !important;
}

/* Eyebrows inside dark panels inherited the light-page charcoal. */
#unoc-main section.dark .eyebrow,
#unoc-main .dark .eyebrow {
	color: #ffc808 !important;
}

#unoc-main section.dark .eyebrow::before,
#unoc-main .dark .eyebrow::before {
	background: #ffc808 !important;
}
