/* ==========================================================================
   BASE CSS - sitewide, below-the-fold. Loaded async (see inc/enqueue.php).
   Critical, above-the-fold styles (header/nav/ticker/reset) live in critical.css.
   ========================================================================== */

/* --- Layout helpers ------------------------------------------------------ */
.section {
	padding-block: 56px;
}
.section.countries{
	position: relative;
    /* Asymmetric on purpose. 130px both sides left a gap above this band far
       larger than any other on the page, because the section before it already
       ends on its own padding - the two stacked. The bottom keeps its depth,
       where nothing is stacking against it. */
    padding-block: clamp(44px, 5.5vw, 72px) 130px;
}
.section.countries::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/wp-content/themes/mindship/assets/images/country-bg.png);
    opacity: 0.2;
    background-position: 55% 0%;
	background-size: cover;
	z-index:0;
}
.section.countries .container{
	position: relative;
}
.section--alt {
	background: var(--color-bg-alt);
}
.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.section__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-navy-900);
	margin: 0;
}
.section__link {
	font-size: 14px;
	font-weight: 700;
	/* --color-primary-ink, not --color-primary: the brand teal is 4.10:1 on
	   the white card this sits in, and this is link text, which needs 4.5.
	   The ink is the same hue at 5.62. Pre-existing, found while auditing the
	   section themes. */
	color: var(--color-primary-ink);
	white-space: nowrap;
}
.section__link:hover {
	text-decoration: underline;
}

.grid {
	display: grid;
	gap: 20px;
}

/* UTILITY CLASSES */
.b-t-5{
	border-top: 5px solid!important;
}
.border-t-latest{
		border-top-color: var(--color-latest)!important;
}

.border-t-featured{
		border-top-color: var(--color-featured)!important;
}

.border-t-deadlines{
		border-top-color: var(--color-deadlines)!important;
}

.border-t-resources{
		border-top-color: var(--color-resources)!important;
}

.bg-default{
	background: var(--color-bg)
}
.bg-alt{
	background-color: var(--color-bg-alt);	
}

.pb-50{
	padding-bottom: 50px
}





/* --- Contact page ------------------------------------------------------------- */
.contact-page__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
.contact-page__form {
	padding: 28px;
}
.contact-page__info {
	display: grid;
	gap: 20px;
	align-content: start;
}
.contact-page__info-card {
	padding: 24px;
}
.contact-page__info-list {
	margin: 12px 0 0;
}
.contact-page__social.social-row {
	margin-top: 16px;
}
.contact-page__social.social-row a {
	background: var(--color-bg-alt);
	color: var(--color-navy-900);
}
.contact-page__social.social-row a:hover {
	background: var(--color-primary-ink);
	color: #fff;
}
.contact-page__map {
	padding: 0;
	overflow: hidden;
}

@media (min-width: 900px) {
	.contact-page__grid {
		grid-template-columns: 1.4fr 1fr;
	}
}


/* --- Opportunity card (used on home, archive, search, related) ---------------- */
.opportunity-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 0px;
	overflow: hidden;
}
/* Only what both variants share. The 56px square used to live here and the
   grid card was expected to undo it - which it silently stopped doing the
   moment its height override was replaced with aspect-ratio, because an
   explicit height beats a ratio. Each variant now states its own size and
   neither depends on cancelling the other. */
.opportunity-card__thumb {
	overflow: hidden;
	background: var(--color-bg-alt);
}
.opportunity-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.opportunity-card__body {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
    text-overflow: ellipsis;
}
.opportunity-card__title {
	font-size: 14.5px;
	font-weight: 700;
	margin: 0 0 4px;
	white-space: nowrap;
}
.opportunity-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}
.opportunity-card__date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}
.opportunity-card__date-big {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--color-navy-900);
}
.opportunity-card__date-big.is-danger {
	color: var(--color-danger);
}
.opportunity-card__date-small {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	white-space: nowrap;
}

