/*
Theme Name: Project Hope for Palestine
Theme URI: https://phfp.org
Author: Saleem
Author URI: https://progressus.io
Description: Custom block theme for Project Hope for Palestine. Built from scratch — no page builder, no framework. Editorial layout, brand teal palette, and a CSS-only synchronised hero where the words and the photographs advance together.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phfp
Tags: block-theme, non-profit, editorial, accessibility-ready
*/

/* ═══════════════════════════════════════════════════════════
   1. Base
   ═══════════════════════════════════════════════════════════ */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }

:root {
  /* the design is drawn at 1440 with a flat 120px gutter; 8.34vw hits
     exactly that at 1440 and scales down proportionally below it */
  --phfp-gutter: clamp(20px, 8.34vw, 120px);
}

/* the site frame: every band goes edge to edge, the content inside is padded */
.phfp-band { padding-inline: var(--phfp-gutter); }

/* ═══════════════════════════════════════════════════════════
   2. Small pieces core blocks cannot express
   ═══════════════════════════════════════════════════════════ */

/* eyebrow: a short rule followed by spaced capitals */
.phfp-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--wp--preset--color--red);
}
.phfp-eyebrow::before {
  content: ""; width: 26px; height: 1px; flex: none;
  background: currentColor;
}
/* inside the hero, .phfp-slide p sets the body colour and outweighs the
   single class above, so the eyebrow has to take its red back here */
.phfp-slide p.phfp-eyebrow { color: var(--wp--preset--color--red); }
.phfp-eyebrow--deep { color: var(--wp--preset--color--deep); }
.phfp-eyebrow--pale { color: var(--wp--preset--color--pale); }

/* a hairline that fills the space between a heading and a note */
.phfp-rule { flex: 1 1 auto; height: 1px; background: var(--wp--preset--color--line); }
.phfp-rule--dark { background: rgba(245, 242, 236, .14); }

/* photo caption under a field photograph */
.phfp-figure figcaption {
  margin-top: 11px; font-size: 13.5px; line-height: 1.6;
  color: var(--wp--preset--color--muted);
}
.phfp-figure--dark figcaption { color: var(--wp--preset--color--dim); }

/* the placeholder we show where a photograph is still owed */
.phfp-needed {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 210px; border-radius: 14px;
  background: #E7E4DC; border: 1px dashed #B4AFA2;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: #8A857A; text-align: center; line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   3. Header
   ═══════════════════════════════════════════════════════════ */

.phfp-header {
  background: var(--wp--preset--color--ink);
  border-bottom: 1px solid rgba(245, 242, 236, .10);
  padding: 22px var(--phfp-gutter);
}
.phfp-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  max-width: var(--wp--style--global--wide-size); margin-inline: auto;
}
/* the right-hand cluster is a group block, so it arrives with the root
   block gap on top and pushes the header 24px taller than the design */
.phfp-header__inner > * { margin-block-start: 0; }
.phfp-header .custom-logo-link img,
.phfp-header .wp-block-site-logo img { height: 42px; width: auto; display: block; }

.phfp-nav { display: flex; align-items: center; gap: 34px; }
.phfp-nav .wp-block-navigation__container { gap: 34px; }
.phfp-nav a {
  font-size: 14.5px; font-weight: 500; color: #D3DEDF;
  transition: color .18s ease;
}
.phfp-nav a:hover,
.phfp-nav .current-menu-item > a { color: var(--wp--preset--color--pale); }

.phfp-donate {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wp--preset--color--teal); color: #04151A;
  font-size: 14.5px; font-weight: 600; line-height: 1.33; padding: 12px 22px;
  border-radius: 999px; white-space: nowrap; transition: background .18s ease;
}
.phfp-donate:hover { background: var(--wp--preset--color--pale); color: #04151A; }

/* burger, phone only */
.phfp-burger { display: none; flex-direction: column; gap: 4px; padding: 6px 2px; background: none; border: 0; cursor: pointer; }
.phfp-burger span { width: 20px; height: 1.5px; background: var(--wp--preset--color--cream); display: block; }
.phfp-burger span:last-child { width: 13px; }

/* ═══════════════════════════════════════════════════════════
   4. Hero — the words and the photographs advance together.
      CSS only: no JavaScript, no slider library.
   ═══════════════════════════════════════════════════════════ */

.phfp-hero {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  padding: clamp(44px, 6vw, 76px) var(--phfp-gutter) clamp(52px, 7vw, 88px);
}
.phfp-hero__inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.4vw, 64px); align-items: center;
  max-width: var(--wp--style--global--wide-size); margin-inline: auto;
}
.phfp-hero__left { display: flex; flex-direction: column; gap: 30px; }

/* the two stacks that cross-fade in step */
.phfp-sync { position: relative; }
.phfp-sync > * {
  position: absolute; inset: 0; opacity: 0;
  animation: phfp-sync 21s linear infinite;
}
/* The text stack sizes itself to its tallest slide instead of a fixed height:
   a hard-coded height let the longest slide run under the buttons at some
   widths. The slides share one grid cell, so they still cross-fade in place. */
.phfp-sync--text  { display: grid; height: auto; }
.phfp-sync--text > * { position: relative; inset: auto; grid-area: 1 / 1; }
.phfp-sync--shots { height: 480px; }

.phfp-sync > :nth-child(1) { animation-delay: 0s; }
.phfp-sync > :nth-child(2) { animation-delay: 7s; }
.phfp-sync > :nth-child(3) { animation-delay: 14s; }

