/* ==========================================================================
   SINGLE CSS - single-opportunity.php only.
   ========================================================================== */

.opportunity-hero {
	padding-block: 28px;
	border-bottom: 1px solid var(--color-border);
}
.opportunity-hero__breadcrumb {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.opportunity-hero__breadcrumb a:hover {
	color: var(--color-primary);
}
.opportunity-hero__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
.opportunity-hero__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.opportunity-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.opportunity-hero__title {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-navy-900);
	margin: 0 0 10px;
}
.opportunity-hero__org {
	color: var(--color-text-muted);
	margin: 0 0 20px;
}
.opportunity-hero__facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}
.fact-item__label {
	font-size: 12px;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.fact-item__value {
	font-size: 14.5px;
	font-weight: 700;
}
.fact-item__value.is-danger {
	color: var(--color-danger);
}
.opportunity-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.opportunity-body {
	padding-block: 40px;
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
.opportunity-content h2 {
	font-size: 20px;
	color: var(--color-navy-900);
}
.opportunity-content section + section {
	margin-top: 32px;
}
.document-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.document-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
}
.document-list li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--color-primary);
	flex: 0 0 auto;
}

.related-opportunities {
	padding-block: 40px;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
	.opportunity-hero__grid {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
	.opportunity-body {
		grid-template-columns: 2fr 1fr;
	}
}

/* ==========================================================================
   OPPORTUNITY POSTING - the standard format.

   Reads as an article: title and summary, then the cover image full width,
   then the Overview table, then the sections in the standard's order. The
   facts card moves to the sidebar and sticks there - still reachable at any
   scroll position, but no longer the thing the page opens with. Only that
   card sticks, not the rail around it; see the rule further down for why.

   The measure is capped near 72ch throughout. These postings run to several
   thousand words and line length is what decides whether they get read.
   ========================================================================== */

.opp-head {
	padding-block: clamp(26px, 4vw, 44px) clamp(18px, 2.6vw, 28px);
	background: var(--color-bg-alt);
}
.opp-head__inner {
	max-width: 860px;
}
.opp-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}
.opp-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.opp-breadcrumb a:hover {
	color: var(--color-primary-ink);
}
.opp-head__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.opp-head__title {
	margin: 0 0 14px;
	font-size: clamp(27px, 4.4vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: var(--color-navy-900);
}
.opp-head__lead {
	margin: 0 0 14px;
	max-width: 68ch;
	font-size: clamp(16px, 2vw, 18.5px);
	line-height: 1.65;
	color: var(--color-text-muted);
}
.opp-head__org {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary-ink);
}

.opp-cover img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.opp-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	padding-block: clamp(28px, 4vw, 46px);
}
.opp-main {
	min-width: 0;
	max-width: 100%;
}

/* --- Sections ------------------------------------------------------------- */
.opp-section {
	margin-bottom: clamp(30px, 4vw, 46px);
	scroll-margin-top: 90px;
}
.opp-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-border);
	font-size: clamp(20px, 2.6vw, 25px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-navy-900);
}
.opp-section__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--color-bg-alt);
	color: var(--color-primary-ink);
}

/* Prose styling for editor-authored article HTML now lives in base.css and is
   shared with blog and guidance posts - see the ARTICLE PROSE block there.
   It was here, which meant blog posts got seven basic rules while opportunity
   postings got twenty-five, on identical content. */

/* --- Overview table -------------------------------------------------------
   The spec sheet. A real table so screen readers pair "Host Country" with
   "Germany"; it collapses to stacked label-over-value on narrow screens
   because ten label/value pairs will not fit side by side on a phone.
   -------------------------------------------------------------------------- */
.opp-overview {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.opp-overview__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}
.opp-overview__table th,
.opp-overview__table td {
	padding: 13px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border);
}
.opp-overview__table tr:last-child th,
.opp-overview__table tr:last-child td {
	border-bottom: 0;
}
.opp-overview__table th {
	width: 36%;
	font-weight: 800;
	color: var(--color-navy-900);
	background: var(--color-bg-alt);
}
.opp-overview__table td {
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* --- Notes ----------------------------------------------------------------
   The standard's recurring callout. The type picks the colour, so an editor
   chooses "Important" rather than choosing an orange.
   -------------------------------------------------------------------------- */
.opp-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	padding: 15px 17px;
	border-radius: var(--radius-md);
	border-left: 4px solid var(--note-accent);
	background: var(--note-bg);
	font-size: 14.5px;
	line-height: 1.65;
}
.opp-note__icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
	color: var(--note-accent);
}
.opp-note__body { color: var(--color-navy-900); }
.opp-note__body > *:first-child { margin-top: 0; }
.opp-note__body > *:last-child { margin-bottom: 0; }
.opp-note__body p { margin: 0 0 0.7em; }