/* Grid-style opportunity card, used on archive/search results. */
.opportunity-card--grid {
	display: block;
	padding: 0;
	overflow: hidden;
}
/* The compact row: homepage "Latest Opportunities" and anywhere else the card
   is a single line. A fixed square, because the thumbnail here is an
   identifier rather than an image anyone looks at. */
.opportunity-card--row .opportunity-card__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
}

.opportunity-card--grid .opportunity-card__thumb {
	display: block;
	width: 100%;
	/* aspect-ratio, not a fixed height. The card renders at three different
	   widths (421px at 3-up, 478px at 2-up, up to 591px at 1-up) and a fixed
	   160px only matched one of them - at the others the crop tightened or
	   loosened on its own.
	   16:9 because it is the ratio press photos, campus shots and stock
	   imagery already come in, so it crops least of anything an editor is
	   likely to upload. The old box was 2.63:1 - wider than Cinemascope. */
	aspect-ratio: 16 / 9;
	border-radius: 0;
}
.opportunity-card--grid .opportunity-card__body {
	display: block;
	padding: 16px;
}
.opportunity-card--grid .opportunity-card__meta {
	display: block;
	margin-bottom: 6px;
}
.opportunity-card--grid .opportunity-card__title {
	display: block;
	white-space: normal;
	font-size: 16px;
	margin-bottom: 4px;
}
.opportunity-card--grid .opportunity-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
}

/* --- Pagination --------------------------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
	margin-bottom: 28px;
}
/* paginate_links() puts its links inside a .nav-links wrapper, so the flex
   container above had exactly one child and neither the gap nor the wrapping
   ever reached the links themselves. They still laid out in a row - inline-flex
   in a block box does - which is why this went unnoticed, but spaced by
   whatever word-spacing the font happened to give them. */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 8px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: 14px;
	font-weight: 600;
}
.pagination .current {
	background: var(--color-primary-ink);
	border-color: var(--color-primary-ink);
	color: #fff;
}
.pagination a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}


