/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/
/* Site-wide: hide Salient's "Secondary Header" bar (the "To take part..."
   announcement link, #header-secondary-outer) on David's request. CSS hide
   rather than a Nectar Theme Options change — that panel has many
   interlocking header settings (see the homepage hero work), a scoped
   display:none is safer and trivially reversible.
   NB the 2nd selector is required for mobile/tablet: Salient's
   header-secondary-nav.css force-shows the bar at <=999px via
   `body.material #header-secondary-outer[data-mobile="display_full"]`
   (!important, specificity 121), which beats a plain #id (100). The
   2-ID selector below (220) outranks it so the bar stays hidden on all
   widths, not just desktop. */
#header-secondary-outer,
body.material #header-outer #header-secondary-outer[data-mobile] {
    display: none !important;
}

#search-outer #search {
      -webkit-transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
      transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
  }
  #search-outer.material-open #search {
      -webkit-transform: translate3d(0, 0, 0) !important;
      transform: translate3d(0, 0, 0) !important;
  }

/* Hide author/date/reading-time meta on single job posts only.
   (Moot under SJB "SJB Layout" — kept only as a guard for Theme-Layout mode.) */
.single-jobpost .featured-media-under-header__meta-wrap {
    display: none;
}

/* NOTE: the jobs listings-row styles now live inline in
   simple_job_board/v1/content-job-listing-list-view.php so that template is
   self-contained and can be deployed without editing this file. */

/* ILP purple button — used on migrated content pages.
   Add class "ilp-btn" to any core Button block to brand it. */
.wp-block-button.ilp-btn > .wp-block-button__link {
    background-color: #932f93;
    color: #ffffff;
    border-radius: 4px;
}
.wp-block-button.ilp-btn > .wp-block-button__link:hover,
.wp-block-button.ilp-btn > .wp-block-button__link:focus {
    background-color: #7a277a;
    color: #ffffff;
}

/* ILP support-tile card — used for the homepage 3x2 grid on migrated pages.
   Add class "ilp-card" to a core Group block. Sits inside Columns; fills height. */
.wp-block-column > .ilp-card {
    height: 100%;
}
.ilp-card {
    background-color: #f6eff6;
    border: 1px solid #e4d4e4;
    border-radius: 8px;
    padding: 28px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ilp-card:hover {
    box-shadow: 0 6px 20px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
}
.ilp-card h3 {
    margin-top: 0;
}
.ilp-card h3 a {
    color: #932f93;
    text-decoration: none;
}
.ilp-card h3 a:hover,
.ilp-card h3 a:focus {
    text-decoration: underline;
}

/* ============================================================
   ILP News (news CPT: archive-news.php + single-news.php)
   ============================================================ */

/* Title area — plain heading (no filled band). Stands in for Salient's page header,
   which won't auto-title a CPT. Modest top padding for breathing room below the header. */
.ilp-news-hero {
    padding: 55px 0 5px;
    text-align: center;
}
.ilp-news-hero--single .ilp-news-single-meta {
    justify-content: center;
}
.ilp-news-hero h1 {
    color: #932f93;
    margin: 0;
}
.ilp-news-single-meta {
    margin-bottom: 12px;
    font-size: 14px;
    color: #6b7a8d;
}

/* Card grid */
.ilp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 46px 0;
}
@media (max-width: 999px) {
    .ilp-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 690px) {
    .ilp-news-grid { grid-template-columns: 1fr; }
    .ilp-news-hero { padding-top: 40px; }
}

.ilp-news-card {
    background-color: #ffffff;
    border: 1px solid #e4d4e4;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ilp-news-card:hover {
    box-shadow: 0 6px 20px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
}
.ilp-news-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: #f6eff6;
    overflow: hidden;
    border-bottom: 1px solid #e4d4e4;
}
.ilp-news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ilp-news-card-media--placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f6eff6, #e4d4e4);
}
.ilp-news-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ilp-news-card-meta,
.ilp-news-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ilp-news-card-meta {
    margin-bottom: 10px;
    font-size: 13px;
    color: #6b7a8d;
}
.ilp-news-cat a {
    display: inline-block;
    background-color: #932f93;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    text-decoration: none;
}
.ilp-news-cat a:hover,
.ilp-news-cat a:focus { background-color: #7a277a; color: #fff; }

.ilp-news-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}
.ilp-news-card-title a { color: #183271; text-decoration: none; }
.ilp-news-card-title a:hover,
.ilp-news-card-title a:focus { color: #932f93; }
.ilp-news-card-excerpt {
    color: #48525e;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 16px;
}
.ilp-news-readmore {
    margin-top: auto;
    font-weight: 600;
    color: #932f93;
    text-decoration: none;
}
.ilp-news-readmore:hover,
.ilp-news-readmore:focus { color: #7a277a; text-decoration: underline; }

/* Single article */
.ilp-news-single { max-width: 820px; margin: 0 auto; padding-top: 34px; float: none; }
.ilp-news-single-content { font-size: 17px; line-height: 1.7; }
.ilp-news-single-content::after { content: ""; display: block; clear: both; }

/* Featured image floats right; opening paragraphs wrap beside it, then run full width. */
.ilp-news-single-media {
    float: right;
    width: 300px;
    max-width: 42%;
    margin: 6px 0 18px 30px;
}
.ilp-news-single-media img { width: 100%; height: auto; border-radius: 8px; display: block; }

.ilp-news-back { margin: 40px 0 10px; clear: both; }

/* Mobile: stack the image full-width above the text instead of floating. */
@media (max-width: 600px) {
    .ilp-news-single-media {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 22px;
    }
}

/* Standalone (non-block) ILP button — used for "Back to News". The existing .ilp-btn rule
   only styles core button blocks, so give the plain anchor its own button appearance. */
a.ilp-btn {
    display: inline-block;
    background-color: #932f93;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
a.ilp-btn:hover,
a.ilp-btn:focus { background-color: #7a277a; color: #ffffff; }

.ilp-news-empty { margin: 60px 0; font-size: 17px; }

/* ============================================================
   ILP Homepage redesign (post 337) — new starting layout
   ============================================================ */

/* Hero — flat purple, no photo. Wave/circle decoration is a background image
   David sets via WPBakery's own Design Options (native mechanism, same as the
   original photo hero) — not reproduced in CSS. This block only handles nav
   clearance and headline color, both independent of whatever background is set.
   Selector note: el_class does not propagate on this WPBakery row type
   (type="full_width_content") in this theme/plugin combo — confirmed by
   inspecting the rendered DOM, not just the shortcode source. ".top-level" is
   WPBakery/Salient's own class and is unique to this row (the only other
   ".first-section" row on the page — "Why we exist" — lacks ".top-level"). */
/* Header — Salient auto-enables its transparent/overlay nav (#header-outer,
   position:absolute, ~198px tall) whenever a page's first row is full-width;
   that's a site-wide behavior, not something set on this page specifically.
   Two things needed real fixes, not just a color patch:
   1. Salient's own CSS sets background-color via an !important rule with
      HIGHER specificity than a simple "body.page-id-337 #header-outer" rule
      (body[data-hhun="1"] #header-outer.transparent[data-transparent-header="true"]
      [data-remove-border="true"] — 1 id + 4 class/attr + 1 type). Matching
      that exact selector (plus .page-id-337, so it's guaranteed to win on
      both specificity and source order) is required, or the !important loses
      to their !important. Confirmed by enumerating matched stylesheet rules.
   2. position:absolute takes the header out of flow, so hero content starts
      at y=0 regardless of header height — "white background" alone only
      paints over the top 198px, it doesn't stop the hero from occupying that
      space underneath. Switching to position:relative puts the header back
      in normal flow so the hero genuinely starts below it. Risk: Salient
      ties sticky-on-scroll behavior to this element — verified by scrolling
      after this change that the nav still behaves correctly (see chat). */
body.page-id-337[data-hhun="1"] #header-outer.transparent[data-transparent-header="true"][data-remove-border="true"],
body.page-id-337 #header-outer {
    background-color: #ffffff !important;
    position: relative !important;
    /* (grey divider removed 2026-07-13, David — the hero now sits tight
       under the header since the Entry-86 whitespace fix, so the border
       read as a stray line rather than a section break) */
}
/* SITE-WIDE: nudge the logo 15px toward the nav (David 2026-07-13).
   position:relative + left, not margin, so layout flow — nav positions and
   the --header-nav-height chain — is untouched. (First attempt used
   transform: translateX, which Salient/the browser silently dropped at
   ≤999px widths despite a clean cascade — mechanism swapped rather than
   fought.) Salient has no built-in horizontal logo offset. */
#top #logo,
#header-outer #logo {
    position: relative;
    left: 15px;
}
/* Slim mobile: the roundel sat tight against the top edge of the
   header (David 2026-07-20) — nudge it down. Rides on the same
   position:relative as the left-offset above, so flow untouched. */
@media (max-width: 690px) {
    #top #logo,
    #header-outer #logo {
        top: 8px;
    }
}
/* SITE-WIDE: hamburger (off-canvas toggle) is mobile-only (David 2026-07-13).
   Salient renders TWO toggles — a .mobile-icon variant it already swaps in
   below 1000px, and this desktop one, now hidden. display:none also removes
   it from the tab order, so it's not keyboard-reachable on desktop. */
@media (min-width: 1000px) {
    #top .slide-out-widget-area-toggle:not(.mobile-icon) {
        display: none !important;
    }
}
/* Salient's ".transparent" class also drives a large set of white-text/icon
   rules for the nav (readable against a photo/dark hero) — now invisible
   against the white background above. #183271 matches the nav color used
   site-wide on normal (non-transparent) pages, e.g. /caring-for-carers/,
   confirmed by inspecting its computed style. Broad but safely scoped: only
   sets color/fill under this page's header, can't break layout or JS. */
body.page-id-337[data-hhun="1"] #header-outer.transparent[data-transparent-header="true"][data-remove-border="true"] #top nav a,
body.page-id-337 #header-outer #top nav a,
body.page-id-337 #header-outer .sf-menu .menu-title-text,
body.page-id-337 #header-outer #mobile-menu,
body.page-id-337 #header-outer #mobile-menu span,
body.page-id-337 #header-outer .menu-icon,
body.page-id-337 #header-outer svg {
    color: #183271 !important;
    fill: #183271 !important;
}
/* Same transparent-header problem, two controls the color/fill rule above did
   NOT reach (2026-07-10): the search icon and the hamburger were left white
   (Salient's transparent default for a dark hero) and so are invisible on this
   page's white header — while every non-transparent page shows them navy. Fix
   the two rendered glyphs directly:
   - search: nectar icon-font glyph, painted via `color` on .icon-salient-search
     (and its ::before, which Salient colours white explicitly). */
body.page-id-337 #header-outer .mobile-search .icon-salient-search,
body.page-id-337 #header-outer .icon-salient-search,
body.page-id-337 #header-outer .icon-salient-search::before {
    color: #183271 !important;
}
/*   - hamburger: the bars are drawn as background-color on the .lines element
     and its ::before/::after (the "lines-button x2" two-bar style), NOT color —
     so they need background-color, not the color rule above. Selector mirrors
     Salient's own transparent-header rule (#header-outer.transparent #top …,
     two IDs) + .page-id-337 so it out-specifies the white !important it sets. */
body.page-id-337 #header-outer.transparent #top .slide-out-widget-area-toggle a .lines,
body.page-id-337 #header-outer.transparent #top .slide-out-widget-area-toggle a .lines::before,
body.page-id-337 #header-outer.transparent #top .slide-out-widget-area-toggle a .lines::after {
    background-color: #183271 !important;
}
/* Filled header buttons are the exception to the navy-text rules above:
   Donate (menu-item-btn-style-button_extra-color-1, purple fill) and
   Support Us (menu-item-btn-style-button_accent-color, navy fill) carry
   WHITE text on every other page, but the blanket "#top nav a -> navy"
   rules turned their text navy here too (navy-on-navy = invisible for
   Support Us). Restore white — the selector mirrors the HIGH-specificity
   navy rule above (the [data-hhun]/[data-transparent-header]/
   [data-remove-border] variant) + the button classes, so it out-specifies it. */
