/* Penny Brohn - PHP hierarchy templates (news listing, single post, category
   archive, search, 404).

   The components come from the design system: .photo-card, .tag, .hero--page,
   .article-head, .article-body, .standfirst, .share-bar, .rel-card, .row--*,
   .toolbar, .search-form, .filter-chip, .btn. Only the page-level pieces the
   News & Stories design adds live here.

   Typography follows the ruling: headings and UI in Flink, running text in
   Mackinac. The design file predates the ruling, so its font rules are
   restated the right way round below rather than copied.

   Theme overrides of a design-system rule start with `body` so they outrank
   the runtime's `.fl-ds-page .x` scoping. */

/* ---------- Listing: hero, toolbar, stories ---------- */

.hero--page .hero-lead{max-width:640px;margin-top:14px;}
.hero--page .hero-lead p{font-family:'Mackinac',Georgia,serif;font-size:18px;line-height:1.6;color:var(--ds-color-navy,#23375A);margin:0 0 10px;}
.hero--page .hero-lead p:last-child{margin-bottom:0;}

.toolbar-section{background:var(--ds-color-white,#FEFEFE);border-bottom:1px solid rgba(35,55,90,.06);padding:24px 0;position:sticky;top:0;z-index:5;}
.admin-bar .toolbar-section{top:32px;}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0;}
.filters{display:flex;gap:8px;flex-wrap:wrap;}

.stories-section{background:var(--ds-color-white,#FEFEFE);padding:48px 0 80px;}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;row-gap:44px;}

/* The design system styles .toolbar and .filters as containers but leaves the
   pill search field and the chips to the page, so they are stated here. */

.search-form{display:flex;align-items:center;gap:10px;background:var(--ds-color-buff,#F4EFE9);border-radius:50px;padding:6px 6px 6px 20px;flex:1;max-width:420px;min-width:260px;}
.search-form svg{width:18px;height:18px;flex:0 0 18px;color:var(--ds-color-navy,#23375A);opacity:.55;}
.search-form input{flex:1;min-width:0;background:transparent;border:none;outline:none;font-family:'Mackinac',Georgia,serif;font-size:15px;color:var(--ds-color-navy,#23375A);padding:10px 0;}
.search-form input::placeholder{color:rgba(35,55,90,.45);}
.search-form input:focus-visible{outline:2px solid var(--ds-color-teal,#1E6C82);outline-offset:4px;border-radius:4px;}
.search-form button{background:var(--ds-color-teal,#1E6C82);color:var(--ds-color-white,#FEFEFE);border:none;border-radius:50px;padding:10px 20px;font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:14px;cursor:pointer;transition:background .15s ease;}
.search-form button:hover{background:var(--ds-color-teal-hover,#175566);}

body .filter-chip{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:14px;padding:10px 18px;border-radius:50px;background:var(--ds-color-white,#FEFEFE);color:var(--ds-color-navy,#23375A);border:1.5px solid rgba(35,55,90,.14);line-height:1;transition:all .15s ease;text-decoration:none;display:inline-flex;align-items:center;min-height:40px;}
body .filter-chip:hover{border-color:var(--ds-color-teal,#1E6C82);color:var(--ds-color-teal,#1E6C82);}
body .filter-chip.active{background:var(--ds-color-navy,#23375A);color:var(--ds-color-white,#FEFEFE);border-color:var(--ds-color-navy,#23375A);}

/* ---------- The featured story ---------- */

.featured-card{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-radius:22px;overflow:hidden;background:var(--ds-color-buff,#F4EFE9);margin-bottom:48px;box-shadow:0 8px 24px -14px rgba(35,55,90,.18);transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;color:inherit;}
.featured-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(35,55,90,.22);}
.featured-card .img-wrap{aspect-ratio:4/3;overflow:hidden;position:relative;}
.featured-card .img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.featured-card .body{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center;}
.featured-card .meta-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.featured-card .meta-date{font-family:'Flink',system-ui,Arial,sans-serif;font-size:13px;color:var(--ds-color-navy,#23375A);opacity:.6;}
.featured-card h2{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.14;color:var(--ds-color-navy,#23375A);margin:0 0 14px;text-wrap:balance;}
.featured-card .excerpt{font-family:'Mackinac',Georgia,serif;font-size:16px;line-height:1.6;color:var(--ds-color-navy,#23375A);opacity:.82;margin:0 0 22px;max-width:520px;}
.featured-card .ghost-link{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:15px;color:var(--ds-color-teal,#1E6C82);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;}
.featured-card:hover .ghost-link .arr{transform:translateX(4px);}
.ghost-link .arr{transition:transform .15s ease;}

/* ---------- Cards with no photograph yet ---------- */

.photo-card .img-wrap,.rel-card .rel-img{position:relative;}
.pb-card-placeholder{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,var(--ds-color-mint,#D2F0F0),var(--ds-color-blossom,#FFE2E0) 70%);}

/* ---------- Fundraising tag: the base ships news, stories, research and
   event; this is the fourth, on the same pattern. ---------- */

body .tag-fundraising{background:var(--ds-color-buttercup-soft,#FFF1BE);color:var(--ds-color-teal,#1E6C82);}

/* ---------- Client copy either side of the listing ---------- */

.pb-news-prose{padding-top:8px;}
.pb-news-cta{padding:0 0 8px;}
.pb-subscribe{margin:0;}

/* ---------- Single post ---------- */

/* A post title is a plain heading, not a two-font lockup, so it takes the
   heading face. A title written with a <strong> keeps the lockup. */

.article-head .back-link svg{width:18px;height:18px;}
.article-head .article-meta time,.article-head .article-meta span{font-family:'Flink',system-ui,Arial,sans-serif;}

/* The design's lead image is a full-bleed letterbox band, which crops faces
   out of a portrait or a 16:9 photograph at desktop widths. It is contained
   to the article column instead, at its own aspect ratio, so nothing is cut.
   The head no longer overlaps it, so --offset is not used. */
body .article-hero{height:auto;overflow:visible;background:var(--ds-color-white,#FEFEFE);padding:32px 0 0;}
.article-hero .wrap{max-width:calc(820px + 2 * var(--ds-space-container-pad,40px));}
.article-hero-figure{margin:0;}
.article-hero-figure img,.article-hero-figure picture{display:block;width:100%;height:auto;border-radius:18px;}

/* The head's column is 820px INCLUDING the container padding, while the
   article body is 820px inside it, so the two did not line up.

   The design system emits its rules as `.x, .fl-ds-block .x, .fl-ds-page .x`,
   and fl-ds-page sits on <body>, so a theme override has to carry two classes
   of its own to win. Hence the doubled class throughout this section. */
body .article-head.article-head .wrap{max-width:calc(820px + 2 * var(--ds-space-container-pad,40px));}

/* With no lead image above it the head is the first thing on the page and
   sat flush against the header, so it opens with some air of its own. */
body .article-head.article-head:first-child{padding-top:44px;}
@media (max-width:640px){body .article-head.article-head:first-child{padding-top:28px;}}

/* Headings follow the same ruling as everywhere else: a plain heading takes
   the heading face, one written with a <strong> keeps the two-font lockup. */
body .article-head.article-head h1{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;}
body .article-head.article-head h1:has(strong){font-family:'Mackinac',Georgia,serif;font-weight:500;}
body .article-body.article-body h2,body .article-body.article-body h3,body .article-body.article-body h4{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;}
body .article-body.article-body h2:has(strong),body .article-body.article-body h3:has(strong){font-family:'Mackinac',Georgia,serif;font-weight:500;}

/* An image in the article keeps its own shape and size. The design system
   crops every figure image in an article to 16:10 with object-fit:cover,
   which is right for a designed row and wrong for a photograph inside an
   article, and its own reset stretches images to the column width. Three
   classes here to outrank `.fl-ds-page .article-body figure img`. */
body .article-body.article-body .wp-block-image{margin-left:auto;margin-right:auto;text-align:center;}
body .article-body.article-body .wp-block-image img,
body .article-body.article-body figure img{width:auto;max-width:100%;height:auto;aspect-ratio:auto;object-fit:fill;border-radius:14px;}
/* WordPress gives a lazy image `contain:size` with a 3000x1500 placeholder
   size, and where that sticks the image is laid out at 1500px tall whatever
   its real shape. Dropping size containment on article images is what undoes
   it: `contain-intrinsic-size:auto` on its own is not valid CSS and is
   thrown away. */
body .article-body.article-body img{contain:none;contain-intrinsic-size:none;}

/* The article row carries a section's worth of top padding, which on top of
   the head's own spacing left a hole between the meta line and the first
   paragraph. */
body .row.row--pad-article{padding-top:24px;}
body .article-body figcaption{font-family:'Mackinac',Georgia,serif;font-size:15px;line-height:1.5;color:var(--ds-color-text-muted,rgba(35,55,90,.72));margin-top:10px;}
/* ---------- Search results ---------- */

.pb-listing{background:var(--ds-color-white,#FEFEFE);padding:40px 0 96px;}
.pb-empty{font-size:18px;line-height:1.6;}
.pb-empty a{color:var(--ds-color-teal,#1E6C82);font-weight:600;border-bottom:1px solid rgba(30,108,130,.25);}
.pb-results{max-width:820px;}
.pb-result{padding:26px 0;border-bottom:1px solid var(--ds-color-border-subtle,#EDEAE7);}
.pb-result:first-child{padding-top:0;}
.pb-result .meta-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pb-result .meta-date{font-size:13px;color:var(--ds-color-navy,#23375A);opacity:.6;}
.pb-result h2{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:22px;line-height:1.25;margin:0 0 8px;}
.pb-result h2 a{color:var(--ds-color-navy,#23375A);border-bottom:2px solid transparent;}
.pb-result h2 a:hover{color:var(--ds-color-teal,#1E6C82);border-bottom-color:var(--ds-color-teal,#1E6C82);}
.pb-result p{font-size:16px;line-height:1.6;color:var(--ds-color-navy,#23375A);opacity:.85;margin:0;}
.pb-result .tag-page{background:var(--ds-color-lavender-light,#E5E3F8);color:var(--ds-color-plum,#504B7D);}
.pb-search-lead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:36px;}
.pb-search-lead .search-form{margin:0;}
.pb-search-lead p{font-size:18px;line-height:1.5;margin:0;}

/* ---------- 404 ---------- */

.pb-notfound .search-form{max-width:520px;margin:28px 0 8px;}
.pb-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
/* the design system paints every .inner-content .btn white; outline pills keep navy text */
.fl-ds-page .inner-content .pb-links .btn-outline-navy{color:var(--ds-color-navy,#23375A);}
.fl-ds-page .inner-content .pb-links .btn-outline-navy:hover{color:var(--ds-color-white,#FEFEFE);}

/* ---------- Pagination ---------- */

.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:64px;flex-wrap:wrap;}
.pagination .page-numbers{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ds-color-navy,#23375A);border:1.5px solid transparent;transition:all .15s ease;}
.pagination a.page-numbers:hover{border-color:var(--ds-color-teal,#1E6C82);color:var(--ds-color-teal,#1E6C82);}
.pagination .page-numbers.current{background:var(--ds-color-navy,#23375A);color:var(--ds-color-white,#FEFEFE);}
.pagination .arrow svg{width:16px;height:16px;}
.pagination .dots{border:none;opacity:.5;}

/* ---------- Narrower screens ---------- */

@media (max-width:980px){
	.posts-grid{grid-template-columns:1fr 1fr;}
	.featured-card{grid-template-columns:1fr;}
	.featured-card .body{padding:32px 28px;}
}
@media (max-width:782px){
	.admin-bar .toolbar-section{top:46px;}
}
@media (max-width:700px){
	.toolbar{flex-direction:column;align-items:stretch;gap:16px;}
	.toolbar-section{position:static;}
	/* Column flex items keep their intrinsic width unless told otherwise, so
	   the search pill and the chip row would both push past the container. */
	.toolbar > *{min-width:0;max-width:100%;}
	.search-form{max-width:none;min-width:0;width:100%;}
	.filters{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
	.filters::-webkit-scrollbar{display:none;}
	.filters .filter-chip{flex:0 0 auto;}
}
@media (max-width:620px){
	.posts-grid{grid-template-columns:1fr;}
	.stories-section{padding:32px 0 56px;}
}

/* ---------------------------------------------------------------------------
 * Format filters: chips on wide screens, a select on phones.
 * Nine chips in a 287px strip can only scroll sideways, and it scrolls with no
 * scrollbar to say so. Below 700px the chips are hidden and the same choices
 * appear as a select. Both are in the markup: the select is a plain GET form,
 * so it works with JavaScript off, and js/pb-filters.js only submits on change
 * and drops the Go button.
 *
 * The chip colours are restated at four classes because the design system
 * paints every link inside .inner-content teal, and the hub's toolbar sits
 * inside the page's own content. An active chip came out teal on navy, about
 * 1.6:1, which is nowhere near readable.
 * ------------------------------------------------------------------------ */
.toolbar-section .toolbar .filters .filter-chip{color:var(--ds-color-navy,#23375A);}
.toolbar-section .toolbar .filters .filter-chip:hover{color:var(--ds-color-teal,#1E6C82);}
.toolbar-section .toolbar .filters .filter-chip.active{color:var(--ds-color-white,#FEFEFE);}

.filter-select{display:none;gap:8px;align-items:center;width:100%;margin:0;}
.filter-select select{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ds-color-navy,#23375A);background-color:var(--ds-color-white,#FEFEFE);border:1.5px solid rgba(35,55,90,.18);border-radius:50px;padding:12px 46px 12px 18px;min-height:48px;width:100%;flex:1 1 auto;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323375A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px 18px;}
.filter-select select:focus-visible{outline:2px solid var(--ds-color-teal,#1E6C82);outline-offset:2px;}
.filter-select-go{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ds-color-white,#FEFEFE);background:var(--ds-color-navy,#23375A);border:0;border-radius:50px;padding:12px 22px;min-height:48px;flex:0 0 auto;cursor:pointer;}
.filter-select[data-auto="1"] .filter-select-go{display:none;}

@media (max-width:700px){
	.toolbar .filters{display:none;}
	.toolbar .filter-select{display:flex;}
}

/* Pagination: the inactive circles carried border:1.5px solid transparent and
   only ever got a colour on hover, so they read as floating numbers with no
   affordance. Give them the border they were always sized for. */
.pagination a.page-numbers{border-color:var(--ds-color-border-card,rgba(35,55,90,.10));}
.pagination a.page-numbers:hover{border-color:var(--ds-color-teal,#1E6C82);color:var(--ds-color-teal,#1E6C82);}
.pagination .page-numbers.current{border-color:var(--ds-color-navy,#23375A);}
.pagination .dots{border-color:transparent;}

/* ------------------------------------------------------------------
   Search results and 404 (search.php, 404.php, inc/search-helpers.php)
   Same hero and toolbar as News and stories. Muted text here uses a
   darker grey than the design system's, to pass 4.5:1 on white.
   ------------------------------------------------------------------ */

.pb-search-toolbar .toolbar {
	flex-wrap: wrap;
}

.pb-search-toolbar .filter-chip .pb-chip-count {
	font-variant-numeric: tabular-nums;
	opacity: .75;
	margin-left: 4px;
}

body .row.pb-search-results {
	padding-top: 24px;
}

body .row.pb-search-empty {
	padding-top: 40px;
}

body .pb-search-results .pb-results {
	max-width: 880px;
}

body .pb-result--thumb {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px;
	gap: 28px;
	align-items: start;
}

body .pb-result-thumb {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--ds-color-buff, #F4EFE9);
}

body .pb-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body .pb-result .pb-result-meta,
body .pb-result .meta-date {
	font-size: 13px;
	color: #5E6A7D;
	opacity: 1;
}

body .pb-result .tag-resource {
	background: var(--ds-color-mint-light, #DDF3EC);
	color: var(--ds-color-navy, #23375A);
}

body .pb-result .tag-job {
	background: var(--ds-color-buff, #F4EFE9);
	color: var(--ds-color-navy, #23375A);
}

body .pb-search-empty .pb-page-blocks {
	padding-block: 8px 24px;
}

@media (max-width: 560px) {

	body .pb-result--thumb {
		grid-template-columns: minmax(0, 1fr) 88px;
		gap: 16px;
	}
}