.opp-note--important { --note-accent: #A65A08; --note-bg: #FDF1E2; }
.opp-note--tip       { --note-accent: #02737A; --note-bg: #E8F4F5; }
.opp-note--warning   { --note-accent: #B42318; --note-bg: #FEF0EF; }
.opp-note--plain     { --note-accent: #5C6B7A; --note-bg: #F2F5F7; }

/* --- Application steps ----------------------------------------------------
   Numbers are generated, so inserting a step renumbers the rest for free.
   The connecting line is drawn on the list rather than per item so it cannot
   run past the last marker.
   -------------------------------------------------------------------------- */
.opp-steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: opp-step;
}
.opp-steps::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--color-border);
}
.opp-step {
	position: relative;
	padding-left: 48px;
	padding-bottom: 22px;
}
.opp-step:last-child { padding-bottom: 0; }
.opp-step::before {
	counter-increment: opp-step;
	content: counter(opp-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-primary-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.opp-step__title {
	margin: 5px 0 7px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.012em;
	color: var(--color-navy-900);
}
.opp-step__body { font-size: 15px; }

/* --- Timeline -------------------------------------------------------------- */
.opp-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.opp-timeline__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--color-border);
}
.opp-timeline__item:last-child { border-bottom: 0; }
.opp-timeline__item:nth-child(odd) { background: var(--color-bg-alt); }
.opp-timeline__label {
	font-size: 14px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.opp-timeline__value {
	font-size: 14px;
	color: var(--color-text-muted);
}

/* --- Tips ------------------------------------------------------------------ */
.opp-tips {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.opp-tip {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}
.opp-tip__icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
	/* --color-warning, not --color-accent-dark: the brighter orange is 2.8:1
	   on this tinted background, under the 3:1 a meaningful icon needs. */
	color: var(--color-warning);
}
.opp-tip__title {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.opp-tip__body {
	display: block;
	margin-top: 2px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* --- FAQs ------------------------------------------------------------------
   Native <details>: collapses with no JavaScript, and find-in-page can still
   open a closed answer. Question and answer are visually distinct as the
   standard asks - automatically, so nobody formats them by hand.
   -------------------------------------------------------------------------- */
.opp-faqs {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.opp-faq {
	border-bottom: 1px solid var(--color-border);
}
.opp-faq:last-child { border-bottom: 0; }
.opp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 17px;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--color-navy-900);
	background: #fff;
	cursor: pointer;
	list-style: none;
}
.opp-faq__q::-webkit-details-marker { display: none; }
.opp-faq__q:hover { background: var(--color-bg-alt); }
.opp-faq[open] .opp-faq__q {
	background: var(--color-bg-alt);
	color: var(--color-primary-ink);
}
.opp-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--color-primary-ink);
	transition: transform 0.18s ease;
}
.opp-faq[open] .opp-faq__chevron { transform: rotate(180deg); }
.opp-faq__a {
	padding: 4px 17px 17px;
	font-size: 15px;
}

/* --- Official links --------------------------------------------------------- */
.opp-links {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.opp-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.opp-link:hover {
	border-color: var(--color-primary-ink);
	background: var(--color-bg-alt);
}
.opp-link__label {
	font-size: 15px;
	font-weight: 800;
	color: var(--color-navy-900);
}
/* The host name, so people can see where a link goes before they follow it -
   these are outbound links to sites we do not control. */
.opp-link__url {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--color-text-muted);
}
.opp-link svg { color: var(--color-primary-ink); }

/* --- Disclaimer and related -------------------------------------------------- */
.opp-disclaimer .opp-prose {
	padding: 18px 20px;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
	font-size: 13.5px;
	line-height: 1.7;
}
.opp-related__list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.opp-related__item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.opp-related__item a:hover {
	border-color: var(--color-primary-ink);
	background: var(--color-bg-alt);
}
.opp-related__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-navy-900);
}
.opp-related__meta {
	margin-left: auto;
	font-size: 12.5px;
	white-space: nowrap;
	color: var(--color-text-muted);
}
.opp-related__item svg { color: var(--color-primary-ink); }