body.page-id-337[data-hhun="1"] #header-outer.transparent[data-transparent-header="true"][data-remove-border="true"] #top nav li[class*="menu-item-btn-style-button_"] > a,
body.page-id-337 #header-outer #top nav li[class*="menu-item-btn-style-button_"] > a {
    color: #ffffff !important;
}
body.page-id-337 .top-level.first-section {
    /* !important throughout: WPBakery inlines its own padding/height/min-height
       on this row (varies by the "Full height row" toggle state), and inline
       styles beat any external class selector regardless of specificity.
       Confirmed via computed-style inspection each time the toggle changed.
       padding-top no longer needs to clear the header — the header is back
       in normal flow (see above), so the hero now genuinely starts below it
       rather than needing internal clearance space. */
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 400px !important;
    padding-top: 40px !important;
    padding-bottom: 70px !important;
}
body.page-id-337 .top-level.first-section h1 {
    color: #ffffff;
    position: relative;
    z-index: 2;
}
/* Hero headline (2026-07-13): demoted h1 -> h2.ilp-hero-headline so the
   eyebrow is the page's ONE h1 again (the nameplate block's original
   design — see its comment). This ladder pins the h2 to the exact sizes
   Salient's generic h1 rules were giving it at every band, so the
   demotion is visually invisible; inline style on the element carries
   centre/bold/purple (hex corrected #923492 -> #932f93 in the same edit).
   position/z-index mirror the old first-section h1 rule (stacks above
   the row-bg image). */
body.page-id-337 .ilp-hero-headline {
    font-size: 54px;
    line-height: 62px;
    margin: 0;
    position: relative;
    z-index: 2;
}
@media (min-width: 1000px) and (max-width: 1300px) {
    body.page-id-337 .ilp-hero-headline { font-size: 45px; line-height: 60px; }
}
@media (min-width: 691px) and (max-width: 999px) {
    body.page-id-337 .ilp-hero-headline { font-size: 36px; line-height: 48px; }
}
@media (max-width: 690px) {
    body.page-id-337 .ilp-hero-headline { font-size: 27px; line-height: 36px; }
}
/* below-1000px: 20px breathing room above the hero EYEBROW nameplate — the
   top of the whole heading block (David 2026-07-13; corrected twice same
   day — was desktop/above-H1, then right breakpoint/wrong element). On the
   .home_name WRAPPER, not the h1: the eyebrow text carries margin:0
   !important (nameplate block below), and the wrapper moves the flanking
   rules with it. */
@media (max-width: 999px) {
    body.page-id-337 .top-level.first-section .home_name {
        margin-top: 20px;
    }
}
/* Hero background image: show at natural proportions, not cover-zoomed.
   hero-background.png is a wide 1920x400 band (soft purple circles on
   white). Salient's default background-size:cover on .row-bg upscales +
   crops it to fill the now-tall hero (which holds the card grid) — mild
   on desktop, extreme on mobile where the stacked cards make the row
   ~1350px tall and the band is blown up ~3x. `contain` keeps the circles
   at their designed size at every width; the uncovered area falls back to
   the page's white, which matches the image's white base seamlessly.
   background-position is left as David set it in WPBakery (center bottom).
   Salient sets `cover` via CSS (not inline), so !important wins here. */
body.page-id-337 .top-level.first-section .row-bg.using-image {
    background-size: contain !important;
}

/* ≤999px: kill the DOUBLE header-clearance stack (Entry 86). Salient sees
   data-transparent-header=true and pads the first section's inner .span_12
   (120px at ≤999, 130px at ≤690, via its inline dynamic-css block) to push
   content out from under an OVERLAY header — but this header is back in
   normal flow (see above), so that padding is dead space. The old 110px
   mobile padding-top below was the child theme's own clearance for the same
   bygone overlay. Result was 240px of white above the hero eyebrow on
   phones, 160px on tablets. Now: span_12 padding neutralised, section keeps
   the same deliberate 40px gap as desktop. Height note unchanged: 260px
   min-height is a trade-off that fits 2 lines of mobile H1; cover crops the
   band image a bit more here than desktop — fine for a soft circle pattern. */
@media (max-width: 999px) {
    body.page-id-337 .top-level.first-section > .span_12 {
        padding-top: 0 !important;
    }
}
@media (max-width: 690px) {
    body.page-id-337 .top-level.first-section {
        height: auto !important;
        min-height: 260px !important;
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }
}

/* Homepage hero: hand-drawn "chalk" underline beneath the We're-here-to-help
   H1 (Entry 87, David's mock). Inline SVG in its own vc_raw_html right after
   the H1's text element; two strokes draw themselves left-to-right on load
   via the stroke-dashoffset technique (dasharray values are the measured
   path lengths). The wrapper reserves its own height from first paint, so
   the draw-on causes zero layout shift. Scales with viewport via clamp(). */
