/* ==========================================================================
   DIAMOND IRELAND HUB
   Site-wide rules that Divi cannot express through module settings.
   Everything else (colour, type scale, spacing) lives in Divi global colours,
   variables and presets so it stays visible in the builder UI.

   Loaded by wp-content/novamira-sandbox/di-hub-styles.php
   ========================================================================== */

/* ---- Self-hosted Atkinson Hyperlegible ----------------------------------
   Served locally rather than from Google. Google-hosted fonts transmit
   visitor IP addresses to a third country, an avoidable GDPR risk on a
   publicly funded Irish site, and a third-party dependency in the critical
   rendering path.
   -------------------------------------------------------------------------- */

@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-700-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-700-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:700;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-700-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:700;font-display:swap;
  src:url(/wp-content/uploads/2026/07/atkinson-700-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* ---- Focus -------------------------------------------------------------
   3px charcoal ring at 3px offset, flipping to lime on dark grounds.
   Never lime on white: it measures 1.53:1 and is effectively invisible.
   -------------------------------------------------------------------------- */

:focus-visible{outline:3px solid #0F2627;outline-offset:3px;border-radius:2px}
.di-on-dark :focus-visible,
.et_pb_section_dark :focus-visible{outline-color:#C8DB61}


/* ---- Skip link ----------------------------------------------------------
   Divi does not reliably provide one. Injected as the first focusable
   element on every page.
   -------------------------------------------------------------------------- */

.di-skip{position:absolute;left:1rem;top:-100px;z-index:100000;
  background:#C8DB61;color:#0F2627;padding:.6rem 1rem;border-radius:4px;
  font-weight:700;text-decoration:none;transition:top .15s ease}
.di-skip:focus{top:1rem}


/* ---- Links in running text ---------------------------------------------
   Underlined, because colour alone is not a sufficient distinguisher
   (WCAG 1.4.1). Buttons and navigation are deliberately exempt.
   -------------------------------------------------------------------------- */

.et_pb_text a:not(.et_pb_button),
.et_pb_blurb_description a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}


/* ---- Target size --------------------------------------------------------
   WCAG 2.2 (2.5.8) requires 24px. The design uses 44 to 48. This is a
   safety net for anything an editor adds later.
   -------------------------------------------------------------------------- */

.et_pb_button{min-height:48px;display:inline-flex;align-items:center;justify-content:center}


/* ---- Header and footer layout -------------------------------------------
   Divi 5's column layout and image sizing attributes are stored correctly
   but do not generate CSS through the builder API, so these few structural
   rules live here. If a future Divi release fixes that, delete this block
   and set the values in the builder instead.
   -------------------------------------------------------------------------- */

/* The header row lays its two columns out as one bar: brand left, nav right. */
.et-l--header .et_pb_row{display:flex;align-items:center;justify-content:space-between;
  column-gap:24px;flex-wrap:nowrap;padding-top:0;padding-bottom:0}
.et-l--header .et_pb_section{padding-top:8px;padding-bottom:8px}

/* Brand lockup: mark and wordmark side by side, vertically centred. */
.di-brand-lockup .et_pb_module{margin:0!important}
.di-brand-lockup{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}

/* The mark. The SVG carries no useful intrinsic ratio for Divi, so pin it. */
.di-mark{width:auto;max-width:56px;flex:0 0 auto}
.di-mark img{width:56px;height:auto;display:block}

/* Full lockup: mark and wordmark as one outlined SVG asset.
   Divi ships an inline rule, .et_pb_image .et_pb_image_wrap img[src*=".svg"]
   { width:auto }, at specificity (0,3,2). That outranks any single-class
   selector, so every SVG reverts to its intrinsic size and responsive widths
   are silently ignored. Marking these important is the least bad way to win. */
.di-lockup{width:auto;flex:0 0 auto}
.di-lockup img{width:165px!important;height:auto;display:block}
@media (max-width:680px){.di-lockup img{width:132px!important}}

/* Wordmark: three lines, with the Hub descriptor in lime. That single change
   is what keeps the Hub visibly related to, but distinct from, Press. */
.di-wordmark{margin:0;font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
  font-weight:700;font-size:21px;line-height:1.05;letter-spacing:-.02em;color:#FFFFFF}
.di-wordmark .di-hub{display:block;font-weight:400;font-size:17px;color:#C8DB61}

/* Nav and call to action sit right, on one line. */
.di-nav-group{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.di-nav-group .et_pb_module{margin-bottom:0}
.di-nav-group .et_pb_menu__menu>nav>ul{align-items:center}

/* Header nav links: white on charcoal, lime underline for the current page. */
.et-l--header .et_pb_menu__menu>nav>ul>li>a{color:#FFFFFF;font-weight:700;padding-bottom:4px}
.et-l--header .et_pb_menu__menu>nav>ul>li.current-menu-item>a{color:#C8DB61;box-shadow:inset 0 -3px 0 0 #C8DB61}

/* Footer mark sits smaller than the header one. */
.et-l--footer .di-mark img{width:48px}

/* Funder lockup. Sits on a white panel because the funder marks are supplied
   for light backgrounds and would not hold against the charcoal footer.
   Their presence is a condition of the funding, so this is not decoration. */
.di-funders{background:#FFFFFF;border-radius:4px;padding:16px 24px!important;
  display:inline-block;max-width:620px}
.di-funders img{width:100%;height:auto;display:block}
@media (max-width:680px){.di-funders{padding:12px 16px!important}}

/* Footer link columns: four across, no bullets, no underlines until hover. */
.et-l--footer .et_pb_row{display:flex;flex-wrap:nowrap;column-gap:32px;align-items:flex-start}
.et-l--footer .et_pb_text ul{list-style:none;padding-left:0;margin:0}
.et-l--footer .et_pb_text ul li{margin-bottom:.55rem}
.et-l--footer .et_pb_text a{text-decoration:none}
.et-l--footer .et_pb_text a:hover{text-decoration:underline;text-decoration-color:#C8DB61}

@media (max-width:980px){
  .et-l--footer .et_pb_row{flex-wrap:wrap}
}

@media (max-width:980px){
  .di-brand-lockup,.di-nav-group{justify-content:flex-start}
}


/* ---- Page content wrapper -----------------------------------------------
   The Theme Builder body wraps the page's own content in a section, row and
   column capped at 1200px. That cap confined every page section's background
   colour to the centre of the screen instead of bleeding to both edges.
   This releases the wrapper so page sections span the viewport, and each
   page section's own row provides the 1200px reading container.
   -------------------------------------------------------------------------- */

.di-page-content{padding:0!important;width:100%!important;max-width:none!important}
.di-page-content>.et_pb_row{width:100%!important;max-width:none!important;
  padding:0!important;margin:0!important}
.di-page-content>.et_pb_row>.et_pb_column{width:100%!important;margin:0!important}
.di-page-content .et_pb_post_content{width:100%}

/* Page sections span the full width; their rows hold the 1200px container.
   Divi caps rows at 1080px by default, so max-width has to be overridden too. */
.di-page-content .et_pb_section{width:100%}
.di-page-content .et_pb_section>.et_pb_row,
.di-page-title>.et_pb_row,
.et-l--header .et_pb_row,
.et-l--footer .et_pb_row{
  width:min(100% - 3rem,1200px)!important;
  max-width:1200px!important;
  margin-inline:auto!important;
}


/* ---- Column gutters ------------------------------------------------------
   Divi spaces columns with a percentage margin-right, which at 1200px works
   out at 66px and leaves card grids looking scattered. Neutralise it and use
   explicit gaps from the spacing scale instead: 24px between cards in a grid,
   48px between prose columns that need room to breathe.
   -------------------------------------------------------------------------- */

.di-page-content .et_pb_row > .et_pb_column{margin-right:0!important}
.di-page-content .et_pb_row{column-gap:48px;align-items:stretch}
.di-page-content .et_pb_row:has(> .di-card),
.di-page-content .et_pb_row:has(> .di-stat){column-gap:24px}

@media (max-width:980px){
  .di-page-content .et_pb_row{flex-wrap:wrap;row-gap:24px}
  .di-page-content .et_pb_row > .et_pb_column{width:100%!important}
}


/* ---- Cards ---------------------------------------------------------------
   The 4px lime top rule is the component signature that ties the card family
   together. Applied to a Divi column, since Divi has no card module.
   -------------------------------------------------------------------------- */

.di-card{
  background:#FFFFFF;
  border:1px solid #D5DCDB;
  border-top:4px solid #C8DB61;
  border-radius:8px;
  padding:24px!important;
  transition:border-color 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}
.di-card:hover{border-color:#7C8C8B;border-top-color:#1B6E64;box-shadow:0 8px 24px rgba(15,38,39,.14)}
.di-card--teal{border-top-color:#1B6E64}
.di-card .et_pb_module{margin-bottom:12px}
.di-card p:last-child{margin-bottom:0}

/* ---- Sticky header -------------------------------------------------------
   The header sticks, and only takes a shadow once it actually overlaps the
   page. A shadow before that point would be claiming a depth that isn't
   there yet, which is the thing that makes shadows look decorative.
   The di-stuck class is applied by hub.js.
   -------------------------------------------------------------------------- */

.et-l--header{position:sticky;top:0;z-index:1000}

/* The WordPress admin bar is fixed, so logged-in users need the offset. */
body.admin-bar .et-l--header{top:32px}
@media (max-width:782px){body.admin-bar .et-l--header{top:46px}}

.et-l--header .et_pb_section{
  transition:box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}
/* Divi emits box-shadow:0 0 0 0 rgba(0,0,0,0) for the section from its own
   module CSS, at a higher specificity than any class selector here. Same
   pattern as the SVG width rule further up. */
body.di-stuck .et-l--header .et_pb_section{
  box-shadow:0 6px 20px rgba(15,38,39,.26)!important;
}

/* Anchor targets must clear the sticky header, or a jump link lands with its
   heading hidden underneath it. Also keeps focus visible (WCAG 2.4.11). */
:target,
h1,h2,h3,h4{scroll-margin-top:96px}


/* ---- Page header band ----------------------------------------------------
   Eyebrow, headline and lede. Rendered by the [di_page_header] shortcode from
   native WordPress fields, so it stays consistent across every page and an
   editor never has to rebuild it.
   -------------------------------------------------------------------------- */

.di-pagehead{max-width:68ch}

.di-pagehead__eyebrow{
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#1B6E64;margin:0 0 8px;
}
.di-pagehead__title{
  font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
  font-size:52px;font-weight:700;line-height:1.1;letter-spacing:-.015em;
  color:#0F2627;margin:0 0 16px;max-width:20ch;
}
.di-pagehead__lede{font-size:21px;line-height:1.3;color:#0F2627;margin:0;max-width:60ch}

/* Article metadata: date and reading time. Quiet, so it supports the headline
   rather than competing with it, but still 5.4:1 against the wash band. */
.di-pagehead__meta{
  font-size:15px;color:#5A6E6D;margin:0 0 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
}
.di-pagehead__meta time{font-weight:700;color:#1B6E64}

@media (max-width:980px){.di-pagehead__title{font-size:40px}}
@media (max-width:680px){
  .di-pagehead__title{font-size:34px}
  .di-pagehead__lede{font-size:19px}
}


/* ---- Resource entries ----------------------------------------------------
   Bordered rows rather than cards: these are a dense list, and a card each
   would be visual noise. File metadata is muted so titles stay dominant.
   -------------------------------------------------------------------------- */

.di-resource{
  border:1px solid #D5DCDB;border-radius:8px;padding:24px!important;background:#FFFFFF;
  transition:border-color 180ms cubic-bezier(.2,.8,.2,1),
             box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}
/* Matches the card hover: the same interaction should get the same response.
   Colour changes too, so the shadow is never the only signal (WCAG 1.4.1). */
.di-resource:hover{border-color:#1B6E64;box-shadow:0 8px 24px rgba(15,38,39,.14)}
.di-resource .et_pb_module{margin-bottom:8px}
.di-filemeta{font-size:13px;color:#5A6E6D;margin:8px 0 0!important}

/* ---- News listing --------------------------------------------------------
   Divi's blog module, brought into line with the design: no boxes, a rule
   between entries, and the date and category as quiet metadata.
   -------------------------------------------------------------------------- */

.di-news-list .et_pb_post{
  border:0;border-bottom:1px solid #D5DCDB;border-radius:0;
  padding:0 0 32px;margin:0 0 32px;background:none;
}
.di-news-list .et_pb_post:last-child{border-bottom:0}
.di-news-list .entry-title{font-size:26px;line-height:1.3;margin:0 0 8px}
.di-news-list .entry-title a{color:#0F2627;text-decoration:none}
.di-news-list .entry-title a:hover{color:#1B6E64;text-decoration:underline}
.di-news-list .post-meta{font-size:13px;color:#5A6E6D;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:12px}
.di-news-list .post-meta a{color:#1B6E64;text-decoration:none;font-weight:700}
/* Listing entries put the featured image beside the summary rather than above
   it, so a reader scans titles down a single column instead of past a stack of
   full-width photographs.

   Divi wraps the thumbnail in a.entry-featured-image-url, a sibling of the
   title, so grid places it in a fixed first column and everything else in the
   second. Entries without an image collapse back to a single column, which is
   why the :has() test is here rather than a blanket rule. */
.di-news-list .et_pb_post:has(> .entry-featured-image-url){
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  column-gap:24px;
  align-items:start;
}
.di-news-list .entry-featured-image-url{
  grid-column:1;
  grid-row:1 / span 4;
  display:block;
  width:180px;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #DCE99A;
}

/* The picture the reader sees is a CSS background on a pseudo-element, not
   the <img> itself. A filter declared on the image, or on this link, leaves
   the square blank on first paint: the browser rasterises the filtered layer
   before the image has decoded and the decode never invalidates it, so
   nothing is drawn while the element reports complete:true, naturalWidth 2560
   and opacity 1. See decision 14.

   The <img> stays in the document, transparent, holding the layout and its
   alt text. hub.js copies the src into --di-thumb and adds .di-faded, so
   without JavaScript the thumbnails render as ordinary unfiltered images. */
.di-news-list .entry-featured-image-url.di-faded{position:relative}
.di-news-list .entry-featured-image-url.di-faded img{opacity:0}

.di-news-list .entry-featured-image-url.di-faded::before{
  content:"";position:absolute;inset:0;
  background-image:var(--di-thumb);
  background-size:cover;background-position:center;
  filter:grayscale(1) brightness(1.05) contrast(.93) opacity(.85);
  transition:filter 180ms cubic-bezier(.2,.8,.2,1);
}
.di-news-list .et_pb_post:hover .entry-featured-image-url.di-faded::before{
  filter:grayscale(.65) brightness(1) contrast(1) opacity(1);
}
.di-news-list .entry-featured-image-url .et_overlay{display:none}
.di-news-list .entry-featured-image-url img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.di-news-list .et_pb_post:has(> .entry-featured-image-url) .entry-title,
.di-news-list .et_pb_post:has(> .entry-featured-image-url) .post-meta,
.di-news-list .et_pb_post:has(> .entry-featured-image-url) .post-content{
  grid-column:2;
}

@media (max-width:680px){
  .di-news-list .et_pb_post:has(> .entry-featured-image-url){
    grid-template-columns:110px minmax(0,1fr);
    column-gap:16px;
  }
  .di-news-list .entry-featured-image-url{width:110px}
}
.di-news-list .post-content{max-width:68ch}
.di-news-list .more-link{font-weight:700;color:#1B6E64}

/* ---- Statistics ---------------------------------------------------------- */

.di-stat__num{
  font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
  font-size:41px;font-weight:700;line-height:1;color:#C8DB61;margin:0 0 6px!important;
}
.di-stat__label{font-size:15px;color:#D6DEDD;margin:0!important;max-width:22ch}

/* ---- Homepage hero -------------------------------------------------------
   The homepage opens on its own lime hero, so the shared title band is
   suppressed here. Divi's display conditions did not apply reliably, so this
   is done by body class instead.
   -------------------------------------------------------------------------- */

body.home .di-page-title,
body.page-id-57 .di-page-title{display:none}


.di-hero .di-wordmark,
.di-hero h1{max-width:18ch}
.di-hero .et_pb_text p{max-width:52ch}


/* ---- Featured image in the article header band ---------------------------
   The image sits on a pseudo-element rather than the section itself. A filter
   applied to the section would also desaturate the text sitting on top of it,
   because filter applies to an element and all its descendants.

   Divi sets position:relative on the row and column, so those are neutralised
   here; otherwise the pseudo-element would resolve against the 1200px column
   and the wash would stop short of the band edges.
   -------------------------------------------------------------------------- */

body.single-post .di-page-title{position:relative;overflow:hidden}
body.single-post .di-page-title .et_pb_row,
body.single-post .di-page-title .et_pb_column,
body.single-post .di-page-title .et_pb_text,
body.single-post .di-page-title .et_pb_text_inner{position:static}

.di-pagehead--image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--di-hero);
  background-size:cover;
  background-position:center;
  /* Grayscale removes any colour that would fight the palette; the brightness
     and contrast adjustments pale it back so type stays readable over it. */
  filter:grayscale(1) brightness(1.18) contrast(.72) opacity(.30);
  z-index:0;
  pointer-events:none;
}

/* Text has to sit above the wash. */
.di-pagehead--image > *{position:relative;z-index:1}

/* Small text goes charcoal when a photograph is behind it.

   The band alone is safe for the teal eyebrow and the muted metadata, but the
   image darkens it unpredictably. Worked from the filter chain, the darkest
   composite the band can reach is about #A9AF85, where teal #1B6E64 measures
   2.65:1 and muted #5A6E6D measures 2.36:1. Charcoal holds at 6.90:1 against
   that same worst case, so it is the only value that is safe over any
   photograph an editor might upload.

   The glow below helps a reader but does not count toward contrast, so it
   cannot be the answer here. */
.di-pagehead--image .di-pagehead__eyebrow,
.di-pagehead--image .di-pagehead__meta,
.di-pagehead--image .di-pagehead__meta time{color:#0F2627}

/* A halo in the band's own background colour, so letters keep separation over
   the darker parts of the photograph. Layered radii give a soft edge rather
   than a hard outline.

   This is a legibility aid, not a substitute for contrast: the underlying
   text colour still meets AA against the band on its own. */
.di-pagehead--image .di-pagehead__title{
  text-shadow:
    0 0 6px #E2EBAE,
    0 0 14px #E2EBAE,
    0 0 28px #E2EBAE;
}
.di-pagehead--image .di-pagehead__eyebrow,
.di-pagehead--image .di-pagehead__meta,
.di-pagehead--image .di-pagehead__lede{
  text-shadow:0 0 8px #E2EBAE,0 0 16px #E2EBAE;
}

/* Respect a stated preference for reduced data or motion by dropping the
   decorative image entirely. */
@media (prefers-reduced-data:reduce){
  .di-pagehead--image::before{display:none}
}


/* ---- Single posts --------------------------------------------------------
   Pages built in Divi supply their own sections, so .di-page-content is
   deliberately full-bleed and unpadded to let band colours reach both edges.
   A post has no sections, so its raw content inherited that full-bleed and ran
   to the screen edges. Posts get the container and vertical rhythm back here,
   at the narrower 800px reading measure the design system specifies for
   long-form text.
   -------------------------------------------------------------------------- */

body.single-post .di-page-content{
  padding-top:64px!important;
  padding-bottom:96px!important;
}
body.single-post .di-page-content .et_pb_post_content{
  width:min(100% - 3rem,800px);
  margin-inline:auto;
}

/* A post title is usually longer than a page headline, so it takes the
   section size rather than the full display size. */
body.single-post .di-pagehead__title{font-size:41px;max-width:26ch}

/* Vertical rhythm, matching the spacing scale used across the rest of the site. */
body.single-post .et_pb_post_content p{margin:0 0 16px;line-height:1.65}
body.single-post .et_pb_post_content h2{
  font-size:33px;line-height:1.15;letter-spacing:-.015em;margin:48px 0 12px;
}
body.single-post .et_pb_post_content h3{
  font-size:26px;line-height:1.3;margin:32px 0 8px;
}
body.single-post .et_pb_post_content ul,
body.single-post .et_pb_post_content ol{
  padding-left:1.3rem;margin:0 0 16px;
}
body.single-post .et_pb_post_content li{margin-bottom:.6rem;line-height:1.65}
body.single-post .et_pb_post_content li::marker{color:#1B6E64}
body.single-post .et_pb_post_content a{
  color:#1B6E64;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;font-weight:700;
}
body.single-post .et_pb_post_content blockquote{
  margin:32px 0;padding:8px 0 8px 24px;border-left:4px solid #C8DB61;
  font-size:21px;line-height:1.3;
}
body.single-post .et_pb_post_content > *:last-child{margin-bottom:0}

@media (max-width:680px){
  body.single-post .di-page-content{padding-top:40px!important;padding-bottom:56px!important}
  body.single-post .di-pagehead__title{font-size:32px}
  body.single-post .et_pb_post_content h2{font-size:28px;margin-top:36px}
  body.single-post .et_pb_post_content h3{font-size:23px;margin-top:28px}
}


/* ---- Long-form content --------------------------------------------------
   Reading measure, list spacing and table styling for page content.
   -------------------------------------------------------------------------- */

.et-l--body .et_pb_text ol,
.et-l--body .et_pb_text ul{padding-left:1.3rem;margin:0 0 1rem;max-width:68ch}
.et-l--body .et_pb_text li{margin-bottom:.6rem;line-height:1.65}
.et-l--body .et_pb_text li::marker{color:#1B6E64}
.et-l--body .et_pb_text p{max-width:68ch}

table.di-table{border-collapse:collapse;width:100%;font-size:15px;margin:1.5rem 0}
table.di-table caption{text-align:left;font-size:15px;color:#5A6E6D;margin-bottom:.75rem}
table.di-table th,
table.di-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid #D5DCDB;vertical-align:top}
table.di-table thead th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:#5A6E6D;border-bottom:2px solid #7C8C8B}
table.di-table th[scope="row"]{font-weight:700;color:#0F2627}
table.di-table tbody tr:hover{background:#F7F9F9}


/* ==========================================================================
   RESPONSIVE
   Divi collapses the nav to its own hamburger below 980px. These rules tidy
   what that leaves behind, and fix two genuine reflow failures: a data table
   and the funder lockup, both of which forced horizontal page scrolling.
   ========================================================================== */

/* ---- Tables scroll inside their own region, not the page ----------------
   WCAG 2.2 (1.4.10) forbids horizontal page scrolling at 320px. A wide data
   table cannot always reflow, so it scrolls within a focusable region with an
   accessible name instead, which keyboard users can reach and scroll.
   The wrapper is added by hub.js.
   -------------------------------------------------------------------------- */

.di-tablewrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.di-tablewrap:focus-visible{outline:3px solid #0F2627;outline-offset:3px}
table.di-table{min-width:480px}

/* ---- Footer ------------------------------------------------------------- */

.di-funders{max-width:100%;box-sizing:border-box}

/* ---- Header at tablet and below ----------------------------------------- */

@media (max-width:980px){
  .et-l--header .et_pb_section{padding-top:6px;padding-bottom:6px}
  .et-l--header .et_pb_row{flex-wrap:nowrap;column-gap:12px;align-items:center}
  /* The lockup must not shrink. With min-width:0 and the image inheriting
     max-width:100%, the flex row collapsed it to zero and the logo vanished. */
  .di-brand-lockup{flex:1 1 auto;min-width:0}
  .di-lockup{flex:0 0 auto}
  .di-lockup img{width:140px!important;max-width:none;flex:none}
  .di-nav-group{flex:0 0 auto;gap:6px}
  .di-nav-group .et_pb_button{
    white-space:nowrap;font-size:15px;padding:10px 16px;min-height:44px;
  }
  /* Divi's hamburger is a bare span; give it a real tap target. */
  .mobile_menu_bar{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;
  }
  .et_mobile_nav_menu{margin:0}
}

@media (max-width:420px){
  .di-lockup img{width:118px!important;max-width:none}
  .di-nav-group .et_pb_button{padding:8px 12px;font-size:14px}
}

/* 320px is the narrowest width WCAG 1.4.10 requires us to support. At that
   size the lockup, hamburger and call to action only just fit, so both shrink
   again rather than dropping the call to action entirely. */
@media (max-width:360px){
  .et-l--header .et_pb_row{column-gap:8px}
  .di-lockup img{width:96px!important}
  .di-nav-group{gap:2px}
  .di-nav-group .et_pb_button{padding:6px 10px;font-size:13px}
}

/* ---- The open mobile menu panel ------------------------------------------
   Divi renders the mobile menu as position:absolute; width:100%, taking its
   containing block from .et_pb_menu_inner_container. Once the header became a
   flex row, that container shrank to fit the hamburger alone, so "100%" was a
   narrow strip: the panel's background stopped short while the link text ran
   past it, leaving white text on the page behind. The call to action made it
   worse by competing for the same row width.

   The fix is to give the panel a full-width containing block: neutralise the
   positioning on Divi's inner wrappers and let the header section provide it.
   -------------------------------------------------------------------------- */

@media (max-width:980px){
  .et-l--header .et_pb_section{position:relative;z-index:1000}
  /* Every one of these is position:relative in Divi, and any of them will
     capture the absolutely positioned panel. The row and column matter most:
     leaving them relative pinned the panel to the column width. */
  .et-l--header .et_pb_row,
  .et-l--header .et_pb_column,
  .et-l--header .et_pb_menu,
  .et-l--header .et_pb_menu_inner_container,
  .et-l--header .et_pb_menu__wrap,
  .et-l--header .et_mobile_nav_menu,
  .et-l--header .mobile_nav{position:static}

  .et-l--header .et_mobile_menu{
    position:absolute;
    left:0;
    right:0;
    width:auto;
    top:100%;
    z-index:1001;
    /* A percentage max-height resolves against the containing block, not the
       header, so calc(100vh - 100%) computes to nonsense. Use a plain vh cap
       so a long menu scrolls instead of running off the screen. */
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 12px 32px rgba(15,38,39,.35);
  }
}


.et-l--header .et_mobile_menu{
  background:#0F2627;border-top:3px solid #C8DB61;padding:8px 0;
}
.et-l--header .et_mobile_menu li a{
  color:#FFFFFF;font-weight:700;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.12);
}
.et-l--header .et_mobile_menu li a:hover{background:rgba(255,255,255,.08);color:#C8DB61}
.et-l--header .et_mobile_menu li.current-menu-item a{color:#C8DB61}

/* ---- Content at phone width --------------------------------------------- */

@media (max-width:680px){
  .di-pagehead__title{max-width:none}
  .di-card,.di-resource{padding:20px!important}
  .di-stat__num{font-size:33px}
  .et-l--footer .et_pb_row{row-gap:32px}
}


/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}