/* --- Share row (single opportunity + single article) --------------------------- */
.share-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}
.share-row a {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.share-row a:hover {
	background: var(--color-primary-ink);
	color: #fff;
}

/* --- Floating social bar ------------------------------------------------------- */
.floating-social {
	position: fixed;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	flex-direction: column;
	gap: 10px;
	z-index: 40;
}
.floating-social a {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--color-navy-900);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.floating-social a:hover {
	background: var(--color-primary-ink);
	color: #fff;
}
@media (min-width: 1200px) {
	.floating-social {
		display: none;
	}
}

/* --- Pre-footer: newsletter + community ---------------------------------------- */
.bg-pre-footer{
/* 	background: linear-gradient(
		to bottom,
		var(--color-bg-alt) 0%,
		var(--color-bg-alt) 50%,
		var(--color-navy-900) 50%,
		var(--color-navy-900) 100%
	); */
	background: var(--color-navy-dark);
    color: white;
}

/* @media (min-width: 900px){
	.bg-pre-footer{
		background: linear-gradient(
	  to right,
	  var(--color-bg-alt) 0%,
	  var(--color-bg-alt) 50%,
	  var(--color-navy-dark) 50%,
	  var(--color-navy-dark) 100%
	);
	}	
} */

@media (max-width: 900px){
	.pre-footer{
		padding:0px;
	}
}


.pre-footer__newsletter .text-muted{
	color: var(--color-text-light);
}

.pre-footer {
	display: grid;
	grid-template-columns: 1fr;
	
}
.pre-footer__newsletter,
.pre-footer__community {
	padding: 36px 24px;
}
.pre-footer__community {
	color: #fff;
}
.pre-footer__title {
	font-weight: 800;
	font-size: 18px;
	margin: 0 0 6px;
}
.pre-footer__community .pre-footer__title {
	color: #fff;
}
.newsletter-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin-top: 14px;
}
.newsletter-form input[type="email"] {
	flex: 1 1 auto;
}
.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.social-row a {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.social-row a:hover {
	background: var(--color-primary);
}

@media (min-width: 900px) {
	.pre-footer {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Footer --------------------------------------------------------------------- */
.site-footer {
	background: var(--color-navy-dark);
	color: #c6cde6;
	padding-block: 48px 20px;
	font-size: 14px;
}
.footer-grid {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
.footer-col h3 {
	color: #fff;
	font-size: 14px;
	margin: 0 0 14px;
}
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.footer-col a:hover {
	color: #fff;
	text-decoration: underline;
}
.footer-brand p {
	margin: 10px 0 0;
	color: var(--color-text-light);
}
.footer-brand .site-branding__text,
.footer-brand .site-branding__text span {
	color: #fff;
}
.footer-contact li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 36px;
	padding-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	color: var(--color-text-light);
	font-size: 13px;
}
.footer-bottom a:hover {
	color: #fff;
}

@media (min-width: 640px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1.3fr repeat(3, 1fr) 1fr;
	}
}

/* ==========================================================================
   QUOTE CARD - shared component.

   Lives here rather than in stories.css because three templates render it:
   the Testimonials wall, the homepage slider, and anything that reuses
   template-parts/quote-card.php later. Layout belonging to one of those
   contexts (column breaking, rail widths) stays with that context; this is
   only the card itself.
   ========================================================================== */

/* Accent tones, cycled so adjacent cards differ. On :root rather than on a
   page wrapper because the homepage uses them too and has no such wrapper. */
:root {
	--tone-teal: #02737A;
	--tone-navy: #01224F;
	--tone-amber: #A65A08;
	--tone-green: #127D5A;
	--tone-indigo: #3A4A9F;
}

.quote-card {
	padding: 26px 24px 22px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--tone, var(--tone-teal));
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 22px rgba(16, 24, 40, 0.05);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.quote-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(16, 24, 40, 0.11);
}
.quote-card__mark {
	display: block;
	font-size: 44px;
	line-height: 0.6;
	font-weight: 800;
	color: var(--tone, var(--tone-teal));
	opacity: 0.28;
	margin-bottom: 10px;
}
.quote-card__text {
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--color-navy-900);
}
.quote-card__person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}
.quote-card__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-bg-alt);
}
/* Initial-letter stand-in when a testimonial has no photo, which is the norm
   for one written in by email. A tinted disc reads as intentional; a missing
   image or an empty grey circle reads as broken. */
.quote-card__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	background: var(--tone, var(--tone-teal));
}
.quote-card__name {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.quote-card__role {
	display: block;
	font-size: 12.5px;
	color: var(--color-text-muted);
}
.quote-card__place {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
}
.quote-card__place svg {
	color: var(--tone, var(--tone-teal));
}

@media (prefers-reduced-motion: reduce) {
	.quote-card {
		transition: none;
	}
	.quote-card:hover {
		transform: none;
	}
}

/* The [hidden] attribute loses to any author `display` rule, which silently
   breaks every show/hide in the theme that toggles it (story filter, slider
   controls, empty states) the moment the element also has display:flex or
   grid. !important is right here: this is a UA-level primitive, and code
   setting el.hidden = true always means *gone*, never "gone unless something
   else styled it". */
[hidden] {
	display: none !important;
}

/* ==========================================================================
   SECTION BANDS

   How sections are told apart. No patterns, no glows, no gradients - the
   previous attempt at texture read as decoration rather than design. This is
   the opposite approach and the one that actually reads as premium: flat,
   confident surfaces, a hairline where two light ones meet, and one dark
   full-bleed band per page as punctuation.

   Three surfaces only, used in rotation:
     .band--plain  white
     .band--tint   the pale teal-grey already used across the theme
     .band--dark   navy, full-bleed, everything inside inverted

   Two rules that keep it disciplined:
     - Adjacent sections never share a surface.
     - One dark band per page, no more. Its power comes from being the only
       one; a second halves the effect of both. The dark surfaces already in
       the layout (hero, stats, footer) count toward that, which is why the
       anchor sits in the middle of the page, far from them.
   ========================================================================== */
.band--plain { background: #fff; }
.band--tint  { background: var(--color-bg-alt); }

/* A hairline only between two light bands - against the dark band the change
   of surface is the separator and a line on top of it is just noise. */
.band--tint + .band--plain,
.band--plain + .band--tint {
	border-top: 1px solid var(--color-border);
}

/* --- The dark anchor band ------------------------------------------------- */
.band--dark {
	background: var(--color-navy-dark);
	color: #fff;
}
.band--dark h2,
.band--dark h3,
.band--dark .section-head-centred__title {
	color: #fff;
}
/* Body copy on navy is a soft blue-white rather than pure white: at these
   sizes full white on a dark ground vibrates and is tiring to read. This is
   12.7:1, comfortably past the requirement. */
.band--dark p,
.band--dark li,
.band--dark .section-head-centred__sub {
	color: #C2DDE0;
}
.band--dark .text-muted { color: #9FBDC4; }

/* Cards keep their light surface inside the dark band. That contrast is the
   whole point - white cards on navy is what makes the band read as premium
   rather than as a dark hole in the page. */
.band--dark .card,
.band--dark .quote-card,
.band--dark .opportunity-card,
.band--dark .country-chip {
	background: #fff;
	border-color: rgba(255, 255, 255, 0.1);
}

/* Outline buttons need inverting or they vanish. */
.band--dark .btn-outline {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.34);
	background: transparent;
}
.band--dark .btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.55);
}