body.page-id-337 .ilp-hero-scribble {
    width: clamp(240px, 46vw, 400px);
    margin: -14px auto 0; /* tuck tight under the H1's descenders */
    line-height: 0;
}
body.page-id-337 .ilp-hero-scribble svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
body.page-id-337 .ilp-scribble-main {
    stroke-dasharray: 330;
    stroke-dashoffset: 330;
    animation: ilp-scribble-draw 0.4s ease-out 0.15s forwards;
}
body.page-id-337 .ilp-scribble-flick {
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation: ilp-scribble-draw 0.3s ease-out 0.5s forwards;
}
@keyframes ilp-scribble-draw {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-id-337 .ilp-scribble-main,
    body.page-id-337 .ilp-scribble-flick {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ============================================================
   Homepage service-area cards (post 337) — white card, navy
   label, 2px purple outline, faint shared wave across each row.
   Built as native WPBakery columns: el_class lands on the
   .wpb_column element (.ilp-wave-card + .ilp-wc1/2/3 = wave
   phase). Row el_class does NOT surface in this theme, so every
   hook is per-column. The visible card is .vc_column-inner (it
   sits inside WPBakery's 15px column gutter, so the ~30px
   between inner boxes becomes the gap between cards). One wave
   flows across each row of three: every card carries the same
   image at background-size calc(300% + 60px) — three card widths
   plus the two 30px gaps — with x-position 0%/50%/100% selecting
   the left/middle/right slice (the percentages resolve against
   the size-minus-container excess, so the gap widths are skipped
   and the wave reads as passing BEHIND the gaps, clipped). When
   the columns stack on mobile the same rules degrade to a
   per-card wave slice — no media query. NB the SVG needs
   preserveAspectRatio='none': without it the browser keeps the
   svg's aspect ratio, scales it to fit the 46px height and
   centres it, leaving the outer thirds of the background area
   blank — which made the wave vanish from the outer cards. */
body.page-id-337 .ilp-wave-card .vc_column-inner {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
    border: 2px solid #932f93;
    border-radius: 12px;
    min-height: 110px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body.page-id-337 .ilp-wave-card:hover .vc_column-inner {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
    border-color: #7a277a;
}
body.page-id-337 .ilp-wave-card .vc_column-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    z-index: 1;
    opacity: 0.16;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: calc(300% + 60px) 46px;
    background-position-y: bottom;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='680'%20height='70'%20viewBox='0%200%20680%2070'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23932f93'%20d='M0,30%20Q42.5,10%2085,30%20T170,30%20T255,30%20T340,30%20T425,30%20T510,30%20T595,30%20T680,30%20L680,70%20L0,70%20Z'/%3E%3C/svg%3E");
}
body.page-id-337 .ilp-wc1 .vc_column-inner::after { background-position-x: 0%; }
body.page-id-337 .ilp-wc2 .vc_column-inner::after { background-position-x: 50%; }
body.page-id-337 .ilp-wc3 .vc_column-inner::after { background-position-x: 100%; }
body.page-id-337 .ilp-wave-card .wpb_wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
}
body.page-id-337 .ilp-wave-card .wpb_text_column,
body.page-id-337 .ilp-wave-card h3 {
    margin: 0;
}
body.page-id-337 .ilp-wave-card h3 {
    text-align: center;
    font-size: 23px;
    line-height: 1.3;
}
body.page-id-337 .ilp-wave-card h3 a,
body.page-id-337 .ilp-wave-card h3 a:hover,
body.page-id-337 .ilp-wave-card h3 a:focus {
    color: #183271;
    font-weight: 700;
    text-decoration: none;
}

/* ============================================================
   Homepage hero eyebrow (post 337) — "IMPROVING LIVES PLYMOUTH"
   nameplate above the headline: letterpress-style uppercase
   label flanked by two short rules. Markup lives in a WPBakery
   Raw HTML element in the hero (a .home_name div wrapping an
   .home_name__text H1 — deliberately the page's ONE h1; the
   visible "We're here to help" headline is an h2). CSS lives
   here, NOT inline in the element: wpautop mangles <style> tags
   pasted into text fields (bit us on the first attempt), and
   the stylesheet survives content edits. !importants beat
   Salient's global h1 rules. */
body.page-id-337 .home_name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: fit-content;
    margin: 0 auto 10px;
}
body.page-id-337 .home_name::before,
body.page-id-337 .home_name::after {
    content: "";
    width: 42px;
    height: 2px;
    background: #932f93;
    opacity: 0.45;
    flex: 0 0 auto;
}
body.page-id-337 .home_name .home_name__text {
    margin: 0 !important;
    color: #932f93 !important;
    font-family: inherit;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
/* ≤690px: at 16px the tracked-uppercase label read as prominent as the 27px
   headline (David 2026-07-13) — drop the eyebrow to label size so the
   hierarchy is unambiguous. Same selector + !important, later in source,
   beats the 1rem rule above. */
@media (max-width: 690px) {
    body.page-id-337 .home_name .home_name__text {
        font-size: 12px !important;
        letter-spacing: 0.18em !important;
    }
}
/* Narrow screens: the nowrapped label + rules exceed small
   viewports — let the text wrap and shorten the rules instead
   of overflowing. */
@media (max-width: 520px) {
    body.page-id-337 .home_name .home_name__text { white-space: normal; text-align: center; }
    body.page-id-337 .home_name::before,
    body.page-id-337 .home_name::after { width: 20px; }
}

/* Homepage hero subheading (post 337) — cap the line length on
   desktop and centre the block; below the cap the paragraph
   just fills the viewport as normal, so no mobile override is
   needed. Hook: el_class="ilp-home-sub" on the vc_column_text. */
body.page-id-337 .ilp-home-sub p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Homepage impact section (post 337) — first band under the
   hero. Soft purple tint to separate from the white hero, an
   "OUR IMPACT" eyebrow reusing the hero kicker motif, and four
   big count-up stats (purple numbers, navy labels) split by
   thin dividers. Markup is a WPBakery Raw HTML element (.ilp-impact)
   in a full-width row (el_class="ilp-impact-row"); the count-up
   is a small IntersectionObserver script inside that Raw HTML
   (progressive — the final numbers are the fallback text, and
   prefers-reduced-motion skips the animation). CSS lives here. */
body:is(.page-id-337, .page-id-511) .ilp-impact {
    background: #edf1f8;
    padding: 46px 26px 42px;
    /* full-bleed band: square corners so the top/bottom lines run straight to
       the screen edges (was radius 16px + a ~6px Salient full-width inset,
       which curved the lines in short of the edge — David 2026-07-17).
       calc(50% - 50vw) breaks out of whatever container the band sits in
       (homepage full-width row OR the service-page 1000px-capped column).
       On classic-scrollbar browsers vw includes the scrollbar, so the band
       overshoots by ~15px — but Salient's global `body{overflow-x:hidden}`
       already clips that (verified: no h-scroll with/without an extra guard),
       so no per-page clip is needed here. */
    border-radius: 0;
    margin: 10px calc(50% - 50vw) 20px;
}

body:is(.page-id-337, .page-id-511) .ilp-impact-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 6px;
    color: #183271;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-eyebrow::before,
body:is(.page-id-337, .page-id-511) .ilp-impact-eyebrow::after {
    content: "";
    width: 42px;
    height: 2px;
    background: #183271;
    opacity: 0.45;
    flex: 0 0 auto;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-sub {
    text-align: center;
    color: #183271;
    opacity: 0.75;
    font-size: 15px;
    margin: 0 0 30px;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: 0 auto;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-stat {
    padding: 6px 22px;
    text-align: center;
    border-right: 1px solid #d2dcec;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-stat:last-child {
    border-right: none;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-num {
    color: #183271;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
body:is(.page-id-337, .page-id-511) .ilp-impact-label {
    color: #183271;
    font-size: 1rem;
    line-height: 1.35;
    margin-top: 10px;
}
/* Tablet: 2x2, drop the outer dividers, keep a single centre divider. */
@media (max-width: 900px) {
    body:is(.page-id-337, .page-id-511) .ilp-impact-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    body:is(.page-id-337, .page-id-511) .ilp-impact-stat { border-right: none; }
    body:is(.page-id-337, .page-id-511) .ilp-impact-stat:nth-child(odd) { border-right: 1px solid #d2dcec; }
}
/* Mobile: single column, no dividers. */
@media (max-width: 560px) {
    body:is(.page-id-337, .page-id-511) .ilp-impact-grid { grid-template-columns: 1fr; gap: 26px 0; }
    body:is(.page-id-337, .page-id-511) .ilp-impact-stat:nth-child(odd) { border-right: none; }
    body:is(.page-id-337, .page-id-511) .ilp-impact-num { font-size: 2.4rem; }
}

/* ============================================================
   Homepage "Why / Who / History" accordion + sign (post 337) —
   ONE raw-HTML section replacing the old three-column card row
   (and the interim three split sections). Left: the three
   subheadings as an exclusive accordion — native <details
   name="ilp-home-acc">, so opening one closes the open one with
   zero JS (evergreen browsers; older ones degrade to allowing
   multiple open, never to broken). Right: the "Welcome to
   Plymouth" sign SVG (live <text> falls back Overpass→Poppins,
   fit verified in the fallback). Boundary stability: the sign's
   fixed aspect height rules the section (align-items:center),
   the accordion is top-anchored (align-self:flex-start) and its
   tallest open state measures well under the sign height at
   ≥691px, so toggling entries never changes the section's
   outer height on desktop. On mobile (stacked) the accordion
   pushes content normally — standard pattern. */
body.page-id-337 .wpb_raw_code:has(.ilp-split) {
    margin-bottom: 0;
}
body.page-id-337 .ilp-split {
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
    padding: 2.4rem 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
body.page-id-337 .ilp-acc {
    flex: 1 1 auto;
    align-self: flex-start;
    min-width: 0;
}
body.page-id-337 .ilp-acc-item + .ilp-acc-item {
    border-top: 1px solid #e4d4e4;
}
body.page-id-337 .ilp-acc-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 2.2rem 1.1rem 0;
    position: relative;
}
body.page-id-337 .ilp-acc-item summary::-webkit-details-marker {
    display: none;
}
body.page-id-337 .ilp-acc-item summary h3 {
    color: #183271;
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0;
}
body.page-id-337 .ilp-acc-item summary:hover h3 {
    color: #932f93;
}
body.page-id-337 .ilp-acc-item summary:focus-visible {
    outline: 2px solid #932f93;
    outline-offset: 2px;
}
/* Chevron: down when closed, up when open. */
body.page-id-337 .ilp-acc-item summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #932f93;
    border-bottom: 2px solid #932f93;
    transform: translateY(-70%) rotate(45deg);
}
body.page-id-337 .ilp-acc-item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
body.page-id-337 .ilp-acc-panel {
    padding: 0.1rem 2.2rem 1.4rem 0;
}
body.page-id-337 .ilp-acc-panel p {
    color: #5a6474;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}
body.page-id-337 .ilp-acc-panel p:last-child {
    margin-bottom: 0;
}
body.page-id-337 .ilp-acc-panel strong {
    font-weight: 700;
    color: #183271;
}
body.page-id-337 .ilp-acc-panel a {
    color: #932f93;
    text-decoration: underline;
}
body.page-id-337 .ilp-acc-panel a:hover,
body.page-id-337 .ilp-acc-panel a:focus {
    color: #7a277a;
}
body.page-id-337 .ilp-split-art {
    flex: 0 0 auto;
    line-height: 0;
}
body.page-id-337 .ilp-split-art svg {
    display: block;
    width: clamp(220px, 28vw, 300px);
    height: auto;
}
/* Mobile: stack accordion-first; sign below, centred. The
   accordion's desktop align-self:flex-start would shrink-wrap
   it horizontally in column direction — stretch it back. */
@media (max-width: 690px) {
    body.page-id-337 .ilp-split {
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
        padding: 1.8rem 0;
    }
    body.page-id-337 .ilp-acc {
        align-self: stretch;
    }
    body.page-id-337 .ilp-split-art {
        align-self: center;
    }
    body.page-id-337 .ilp-split-art svg {
        width: clamp(170px, 55vw, 240px);
    }
}

/* ============================================================
   Homepage testimonials slider (post 337) — Salient testimonial
   element, "multiple_visible" style. No Salient setting exists for
   either of the two tweaks wanted.
   1. Italic quote text — this rule.
   2. Consistent purple bubble size as the slider rotates — handled
      by a small equaliser SCRIPT in the child-theme functions.php
      (ilp_home_testimonial_equalize), NOT CSS. Investigation showed
      the purple bubble is the <p>, sized to its own quote's text,
      and flickity does NOT equalise the cells (they're content-
      height, absolutely positioned). A fixed min-height (Option A)
      overflowed on 1366/1440 laptops because the 3-up cell width
      shrinks with the viewport; making the <blockquote> flex
      (Option B) removed flickity's layout and made it worse. So
      the stable, width-independent fix is JS: reset, measure the
      tallest bubble at the CURRENT width, set them all to match,
      re-run on resize. Shorter quotes get excess space at the
      bottom. See the full reasoning in functions.php + devlog. */
body.page-id-337 .testimonial_slider blockquote p {
    font-style: italic;
}

/* ============================================================
   Homepage photo gallery (post 337) — static CSS grid in a
   WPBakery Raw HTML element (.ilp-photo-gallery), replacing the
   Salient/isotope gallery element: its JS measured the tiles
   while the lazy images were still 0×0, locked the container at
   96px, and the images painted over the testimonials section.
   The grid needs no JS and reserves each cell's height via
   aspect-ratio before the images load. 2px gaps per David;
   4 / 3 / 2 columns at the standard 1000/690 breakpoints
   (24 images divide evenly at all three).
   width !important: Salient's INLINE dynamic CSS has
   .row .col img:not([srcset]) { width: auto } — it outranks any
   sane selector here, these imgs carry no srcset, and width:auto
   on a not-yet-loaded lazy img computes to 0, which is exactly
   what zero-heighted the old gallery's tiles. */
body.page-id-337 .ilp-photo-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: 0;
}
body.page-id-337 .ilp-photo-gallery a {
    display: block;
    line-height: 0;
    overflow: hidden;
}
body.page-id-337 .ilp-photo-gallery img {
    display: block;
    width: 100% !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    height: auto;
}
@media (max-width: 999px) {
    body.page-id-337 .ilp-photo-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 690px) {
    body.page-id-337 .ilp-photo-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Carers hub (post 4663) — top "grid of links" restyled to
   match the homepage service cards (white fill, 2px purple
   outline, navy centred label, hover lift) but deliberately
   WITHOUT the wave, so service pages read as a consistent-but-
   distinct family from the homepage. First step toward the
   service-page template; scoped to this page for now and
   generalised once the template is locked.

   The grid is native block markup — two .wp-block-columns, each
   with three .wp-block-column holding one .ilp-card — embedded in
   a WPBakery text column. Core block flex CSS isn't loaded in
   that context (cards render full-width/stacked), so we lay the
   3-up grid out explicitly (3 -> 2 -> 1). Both .wp-block-columns
   on this page ARE the card grid, so the selector is safe.
   ============================================================ */
body.page-id-4663 .wpb_text_column .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    /* Cap the width and centre it so the buttons pull in from the container
       edges (reads as side padding). max-width doesn't force a min width, so
       below ~1040px the grid just fills the space and stays responsive. */
    max-width: 1040px;
    margin: 0 auto 24px;
}
/* wpautop wraps the whitespace between the block columns in empty <p> tags;
   in a grid every direct child becomes a cell, so drop the non-column ones. */
body.page-id-4663 .wpb_text_column .wp-block-columns > :not(.wp-block-column) {
    display: none;
}
/* The grid sits in its own text-column wrapper alongside several empty <p>
   spacers (incl. a <p>&nbsp;</p>) left above, between and below the two rows —
   they add ~57px each of dead space between the heading and the buttons. Drop
   every direct <p> in the wrapper that holds the grid (its only real children
   are the two .wp-block-columns; the intro copy lives in a separate wrapper). */
body.page-id-4663 .wpb_text_column .wpb_wrapper:has(> .wp-block-columns) > p {
    display: none;
}
body.page-id-4663 .wpb_text_column .wp-block-column {
    margin: 0;
    padding: 0;
    width: auto;
}
/* Cards here are one step DOWN from the homepage (23px/110px/18-20px) so the
   homepage reads as the main grid and the service page as its offshoot. */
body.page-id-4663 .ilp-card {
    background: #f6eff6;
    border: 2px solid #932f93;
    border-radius: 12px;
    min-height: 76px;
    height: 100%;
    padding: 11px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
body.page-id-4663 .ilp-card:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
    background: #f0e4f0;
    border-color: #7a277a;
}
body.page-id-4663 .ilp-card h3 {
    margin: 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.3;
}
body.page-id-4663 .ilp-card h3 a,
body.page-id-4663 .ilp-card h3 a:hover,
body.page-id-4663 .ilp-card h3 a:focus {
    color: #5e1e5e;
    font-weight: 700;
    text-decoration: none;
}
@media (max-width: 900px) {
    body.page-id-4663 .wpb_text_column .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 690px) {
    body.page-id-4663 .wpb_text_column .wp-block-columns {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   ILP service-area subpages — SHARED layer (body.ilp-service-page,
   assigned in functions.php by page ID; currently the six Carers
   subpages). This is the service-page TEMPLATE: headings, buttons,
   checklists, team cards, video, tables. Page content stays
   Gutenberg-block markup; everything visual lives here.
   Hierarchy: homepage = flagship (wave, white cards, largest);
   service hubs = tint cards one step down (page-id-4663 block
   above); these subpages = same DNA, working-document tier.
   ⚠ LEAK GUARD (2026-07-20): Salient injects the "ILP Footer"
   global section INSIDE .container-wrap (as .nectar-global-section
   .before-footer), so broad element rules in this layer bled into
   the footer on every service page — navy h2 invisible on the navy
   footer, aubergine h4 column headings, 1000px width squeeze
   (David's Sensory Solutions screenshots). Every element-level
   selector in this layer therefore carries
   :not(.nectar-global-section *). Keep the guard on any rule
   added here that isn't scoped to .main-content or an .ilp-* class.
   ============================================================ */
body.ilp-service-page .container-wrap .container:not(.nectar-global-section *) {
    /* Readability cap + guaranteed side gutters at every width. At narrow
       viewports Salient leaves this container 100% wide with NO padding
       (our shell columns are no-extra-padding), so content ran edge-to-edge
       on phones (David's 2026-07-07 screenshot). min() keeps 24px gutters
       without needing padding/box-sizing overrides. */
    max-width: min(1000px, calc(100% - 48px));
}
/* Global service-page type rules (David's Basic Structure Notes, 2026-07-07):
   H1 centred + brand purple with a 40px gap below the header; H2/H3 one size
   down from theme defaults (desktop ~34/24 -> 28/21); line-height bumped
   across the board. Purple standardised on #932f93 (NOT the #923492 of the
   old Donate button — David's call). */
body.ilp-service-page .container-wrap h1 {
    text-align: center;
    color: #932f93;
    margin-top: 40px;
}
body.ilp-service-page h2:not(.nectar-global-section *) {
    color: #183271;
    margin-top: 1.5em;
    font-size: clamp(22px, 1.2vw + 12px, 28px);
    line-height: 1.4;
}
body.ilp-service-page h2:not(.nectar-global-section *)::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: #932f93;
}
/* .row .col h3 selectors here (0,3,1): Salient's dynamic stylesheet sizes h3/h4
   via .row .col h3 (0,2,1), which outranks a bare body.ilp-service-page h3
   (0,1,2) — h3s inside vc columns rendered 34-40px, towering over the 28px h2
   (seen on Better Futures). */
body.ilp-service-page h3:not(.nectar-global-section *),
body.ilp-service-page .row .col h3:not(.nectar-global-section *) {
    color: #183271;
    font-size: clamp(18px, 0.8vw + 11px, 21px);
    line-height: 1.45;
}
body.ilp-service-page h4:not(.nectar-global-section *),
body.ilp-service-page .row .col h4:not(.nectar-global-section *) {
    color: #5e1e5e;
}
body.ilp-service-page p:not(.nectar-global-section *),
body.ilp-service-page li:not(.nectar-global-section *) {
    line-height: 1.75;
}
/* breathing room BETWEEN list items only — with 1.75 line-height and no gap,
   wrapped bullets visually merge into one block (David, 2026-07-08) */
body.ilp-service-page .main-content li + li {
    margin-top: 8px;
}
/* Back-to-hub button (bottom of every multi-page service area subpage)
   + on-page contents list (anchor links to section h2 ids) */
a.ilp-btn--back {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    background: #ffffff;
    border: 2px solid #183271;
    color: #183271 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.ilp-btn--back::before {
    content: "\2190";
    margin-right: 8px;
}
a.ilp-btn--back:hover {
    background: #edf1f8;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
}
.ilp-backrow {
    margin: 44px 0 10px;
    padding-top: 22px;
    border-top: 1px solid #d2dcec;
}
.ilp-contents {
    background: #edf1f8;
    border: 1px solid #d2dcec;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 26px 0 8px;
}
.ilp-contents strong {
    display: block;
    color: #183271;
    margin-bottom: 8px;
    font-size: 16px;
}
.ilp-contents ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* list-style also on the li: Salient re-applies disc bullets at li level with
   higher specificity than the ul's list-style:none. The margin reset also
   needs to out-specify the service-layer li + li 8px gap (flex gap rules here). */
.ilp-contents li,
body.ilp-service-page .main-content .ilp-contents li + li {
    margin: 0;
    line-height: 1.6;
    list-style: none;
}
.ilp-contents a {
    color: #5e1e5e;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(147, 47, 147, 0.3);
}
.ilp-contents a:hover,
.ilp-contents a:focus {
    border-bottom-color: #932f93;
    color: #932f93;
}
body.ilp-service-page p strong:not(.nectar-global-section *),
body.ilp-service-page li strong:not(.nectar-global-section *) {
    color: #183271;
}
body.ilp-service-page figure.wp-block-table {
    overflow-x: auto;
}
body.ilp-service-page table th {
    background: #183271;
    color: #ffffff;
}
body.ilp-service-page table td {
    border-color: #e4d4e4;
}
body.ilp-service-page table tr:nth-child(even) td {
    background: #f8f9fc;
}

/* --- Buttons (Register = purple CTA, Contact = navy, resource
       links = light outline; external resources get an arrow).
       Deliberately NOT built on the legacy `.ilp-btn` class —
       `a.ilp-btn` (news back-button, above) would out-specify the
       variants and paint them all purple. Variant class only. --- */
a.ilp-btn--register,
a.ilp-btn--contact,
a.ilp-btn--calendar,
a.ilp-btn--resource {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none !important;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.ilp-btn--register:hover,
a.ilp-btn--contact:hover,
a.ilp-btn--calendar:hover,
a.ilp-btn--resource:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.15);
}
a.ilp-btn--register {
    background: #932f93;
    border: 2px solid #932f93;
    color: #ffffff !important;
}
a.ilp-btn--register:hover {
    background: #7a277a;
    border-color: #7a277a;
}
a.ilp-btn--contact {
    background: #183271;
    border: 2px solid #183271;
    color: #ffffff !important;
}
a.ilp-btn--contact:hover {
    background: #22417f;
    border-color: #22417f;
}
/* Calendar button — brand green, always "Visit Calendar" -> /activities/.
   Fill is #068540, a darkened #08A84E (brand green): white 16px text on the
   raw brand hex is ~3.1:1 (fails WCAG AA 4.5:1); #068540 gives ~4.7:1. */
a.ilp-btn--calendar {
    background: #068540;
    border: 2px solid #068540;
    color: #ffffff !important;
}
a.ilp-btn--calendar:hover {
    background: #056b33;
    border-color: #056b33;
}
a.ilp-btn--resource {
    background: #ffffff;
    border: 2px solid #932f93;
    color: #5e1e5e !important;
    padding: 10px 18px;
    font-size: 15px;
}
a.ilp-btn--resource:hover {
    background: #f6eff6;
}
a.ilp-btn--resource[target="_blank"]::after {
    content: "\2197";
    margin-left: 8px;
    font-size: 13px;
}
.ilp-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0;
}

/* Donate header button (menu item #336) — bumped for prominence (David 2026-07-10).
   Salient has NO per-button size option (the per-item button feature sets
   style/colour only; the only size levers — Navigation Font + Menu Item Spacing —
   scale EVERY nav item), so a scoped CSS bump is the correct route. The purple
   pill is an `a::before` with fixed -24px L/R insets, so its width auto-follows
   the text — enlarging the font grows the pill with it. Site-wide (header shows
   on every page). NB fill colour is Salient's off-brand #923492 (Extra Color 1),
   left as-is here — flagged separately. */
#header-outer #top nav ul li.menu-item-336 > a .menu-title-text {
    font-size: 18px !important;
    font-weight: 700 !important;
}
#header-outer #top nav ul li.menu-item-336 > a > i.nectar-menu-icon {
    font-size: 17px !important;
}
/* Collision band 1000–1449px (David's report 2026-07-21): Salient shows the
   desktop nav from 1000px up, but the centred menu + right-aligned button
   pills need ~1450px to coexist — the pills paint 24px PAST their layout
   boxes (a::before insets), so they visually swallow "Contact Us" with no
   layout collision (~90px overlap at 1250, ~160px at 1100). Squeeze the band:
   tighter item margins (13px→6px), menu font 15px, Donate title back to 16px,
   pill insets pulled to -14px. Wide desktop (1450+) untouched. */
@media (min-width: 1000px) and (max-width: 1449px) {
    #top nav .sf-menu:not(.buttons) > li > a {
        /* !important on the margins only: Salient's menu-item-spacing rule
           outranked the plain declaration (font-size won without it) */
        margin-left: 4px !important;
        margin-right: 4px !important;
        font-size: 14px;
    }
    #header-outer #top nav ul li.menu-item-336 > a .menu-title-text,
    #header-outer #top nav ul.buttons li.menu-item-5173 > a .menu-title-text {
        font-size: 15px !important;
    }
    #header-outer #top nav ul.buttons li[class*="menu-item-btn-style-button_"] > a::before {
        left: -14px !important;
        right: -14px !important;
    }
}