/* --- Sidebar ----------------------------------------------------------------- */
/* --- The facts card ----------------------------------------------------------
   Deliberately short. It shares one capped sticky wrapper with Latest
   Opportunities, so every row this card keeps is a row the list below loses.

   Two changes carry most of the saving: the countdown rides beside the date
   as a pill instead of sitting on its own line, and the facts run inline
   instead of as a bordered two-row list. Same information, about 120px less.
   ---------------------------------------------------------------------------- */
.opp-card {
	padding: 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.06);
}
.opp-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.opp-card__when { min-width: 0; }
.opp-card__label {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.opp-card__deadline {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-navy-900);
}
.opp-card__deadline.is-urgent { color: #B42318; }

/* A pill rather than a row. Amber while there is time, red inside the last
   week - the colour is the warning, so the wording does not have to carry it. */
.opp-card__days {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--color-accent-soft);
	font-size: 11.5px;
	font-weight: 800;
	white-space: nowrap;
	color: var(--color-warning);
}
.opp-card__days.is-urgent {
	background: #FDE7E5;
	color: #B42318;
}

/* Inline, wrapping only if it has to. The old version was a bordered list
   with one fact per row, which cost about 45px to say two short things. */
.opp-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.opp-card__facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-navy-900);
}
.opp-card__facts svg { color: var(--color-primary-ink); flex: 0 0 auto; }

.opp-card__apply {
	width: 100%;
	justify-content: center;
}

/* Footer line: the secondary link and the caveat share the space instead of
   stacking, and the caveat is one line rather than two. */
.opp-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 10px 0 0;
}
.opp-card__official {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary-ink);
	text-decoration: none;
}
.opp-card__official:hover { text-decoration: underline; }
.opp-card__verify {
	flex: 1 1 auto;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--color-text-muted);
}

