/*
 * A unit's page (inc/units.php, Theme Builder "Single: unit"). NEB colours, square, no shadows.
 */

/* Who leads it, in the head: the portrait as a circle (or initials), then "Led by", the name, the title. */
.neb-lead { display: flex; align-items: center; gap: 20px; }
/* .neb-lead img.…: outranks Elementor's image reset (.elementor img: no radius, height auto). */
.neb-lead-photo, .neb-lead img.neb-lead-photo { flex: none; display: block; width: 120px; height: 120px; max-width: none; border-radius: 50%; object-fit: cover; background-color: #fff; }
.neb-lead-initials { display: flex; align-items: center; justify-content: center; background-color: var(--e-global-color-primary); color: #fff; font: 600 40px/1 Outfit, sans-serif; letter-spacing: .02em; }
.neb-lead-text p { margin: 0; }
.neb-lead-label { font-size: 15px; line-height: 1.4; color: var(--e-global-color-muted); }
.neb-lead-name { margin-top: 2px !important; font: 600 22px/1.3 Outfit, sans-serif; color: var(--e-global-color-primary); }
.neb-lead-role { margin-top: 4px !important; font-size: 16px; line-height: 1.45; color: var(--e-global-color-primary); }
@media (max-width: 767px) {
	.neb-lead { gap: 16px; }
	.neb-lead-photo, .neb-lead img.neb-lead-photo { width: 88px; height: 88px; }
	.neb-lead-initials { font-size: 30px; }
	.neb-lead-name { font-size: 20px; }
}

/* The text: section headings, lists, the chart and its caption. */
.single-neb_unit .elementor-widget-theme-post-content h2 { margin: 48px 0 14px; font: 600 28px/1.2 Outfit, sans-serif; color: var(--e-global-color-primary); }
.single-neb_unit .elementor-widget-theme-post-content h2:first-child { margin-top: 0; }
.single-neb_unit .elementor-widget-theme-post-content ul.wp-block-list { margin: 0 0 1em; padding-left: 1.3em; }
.single-neb_unit .elementor-widget-theme-post-content ul.wp-block-list li + li { margin-top: .55em; }
.single-neb_unit .elementor-widget-theme-post-content figure { margin: 32px 0 0; }
.single-neb_unit .elementor-widget-theme-post-content figure img { display: block; width: 100%; height: auto; border: 1px solid var(--e-global-color-lightblue); }
.single-neb_unit .elementor-widget-theme-post-content figcaption { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--e-global-color-muted); text-align: left; }
.single-neb_unit .elementor-widget-theme-post-content figcaption strong { color: var(--e-global-color-primary); }

/* "How the Unit works": a list with the class neb-flow, as numbered steps joined by arrows; a column on phones. */
.single-neb_unit ol.neb-flow { counter-reset: neb-step; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.single-neb_unit ol.neb-flow li { counter-increment: neb-step; position: relative; margin: 0; padding: 18px 16px 20px; border-top: 4px solid var(--e-global-color-secondary); background-color: var(--e-global-color-paleblue); color: var(--e-global-color-primary); font-size: 17px; font-weight: 600; line-height: 1.4; }
.single-neb_unit ol.neb-flow li::before { content: counter(neb-step); display: block; margin-bottom: 8px; font: 700 28px/1 Outfit, sans-serif; color: var(--e-global-color-secondary); }
.single-neb_unit ol.neb-flow li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -22px; transform: translateY(-50%); font-size: 18px; font-weight: 400; color: var(--e-global-color-secondary); }
@media (max-width: 767px) {
	.single-neb_unit ol.neb-flow { grid-auto-flow: row; gap: 26px; }
	.single-neb_unit ol.neb-flow li:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -24px; left: 16px; transform: none; }
}

/*
 * The manual's Figure 3.1 as HTML ([neb_surveillance_chart]): a funnel of tiers from the community down to CARPHA, PAHO
 * and WHO, "Level N" beside each, two-way arrows between them; the unit's level in NEB blue. The laboratories, outside
 * the levels, are white with a dashed edge.
 */