/* --- Contact form (page 443, NF form): brand-styled fields, capped width.
       Scoped to the page so future NF forms elsewhere start unopinionated. --- */
body.ilp-service-page .nf-form-cont {
    max-width: none; /* full container width, matching the card grids below */
}
body.ilp-service-page .nf-form-cont .nf-form-content {
    padding-left: 0;  /* NF's 5px inner padding broke edge alignment with the grids */
    padding-right: 0;
}
/* stacked layout: label above full-width field (the theme lays NF labels
   beside the inputs; force block flow regardless of NF's label-pos setting) */
body.ilp-service-page .nf-form-cont .nf-field,
body.ilp-service-page .nf-form-cont .field-wrap,
body.ilp-service-page .nf-form-cont .nf-field-label,
body.ilp-service-page .nf-form-cont .field-wrap .nf-field-label,
body.ilp-service-page .nf-form-cont .nf-field-element,
body.ilp-service-page .nf-form-cont .field-wrap .nf-field-element {
    display: block !important;
    width: 100% !important;
    float: none !important;
}
body.ilp-service-page .nf-form-cont .nf-field-label {
    margin-bottom: 6px;
}
/* Rebuilt in-content-H1 pages: carers-hub H1 rhythm, standardised (David,
   Entry 93 follow-up) — header→H1 140px, H1→content 36px; the bare rebuild
   rows gave 80px/7px and read cramped. Applies to Volunteering 4715,
   Leadership 5071, Trustees 5089, Important Information 5113. NOT the
   Support Us hub (511) — its H1 lives inside the hero card — and not the
   agency-era pages, which carry their own row padding. */
body.page-id-4715 .main-content h1,
body.page-id-5071 .main-content h1,
body.page-id-5089 .main-content h1,
body.page-id-5113 .main-content h1,
body.page-id-4552 .main-content h1 {
    margin-top: 100px;
    margin-bottom: 36px;
}
/* Current Jobs (4552) is not in the service-page layer (SJB plugin
   page — the layer's type rules would disturb the board), so it gets
   the H1 brand colour directly; size/weight stay Salient-responsive
   like every other page (David 2026-07-20). */
body.page-id-4552 .main-content h1 {
    color: #932f93;
}
body.page-id-4715 .nf-form-cont {
    margin-top: 28px;
}

/* NF renders date-field labels as a SPAN (.nf-label-span), not a <label> —
   cover both so the DOB label matches every other label (Entry 93) */
body.ilp-service-page .nf-form-cont .nf-field-label label,
body.ilp-service-page .nf-form-cont .nf-field-label .nf-label-span {
    color: #183271;
    /* 14px/600 matches what <label>s actually render at (heavier theme rules
       win there); the span variant has no such rules, so pin it explicitly */
    font-weight: 600;
    font-size: 14px;
}
body.ilp-service-page .nf-form-cont input[type="text"],
body.ilp-service-page .nf-form-cont input[type="email"],
body.ilp-service-page .nf-form-cont select,
body.ilp-service-page .nf-form-cont textarea {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #e4d4e4;
    border-radius: 8px;
    padding: 10px 14px;
    background: #ffffff;
    font-size: 16px; /* ≥16px stops iOS zoom-on-focus */
}
body.ilp-service-page .nf-form-cont input:focus,
body.ilp-service-page .nf-form-cont select:focus,
body.ilp-service-page .nf-form-cont textarea:focus {
    border-color: #932f93;
    outline: 2px solid rgba(147, 47, 147, 0.25);
}
body.ilp-service-page .nf-form-cont textarea {
    min-height: 160px;
}
body.ilp-service-page .nf-form-cont input[type="submit"],
body.ilp-service-page .nf-form-cont input[type="button"] {
    background: #932f93;
    color: #ffffff;
    border: 2px solid #932f93;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
body.ilp-service-page .nf-form-cont input[type="submit"]:hover,
body.ilp-service-page .nf-form-cont input[type="submit"]:focus {
    background: #7a277a;
    border-color: #7a277a;
}
/* --- Contact page team cards (David's design, 2026-07-09): auto-fit grid,
       white card, purple top bar. Adapted from his mock — var(--surface-2)/
       var(--border) tokens mapped to brand values. --- */
.ilp-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 1rem 0;
}
.ilp-contact-card {
    background: #ffffff;
    border: 1px solid #e4d4e4;
    border-top: 3px solid #932f93;
    border-radius: 12px;
    padding: 1.25rem;
}
.ilp-contact-card h3,
body.ilp-service-page .row .col .ilp-contact-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: #183271;
    margin: 0 0 12px;
    line-height: 1.4;
}
.ilp-contact-card p {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 8px;
}
.ilp-contact-card p:last-child {
    margin-bottom: 0;
}
.ilp-contact-card a {
    color: #5e1e5e;
    font-weight: 600;
    /* long unbroken emails (caringforcarers@…) overflow the card at phone widths */
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* location cards: responsive Google Maps embed inside a contact card */
.ilp-contact-card .ilp-map-embed {
    margin: 0 0 12px;
}
.ilp-contact-card .ilp-map-embed iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: 0;
    border-radius: 8px;
}
/* --- MEC Frontend Event Submission (Submit an Event 5049 / My Events 5051):
       MEC's whole FES palette hangs off these CSS variables (default cyan
       #40d9f1) — token-level rebrand to ILP purple, same alpha steps.
       Semantic greens (Confirmed badge, back button) left per Entry 10. --- */