.opp-share {
	margin-top: 16px;
	padding: 16px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.opp-share__label {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.opp-share__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.opp-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	color: var(--color-navy-900);
	background: #fff;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Each platform's own colour, but only on hover. All-brand-colour at rest
   turns the sidebar into a paint chart and pulls attention away from the
   Apply button directly above it; on hover it confirms what you are about to
   click.

   These are the published brand values, unmodified. White on them ranges from
   3.1:1 (WhatsApp) to 21:1 (X) - above the 3:1 WCAG asks of a meaningful
   graphic, below the 4.5:1 it asks of text. That is the right threshold here
   because the glyph is a graphic, and the accessible name is real text on the
   link rather than something the icon has to carry. Darkening them to clear
   4.5:1 would mean shipping colours that are not the brands' own, which
   defeats the point of a recognisable mark. */
.opp-share__link:hover {
	color: #fff;
	border-color: transparent;
}
.opp-share__link--whatsapp:hover { background: #1DA851; }
.opp-share__link--telegram:hover { background: #1E88C7; }
.opp-share__link--facebook:hover { background: #1877F2; }
.opp-share__link--x:hover        { background: #000; }
.opp-share__link--linkedin:hover { background: #0A66C2; }
.opp-share__link--reddit:hover   { background: #D93A00; }
.opp-share__link--email:hover    { background: var(--color-primary-ink); }

.opp-share__link:focus-visible {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: 2px;
}

@media (min-width: 560px) {
	.opp-timeline__item {
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		gap: 16px;
		align-items: baseline;
	}
}

/* Mobile: the rail renders after the whole article, so the apply button goes
   first - it is the only thing still worth reaching at the bottom of a long
   page. Latest Opportunities is hidden entirely there: a second scrolling
   list at the end of a page the reader has just scrolled through is a lot of
   height for very little. */


@media (min-width: 1000px) {
	.opp-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 48px;
	}

	/* Latest above the card, per the reading order: browse the alternatives
	   first, commit second, ask third. */
}

/* The sticky rail is gone. It used to pin Latest Opportunities and the apply
   card together as one capped block, with a second rule below 540px tall that
   fell back to sticking only the card.

   The questions thread ended that. It grows without limit, and a pinned block
   above a growing one eventually covers it - to keep the cap honest the list
   would have had to shrink towards nothing on a busy posting, which is the
   overlap bug this rail has already had twice. A rail that scrolls with the
   page cannot break however long the thread gets. See the rail block further
   down for the cost.
   -------------------------------------------------------------------------- */

.opp-latest .latest__panel::before{
	top: 0px;
}
.opp-latest .latest__panel::after{
	bottom: 0px;
}



/* --- FAQ open animation ---------------------------------------------------
   <details> snaps open, which makes the relationship between a question and
   its answer read as a jump rather than a reveal.

   Done with the modern interpolate-size / ::details-content pair rather than
   a JS height measurement. Browsers without it get exactly what they get
   today - an instant open - which is a perfectly good outcome, so there is no
   script here to fail.
   -------------------------------------------------------------------------- */
@supports selector(::details-content) {
	.opp-faq::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			block-size 0.28s ease,
			content-visibility 0.28s allow-discrete,
			opacity 0.22s ease;
	}
	.opp-faq[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
	/* block-size cannot animate to auto without this. */
	.opp-faqs {
		interpolate-size: allow-keywords;
	}
}
@media (prefers-reduced-motion: reduce) {
	.opp-faq::details-content,
	.opp-faq[open]::details-content {
		transition: none;
	}
}

/* --- Share row -------------------------------------------------------------
   Full column width under the article. In the rail this was a stacked label
   over a wrapped grid of icons; with the whole measure to work with it
   becomes one line, which lets the row carry a real prompt instead of just
   the word "Share".
   ---------------------------------------------------------------------------- */
.opp-shareRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: clamp(30px, 4vw, 46px);
	padding: 22px 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
}
.opp-shareRow__text { min-width: 0; }
.opp-shareRow__label {
	margin: 0 0 3px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-navy-900);
}
.opp-shareRow__sub {
	margin: 0;
	max-width: 46ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}

/* No background override here on purpose. The base .opp-share__link already
   sets a white pill, so re-stating it added nothing - but it tied on
   specificity with the per-platform :hover rules and, being later in the
   file, won. That pinned the background white while :hover set the icon
   white too, so hovering made the icon vanish. */

/* --- The rail ---------------------------------------------------------------
   Latest Opportunities, then the apply card, then the questions thread.

   NOTHING STICKS ANY MORE, and the thread is why. It grows without limit -
   one more comment, one more inch - and anything pinned above a growing block
   eventually covers it. The capped sticky wrapper this rail used to have
   would have had to shrink Latest Opportunities to nothing to fit a busy
   thread, which is the same overlap bug in a new costume.

   What is lost is the apply button being reachable at any scroll position.
   What is gained is a rail that cannot break however long the thread gets.

   The order follows how the column is used: browse the alternatives, commit,
   then ask.
   ---------------------------------------------------------------------------- */
.opp-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.opp-rail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media (min-width: 1000px){
	.opp-rail{
		position: sticky;
		top: 24px;
	}
}
	/* The list scrolls internally, so it needs a height of its own now that the
   flex column no longer hands it one. Tall enough for four rows, which is
   what makes the rolling loop read as a loop rather than a twitch. */
.opp-latest .latest__scroller {
	max-height: 340px;
}

/* Below the desktop breakpoint the rail renders after the entire article, so
   the contents list is a set of links to text the reader has already scrolled
   past. Not rendered as a scroll target at all there. */
@media (max-width: 999px) {
	.opp-toc {
		display: none;
	}
}

/* --- Questions thread -------------------------------------------------------
   Native WordPress comments; see inc/opportunity-comments.php for why.
   ---------------------------------------------------------------------------- */
.opp-thread {
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
}
@media (min-width: 1000px){
	.opp-thread{
		max-height: calc(100vh - 300px);
		overflow-y: auto;
	}
}
.opp-thread__label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.opp-thread__label svg {
	color: var(--color-primary-ink);
	flex: 0 0 auto;
}
.opp-thread__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-primary-ink);
	font-size: 11px;
	letter-spacing: 0;
}
.opp-thread__empty {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.opp-thread__list,
.opp-thread__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.opp-thread__item + .opp-thread__item {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
}
/* A reply is indented and ruled rather than boxed - at this width a nested
   card inside a card leaves about 200px for the words. */
.opp-thread__list .children {
	margin-top: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--color-border);
}
.opp-thread__list .children .opp-thread__item + .opp-thread__item {
	margin-top: 12px;
	padding-top: 12px;
}
.opp-thread__item.is-team > .opp-thread__comment {
	/* Team answers are the ones worth finding in a long thread. */
	padding: 12px 13px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
}

.opp-thread__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
}
.opp-thread__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
}
.opp-thread__who {
	min-width: 0;
}
.opp-thread__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-navy-900);
}
.opp-thread__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--color-primary-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.opp-thread__date {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--color-text-muted);
}
.opp-thread__body {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--color-text-muted);
}
.opp-thread__body p {
	margin: 0 0 0.7em;
}
.opp-thread__body > *:last-child {
	margin-bottom: 0;
}
.opp-thread__body a {
	color: var(--color-primary-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	/* A pasted URL in a 320px column will otherwise set the column width and
	   push the whole rail wider than its track. */
	overflow-wrap: anywhere;
}
.opp-thread__pending {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--color-warning);
}
.opp-thread__reply {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 700;
}
.opp-thread__reply a {
	color: var(--color-primary-ink);
	text-decoration: none;
}
.opp-thread__reply a:hover {
	text-decoration: underline;
}