@keyframes phfp-sync {
  0%   { opacity: 0; transform: translateY(14px); }
  2.5% { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.phfp-slide h1 { margin: 20px 0 0; color: var(--wp--preset--color--cream); }
.phfp-slide h1 em { font-style: normal; color: var(--wp--preset--color--pale); }
.phfp-slide p {
  margin: 22px 0 0; font-size: var(--wp--preset--font-size--lead);
  line-height: 1.7; color: var(--wp--preset--color--dim); max-width: 480px;
}

/* the four photographs of one slide */
.phfp-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.phfp-shots__col { display: flex; flex-direction: column; gap: 16px; }
.phfp-shots__col:first-child { padding-top: 42px; }
.phfp-shots img { width: 100%; object-fit: cover; border-radius: 20px; display: block; }
.phfp-shots img.is-tall  { height: 232px; }
.phfp-shots img.is-short { height: 190px; }

/* actions + slide dots */
.phfp-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.phfp-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15.5px; font-weight: 600; line-height: 1.1; padding: 16px 30px;
  border-radius: 999px; transition: background .18s ease, border-color .18s ease;
  box-sizing: border-box; /* so width:100% buttons stay inside their container */
}
.phfp-btn--solid { background: var(--wp--preset--color--teal); color: #04151A; }
.phfp-btn--solid:hover { background: var(--wp--preset--color--pale); color: #04151A; }
.phfp-btn--ghost { border: 1px solid rgba(245, 242, 236, .28); color: var(--wp--preset--color--cream); font-weight: 500; }
.phfp-btn--ghost:hover { border-color: rgba(245, 242, 236, .6); }

.phfp-dots { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.phfp-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(245, 242, 236, .22);
  animation: phfp-dot 21s linear infinite;
}
.phfp-dots span:nth-child(1) { animation-delay: 0s; }
.phfp-dots span:nth-child(2) { animation-delay: 7s; }
.phfp-dots span:nth-child(3) { animation-delay: 14s; }
@keyframes phfp-dot {
  0%, 32%   { background: var(--wp--preset--color--teal); }
  34%, 100% { background: rgba(245, 242, 236, .22); }
}

/* partners line under the hero */
.phfp-partners {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid rgba(245, 242, 236, .10);
  font-size: 14px; color: var(--wp--preset--color--dim);
}
.phfp-partners b {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--wp--preset--color--dimmer);
}
.phfp-partners i { width: 4px; height: 4px; border-radius: 50%; background: #384B4E; }

/* anyone who asked their system not to animate gets the first slide, still */
@media (prefers-reduced-motion: reduce) {
  .phfp-sync > *, .phfp-dots span { animation: none; }
  .phfp-sync > :first-child { opacity: 1; transform: none; }
  .phfp-dots span:first-child { background: var(--wp--preset--color--teal); }
}

/* ═══════════════════════════════════════════════════════════
   5. Stats
   ═══════════════════════════════════════════════════════════ */

.phfp-stat { padding-left: 18px; border-left: 2px solid var(--wp--preset--color--teal); }
.phfp-stat b {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: var(--wp--preset--font-size--stat); line-height: 1;
  color: var(--wp--preset--color--cream);
}
.phfp-stat span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--wp--preset--color--dim); }
.phfp-stat--red { border-left-color: var(--wp--preset--color--red); }

/* ═══════════════════════════════════════════════════════════
   6. Program cards
   ═══════════════════════════════════════════════════════════ */

.phfp-card {
  display: flex; flex-direction: column; background: var(--wp--preset--color--paper);
  border-radius: 20px; overflow: hidden; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.phfp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12, 34, 42, .10); }
.phfp-card img { width: 100%; height: 218px; object-fit: cover; display: block; }
.phfp-card__body { display: flex; flex-direction: column; gap: 9px; padding: 26px 26px 30px; }
.phfp-card h3 { margin: 0; color: var(--wp--preset--color--darktx); }
.phfp-card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--wp--preset--color--muted); }
.phfp-card--sm img { height: 162px; }
.phfp-card--sm .phfp-card__body { padding: 22px 22px 26px; }

/* ═══════════════════════════════════════════════════════════
   7. Footer
   ═══════════════════════════════════════════════════════════ */