body.page-id-5049,
body.page-id-5051 {
    --mec-fes-main-color: #932f93;
    --mec-fes-main-color-rgba-1: rgba(147, 47, 147, 0.10);
    --mec-fes-main-color-rgba-2: rgba(147, 47, 147, 0.18);
    --mec-fes-main-color-rgba-3: rgba(147, 47, 147, 0.03);
    --mec-fes-main-color-rgba-4: rgba(147, 47, 147, 0.3);
    --mec-fes-main-color-rgba-5: rgba(147, 47, 147, 0.07);
    --mec-fes-main-color-rgba-6: rgba(147, 47, 147, 0.2);
}

/* Full-page purple wash (David 2026-07-10, headers/footers off on these pages):
   whole canvas takes the form's tint as a solid (#f4eaf4 = rgba-1 over white);
   the form's own rgba-1 wash goes transparent so the colour stays flat
   instead of stacking darker where the form sits. */
body.page-id-5049,
body.page-id-5051,
body.page-id-5049 .container-wrap,
body.page-id-5051 .container-wrap {
    background-color: #f4eaf4;
}
body.page-id-5049 .mec-fes-form,
body.page-id-5051 .mec-fes-form,
body.page-id-5051 .mec-fes-list {
    background: transparent;
}

/* --- FES restyle (mockup approved by David, 2026-07-10): white section cards
       with purple top edge + navy underlined headings (the site heading system),
       contact-form-style inputs, site button set. Cosmetic only — no MEC markup
       moved/removed. Friendly headings = scoped gettext map (functions.php);
       chips + helper text = js/ilp-fes-guide.js. --- */

/* Section cards: every top-level section div in both form columns. Title row +
   editor are sibling divs styled as one joined card (top/bottom halves). */
body.page-id-5049 .mec-fes-form-cntt > div:not(.mec-fes-title):not(.mec-fes-editor):not(.mec-util-hidden),
body.page-id-5049 .mec-fes-form-sdbr > div:not(.mec-util-hidden) {
    position: relative;
    background: #fff;
    border: 1px solid #e4d4e4;
    border-top: 3px solid #932f93;
    border-radius: 12px;
    padding: 20px 22px 22px;
    margin: 0 0 22px;
}
body.page-id-5049 .mec-fes-form .mec-form-row.mec-fes-title {
    position: relative;
    background: #fff;
    border: 1px solid #e4d4e4;
    border-top: 3px solid #932f93;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    padding: 20px 22px 4px;
    margin: 0;
}
body.page-id-5049 .mec-fes-form .mec-form-row.mec-fes-editor {
    background: #fff;
    border: 1px solid #e4d4e4;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 12px 22px 22px;
    margin: 0 0 22px;
}

/* Section headings: navy + short purple underline (site h2 treatment), replacing
   MEC's tinted full-width bars. .row .col variant = Salient-specificity guard. */
body.page-id-5049 .mec-fes-form h4,
body.page-id-5049 .row .col .mec-fes-form h4 {
    background: transparent;
    color: #183271;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    padding: 0;
    margin: 14px 0 6px;
}
body.page-id-5049 .mec-fes-form h4:first-child,
body.page-id-5049 .mec-fes-form .mec-meta-box-fields:first-child h4:first-of-type {
    margin-top: 0;
}
body.page-id-5049 .mec-fes-form h4::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: #932f93;
}

/* Fields: the contact-form treatment (borders, radius, purple focus). Widths
   left to MEC — its inline date/time selects keep their own sizing. */
body.page-id-5049 .mec-fes-form label {
    color: #183271;
    font-weight: 600;
    font-size: 15px;
}
body.page-id-5049 .mec-fes-form .mec-required {
    color: #932f93;
}
body.page-id-5049 .mec-fes-form input[type="text"],
body.page-id-5049 .mec-fes-form input[type="number"],
body.page-id-5049 .mec-fes-form input[type="url"],
body.page-id-5049 .mec-fes-form input[type="email"],
body.page-id-5049 .mec-fes-form input[type="tel"],
body.page-id-5049 .mec-fes-form select,
body.page-id-5049 .mec-fes-form textarea {
    background: #fff;
    border: 1.5px solid #e4d4e4;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 16px;
    color: #2b3138;
}
body.page-id-5049 .mec-fes-form input[type="text"]:focus,
body.page-id-5049 .mec-fes-form input[type="number"]:focus,
body.page-id-5049 .mec-fes-form input[type="url"]:focus,
body.page-id-5049 .mec-fes-form input[type="email"]:focus,
body.page-id-5049 .mec-fes-form input[type="tel"]:focus,
body.page-id-5049 .mec-fes-form select:focus,
body.page-id-5049 .mec-fes-form textarea:focus {
    outline: none;
    border-color: #932f93;
    box-shadow: 0 0 0 3px rgba(147, 47, 147, 0.15);
}
body.page-id-5049 .mec-fes-form input[type="checkbox"],
body.page-id-5049 .mec-fes-form input[type="radio"],
body.page-id-5051 .mec-fes-list input[type="checkbox"] {
    accent-color: #932f93;
}

/* Buttons: back = navy outline (site back-button), submit = purple CTA. */
body.page-id-5049 a.mec-fes-form-back-to,
body.page-id-5051 a.mec-fes-form-back-to {
    display: inline-block;
    background: #ffffff;
    border: 2px solid #183271;
    color: #183271 !important;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.page-id-5049 a.mec-fes-form-back-to::before,
body.page-id-5051 a.mec-fes-form-back-to::before {
    content: "\2190";
    margin-right: 8px;
}
body.page-id-5049 a.mec-fes-form-back-to:hover,
body.page-id-5051 a.mec-fes-form-back-to:hover {
    background: #edf1f8;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
}
body.page-id-5049 .mec-fes-sub-button {
    background: #932f93;
    border: 2px solid #932f93;
    color: #ffffff;
    border-radius: 8px;
    padding: 13px 32px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.page-id-5049 .mec-fes-sub-button:hover {
    background: #7a277a;
    border-color: #7a277a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.15);
}

/* Booking form (event singles): hide MEC's per-ticket "Available Places: N"
   readout (David 2026-07-10) — display-only line, the quantity stepper still
   enforces limits; ticket availability is the only visible lever. */
/* !important: MEC's frontend.css re-sets display on this class at (0,4,0)
   via .mec-booking .mec-event-tickets-list .mec-ticket-style-row — outbid. */
.mec-event-ticket-available {
    display: none !important;
}

/* Page intros (content on 5049/5051; the h1 gets the service-layer treatment) */
.ilp-fes-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px;
    color: #5a6474;
    font-size: 16.5px;
}

/* Guidance layer (elements injected by js/ilp-fes-guide.js) */
.ilp-fes-chip {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.ilp-fes-chip--req {
    background: #f6eff6;
    color: #932f93;
    border: 1px solid #e4d4e4;
}
.ilp-fes-chip--opt {
    background: #f2f4f8;
    color: #5a6474;
    border: 1px solid #d2dcec;
}
.ilp-fes-help {
    margin: 2px 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5a6474;
}
/* Photo guidance bolded (David 2026-07-10) */
#mec-featured-image .ilp-fes-help {
    font-weight: 700;
}
/* Narrow phones: reserve heading space so the absolute chips can't overlap
   long headings ("Who is organising it?" + chip needs ~334px). */
@media (max-width: 520px) {
    body.page-id-5049 .mec-fes-form h4 {
        padding-right: 88px;
    }
}
.ilp-fes-submit-note {
    display: block;
    margin-top: 12px;
    color: #5a6474;
    font-size: 14px;
}

/* My Events list (5051): purple Add-new, white card rows, brand action links.
   Status badges keep MEC's semantic colours (Confirmed green etc.). */
body.page-id-5051 .mec-fes-list-top-actions a {
    display: inline-block;
    background: #932f93;
    border: 2px solid #932f93;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.page-id-5051 .mec-fes-list-top-actions a:hover {
    background: #7a277a;
    border-color: #7a277a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.15);
}
/* Filter row (search + selects + Filter button): MEC's outline .button collides
   with Salient's global button[type=submit] rules (style.css + skin-material +
   dynamic) into a washed-out white pill — brand it as the site's secondary
   button and give the row's fields the standard treatment. */
body.page-id-5051 .mec-fes-list input[type="search"],
body.page-id-5051 .mec-fes-list select {
    background: #fff;
    border: 1.5px solid #e4d4e4;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 15px;
    color: #2b3138;
}
body.page-id-5051 .mec-fes-list input[type="search"]:focus,
body.page-id-5051 .mec-fes-list select:focus {
    outline: none;
    border-color: #932f93;
    box-shadow: 0 0 0 3px rgba(147, 47, 147, 0.15);
}
body.page-id-5051 .mec-fes-list .mec-form-row button[type="submit"] {
    background: #ffffff;
    border: 2px solid #932f93;
    color: #5e1e5e;
    /* !important ×2: Salient's dynamic button rules pin padding/radius with
       !important (same arms-race class as the Entry 72 NF label fight) */
    border-radius: 8px !important;
    padding: 9px 22px !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    height: auto;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
body.page-id-5051 .mec-fes-list .mec-form-row button[type="submit"]:hover {
    background: #f6eff6;
}

/* --- FES dimension normalisation (2026-07-24, David's clipped-fields report).
       MEC's frontend.css transplants its 13px admin UI with FIXED metrics
       (height/line-height 36px on every field, percent column widths,
       appearance:none custom checkboxes). The 07-10 restyle layered 16px
       type + 9px/13px padding over those fixed boxes → 15px content box
       clipping 16px glyphs in every select, truncated ticket fields, a
       near-invisible checkbox, and a 3-way editor-tab fight (WP core +
       MEC + Salient dynamic). One pass: release the heights, floor the
       widths, restore native checkboxes, settle the tabs. !importants
       needed — MEC pins line-height on buttons with !important and
       Salient's dynamic sheet joins in (the standard arms race). --- */
body.page-id-5049 .mec-fes-form input[type="text"],
body.page-id-5049 .mec-fes-form input[type="number"],
body.page-id-5049 .mec-fes-form input[type="url"],
body.page-id-5049 .mec-fes-form input[type="email"],
body.page-id-5049 .mec-fes-form input[type="tel"],
body.page-id-5049 .mec-fes-form input[type="date"],
body.page-id-5049 .mec-fes-form select,
body.page-id-5051 .mec-fes-list input[type="search"],
body.page-id-5051 .mec-fes-list select {
    height: auto !important;
    min-height: 44px;
    line-height: 1.4 !important;
    display: inline-block;
}
/* Filter button (5051) matches the taller fields */
body.page-id-5051 .mec-fes-list .mec-form-row button[type="submit"] {
    min-height: 44px;
}
/* Ticket fields: MEC's 32.33% col-4 was sized for 13px type — floor the
   width so "Available Tickets" / "Maximum" placeholders fit at 16px. */
body.page-id-5049 .mec-fes-form input.mec-col-4 {
    min-width: 210px;
}
/* Ticket row: flex the input + "Unlimited" checkbox-label pair so they
   align instead of the col-3 label wrapping into an overlap. */
body.page-id-5049 .mec-fes-form .mec_ticket_row .mec-col-10 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}
body.page-id-5049 .mec-fes-form .mec_ticket_row .mec-col-10 > label.label-checkbox {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0;
}
/* Checkboxes/radios: MEC strips native rendering (appearance:none) and
   paints a #cfeff5-bordered box that reads as an empty sliver on white;
   accent-color does nothing on it. Restore native + brand accent. */
body.page-id-5049 .mec-fes-form input[type="checkbox"],
body.page-id-5049 .mec-fes-form input[type="radio"],
body.page-id-5051 .mec-fes-list input[type="checkbox"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}
/* Total Attendance Cap (#mec-booking): tighten the helper stack and flex
   the Unlimited-checkbox + cap-input row into one aligned line (MEC floats
   two col-4s with a block label whose checkbox/tooltip sit off-baseline).
   The cap input holds a 3-digit number — narrower than the global 210px
   ticket floor. */
body.page-id-5049 #mec-booking .ilp-fes-help {
    margin-bottom: 10px;
}
body.page-id-5049 #mec-booking .mec-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
}
body.page-id-5049 #mec-booking .mec-form-row label.mec-col-4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    margin: 0;
    white-space: nowrap;
}
body.page-id-5049 #mec-booking .mec-form-row label.mec-col-4 input[type="checkbox"] {
    margin: 0;
}
body.page-id-5049 #mec-booking .mec-form-row input.mec-col-4 {
    width: auto !important;
    min-width: 120px;
    max-width: 170px;
    margin: 0;
}