/* --- Ask ------------------------------------------------------------------
   A disclosure, because three fields open by default would put 300px of empty
   form between the apply button and the first question. No JavaScript: the
   element is a summary, and a browser has known what to do with one for
   years.
   -------------------------------------------------------------------------- */
.opp-thread__ask {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
}
.opp-thread__asktoggle {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--color-primary-ink);
	/* The default triangle sits oddly against an icon and a bold label; the
	   open/closed state reads from the form appearing. */
	list-style: none;
}
.opp-thread__asktoggle::-webkit-details-marker {
	display: none;
}
.opp-thread__asktoggle:hover {
	color: var(--color-primary);
}
.opp-thread__asktoggle:focus-visible {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
.opp-thread__ask[open] .opp-thread__asktoggle {
	margin-bottom: 12px;
}

/* comment_form()'s class_container replaces "comment-respond" rather than
   adding to it. The #respond id it also prints is what comment-reply.js and
   the cancel link both key off, so nothing breaks - but the margin the
   default class used to carry has to be restated. */
.opp-thread__form {
	margin: 0;
}
.opp-thread .comment-form label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-navy-900);
}
.opp-thread .comment-form input[type="text"],
.opp-thread .comment-form input[type="email"],
.opp-thread .comment-form textarea {
	width: 100%;
	font-size: 13.5px;
}
/* The fixed 50px height in critical.css is sized for a page-width form; in a
   320px rail it makes three stacked fields taller than the thread above them. */
.opp-thread .comment-form input[type="text"],
.opp-thread .comment-form input[type="email"] {
	height: 42px;
}
.opp-thread .comment-form textarea {
	resize: vertical;
}
.opp-thread .comment-form p {
	margin: 0 0 12px;
}
.opp-thread__note {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}
.opp-thread__submit {
	width: 100%;
	justify-content: center;
}
/* WordPress prints this when a reader is answering a specific comment. */
.opp-thread .comment-reply-title,
.opp-thread #cancel-comment-reply-link {
	font-size: 12.5px;
}
.opp-thread .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.opp-thread .comment-form-cookies-consent input {
	flex: 0 0 auto;
	margin-top: 3px;
}
.opp-thread .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--color-text-muted);
}

.opp-thread__closed {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}
.opp-thread__closed svg {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* --- Latest opportunities in the rail ---------------------------------------
   The shared panel from the homepage, filling whatever height the flex column
   leaves it rather than a fixed value.
   ---------------------------------------------------------------------------- */
.opp-latest {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
}
@media (max-width: 999px){
	.opp-latest { display: none; }
}

.opp-latest__label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.opp-latest__label svg { color: var(--color-accent-dark); }
.opp-latest .latest__panel {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}
/* Back into normal flow, but filling the panel rather than a fixed height:
   the absolute positioning the component defaults to exists so the homepage
   panel contributes no height to its grid row, and there is no row here.
   A floor of 140px, because below about that the list shows one and a half
   rows and reads as broken rather than short. */
.opp-latest .latest__scroller {
	position: static;
	height: 100%;
	min-height: 140px;
	padding: 0;
}

/* --- Contents list ---------------------------------------------------------
   Built in template-parts/opportunity-aside.php from the sections that
   actually rendered, so it never links to a heading that was skipped.
   -------------------------------------------------------------------------- */
.opp-toc {
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.opp-toc__label {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.opp-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: opp-toc;
}
.opp-toc__list a {
	display: block;
	padding: 6px 0 6px 22px;
	position: relative;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--color-navy-900);
	text-decoration: none;
	border-left: 2px solid transparent;
}
/* Numbered because the posting standard IS a sequence - the sections run in a
   fixed order on every opportunity, and the number tells a reader how far
   through the document a heading sits. */
.opp-toc__list a::before {
	counter-increment: opp-toc;
	content: counter(opp-toc, decimal-leading-zero);
	position: absolute;
	left: 6px;
	top: 7px;
	font-size: 10px;
	font-weight: 800;
	color: var(--color-text-muted);
}
.opp-toc__list a:hover {
	color: var(--color-primary-ink);
	border-left-color: var(--color-primary);
}
.opp-toc__list a:hover::before {
	color: var(--color-primary-ink);
}