.phfp-footer {
  background: var(--wp--preset--color--footer); color: var(--wp--preset--color--cream);
  padding: clamp(48px, 6vw, 72px) var(--phfp-gutter) 34px;
}
.phfp-footer__inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.phfp-footer__cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px;
  padding-bottom: 50px; border-bottom: 1px solid rgba(245, 242, 236, .10);
}
.phfp-footer h4 {
  margin: 0 0 4px; font-family: var(--wp--preset--font-family--body);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: #586B6E;
}
.phfp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.phfp-footer li, .phfp-footer p { font-size: 14.5px; color: #AEBFC1; }
/* the design puts its footer links on a 30px pitch; the inherited body
   line-height made each one 6px taller than that */
.phfp-footer li { line-height: 1.12; }
.phfp-footer a { color: #AEBFC1; }
.phfp-footer a:hover { color: var(--wp--preset--color--pale); }
.phfp-footer img { height: 42px; width: auto; display: block; }
.phfp-footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: #526265;
}
.phfp-pending {
  font-size: 13px; color: #C9A961; background: rgba(201, 169, 97, .12);
  padding: 7px 14px; border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════
   8. Responsive
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  /* height is content-driven; see the grid stack above */
  .phfp-sync--shots { height: 400px; }
  .phfp-shots img.is-tall  { height: 192px; }
  .phfp-shots img.is-short { height: 156px; }
  .phfp-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .phfp-hero__inner { grid-template-columns: 1fr; }
  .phfp-sync--text  { height: auto; }
  .phfp-sync--text > * { position: relative; inset: auto; }
  /* on one column the text stack would collapse, so show slide one and let the
     photographs keep moving - the words stay readable and nothing jumps */
  /* No-JS fallback only. With JS the active slide is chosen by .is-active
     below; leaving this unscoped hid slide one AND the active slide at the
     same time, so the hero text vanished after the first transition. */
  .phfp-hero:not(.is-js) .phfp-sync--text > *:not(:first-child) { display: none; }
  .phfp-hero:not(.is-js) .phfp-sync--text > :first-child { opacity: 1; animation: none; transform: none; }
  .phfp-dots { display: none; }
  .phfp-sync--shots { height: 360px; }
  .phfp-shots__col:first-child { padding-top: 0; }
  .phfp-shots img.is-tall  { height: 172px; }
  .phfp-shots img.is-short { height: 172px; }
}

@media (max-width: 782px) {
  /* the navigation block hides its own links and shows its own burger */
  .phfp-header__inner { gap: 16px; }
}

@media (max-width: 600px) {
  .phfp-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .phfp-hero__actions { gap: 10px; }
  /* only the hero pair goes full width; the header button must not */
  .phfp-hero__actions .phfp-btn { width: 100%; justify-content: center; }
  .phfp-card img { height: 190px; }
  .phfp-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   9. Block-level pieces the editor writes
   ═══════════════════════════════════════════════════════════ */

/* an eyebrow written as a paragraph keeps its rule */
p.phfp-eyebrow { margin: 0 0 18px; }

/* stat: the figure and its label are both paragraphs (a bare number
   is not a section heading, and the outline should not claim it is) */
.phfp-stat .phfp-stat__n {
  margin: 0; font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: var(--wp--preset--font-size--stat);
  line-height: 1; letter-spacing: 0; color: var(--wp--preset--color--cream);
}
.phfp-stat p:not(.phfp-stat__n) {
  margin: 8px 0 0; font-size: 14.5px; line-height: 1.5;
  color: var(--wp--preset--color--dim);
}

/* program card headings sit tighter than the global h3 */
.phfp-card h3 { font-size: 25px; line-height: 1.18; }
.phfp-card--sm h3 { font-size: 21px; }

/* header right-hand cluster */
.phfp-header__right { gap: 34px; }

/* core image blocks inside our cards must fill the card edge to edge */
.phfp-card .wp-block-image { margin: 0; }
.phfp-card .wp-block-image img { border-radius: 0; }

/* the site logo block */
.wp-block-site-logo img { height: 42px; width: auto; }

/* keep the editor honest: the canvas should look like the front end */
.editor-styles-wrapper .phfp-hero { color: var(--wp--preset--color--cream); }

/* slides two and three repeat the headline's look without a second h1 */
.phfp-slide .phfp-h1 {
  margin: 20px 0 0; max-width: none;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: var(--wp--preset--font-size--display-xl);
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--wp--preset--color--cream);
}
.phfp-slide .phfp-h1 em { font-style: normal; color: var(--wp--preset--color--pale); }

/* section rhythm tightens on small screens */
@media (max-width: 860px) {
  .phfp-band[style*="--wp--preset--spacing--60"] { padding-block: 56px !important; }
}

/* ═══════════════════════════════════════════════════════════
   10. Fixed media heights
   The design crops every photograph to a set height; a plain image
   block would honour its own aspect ratio instead, which is what made
   the portrait shots stretch their sections out of shape.
   ═══════════════════════════════════════════════════════════ */

/* core's own image rule is `.wp-block-image img { height: auto }` and it is
   enqueued after the theme, so a single class only ties with it and loses.
   Compounding the class onto .wp-block-image wins the cascade honestly,
   without reaching for !important. */
.wp-block-image.phfp-media-470 img,
.wp-block-image.phfp-media-440 img,
.wp-block-image.phfp-media-178 img,
.phfp-card .wp-block-image img {
  width: 100%; object-fit: cover; display: block;
}
.wp-block-image.phfp-media-470 img { height: 470px; }
.wp-block-image.phfp-media-440 img { height: 440px; }
.wp-block-image.phfp-media-178 img { height: 178px; }
.phfp-card .wp-block-image img { height: 218px; }
.phfp-card--sm .wp-block-image img { height: 162px; }

/* image blocks carry their own margins; inside our layouts they should not */
.phfp-media-470, .phfp-media-440, .phfp-media-178 { margin: 0; }

/* the quote card lifts over the bottom-left corner of the portrait */
/* The quote hangs over the photograph without taking part in the flow —
   a negative margin would work visually but would still add its own
   height to the section, which is what the design does not do. */
.wp-block-column.phfp-quote-host { position: relative; }
.wp-block-column > .phfp-quote {
  position: absolute; left: -28px; bottom: 34px; z-index: 1;
  margin: 0; max-width: 244px;
}

/* every card in a row ends level with its neighbours */
.wp-block-columns .wp-block-column > .phfp-card { height: 100%; }
.phfp-card__body { flex-grow: 1; }

/* the core-relief columns keep their labels on one baseline */
.phfp-relief-row .wp-block-column { display: flex; flex-direction: column; gap: 13px; }
.phfp-relief-row .wp-block-column > * { margin: 0; }

/* closing call to action: headline left, button right */
.phfp-cta { gap: 40px; }
.phfp-cta > h2 { max-width: 760px; flex: 1 1 520px; margin: 0; }
.phfp-cta > .phfp-btn { flex: 0 0 auto; }

@media (max-width: 860px) {
  .wp-block-image.phfp-media-470 img { height: 340px; }
  .wp-block-image.phfp-media-440 img { height: 300px; }
  /* no room to hang it on a narrow screen: put it back in the flow */
  .wp-block-column > .phfp-quote { position: relative; z-index: 2; margin: -28px 0 0 0; max-width: none; }
}

/* Card bodies: the block editor puts its own 24px gap between the heading and
   the paragraph. The design sets 9px, so take the spacing back — the layout
   rule is emitted as `.wp-container-… > * + *`, hence the extra step here. */
.phfp-card > .phfp-card__body {
  display: flex; flex-direction: column; gap: 9px;
}
.phfp-card > .phfp-card__body > * { margin-block: 0; }

/* same story inside the relief column and the stat block */
.phfp-relief-row .wp-block-column > * { margin-block: 0; }
.phfp-stat > * { margin-block: 0; }
.phfp-stat > p { margin-block-start: 8px; }

/* A group block inserts 24px between its children. Our cards want the image
   flush against the body, so take that gap back where we set our own spacing. */
.wp-block-group.phfp-card > * + * { margin-block-start: 0; }
.wp-block-group.phfp-card > .wp-block-image { margin-block: 0; }

/* The navigation block sets `color: inherit` on its links with a stronger
   selector than a plain `.phfp-nav a`, so the colour has to be set on the
   container for the links to inherit the right one. */
.phfp-header .phfp-nav,
.phfp-header .phfp-nav a,
.phfp-header .wp-block-navigation-item__content { color: #D3DEDF; }
.phfp-header .phfp-nav a:hover,
.phfp-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--pale); }
.phfp-header .wp-block-navigation .wp-block-navigation-item__content { font-size: 14.5px; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   11. Bands must touch
   WordPress separates every top-level block with the root block gap
   (`:where(.wp-site-blocks) > *`, 24px). On a page built from full-width
   colour bands that gap shows through as a cream stripe between sections.
   The :where() wrapper gives that rule zero specificity, so a plain class
   selector is enough to take it back — paragraph spacing is untouched.
   ═══════════════════════════════════════════════════════════ */

.wp-site-blocks > * { margin-block-start: 0; }
main.wp-block-group > * { margin-block-start: 0; }

/* An inner page puts its sections inside the post content, which is its own
   flow layout with its own 24px gap. Not every section carries .phfp-band
   (.phfp-strip is a raw HTML block), so this covers the lot. A report body
   keeps its rhythm from .phfp-article p, further down. */
.wp-block-post-content > * { margin-block-start: 0; }

/* ═══════════════════════════════════════════════════════════
   12. Inner pages
   ═══════════════════════════════════════════════════════════ */

/* a highlighted word inside any display heading */
h1 em, h2 em, h3 em, .phfp-h1 em { font-style: normal; color: var(--wp--preset--color--pale); }
.has-cream-background-color h1 em,
.has-cream-background-color h2 em,
.has-paper-background-color h2 em { color: var(--wp--preset--color--deep); }

/* fixed media heights used by the inner heroes */
.wp-block-image.phfp-media-420 img { height: 420px; }
.wp-block-image.phfp-media-400 img { height: 400px; }
.wp-block-image.phfp-media-340 img { height: 340px; }
.wp-block-image.phfp-media-420 img,
.wp-block-image.phfp-media-400 img,
.wp-block-image.phfp-media-340 img { width: 100%; object-fit: cover; display: block; }
.phfp-media-420, .phfp-media-400, .phfp-media-340 { margin: 0; }

/* generic grid used by every card row */
.phfp-grid { display: grid; gap: 24px; }
.phfp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phfp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }

/* full-width pull quote between two text columns */
.phfp-pull {
  margin-top: 54px; padding: 46px 0; text-align: center;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.32;
  color: var(--wp--preset--color--darktx);
}

/* four photographs, edge to edge, no gaps */
.phfp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--wp--preset--color--ink); }
.phfp-strip img { width: 100%; height: 230px; object-fit: cover; display: block; }

/* the six principles */
.phfp-principle { padding-top: 20px; border-top: 2px solid var(--wp--preset--color--deep); }
.phfp-principle h3 { margin: 0 0 10px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--wp--preset--color--darktx); }
.phfp-principle p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--wp--preset--color--bodytx); }

/* partners */
.phfp-partner { padding: 26px 28px; background: var(--wp--preset--color--paper); border-radius: 14px; }
.phfp-partner h3 { margin: 0 0 9px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 22px; line-height: 1.24; color: var(--wp--preset--color--darktx); }
.phfp-partner p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--bodytx); }

/* fiscal sponsor block */
.phfp-sponsor { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; margin-top: 56px; padding-top: 52px; border-top: 1px solid var(--wp--preset--color--line); }
.phfp-sponsor h2 { margin: 10px 0 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 34px; line-height: 1.16; color: var(--wp--preset--color--darktx); }
.phfp-sponsor p { margin: 0 0 14px; font-size: 17px; line-height: 1.78; color: var(--wp--preset--color--bodytx); }

/* program rows on Our Work */
.phfp-rows { display: flex; flex-direction: column; }
.phfp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 42px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.phfp-row img, .phfp-row .phfp-needed { width: 100%; height: 310px; object-fit: cover; border-radius: 18px; display: block; }
.phfp-row__n { display: block; font-family: var(--wp--preset--font-family--display); font-size: 30px; line-height: 1; color: var(--wp--preset--color--deep); }
.phfp-row__text h3 { margin: 13px 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 34px; line-height: 1.14; letter-spacing: -0.012em; color: var(--wp--preset--color--darktx); }
.phfp-row__text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.76; color: var(--wp--preset--color--bodytx); }
.phfp-row__more { font-size: 15px; font-weight: 600; color: var(--wp--preset--color--deep); }

/* core relief cells */
.phfp-relief img { width: 100%; height: 172px; object-fit: cover; border-radius: 14px; display: block; }
.phfp-relief h3 { margin: 13px 0 6px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 21px; color: var(--wp--preset--color--cream); }
.phfp-relief p { margin: 0; font-size: 14.5px; line-height: 1.62; color: #869C9F; }

/* the six big figures on Impact */
.phfp-bigstat { padding: 30px 30px 32px; background: var(--wp--preset--color--paper); border-top: 3px solid var(--wp--preset--color--deep); }
.phfp-bigstat b { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 54px; line-height: .95; color: var(--wp--preset--color--deep); }
.phfp-bigstat strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--wp--preset--color--darktx); }
.phfp-bigstat span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* where we work */
.phfp-place { background: var(--wp--preset--color--paper); border-radius: 14px; overflow: hidden; }
.phfp-place img, .phfp-place .phfp-needed { width: 100%; height: 200px; object-fit: cover; display: block; }
.phfp-place > div:last-child { padding: 24px 26px 28px; }
.phfp-place h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 24px; color: var(--wp--preset--color--darktx); }
.phfp-place p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--wp--preset--color--bodytx); }