/* Editor tabs (Visual/Code): WP core, MEC and Salient all restyle
   .wp-switch-editor — settle on one quiet brand treatment. */
body.page-id-5049 .mec-fes-form .wp-editor-tabs .wp-switch-editor {
    float: none;
    height: auto !important;
    background: #f2f4f8 !important;
    border: 1px solid #d2dcec !important;
    border-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    color: #5a6474 !important;
    padding: 5px 14px !important;
    font-size: 13px;
    line-height: 1.4 !important;
    margin: 0 0 0 4px;
}
body.page-id-5049 .mec-fes-form .tmce-active .switch-tmce,
body.page-id-5049 .mec-fes-form .html-active .switch-html {
    background: #ffffff !important;
    border-color: #e4d4e4 !important;
    color: #932f93 !important;
    font-weight: 700;
}

body.page-id-5051 .mec-fes-list > ul {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}
body.page-id-5051 .mec-fes-list > ul > li {
    list-style: none;
    background: #fff;
    border: 1px solid #e4d4e4;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 12px;
}

.ilp-trustline {
    margin: 2px 0 20px;
    font-size: 15px;
}
.ilp-trustline strong {
    color: #183271;
}
#ilp-trustline-email {
    color: #5e1e5e;
    font-weight: 600;
}

/* --- Support checklists (Financial page): tickable cards. The
       toggle is a real button (aria-pressed) wired in functions.php. --- */
.ilp-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0;
}
.ilp-check-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #ffffff;
    border: 2px solid #e4d4e4;
    border-left: 6px solid #932f93;
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.ilp-check-item:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.10);
}
/* (Tick-toggle rules removed 2026-07-07 — checklists are static lists now;
   the purple left accent is the visual anchor.) */
.ilp-check-body h4 {
    margin: 0 0 6px;
    font-size: 17px;
}
.ilp-check-body h4 a {
    color: #5e1e5e;
    text-decoration: none;
    border-bottom: 2px solid rgba(147, 47, 147, 0.35);
}
.ilp-check-body h4 a:hover,
.ilp-check-body h4 a:focus {
    border-bottom-color: #932f93;
}
.ilp-check-body p {
    margin: 0;
    color: #5a6474;
    font-size: 15px;
    line-height: 1.55;
}
/* download buttons inside a checklist card (What-If sheets, Our Services) */
.ilp-check-item .ilp-btn-row {
    margin: 12px 0 0;
}

/* --- Team cards (Meet the team) --- */
.ilp-team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 20px 0;
}
.ilp-team-card {
    background: #f6eff6;
    border: 1px solid #e4d4e4;
    border-radius: 12px;
    padding: 24px;
}
.ilp-team-card img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 14px rgba(24, 50, 113, 0.15);
    margin-bottom: 14px;
}
.ilp-team-card h3 {
    margin: 0 0 8px;
}
.ilp-team-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}
@media (max-width: 690px) {
    .ilp-team {
        grid-template-columns: 1fr;
    }
}

/* --- Leadership grid (Meet the Leadership Team, page 5071, Entry 83) ---
   Compact team-card grid: circular cutout photo on a white disc, name, role,
   "Read more" button opening a native <dialog> bio lightbox
   (js/ilp-leaders-lightbox.js). Flex-wrap, not grid, so a part-filled last
   row centres itself (7 people = 3+3+1 on desktop) and reflows to
   2-up / 1-up on smaller screens without extra breakpoints. */
.ilp-leadergrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 20px 0;
}
.ilp-leadergrid-card {
    /* 3-up inside the 860px service-page content column (grows to ~270px);
       max-width stops lone last-row cards ballooning */
    flex: 1 1 250px;
    max-width: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f6eff6;
    border: 1px solid #e4d4e4;
    border-radius: 12px;
    padding: 28px 22px 26px;
}
.ilp-leadergrid-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(24, 50, 113, 0.15);
    overflow: hidden;
    margin-bottom: 16px;
}
/* high-specificity variant mirrors the logolist fix: Salient's dynamic
   `.row .col img:not([srcset]) { width: auto }` (0,3,1) otherwise unsizes it */
.ilp-leadergrid-photo img,
body.ilp-service-page .row .col .ilp-leadergrid-photo img:not([srcset]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ilp-leadergrid-card h3 {
    margin: 0 0 4px;
}
.ilp-leadergrid-role {
    color: #5e1e5e;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 18px;
    flex-grow: 1; /* equalises row height so buttons align along the bottom */
}
/* site secondary button (same arms-race !importants as the My Events filter
   button — Salient pins button padding/radius in its dynamic stylesheet) */
.ilp-leadergrid-more {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    border: 2px solid #932f93 !important;
    border-radius: 8px !important;
    color: #5e1e5e !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px !important;
    padding: 9px 22px !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.ilp-leadergrid-more:hover,
.ilp-leadergrid-more:focus {
    background: #932f93;
    color: #ffffff !important;
}
.ilp-leadergrid-soon {
    color: #5a6474;
    font-style: italic;
    font-size: 15px;
    margin: 0;
    padding: 11px 0;
}
/* bio lightbox */
dialog.ilp-leader-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: 640px;
    width: calc(100% - 40px);
    max-height: 85vh;
    max-height: 85dvh; /* mobile dynamic toolbars; older browsers keep the vh line */
    overflow-y: auto;
    box-shadow: 0 18px 50px rgba(24, 50, 113, 0.3);
}
dialog.ilp-leader-dialog::backdrop {
    background: rgba(24, 50, 113, 0.5);
}
.ilp-leader-dialog-inner {
    position: relative;
    padding: 30px 34px 32px;
}
.ilp-leader-dialog-inner h3 {
    margin: 0 40px 4px 0;
}
.ilp-leader-dialog-role {
    color: #5e1e5e;
    font-weight: 600;
    margin: 0 0 16px;
}
.ilp-leader-dialog-inner p {
    color: #5a6474;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 12px;
}
.ilp-leader-dialog-inner p:last-child {
    margin-bottom: 0;
}
.ilp-leader-dialog-close {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none !important;
    border-radius: 50% !important;
    background: #f6eff6;
    color: #5e1e5e !important;
    font-size: 20px;
    line-height: 36px !important;
    padding: 0 !important;
    cursor: pointer;
}
.ilp-leader-dialog-close:hover,
.ilp-leader-dialog-close:focus {
    background: #932f93;
    color: #ffffff !important;
}
body.ilp-dialog-open {
    overflow: hidden;
}
@media (max-width: 480px) {
    .ilp-leadergrid-card {
        flex-basis: 100%;
    }
    .ilp-leader-dialog-inner {
        padding: 24px 20px 26px;
    }
}
/* navy variant (Meet our Trustees, page 5089) — same grid/lightbox system,
   navy family for distinction from the purple leadership grid */
.ilp-leadergrid--navy .ilp-leadergrid-card {
    background: #edf1f8;
    border-color: #d2dcec;
}
.ilp-leadergrid--navy .ilp-leadergrid-role {
    color: #183271;
}
.ilp-leadergrid--navy .ilp-leadergrid-more {
    border-color: #183271 !important;
    color: #183271 !important;
}
.ilp-leadergrid--navy .ilp-leadergrid-more:hover,
.ilp-leadergrid--navy .ilp-leadergrid-more:focus {
    background: #183271;
    color: #ffffff !important;
}
.ilp-leader-dialog--navy .ilp-leader-dialog-role {
    color: #183271;
}
.ilp-leader-dialog--navy .ilp-leader-dialog-close {
    background: #edf1f8;
    color: #183271 !important;
}
.ilp-leader-dialog--navy .ilp-leader-dialog-close:hover,
.ilp-leader-dialog--navy .ilp-leader-dialog-close:focus {
    background: #183271;
    color: #ffffff !important;
}

/* --- Our History (page 454) — brand-consistency touches (Entry 84) ---
   Page kept as-built (Salient design-options page — deliberately NOT joined
   to the service layer: the width cap + heading size clamps would fight its
   full-width sections). Colour-only, to match the service-page treatment.
   h2 rules scoped to .main-content so the global before-footer band's
   white-on-colour h2 is untouched. */
body.page-id-454 .main-content h1 {
    color: #932f93;
    margin-top: 40px;
}
body.page-id-454 .main-content h2 {
    color: #183271;
}
body.page-id-454 .main-content h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: #932f93;
}
/* era-date side nav of the vertical-scrolling timeline section */
body.page-id-454 h4.tab-nav-heading a.skip-hash {
    color: #183271;
}
body.page-id-454 h4.tab-nav-heading a.skip-hash:hover,
body.page-id-454 h4.tab-nav-heading a.skip-hash:focus,
body.page-id-454 h4.tab-nav-heading a.skip-hash.active-tab,
body.page-id-454 h4.tab-nav-heading.active-tab a.skip-hash {
    color: #932f93;
}
body.page-id-454 .main-content p {
    line-height: 1.75;
}

/* --- Policy grid (Important Information, page 5113, Entry 89) ---
   Loose self-centring grid of policy-download buttons: white card,
   purple border, navy label, small PDF chip. Flex-wrap so part-filled
   last rows centre (8 = 3+3+2 in the 860px service column). */
.ilp-policygrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 24px 0;
}
a.ilp-policygrid-item {
    flex: 1 1 250px;
    max-width: 330px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #ffffff;
    border: 2px solid #932f93;
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a.ilp-policygrid-item:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.14);
    transform: translateY(-2px);
}
a.ilp-policygrid-item:focus-visible {
    outline: 3px solid #183271;
    outline-offset: 2px;
}
.ilp-policygrid-label {
    color: #183271;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
}
.ilp-policygrid-type {
    flex: 0 0 auto;
    background: #f6eff6;
    color: #5e1e5e;
    border: 1px solid #e4d4e4;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px;
}
@media (max-width: 480px) {
    a.ilp-policygrid-item {
        flex-basis: 100%;
    }
}

/* --- Support Us hub (page 511, Entry 90) — grouped signpost architecture
   from the research briefing: hero photo slot, three H2 card blocks
   (Give / Give time / Fundraise & partner), supporter-promise band,
   considered-gifts strip. Built as a SKELETON: tinted dashed photo
   slots + [DAVID:…] copy placeholders for content takeover. --- */
.ilp-suphub-heroslot,
.ilp-suphub-photoslot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6eff6;
    border: 2px dashed #d2a8d2;
    border-radius: 10px;
    color: #5e1e5e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ilp-suphub-heroslot {
    max-width: 560px;
    aspect-ratio: 16 / 9;
    margin: 4px auto 8px;
}
/* Contained hero card (mockup-approved, artifact "hero-pattern-demo"):
   photo as card background, H1 + sub as LIVE text on the left bokeh zone
   over a scrim; ≤690px the text pops back to normal flow (site-standard
   purple centred H1) and the image becomes a plain 4:3 photo card.
   Photo swap = the one background-image line below. */