/* Eyebrows and labels: the accent orange is 7.5:1 on navy and is the single
   warm note in the band, which is what stops it feeling cold. */
.band--dark .section-label,
.band--dark [class$="__eyebrow"],
.band--dark [class$="__label"] {
	color: var(--color-accent);
}
.band--dark [class$="__eyebrow"] {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
}

/* --- The dark anchor band ------------------------------------------------- */
.band--dark-green {
	background: #023C43;
	color: #fff;
}

.band--dark-green a{
	color: #fff;
}

/* ==========================================================================
   REVEAL ON SCROLL

   One effect, used in a handful of places, opted into with data-reveal.
   See initReveal() in assets/js/main.js.

   The .is-armed class is added by that script and never appears in the
   markup, which is what makes this fail visible: no JavaScript, no
   IntersectionObserver, or a parse error, and every element simply renders
   normally. Putting opacity: 0 in the stylesheet instead is the usual way to
   build this and it turns any script failure into a blank page.

   720ms and 22px. It was 420ms and 14px, which finished before the eye had
   found the thing that moved - the animation was running, nobody could see
   it. Slower and further is the fix; slower still would start performing at
   the reader, which is the failure in the other direction.

   A KEYFRAME ANIMATION, NOT A TRANSITION

   This was a transition, and anything already on screen when the page loaded
   never animated at all - it simply appeared. A transition needs the browser
   to have painted the start state before the end state arrives, and for an
   element already in view the observer fires in the same style recalculation
   as the arming, so there was no start state to transition from. Only blocks
   below the fold, armed long before they were revealed, ever moved.

   An animation has no such requirement: it always runs from its own first
   keyframe, whether or not that state was ever painted. Same look, and it
   works at the top of the page as well as the bottom.

   No will-change. It used to be declared here and released on .is-in - which
   released it as the movement started rather than after it, so it was doing
   nothing but keeping a compositor layer alive. Opacity and transform
   keyframes are promoted automatically by every engine this targets.
   ========================================================================== */
/* :not(.is-in), and the animation fills BACKWARDS rather than both.

   With "both" the animation keeps applying its last keyframe after it has
   finished, and a filled animation outranks ordinary author rules - so any
   revealed element was pinned at transform: none for good and every :hover
   transform on it silently stopped working. Blog cards, which lift on hover,
   are the first place that bit.

   "backwards" holds the opening keyframe through the stagger delay, which is
   the only part that was actually needed, and then lets go. The element ends
   up on its own normal styles - visible, untransformed, and free to respond
   to hover again. The armed state has to stop applying at the same moment,
   hence :not(.is-in). */