/* ways to give */
.phfp-give { display: flex; flex-direction: column; gap: 12px; padding: 32px 32px 34px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; }
.phfp-give h3 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--wp--preset--color--darktx); }
.phfp-give p { margin: 0; flex-grow: 1; font-size: 15.5px; line-height: 1.7; color: var(--wp--preset--color--bodytx); }
.phfp-give__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 8px; padding: 15px 26px; border-radius: 999px; background: var(--wp--preset--color--deep); color: #fff; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: background .18s ease; }
.phfp-give__btn:hover { background: #00565E; color: #fff; }
.phfp-give__note { max-width: 760px; margin: 30px 0 0; font-size: 16px; line-height: 1.75; color: var(--wp--preset--color--bodytx); }
.phfp-give__note a { color: var(--wp--preset--color--deep); font-weight: 600; }

.phfp-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.phfp-list li { font-size: 15.5px; color: var(--wp--preset--color--cream); }
.phfp-list li::before { content: "— "; color: var(--wp--preset--color--pale); }

/* questions */
.phfp-faq__item { padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.phfp-faq__item h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 23px; line-height: 1.3; color: var(--wp--preset--color--darktx); }
.phfp-faq__item p { margin: 0; max-width: 880px; font-size: 16px; line-height: 1.72; color: var(--wp--preset--color--bodytx); }

/* contact cards */
.phfp-contact { display: flex; flex-direction: column; gap: 11px; padding: 30px 32px; border: 1px solid rgba(245,242,236,.12); border-radius: 16px; }
.phfp-contact b { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--wp--preset--color--cream); }
.phfp-contact b.is-small { font-size: 23px; line-height: 1.3; }
.phfp-contact b.is-mid { font-size: 26px; }
.phfp-contact p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--dim); }

.phfp-where { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--wp--preset--color--line); }
.phfp-where p { margin: 7px 0 0; font-size: 17px; color: var(--wp--preset--color--darktx); }

/* contact form */
.phfp-form { display: flex; flex-direction: column; gap: 16px; }
.phfp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.phfp-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--bodytx); }
.phfp-form input, .phfp-form textarea {
  font: inherit; font-size: 16px; color: var(--wp--preset--color--darktx);
  padding: 14px 16px; background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
}
.phfp-form input { height: 50px; }
.phfp-form input:focus, .phfp-form textarea:focus { outline: 2px solid var(--wp--preset--color--deep); outline-offset: 1px; border-color: transparent; }
.phfp-form__send {
  align-self: flex-start; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  padding: 17px 34px; border: 0; border-radius: 999px;
  background: var(--wp--preset--color--deep); color: #fff;
}
.phfp-form__send:hover { background: var(--wp--preset--color--teal); color: #04151A; }

.phfp-pending--block { display: block; margin-top: 34px; padding: 18px 22px; border-radius: 10px; line-height: 1.6; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .phfp-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phfp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .phfp-grid--3 { grid-template-columns: 1fr; }
  .phfp-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phfp-row, .phfp-row--flip { grid-template-columns: 1fr; gap: 26px; }
  .phfp-row--flip .phfp-row__media { order: -1; }
  .phfp-sponsor { grid-template-columns: 1fr; gap: 26px; }
  .phfp-form__row { grid-template-columns: 1fr; }
  .wp-block-image.phfp-media-420 img { height: 300px; }
  .wp-block-image.phfp-media-400 img { height: 280px; }
  .wp-block-image.phfp-media-340 img { height: 260px; }
}
@media (max-width: 600px) {
  .phfp-grid--5 { grid-template-columns: 1fr; }
  .phfp-strip { grid-template-columns: 1fr; }
}

/* ── program pages ── */
.phfp-crumbs { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; font-size: 13px; color: var(--wp--preset--color--dimmer); }
.phfp-crumbs a { color: var(--wp--preset--color--dimmer); }
.phfp-crumbs a:hover { color: var(--wp--preset--color--pale); }
.phfp-crumbs span { color: #384B4E; }
.phfp-crumbs b { font-weight: 400; color: var(--wp--preset--color--pale); }

.phfp-prog__n { display: block; margin-bottom: 6px; font-family: var(--wp--preset--font-family--display); font-size: 34px; line-height: 1; color: var(--wp--preset--color--red); }

.phfp-def { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; padding: 44px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.phfp-def:first-child { padding-top: 0; }
.phfp-def h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; color: var(--wp--preset--color--darktx); }
.phfp-def p { margin: 0; font-size: 18px; line-height: 1.8; color: var(--wp--preset--color--bodytx); }
.wp-block-image.phfp-media-380 img { width: 100%; height: 380px; object-fit: cover; display: block; }
.phfp-media-380 { margin: 26px 0 0; }

.phfp-makes { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.phfp-makes p { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.34; color: var(--wp--preset--color--cream); }

.phfp-galhead { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.phfp-galhead h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--wp--preset--color--cream); }
.phfp-galhead em { font-style: normal; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--dimmer); }
.phfp-galhead--light h2 { color: var(--wp--preset--color--darktx); }
.phfp-galhead--light a { font-size: 14.5px; font-weight: 600; color: var(--wp--preset--color--deep); }

.phfp-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.phfp-gal figure { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.phfp-gal img { width: 100%; height: 250px; object-fit: cover; border-radius: 14px; display: block; }
.phfp-gal figcaption { font-size: 13.5px; line-height: 1.6; color: var(--wp--preset--color--dim); }

.phfp-next { display: block; padding: 24px 26px 26px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.phfp-next:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12,34,42,.10); }
.phfp-next span { font-family: var(--wp--preset--font-family--display); font-size: 20px; color: var(--wp--preset--color--deep); }
.phfp-next h3 { margin: 4px 0 10px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--wp--preset--color--darktx); }
.phfp-next em { font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--wp--preset--color--deep); }