.ilp-suphub-hero {
    position: relative;
    margin: 10px 0 6px;
}
.ilp-suphub-hero-img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    /* v2 edit (David, 2026-07-16): 1600×700 = exact 16:7, no crop at desktop.
       Subject sits nearer centre (~62%) with open sky at top-left. */
    background-image: url(/wp-content/uploads/2026/07/ilp-support-us-hero-v2.png);
    background-size: cover;
    background-position: right center;
}
@media (min-width: 691px) {
    .ilp-suphub-hero-img::before {
        content: "";
        display: block;
        height: 100%;
        /* slightly stronger + longer than v1 — the v2 edit has light SKY at
           top-left where the text sits, not just dark foliage */
        background: linear-gradient(90deg, rgba(20, 36, 18, 0.58) 0%, rgba(20, 36, 18, 0.34) 40%, rgba(20, 36, 18, 0) 60%);
    }
    .ilp-suphub-hero-text {
        position: absolute;
        inset: 0 auto 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 44%; /* v2 edit: subject nearer centre — 48% brushed her hair */
        padding: 20px 28px 20px 34px;
        z-index: 1;
    }
    /* out-specifies the service-layer purple/centred H1 (same specificity,
       later in source) */
    body.ilp-service-page .container-wrap .ilp-suphub-hero-text h1 {
        color: #ffffff;
        text-align: left;
        margin: 0 0 10px;
        font-size: clamp(30px, 3.4vw, 42px);
        line-height: 1.12;
    }
    .ilp-suphub-hero-text .ilp-suphub-hero-sub {
        color: #ffffff;
        opacity: 0.95;
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
        text-shadow: 0 1px 2px rgba(20, 36, 18, 0.4);
    }
    .ilp-suphub-hero-text .ilp-suphub-hero-eyebrow {
        color: #ffffff;
        opacity: 0.85;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin: 0 0 10px;
    }
}
@media (max-width: 690px) {
    .ilp-suphub-hero {
        display: flex;
        flex-direction: column;
    }
    .ilp-suphub-hero-text {
        order: -1;
    }
    .ilp-suphub-hero-img {
        aspect-ratio: 4 / 3;
        background-position: 62% center; /* v2: face sits nearer centre */
        margin-top: 14px;
    }
    .ilp-suphub-hero-text .ilp-suphub-hero-eyebrow {
        display: none;
    }
    .ilp-suphub-hero-text .ilp-suphub-hero-sub {
        color: #5a6474;
        text-align: center;
        font-size: 15px;
        line-height: 1.55;
        margin: 8px 0 0;
    }
}
.ilp-suphub-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 18px 0 8px;
}
a.ilp-suphub-card {
    flex: 1 1 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e4d4e4;
    border-radius: 12px;
    padding: 14px 14px 18px;
    text-decoration: none !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
a.ilp-suphub-card:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
    border-color: #932f93;
}
a.ilp-suphub-card:focus-visible {
    outline: 3px solid #183271;
    outline-offset: 2px;
}
/* lightbox-trigger cards are <button>s (Give in memory etc.) — share the
   card look, reset button chrome */
button.ilp-suphub-card {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e4d4e4;
    border-radius: 12px !important;
    padding: 14px 14px 18px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
button.ilp-suphub-card:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
    border-color: #932f93;
}
button.ilp-suphub-card:focus-visible {
    outline: 3px solid #183271;
    outline-offset: 2px;
}
/* arms race: Salient's slightly_rounded button skin pins 7px radius w/
   !important at body-attr specificity — mirror it to restore card parity */
body[data-button-style*="rounded"] button.ilp-suphub-card {
    border-radius: 12px !important;
}
/* dialog extensions for hub lightboxes: sub-headings + CTA row
   (.row .col variant out-specifies Salient's h4 sizing, same trick as h3s) */
.ilp-leader-dialog-inner h4,
body.ilp-service-page .row .col .ilp-leader-dialog-inner h4 {
    color: #5e1e5e;
    font-size: 17px;
    line-height: 1.4;
    margin: 18px 0 6px;
}
.ilp-leader-dialog-cta {
    margin-top: 18px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
/* outline sibling of a.ilp-btn — used for download-resource buttons in
   dialogs (and reusable elsewhere) */
a.ilp-btn-outline {
    display: inline-block;
    background: #ffffff;
    border: 2px solid #932f93;
    border-radius: 4px;
    color: #5e1e5e;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 600;
}
a.ilp-btn-outline:hover,
a.ilp-btn-outline:focus {
    background: #932f93;
    color: #ffffff;
}
/* bullet lists inside hub dialogs (Partner examples) */
.ilp-leader-dialog-inner ul {
    margin: 8px 0 12px;
    padding-left: 22px;
}
.ilp-leader-dialog-inner li {
    color: #5a6474;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 4px;
}
.ilp-suphub-photoslot {
    aspect-ratio: 3 / 2;
    width: 100%;
}
/* real card photos (replace slots as content arrives) — logolist-pattern
   high-specificity variant beats Salient's `.row .col img:not([srcset])` */
.ilp-suphub-cardimg,
body.ilp-service-page .row .col .ilp-suphub-card .ilp-suphub-cardimg:not([srcset]) {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.ilp-suphub-cardtitle {
    color: #183271;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.ilp-suphub-cardline {
    color: #5a6474;
    font-size: 14.5px;
    line-height: 1.5;
}
/* Full-bleed band like the impact banner (Entry 94 pattern, David
   2026-07-20): edge-to-edge via the calc(50% - 50vw) margins, top/
   bottom border lines only; Salient's global body overflow-x:hidden
   absorbs the scrollbar-vw overshoot. Content is re-capped by
   .ilp-suphub-promise-inner. */
.ilp-suphub-promise {
    background: #edf1f8;
    border: none;
    border-radius: 0;
    padding: 34px 24px;
    margin: 30px calc(50% - 50vw) 8px;
    text-align: center;
}
.ilp-suphub-promise-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.ilp-suphub-promise h2 {
    margin-top: 0;
}
.ilp-suphub-promise h2::after {
    margin-left: auto;
    margin-right: auto;
}
/* Promise cards v2 (David 2026-07-20): four FIXED-SIZE flip cards —
   front face shows only the promise heading, click/Enter/Space flips
   (rotateY, faces on absolute layers with backface-visibility) to the
   description. The card box never changes size in either state; the
   fixed height is sized to the longest back text (High Standards) at
   the narrowest 4-up column, with overflow-y:auto as a safety valve.
   Toggle script lives in the same raw_html block. Reduced-motion
   users get an instant swap (transition zeroed). Plus a full-width
   .ilp-promise-card--fr card holding the FR badge (not a flip). */
.ilp-suphub-promise-cards {
    display: grid;
    /* 170px min: the band's inner is ~1000px capped — 170 keeps a
       clean row of 4 down to narrow desktop, then wraps/stacks. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin: 18px 0 16px;
    text-align: left;
}
.ilp-flipcard {
    position: relative;
    height: 220px;
    cursor: pointer;
    perspective: 900px;
    -webkit-tap-highlight-color: transparent;
}
.ilp-flipcard:focus-visible {
    outline: 3px solid #932f93;
    outline-offset: 3px;
    border-radius: 10px;
}
.ilp-flipcard-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}
.ilp-flipcard.is-flipped .ilp-flipcard-inner {
    transform: rotateY(180deg);
}
.ilp-flipcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #ffffff;
    border: 1px solid #d2dcec;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ilp-flipcard-front h3 {
    margin: 0;
}
/* corner hint that the card does something */
.ilp-flipcard-front::after {
    content: "+";
    position: absolute;
    right: 12px;
    bottom: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #932f93;
}
.ilp-flipcard:hover .ilp-flipcard-face {
    border-color: #932f93;
}
.ilp-flipcard-back {
    transform: rotateY(180deg);
    overflow-y: auto;
}
.ilp-flipcard-back p {
    font-size: 14px;
    line-height: 1.5;
    color: #5a6474;
    margin: 0;
}
@media (prefers-reduced-motion: reduce) {
    .ilp-flipcard-inner {
        transition: none;
    }
}
@media (max-width: 690px) {
    .ilp-flipcard {
        height: 170px;
    }
}
.ilp-promise-card {
    background: #ffffff;
    border: 1px solid #d2dcec;
    border-radius: 10px;
    padding: 18px 20px;
}
.ilp-promise-card--fr {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
/* .row .col variant: Salient's column img rules outrank a bare class
   (same trap as the suphub card/logolist images) — this is also why
   the badge ignored its old 180px cap and rendered oversized. */
.ilp-suphub-badge,
body.ilp-service-page .row .col img.ilp-suphub-badge:not([srcset]) {
    max-width: min(380px, 100%);
    width: auto;
    height: auto;
    display: block;
}
.ilp-suphub-considered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 22px 0 10px;
    font-size: 15px;
}
.ilp-suphub-considered-label {
    color: #5a6474;
    font-weight: 700;
}
.ilp-suphub-considered a {
    color: #5e1e5e;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(147, 47, 147, 0.35);
}
.ilp-suphub-considered a:hover,
.ilp-suphub-considered a:focus {
    border-bottom-color: #932f93;
}
@media (max-width: 480px) {
    a.ilp-suphub-card {
        flex-basis: 100%;
        max-width: 340px;
    }
}

/* --- All Activities / events calendar (page 474) — house-style touches
   (Entry 91). Same treatment class as Our History: colour-only, page kept
   as-built (MEC monthly-view calendar), NOT joined to the service layer
   (the 1000px cap would squeeze the calendar+list two-pane layout).
   NB MEC's accent on all its surfaces is the OLD transposed purple #923492
   set at MEC-OPTIONS level — imperceptible vs brand (1 RGB point/channel)
   but the wrong documented hex; flagged in the tracker for a global
   options-level fix rather than papered over per-page here. --- */
body.page-id-474 .main-content h1 {
    color: #932f93;
}
body.page-id-474 .main-content > .row h3 {
    color: #183271; /* "This Month" section label */
}
body.page-id-474 .mec-calendar-header h2 {
    color: #183271; /* JULY 2026 month title */
}
body.page-id-474 .mec-wrap .mec-table-side-title {
    color: #183271; /* "EVENTS FOR 20TH JULY" side label */
}
/* !important: MEC sets the title via --mec-title-color through a rule that
   out-cascades a clean override (same arms-race class as Salient's) */
body.page-id-474 .mec-wrap .mec-event-title a {
    color: #183271 !important;
}
body.page-id-474 .mec-wrap .mec-event-title a:hover,
body.page-id-474 .mec-wrap .mec-event-title a:focus {
    color: #932f93 !important;
}

/* --- Responsive video embed --- */
.ilp-video {
    position: relative;
    max-width: 760px;
    margin: 24px auto;
    aspect-ratio: 16 / 9;
}
.ilp-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}

/* --- Equipment list (Sensory: Technology & Resource Support) —
       compact kin of the checklist cards --- */
.ilp-equiplist {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 18px 0;
}
/* list-style:none + margin reset at li level: Salient's `ul li` disc rule and
   the service-layer li + li gap both out-specify the ul-level resets (Entry 63) */
.ilp-equiplist li,
body.ilp-service-page .main-content .ilp-equiplist li + li {
    list-style: none;
    margin: 0;
    background: #ffffff;
    border: 2px solid #e4d4e4;
    border-left: 6px solid #932f93;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
}
@media (max-width: 690px) {
    .ilp-equiplist { grid-template-columns: 1fr; }
}

/* --- Logo/link list (Sensory: Useful Links) — logo + org name rows,
       whole row clickable --- */
.ilp-logolist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0;
}
a.ilp-logolist-item {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #ffffff;
    border: 1px solid #e4d4e4;
    border-radius: 12px;
    padding: 14px 20px;
    text-decoration: none !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
a.ilp-logolist-item:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
    border-color: #932f93;
}
/* high-specificity variant required: Salient's dynamic CSS sets
   `.row .col img:not([srcset]) { width: auto }` (0,3,1), which out-specifies
   the bare rule and let every logo render at natural size (some 400px wide).
   Fixed 110×64 box, logo scaled inside it and pinned LEFT so all logos and
   names share the same left edges (David, 2026-07-09). */
.ilp-logolist-item img,
body.ilp-service-page .row .col .ilp-logolist-item img:not([srcset]) {
    width: 110px;
    height: 64px;
    object-fit: contain;
    object-position: left center;
    flex: 0 0 110px;
}
@media (max-width: 480px) {
    .ilp-logolist-item img,
    body.ilp-service-page .row .col .ilp-logolist-item img:not([srcset]) {
        width: 84px;
        height: 52px;
        flex-basis: 84px;
    }
}
.ilp-logolist-item span {
    color: #183271;
    font-weight: 700;
    font-size: 17px;
}
.ilp-logolist-item span::after {
    content: "\2197";
    margin-left: 8px;
    font-size: 13px;
    color: #932f93;
}
@media (max-width: 500px) {
    a.ilp-logolist-item { gap: 14px; padding: 12px 14px; }
    .ilp-logolist-item img { width: 80px; height: 48px; }
    .ilp-logolist-item span { font-size: 15px; }
}

/* --- Funder / partner logo strip (bottom of hub pages) --- */
.ilp-logostrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 34px;
    margin: 30px 0 8px;
}
.ilp-logostrip img {
    max-height: 130px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}