.reveal.is-armed:not(.is-in) {
	opacity: 0;
}
.reveal.is-armed.is-in {
	animation: mindship-reveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes mindship-reveal {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Belt and braces. The script already returns early for reduced motion, so
   nothing should ever be armed - but if anything ever arms an element by
   another route, this guarantees it is still visible and still. */
@media (prefers-reduced-motion: reduce) {
	.reveal.is-armed,
	.reveal.is-armed.is-in {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ==========================================================================
   FOCUS

   One sitewide rule. :focus-visible was previously declared in four of the
   fifteen stylesheets, so most of the site fell back to whatever the browser
   draws by default - which on a tinted card or a coloured button is often
   almost invisible.

   :focus-visible rather than :focus, so a mouse click on a button does not
   leave a ring behind it; keyboard and other non-pointer input still get one.
   The four existing per-component rules are more specific and still win where
   a component needs something different.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: 2px;
	border-radius: 2px;
}
/* On a dark ground the teal outline disappears, so those surfaces get a light
   one instead. */
.band--dark a:focus-visible,
.band--dark button:focus-visible,
.site-footer a:focus-visible,
.mindship-ticker a:focus-visible,
.opp-head a:focus-visible {
	outline-color: #7FE3E8;
}

/* ==========================================================================
   SKELETONS

   Shown while the opportunity filter fetches. The grid used to dim to 50%
   opacity, which reads as "broken" rather than "loading" - the content is
   still legible, just greyed, so the eye keeps trying to read it. Placeholders
   in the shape of the incoming cards say "results are on the way" instead.
   ========================================================================== */
.results-grid[data-loading="1"] {
	pointer-events: none;
}
.skeleton-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.skeleton-card__thumb { aspect-ratio: 16 / 9; }
.skeleton-card__body {
	padding: 16px;
	display: grid;
	gap: 10px;
}
.skeleton-line { height: 12px; border-radius: 4px; }
.skeleton-line--sm { width: 45%; height: 10px; }
.skeleton-line--lg { width: 85%; height: 16px; }

.skeleton-card__thumb,
.skeleton-line {
	background: linear-gradient(
		90deg,
		var(--color-bg-alt) 25%,
		#E4EEF0 37%,
		var(--color-bg-alt) 63%
	);
	background-size: 400% 100%;
	animation: mindship-shimmer 1.3s ease-in-out infinite;
}
@keyframes mindship-shimmer {
	from { background-position: 100% 50%; }
	to   { background-position: 0 50%; }
}
/* Still a placeholder, just a still one. */
@media (prefers-reduced-motion: reduce) {
	.skeleton-card__thumb,
	.skeleton-line {
		animation: none;
		background: var(--color-bg-alt);
	}
}

/* ==========================================================================
   READING PROGRESS
   A 2px bar under the sticky header on long opportunity postings. On a
   fifteen-section article it answers "how much more of this is there?",
   which is a real question.
   ========================================================================== */
.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--color-accent);
	z-index: 60;
	pointer-events: none;
}

/* Submitting state - the label swap is done in JS; this is the look. */
.btn[data-submit-btn][aria-busy="true"] {
	opacity: 0.72;
	cursor: progress;
}

/* --- 404 -------------------------------------------------------------------
   Given real care because it is a page real visitors reach on purpose:
   opportunities expire and expired postings are removed, so this catches
   anyone following a shared link to something that has since closed.
   -------------------------------------------------------------------------- */
.notfound {
	padding-block: clamp(48px, 8vw, 96px);
	background: var(--color-bg-alt);
}
.notfound__inner {
	max-width: 680px;
}
.notfound__code {
	margin: 0 0 6px;
	font-size: clamp(56px, 11vw, 96px);
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--color-primary);
	opacity: 0.22;
}
.notfound__title {
	margin: 0 0 12px;
	font-size: clamp(26px, 4.4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.026em;
	color: var(--color-navy-900);
}
.notfound__lead {
	margin: 0 0 26px;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-muted);
}
.notfound__search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 30px;
}
.notfound__search input[type="search"] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 12px 15px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.notfound__label {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.notfound__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.notfound__cats a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	text-decoration: none;
}
.notfound__cats a:hover {
	border-color: var(--color-primary-ink);
	color: var(--color-primary-ink);
}
.notfound__cats span {
	font-size: 11.5px;
	font-weight: 800;
	color: var(--color-text-muted);
}
.notfound__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   LATEST OPPORTUNITIES PANEL - shared component.

   Moved out of home.css. It renders in two places now - the homepage grid and
   the opportunity sidebar - and home.css only loads on the front page, so on
   an opportunity posting the panel had no styles at all: no scroller, no
   spacing, no item layout. Its markup lives in
   template-parts/latest-opportunities.php.

   What stayed behind in home.css is the part that is genuinely homepage
   layout: the two-column grid placement, and the eyebrow/title/description
   above the panel, which only the homepage renders.

   The scroller is absolutely positioned by default because of that homepage
   grid - twenty-four listings in normal flow would make this the tallest
   thing in its row and the row would size to it. Contexts without a row to
   match (the sidebar, and narrow screens) switch it back to static and give
   it an explicit height.
   ========================================================================== */