@media (max-width: 1100px) { .phfp-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .phfp-def, .phfp-makes { grid-template-columns: 1fr; gap: 18px; }
  .phfp-gal { grid-template-columns: 1fr; }
  .wp-block-image.phfp-media-380 img { height: 260px; }
}

/* ═══════════════════════════════════════════════════════════
   13. Clickable program cards
   One real link per card (the heading), stretched over the whole card so the
   image and the text are clickable too — without inventing a second link for
   a screen reader to read out.
   ═══════════════════════════════════════════════════════════ */

.phfp-card { position: relative; }
.phfp-card h3 a { color: inherit; }
.phfp-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.phfp-card:hover h3 a { color: var(--wp--preset--color--deep); }
.phfp-card h3 a:focus-visible { outline: none; }
.phfp-card:has(h3 a:focus-visible) { outline: 2px solid var(--wp--preset--color--deep); outline-offset: 3px; }
/* The design gives these cards no "read more" line, and adding one made
   every card 43px taller than the mock-up. The whole card is a link, so
   the pointer and the heading colour carry the affordance instead. */
.phfp-card { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   14. Hero slides under mouse control
   The keyframes above are the no-JavaScript baseline. When hero.js loads it
   adds .is-js, which hands the timing over and lets the dots be clicked.
   ═══════════════════════════════════════════════════════════ */

.phfp-hero.is-js .phfp-sync > * {
  animation: none; opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
.phfp-hero.is-js .phfp-sync > .is-active { opacity: 1; transform: none; pointer-events: auto; }
.phfp-hero.is-js .phfp-dots span { animation: none; }

.phfp-hero.is-js .phfp-dots { gap: 10px; }
.phfp-hero.is-js .phfp-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(245, 242, 236, .24); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.phfp-hero.is-js .phfp-dots button:hover { background: rgba(245, 242, 236, .5); transform: scale(1.2); }
.phfp-hero.is-js .phfp-dots button.is-active { background: var(--wp--preset--color--teal); transform: scale(1.15); }
.phfp-hero.is-js .phfp-dots button:focus-visible { outline: 2px solid var(--wp--preset--color--pale); outline-offset: 3px; }

@media (max-width: 860px) {
  /* one column: the words stop moving, the photographs keep going */
  .phfp-hero.is-js .phfp-sync--text > * { position: relative; inset: auto; }
  .phfp-hero.is-js .phfp-sync--text > *:not(.is-active) { display: none; }
  .phfp-hero.is-js .phfp-dots { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   15. Field reports — blog index, archives, search and the post
   The cards are core query-loop blocks, so an editor can reorder or drop
   a field from the inserter; only the grid geometry lives here.
   ═══════════════════════════════════════════════════════════ */

/* --- index hero --- */
.phfp-blog-hero h1 { max-width: 900px; margin: 0 0 20px; }
.phfp-blog-hero > p:last-child { max-width: 620px; }

/* --- the latest report, given the width it deserves --- */
.phfp-featured .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.phfp-featured .wp-block-post {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center;
  padding-bottom: 56px; border-bottom: 1px solid #DCD8CF;
}
.phfp-featured .wp-block-post-featured-image { margin: 0; }
.phfp-featured .wp-block-post-featured-image img { border-radius: 18px; }
.phfp-featured__body { display: flex; flex-direction: column; gap: 16px; }
.phfp-featured__body > * { margin: 0; }
.phfp-featured__meta { gap: 12px; }
.phfp-featured__meta > * { margin: 0; }
.phfp-featured .wp-block-post-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 40px; line-height: 1.16; letter-spacing: -.012em;
  color: var(--wp--preset--color--darktx);
}
.phfp-featured .wp-block-post-title a { color: inherit; }
.phfp-featured .wp-block-post-title a:hover { color: var(--wp--preset--color--deep); }
.phfp-featured .wp-block-post-excerpt__excerpt {
  font-size: 17px; line-height: 1.76; color: var(--wp--preset--color--bodytx);
}
.phfp-featured .wp-block-read-more {
  display: inline-flex; align-self: flex-start; margin-top: 6px;
  background: var(--wp--preset--color--deep); color: #FFF;
  font-size: 15.5px; font-weight: 600; padding: 15px 28px;
  border-radius: 999px; text-decoration: none;
}
.phfp-featured .wp-block-read-more:hover { background: #00565E; }
.phfp-latest { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #5C6C70; }

/* the category, rendered as a pill */
.phfp-pill a {
  display: inline-block; color: #FFF; background: var(--wp--preset--color--deep);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
}
.phfp-pill--teal a { background: var(--wp--preset--color--teal); color: #04151A; }

/* --- category chips --- */
.phfp-chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.phfp-chips a {
  font-size: 13.5px; font-weight: 600; color: var(--wp--preset--color--bodytx);
  border: 1px solid #DCD8CF; padding: 8px 16px; border-radius: 999px;
  transition: border-color .18s ease, color .18s ease;
}
.phfp-chips a:hover { border-color: var(--wp--preset--color--deep); color: var(--wp--preset--color--deep); }
.phfp-chips a.is-current { color: #FFF; background: var(--wp--preset--color--darktx); border-color: var(--wp--preset--color--darktx); }

/* --- the grid of reports --- */
.phfp-posts .wp-block-post-template.phfp-posts__grid { gap: 40px 28px; }
.phfp-posts .wp-block-post { display: flex; flex-direction: column; gap: 13px; }
.phfp-posts .wp-block-post > * { margin: 0; }
.phfp-posts .wp-block-post-featured-image { margin: 0; }
.phfp-posts .wp-block-post-featured-image img { border-radius: 14px; }
.phfp-posts .wp-block-post-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 25px; line-height: 1.22; color: var(--wp--preset--color--darktx);
}
.phfp-posts .wp-block-post-title a { color: inherit; }
.phfp-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--deep); }
.phfp-posts .wp-block-post-excerpt__excerpt {
  font-size: 15.5px; line-height: 1.68; color: var(--wp--preset--color--bodytx);
}
.phfp-posts .wp-block-post-excerpt__more-text { display: none; }
.phfp-posts .wp-block-read-more {
  font-size: 14.5px; font-weight: 600; color: var(--wp--preset--color--deep);
  text-decoration: none; margin-top: 2px;
}
.phfp-posts .wp-block-read-more:hover { text-decoration: underline; }
.phfp-posts .wp-block-post-terms {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--wp--preset--color--deep);
}
.phfp-posts .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* the same grid on a dark band */
.phfp-posts.is-dark .wp-block-post-title,
.phfp-posts.is-dark .wp-block-post-title a { color: var(--wp--preset--color--cream); }
.phfp-posts.is-dark .wp-block-post-title a:hover { color: var(--wp--preset--color--pale); }
.phfp-posts.is-dark .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--dim); }
.phfp-posts.is-dark .wp-block-post-terms { color: var(--wp--preset--color--pale); }

/* --- pagination --- */
.phfp-pagination { margin-top: 56px; gap: 10px; }
.phfp-pagination a, .phfp-pagination .current {
  font-size: 15px; font-weight: 600; color: var(--wp--preset--color--deep);
  border: 1px solid #DCD8CF; padding: 11px 18px; border-radius: 999px; text-decoration: none;
}
.phfp-pagination .current { background: var(--wp--preset--color--deep); color: #FFF; border-color: var(--wp--preset--color--deep); }
.phfp-pagination a:hover { border-color: var(--wp--preset--color--deep); }

/* --- the report itself --- */
.phfp-crumbs { gap: 9px; margin-bottom: 34px; }
.phfp-crumbs > * { margin: 0; font-size: 13px; color: #8FA3A7; }
.phfp-crumbs a { color: #8FA3A7; }
.phfp-crumbs a:hover { color: var(--wp--preset--color--pale); }
.phfp-crumbs .is-sep { color: #384B4E; }
.phfp-crumbs .wp-block-post-terms a { color: var(--wp--preset--color--pale); }

.phfp-post-head__body { max-width: 820px; }
.phfp-post-head__body > * { margin: 0; }
.phfp-post-head__body .wp-block-post-title {
  margin: 24px 0 20px; font-size: var(--wp--preset--font-size--display-lg); line-height: 1.08;
}
.phfp-standfirst .wp-block-post-excerpt__excerpt { font-size: 20px; line-height: 1.64; color: var(--wp--preset--color--dim); }
.phfp-standfirst .wp-block-post-excerpt__more-text { display: none; }
.phfp-byline { gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(245, 242, 236, .12); }
.phfp-byline > * { margin: 0; font-size: 14px; color: var(--wp--preset--color--dim); }
.phfp-byline > * + *::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; border-radius: 50%; background: #384B4E; margin-right: 16px;
}
.phfp-byline .wp-block-post-date { color: #8FA3A7; }

/* the lead photograph laps onto the dark masthead, as in the design */
/* the band keeps the site gutter; only its vertical padding goes */
.phfp-post-lead { padding-top: 0; padding-bottom: 0; }
.phfp-post-lead .wp-block-post-featured-image { margin: -34px 0 0; }
.phfp-post-lead .wp-block-post-featured-image img {
  height: 470px; width: 100%; object-fit: cover; border-radius: 18px; display: block;
}

.phfp-article .wp-block-post-content > * { margin-block-start: 0; }
.phfp-article p { margin: 0 0 24px; font-size: 18.5px; line-height: 1.82; color: var(--wp--preset--color--bodytx); }
.phfp-article h2 {
  margin: 14px 0 16px; font-family: var(--wp--preset--font-family--display);
  font-size: 32px; line-height: 1.2; color: var(--wp--preset--color--darktx);
}
.phfp-article blockquote { margin: 38px 0; padding: 4px 0 4px 30px; border-left: 3px solid var(--wp--preset--color--deep); }
.phfp-article blockquote p {
  font-family: var(--wp--preset--font-family--display);
  font-size: 27px; line-height: 1.44; color: var(--wp--preset--color--darktx); margin: 0;
}
.phfp-article figure.wp-block-image { margin: 34px 0 30px; }
.phfp-article figure.wp-block-image img { width: 100%; height: 380px; object-fit: cover; border-radius: 16px; display: block; }
.phfp-article figcaption {
  margin: 12px 0 0; font-size: 14px; line-height: 1.62; color: #5C6C70; text-align: left;
}

/* the opening capital */
.phfp-article p.phfp-drop::first-letter {
  font-family: var(--wp--preset--font-family--display);
  float: left; font-size: 62px; line-height: .82; padding: 6px 12px 0 0;
  color: var(--wp--preset--color--deep);
}
.phfp-post-foot { gap: 14px; margin-top: 40px; padding-top: 28px; border-top: 1px solid #DCD8CF; }
.phfp-post-foot > * { margin: 0; }
.phfp-btn--deep { background: var(--wp--preset--color--deep); color: #FFF; }
.phfp-btn--deep:hover { background: #00565E; color: #FFF; }
.phfp-share { font-size: 14.5px; color: #5C6C70; }

/* --- 404 and search --- */
.phfp-404__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 30px; }
.phfp-404__links a {
  font-size: 15px; font-weight: 600; color: var(--wp--preset--color--cream);
  border: 1px solid rgba(245, 242, 236, .24); padding: 11px 20px; border-radius: 999px;
}
.phfp-404__links a:hover { border-color: var(--wp--preset--color--pale); color: var(--wp--preset--color--pale); }
.phfp-search { max-width: 440px; margin-left: 0; margin-right: auto; }
.phfp-search .wp-block-search__label {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8FA3A7; margin-bottom: 8px;
}
.phfp-search .wp-block-search__input {
  background: rgba(245, 242, 236, .06); border: 1px solid rgba(245, 242, 236, .18);
  color: var(--wp--preset--color--cream); border-radius: 999px 0 0 999px; padding: 13px 20px;
}
.phfp-search .wp-block-search__button {
  background: var(--wp--preset--color--teal); color: #04151A; border: 0;
  border-radius: 0 999px 999px 0; padding: 13px 24px; font-weight: 600; cursor: pointer;
}

@media (max-width: 900px) {
  .phfp-featured .wp-block-post { grid-template-columns: 1fr; gap: 26px; }
  .phfp-featured .wp-block-post-title { font-size: 30px; }
  .phfp-posts .wp-block-post-template.phfp-posts__grid { grid-template-columns: 1fr; }
  .phfp-post-lead .wp-block-post-featured-image img { height: 260px; }
  .phfp-article figure.wp-block-image img { height: 230px; }
  .phfp-article p { font-size: 17.5px; }
  .phfp-article blockquote p { font-size: 22px; }
}

/* the placeholder standing in for a report's missing lead photograph */
.phfp-needed--card { width: 100%; min-height: 0; }
.phfp-posts.is-dark .phfp-needed--card {
  background: rgba(245, 242, 236, .06); border-color: rgba(245, 242, 236, .22); color: #8FA3A7;
}
.phfp-post-lead .phfp-needed--card { border-radius: 18px; margin-top: -34px; }

/* ═══════════════════════════════════════════════════════════
   16. The mobile menu
   The navigation block supplies the burger, the overlay and the focus
   trap; left alone it opens as a white sheet with black links, which is
   not this site. Everything below is presentation only.
   ═══════════════════════════════════════════════════════════ */

/* the burger and its close button, in the header's own colours */
.phfp-header .wp-block-navigation__responsive-container-open,
.phfp-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--cream);
}
.phfp-header .wp-block-navigation__responsive-container-open svg,
.phfp-header .wp-block-navigation__responsive-container-close svg {
  width: 26px; height: 26px; fill: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  padding: 26px var(--phfp-gutter) 48px;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: 42px;
}
/* the desktop nav is justified right; in the overlay that would stack the
   links against the edge, so the alignment is undone here. Core writes
   these with an .items-justified-right qualifier, hence the same one. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%; justify-content: flex-start;
  padding-inline: var(--phfp-gutter);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  width: 100%; gap: 4px; align-items: flex-start; justify-content: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  font-size: 30px; line-height: 1.5; font-weight: 400;
  color: var(--wp--preset--color--cream); text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--pale);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%; border-bottom: 1px solid rgba(245, 242, 236, .10);
  justify-content: flex-start; text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block; width: 100%; padding: 10px 0;
}

@media (max-width: 600px) {
  /* the header keeps its donate button, at a size that fits beside the logo */
  .phfp-header .phfp-donate { padding: 11px 18px; font-size: 14px; }
  .phfp-header .phfp-donate svg { display: none; }
  .phfp-header__right { gap: 14px; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 26px;
  }
}

/* the closing CTA is sized from the design: 34px over a 720px measure */
.phfp-cta h2 { max-width: 720px; }

/* On a narrow screen the slide dots sat under the buttons, far from the
   photographs they index, and read as a swipe control. hero.js moves the same
   element (keeping its tablist wiring) to just below the pictures. */
.phfp-dots--below { justify-content: center; margin: 20px 0 0; margin-left: 0; }
.phfp-dots--below button { width: 9px; height: 9px; }

/* ═══════════════════════════════════════════════════════════
   17. Donate — the processor's embedded form
   The provider's script injects its form where its <script> tag sits, so the
   embed keeps a box of its own and the fallback link and QR ride beside it.
   Both are needed: the embed is blocked by some privacy settings.
   ═══════════════════════════════════════════════════════════ */

.phfp-donate-form {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px; align-items: start; margin-top: 38px;
}
.phfp-donate-form__embed {
  background: #fff; border: 1px solid rgba(4, 21, 26, .10);
  border-radius: 18px; padding: 22px; min-height: 420px;
}
.phfp-donate-form__embed iframe { width: 100% !important; border: 0; display: block; }
.phfp-donate-form__alt {
  background: rgba(4, 21, 26, .045); border-radius: 18px; padding: 24px;
}
.phfp-donate-form__alt p {
  margin: 0 0 16px; font-size: 14.5px; line-height: 1.65;
  color: var(--wp--preset--color--muted);
}
.phfp-donate-form__alt .phfp-btn { width: 100%; justify-content: center; }
.phfp-donate-form__alt figure { margin: 24px 0 0; text-align: center; }
.phfp-donate-form__alt img { width: 158px; height: auto; border-radius: 10px; }
.phfp-donate-form__alt figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--wp--preset--color--muted);
}

@media (max-width: 860px) {
  .phfp-donate-form { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .phfp-donate-form__embed { padding: 14px; min-height: 360px; }
}

/* The embed could not load (privacy settings, an extension, or a blocked
   network). Hide the empty box; the side panel already carries the secure-page
   link and the QR, so it becomes one centred fallback card — no giant gap, no
   duplicate message. */
.phfp-donate-form.is-blocked {
  grid-template-columns: 1fr; max-width: 440px; margin-inline: auto;
}
.phfp-donate-form.is-blocked .phfp-donate-form__embed { display: none; }
.phfp-donate-form.is-blocked .phfp-donate-form__alt { padding: 30px; text-align: center; }
.phfp-donate-form.is-blocked .phfp-donate-form__alt p { font-size: 15px; }
.phfp-donate-form.is-blocked .phfp-donate-form__alt figure { margin-top: 22px; }
.phfp-donate-form.is-blocked .phfp-donate-form__alt img { width: 190px; }