.neb-chart-tiers { margin: 0; padding: 0; list-style: none; }
.neb-chart-tier { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; }
.neb-chart-tier + .neb-chart-tier { margin-top: 36px; }
.neb-chart-level { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--e-global-color-muted); }
.neb-chart-tag { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--e-global-color-secondary); }
.neb-chart-body { position: relative; }
.neb-chart-tier + .neb-chart-tier .neb-chart-body::before { content: "↑↓"; position: absolute; top: -29px; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 1; letter-spacing: -.1em; color: var(--e-global-color-secondary); }
.neb-chart-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--neb-w, 100%); margin: 0 auto; padding: 0; list-style: none; }
.neb-chart-box { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; margin: 0; padding: 12px 14px; border: 1px solid var(--e-global-color-lightblue); background-color: var(--e-global-color-paleblue); color: var(--e-global-color-primary); font-size: 16px; font-weight: 600; line-height: 1.35; text-align: center; }
.neb-chart-text { display: block; }
.neb-chart-sub { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; }
.neb-chart abbr[title] { border: 0; text-decoration: none; cursor: help; }
.neb-chart-tier--0 .neb-chart-box { flex: none; padding: 0; border-color: transparent; background: none; color: var(--e-global-color-muted); }
.neb-chart-tier--1 .neb-chart-box { flex-basis: 170px; }
.neb-chart-tier--2 .neb-chart-box:not(.is-lab) { flex-grow: 1.5; }
.neb-chart-box.is-lab { border-style: dashed; background-color: #fff; font-weight: 500; }
.neb-chart-tier--4 { --neb-w: 88%; }
.neb-chart-tier--5 { --neb-w: 76%; }
.neb-chart-tier--6 { --neb-w: 52%; }
.neb-chart-tier.is-here .neb-chart-level { color: var(--e-global-color-secondary); }
.neb-chart-tier.is-here .neb-chart-box:not(.is-lab) { border-color: var(--e-global-color-secondary); background-color: var(--e-global-color-secondary); color: #fff; }
.neb-chart figcaption a { color: var(--e-global-color-secondary); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.neb-chart-tier { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.neb-chart-tier--0 .neb-chart-level { display: none; }
	.neb-chart-tag { display: inline; margin: 0 0 0 8px; }
	.neb-chart-tier + .neb-chart-tier .neb-chart-body::before { content: none; }
	.neb-chart-tier + .neb-chart-tier::before { content: "↑↓"; display: block; margin: -26px 0 2px; font-size: 18px; line-height: 1; letter-spacing: -.1em; text-align: center; color: var(--e-global-color-secondary); }
	.neb-chart-tier--1 .neb-chart-box { flex-basis: 140px; }
	.neb-chart-tier--2 .neb-chart-box:not(.is-lab) { flex-basis: 100%; order: -1; }
	.neb-chart-tier--4, .neb-chart-tier--5, .neb-chart-tier--6 { --neb-w: 100%; }
}

/* Beside the text: Resources and the Branch's units. */
.neb-unit-box { padding: 24px 28px; border: 1px solid var(--e-global-color-lightblue); }
.neb-unit-nav { background-color: var(--e-global-color-paleblue); border-color: var(--e-global-color-paleblue); }
/* .neb-unit-box h2.…: outranks the kit's h2 (38px). */
.neb-unit-box h2.neb-unit-box-title { margin: 0 0 12px; font: 600 22px/1.3 Outfit, sans-serif; color: var(--e-global-color-text); }
.neb-unit-links { margin: 0; padding: 0; list-style: none; }
.neb-unit-links li { padding: 10px 0; border-top: 1px solid var(--e-global-color-lightblue); font-size: 17px; line-height: 1.45; }
.neb-unit-links li:first-child { border-top: 0; padding-top: 0; }
.neb-unit-links a { color: var(--e-global-color-secondary); text-decoration: underline; text-underline-offset: 3px; }
.neb-unit-links a:hover, .neb-unit-links a:focus-visible { color: var(--e-global-color-primary); }
.neb-unit-links [aria-current] { font-weight: 600; color: var(--e-global-color-primary); }
@media (max-width: 767px) { .neb-unit-box { padding: 20px; } }