/* --- Rolling panel ------------------------------------------------------------
   The scroller is absolutely positioned on purpose. Twenty-four listings in
   normal flow would make this the tallest thing in row two and the row would
   size to it, defeating the whole layout. Out of flow, the panel contributes
   no height at all, so the category cards decide the row and the panel simply
   stretches to match - which is exactly the alignment being aimed for.
   ---------------------------------------------------------------------------- */
.latest__panel {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.07);
	/* Floor for the stacked layout and for a short category list. */
	min-height: 320px;
}
/* Fades the top and bottom rows out against the panel, so listings appear to
   emerge and disappear rather than being sliced in half by the edge. */
.latest__panel::before,
.latest__panel::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	height: 46px;
	pointer-events: none;
	z-index: 1;
}
.latest__panel::before {
	top: 8px;
	background: linear-gradient(#fff, rgba(255, 255, 255, 0));
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.latest__panel::after {
	bottom: 8px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.latest__scroller {
	position: absolute;
	inset: 8px;
	overflow-y: auto;
	scrollbar-width: none;
	/* Keeps a flick that reaches the end of this list from carrying on into
	   the page behind it, and damps the iOS bounce that the auto-scroll
	   script used to fight - see the note at the top of latest-scroll.js. */
	overscroll-behavior-y: contain;
}
.latest__scroller::-webkit-scrollbar {
	display: none;
}
.latest__scroller:focus-visible {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: -2px;
	border-radius: var(--radius-md);
}
.latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.latest-item + .latest-item {
	border-top: 1px solid var(--color-border);
}
.latest-item a {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px;
	border-radius: var(--radius-sm);
}
.latest-item a:hover {
	background: var(--color-bg-alt);
}
.latest-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
}
.latest-item__body {
	flex: 1 1 auto;
	min-width: 0;
}
.latest-item__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.latest-item__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}
.latest-item__days {
	font-weight: 700;
	color: var(--color-danger);
}
.latest-item__arrow {
	flex: 0 0 auto;
	color: var(--color-text-muted);
}

/* Narrow screens: nothing to align against, so the scroller comes back into
   normal flow with a height of its own. */
@media (max-width: 1023px) {
	.latest__panel {
		min-height: 0;
	}
	.latest__scroller {
		position: static;
		height: clamp(360px, 56vh, 520px);
		padding: 8px;
	}
}

/* ==========================================================================
   ARTICLE PROSE - shared by opportunity postings, blog posts and guidance.

   Moved here from single.css, where it only ever reached opportunity pages.
   Blog and guidance posts were running on seven basic rules - headings,
   paragraphs, plain lists - while identical editor-authored content on an
   opportunity got twenty-five: tinted list markers, styled tables, blockquote
   treatment, and every named style the editor toolbar can produce.

   That gap is most of why the blog looked plain next to the opportunities. It
   was not the layout; it was that the words themselves were unstyled.

   .opp-prose and .entry-content are the same thing under two names, kept
   because both are already in templates and in editor output.
   ========================================================================== */
/* Editor-authored HTML. Everything an editor can produce from the toolbar in
   inc/editor-styles.php has a rule here, so nothing lands unstyled. */
.opp-prose,
.entry-content {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text-muted);
}
.opp-prose > *:first-child,
.entry-content > *:first-child { margin-top: 0; }
.opp-prose > *:last-child,
.entry-content > *:last-child { margin-bottom: 0; }
.opp-prose p,
.entry-content p { margin: 0 0 1.1em; }
.opp-prose h2,
.entry-content h2,
.opp-prose h3,
.entry-content h3,
.opp-prose h4,
.entry-content h4,
.wp-block-heading {
	margin: 1.6em 0 0.5em;
	color: var(--color-navy-900);
	letter-spacing: -0.015em;
	line-height: 1.3;
}
.opp-prose h2,
.entry-content h2 { font-size: 21px; }
.opp-prose h3,
.entry-content h3 { font-size: 18px; }
.opp-prose h4,
.entry-content h4 { font-size: 16px; }
.opp-prose ul,
.entry-content ul,
.opp-prose ol,
.entry-content ol {
	margin: 0 0 1.1em;
	padding-left: 0;
	list-style: none;
}