.ilp-fundedby {
    text-align: center;
    font-weight: 700;
    color: #183271;
    margin: 26px 0 10px;
}

/* --- Urgent notice panel (Advice: benefit-referrals pause). Redesigned
       2026-07-09 (David): pastel RED for urgency; title + key paras +
       guide buttons always visible, remaining detail behind "Read More".
       Red family: fill #fdf0ef, border #dd5a4b, deep-red label #8a2f28. --- */
.ilp-notice {
    background: #fdf0ef;
    border: 2px solid #dd5a4b;
    border-radius: 12px;
    padding: 16px 22px;
    margin: 26px 0;
}
.ilp-notice .ilp-notice-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #2a2a2a;
}
.ilp-notice > p {
    font-size: 15px;
    line-height: 1.65;
}
.ilp-notice a.ilp-btn--resource {
    border-color: #c44536;
    color: #8a2f28 !important;
}
.ilp-notice a.ilp-btn--resource:hover {
    background: #fbe4e1;
    border-color: #a93226;
}
.ilp-notice summary {
    cursor: pointer;
    font-weight: 700;
    color: #8a2f28;
    padding: 12px 0;
    font-size: 16.5px;
    /* inside: the ▶ marker starts at the content edge, so the Read More
       line left-aligns with the buttons above it */
    list-style-position: inside;
}
.ilp-notice summary:hover {
    color: #c44536;
}
.ilp-notice .ilp-notice-body {
    padding: 4px 0 14px;
    border-top: 1px solid #f2c9c4;
}
.ilp-notice .ilp-notice-body p,
.ilp-notice .ilp-notice-body li {
    font-size: 15px;
    line-height: 1.65;
}
.ilp-notice .ilp-notice-body h4 {
    margin: 14px 0 4px;
    font-size: 16px;
}

/* --- Flyer / poster image (Wolferstans, carers hub 4663) — framed portrait
       poster in a 1/3 column beside its section copy. width !important:
       Salient's inline .row .col img:not([srcset]){width:auto} outranks the
       bare class and would zero the unloaded lazy img (the gallery lesson).
       Below Salient's column-stack point the poster caps at 420px centred
       so it doesn't balloon to full phone width. --- */
.ilp-flyer {
    display: block;
    width: 100% !important;
    height: auto;
    border: 1px solid #e4d4e4;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(24, 50, 113, 0.12);
}
a.ilp-flyer-link {
    display: block;
    line-height: 0;
}
/* Side-by-side (≥1000px): drop the flyer to the h2's top edge so the
   section reads as one aligned block — the h2's offset is its 1.5em
   margin-top, so mirror it (em = the h2 font-size clamp). Measured
   match: 41px at 1280w. */
@media (min-width: 1000px) {
    a.ilp-flyer-link {
        margin-top: calc(1.5 * clamp(22px, 1.2vw + 12px, 28px));
    }
}
a.ilp-flyer-link:hover .ilp-flyer,
a.ilp-flyer-link:focus .ilp-flyer {
    box-shadow: 0 10px 26px rgba(24, 50, 113, 0.18);
}
@media (max-width: 999px) {
    a.ilp-flyer-link { max-width: 420px; margin: 10px auto 0; }
}

/* --- 2-col variant of the news grid (Active for All activity cards) --- */
.ilp-news-grid.ilp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 690px) {
    .ilp-news-grid.ilp-grid-2 { grid-template-columns: 1fr; }
}
.ilp-event-meta {
    color: #932f93;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}
/* --- Workshop date cards (LTCSM): news-card DNA, no media, the four
       session dates as a compact list. li + li reset per Entry 63. --- */
.ilp-news-grid.ilp-grid-1 {
    grid-template-columns: 1fr;
}
.ilp-event-sessions {
    margin: 10px 0 0;
    padding: 0 0 0 1.1em;
    font-size: 14.5px;
    color: #5a6474;
}
.ilp-event-sessions li,
body.ilp-service-page .main-content .ilp-event-sessions li + li {
    line-height: 1.5;
    margin-top: 4px;
}

/* --- Hub-nav tile grids on ALL service pages (David 2026-07-07):
       same treatment as the locked Carers-hub grid — tint fill,
       2px purple outline, aubergine centred label, hover lift.
       Applies to any block-columns grid holding .ilp-card tiles
       (Advice hub 2 tiles, Sensory hub 5, etc.). auto-fit keeps
       2-tile rows full-width and wraps 5-tile rows 3+2; stacks on
       mobile via minmax. --- */
body.ilp-service-page .wp-block-columns:has(.ilp-card),
body.page-id-419 .wp-block-columns:has(.ilp-card) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 1040px;
    margin: 0 auto 24px;
}
body.ilp-service-page .wp-block-columns:has(.ilp-card) > :not(.wp-block-column),
body.page-id-419 .wp-block-columns:has(.ilp-card) > :not(.wp-block-column) {
    display: none;
}
body.ilp-service-page .wp-block-columns:has(.ilp-card) .wp-block-column,
body.page-id-419 .wp-block-columns:has(.ilp-card) .wp-block-column {
    margin: 0;
    padding: 0;
    width: auto;
}
body.page-id-419 .ilp-card,
body.ilp-service-page .ilp-card {
    background: transparent;
    border: 2px solid #932f93;
    border-radius: 12px;
    min-height: 76px;
    height: 100%;
    padding: 11px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
body.page-id-419 .ilp-card:hover,
body.ilp-service-page .ilp-card:hover {
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.12);
    transform: translateY(-2px);
    border-color: #7a277a;
}
/* .row .col variant (0,4,2) required: the service-page h3 sizing rule carries a
   .row .col selector (0,3,1) to beat Salient, which would otherwise out-specify
   this 17px tile-label size too */
body.page-id-419 .ilp-card h3,
body.ilp-service-page .ilp-card h3,
body.ilp-service-page .row .col .ilp-card h3 {
    margin: 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.3;
}
body.page-id-419 .ilp-card h3 a,
body.page-id-419 .ilp-card h3 a:hover,
body.page-id-419 .ilp-card h3 a:focus,
body.ilp-service-page .ilp-card h3 a,
body.ilp-service-page .ilp-card h3 a:hover,
body.ilp-service-page .ilp-card h3 a:focus {
    color: #183271;
    font-weight: 700;
    text-decoration: none;
}

/* --- Sensory Solutions (4686) low-vision emphasis (David 2026-07-20):
   this page's audience skews low-vision, so the primary action gets
   categorical prominence rather than sitting as the sixth identical
   tile. The Register tile was removed from the grid (now 5 tiles,
   wrapping 3+2 via the auto-fit rule above) and replaced by this
   full-width solid-purple bar beneath it — solid fill because thin
   outlines dissolve at low acuity where filled blocks stay visible.
   White-on-#932f93 measures 6.8:1 (AA). Tile labels bumped 17->20px
   on this page only. Bottom CTAs re-tiered: Register primary and
   enlarged; Contact demoted to navy outline secondary. --- */
body.page-id-4686 a.ilp-registerbar {
    display: block;
    max-width: 1040px;
    margin: 0 auto 28px;
    background: #932f93;
    border: 2px solid #932f93;
    border-radius: 12px;
    color: #ffffff !important;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    padding: 18px 24px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.page-id-4686 a.ilp-registerbar:hover {
    background: #7a277a;
    border-color: #7a277a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 50, 113, 0.15);
}
body.page-id-4686 a.ilp-registerbar:focus-visible,
body.page-id-4686 .ilp-card h3 a:focus-visible {
    outline: 3px solid #183271;
    outline-offset: 3px;
}
/* .row .col variant mirrors the 17px rule's specificity ladder above */
body.page-id-4686 .ilp-card h3,
body.page-id-4686 .row .col .ilp-card h3 {
    font-size: 20px;
}
body.page-id-4686 a.ilp-btn--register {
    font-size: 18px;
    padding: 16px 30px;
}
body.page-id-4686 a.ilp-btn--contact {
    background: #ffffff;
    color: #183271 !important;
}
body.page-id-4686 a.ilp-btn--contact:hover {
    background: #edf1f8;
    border-color: #183271;
}
/* anchor jumps land clear of the fixed header */
#sensoryregister {
    scroll-margin-top: 120px;
}

/* --- Event single: description containment (2026-07-28, Entry 140) ---
   .ilp-event-desc = el_class on the [MEC:content] text element in global
   section 753 "Single Template" — the hook renders on the wpb_text_column
   wrapping every event description. Contributor-proofing: long descriptions
   scroll inside the box on desktop instead of pushing the layout down;
   pasted markup cannot blow the type scale or overflow the column.
   (The hero image needs nothing — the Distil skin already frames it
   16:9 object-fit:cover.) --- */
/* hero: never crop, never upscale (David's option C, 2026-07-28) — the Distil
   skin's 16:9 cover frame clipped portrait posters (29 events ≥40% loss) and
   blurred sub-583px originals (17 events). scale-down letterboxes on the brand
   tint instead; media pass replaces the worst files post-live. */
body.single-mec-events .mec-hero img {
    object-fit: scale-down !important;
    background: #ffffff;
}
/* the skin's 50%-width hero is desktop-sized; on phones it rendered a 165px
   thumbnail — use the full column below the stack point */
@media (max-width: 999px) {
    body.single-mec-events .mec-hero img {
        width: 100% !important;
    }
}

/* --- /activities liquid-grid cards (David 2026-07-28): bold unlined titles,
       repeat pills hidden, images letterboxed not cropped. Overrides MEC's
       saved Custom CSS (which sets underline + cover explicitly). --- */
.mec-liquid-grid article.mec-event-article .mec-event-content h4 a {
    text-decoration: none !important;
    font-weight: 700;
}
/* MEC's saved Custom CSS pins these with display:inline-block !important at
   (0,4,2) — this selector is (0,5,2) so none wins */
.mec-liquid-grid article.mec-event-article .mec-event-content h4.mec-event-title .mec-repeating-label {
    display: none !important;
}
.mec-liquid-grid article.mec-event-article .mec-event-image img {
    object-fit: scale-down !important;
    background: #ffffff;
}

.ilp-event-desc {
    overflow-wrap: anywhere;
    word-break: break-word; /* fallback where anywhere is unsupported */
}
.ilp-event-desc img {
    max-width: 100% !important;
    height: auto;
}
/* NB no height:auto on iframes — it collapses them to the 150px default */
.ilp-event-desc iframe {
    max-width: 100% !important;
}
/* pasted h1/h2 render at section-heading scale, not page-title scale */
body.single-mec-events .ilp-event-desc h1,
body.single-mec-events .ilp-event-desc h2 {
    font-size: 20px;
    line-height: 1.4;
    margin: 1em 0 0.4em;
}
@media (min-width: 1000px) {
    .ilp-event-desc > .wpb_wrapper {
        max-height: 480px;
        min-height: 120px;
        overflow-y: auto;
        padding-right: 10px;
        scrollbar-width: thin;
        scrollbar-color: #932f93 #f6eff6;
        /* scroll shadows — visible only while more content remains */
        background:
            linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) top,
            linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) bottom,
            radial-gradient(farthest-side at top, rgba(24, 50, 113, 0.16), transparent) top,
            radial-gradient(farthest-side at bottom, rgba(24, 50, 113, 0.16), transparent) bottom;
        background-size: 100% 44px, 100% 44px, 100% 16px, 100% 16px;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
}