.opp-prose b, .entry-content b {
    color: var(--color-navy-900);
}

.opp-prose ol,
.entry-content ol { counter-reset: opp-ol; }
.opp-prose li,
.entry-content li {
	position: relative;
	margin-bottom: 0.6em;
	padding-left: 26px;
}
/* A tinted marker rather than the browser's bullet: these lists run to
   fifteen items and the marker is what gives them a scannable left edge. */
.opp-prose ul > li::before,
.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary-ink);
}
.opp-prose ol > li::before,
.entry-content ol > li::before {
	counter-increment: opp-ol;
	content: counter(opp-ol);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-size: 12px;
	font-weight: 800;
	color: var(--color-primary-ink);
}
.opp-prose li > ul,
.entry-content li > ul,
.opp-prose li > ol,
.entry-content li > ol {
	margin-top: 0.5em;
}
.opp-prose a,
.entry-content a {
	color: var(--color-primary-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.opp-prose strong,
.entry-content strong { color: var(--color-navy-900); }
.opp-prose blockquote,
.entry-content blockquote {
	margin: 1.3em 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--color-primary);
	color: var(--color-navy-900);
}
.opp-prose img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}
/* An editor can paste a table with six columns into any of these sections.
   On a phone that pushes the whole page sideways, so it scrolls inside its
   own box instead. display: block is what makes a table scrollable at all -
   a table element ignores overflow. */
.opp-prose table,
.entry-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 1.1em;
	font-size: 14.5px;
}
.opp-prose th,
.entry-content th,
.opp-prose td,
.entry-content td {
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	text-align: left;
}
/* The named styles from the editor's Formats menu. Same class names as
   assets/css/editor.css, so what an editor sees while typing matches. */
.opp-prose .is-lead,
.entry-content .is-lead {
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
	color: var(--color-navy-900);
}
.opp-prose .is-highlight,
.entry-content .is-highlight {
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--color-accent-soft);
	color: var(--color-warning);
	font-weight: 700;
}
.opp-prose .is-muted,
.entry-content .is-muted { color: var(--color-text-muted); }
.opp-prose .is-small,
.entry-content .is-small {
	font-size: 13.5px;
	line-height: 1.65;
}
.opp-prose .is-boxed,
.entry-content .is-boxed {
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
	border-left: 3px solid var(--color-primary-ink);
}
.opp-prose .is-figure,
.entry-content .is-figure {
	font-weight: 800;
	color: var(--color-primary-ink);
}