/*
 * L01.1 (2026-09-12): this forced the Local Updates page and every local
 * update article to a hard white background in BOTH themes, while the copy
 * on it resolves through --hp-color-ink / --hp-color-body, which do flip for
 * dark mode. The result was a whole content type unreadable in dark: the
 * article h1 measured 1.21:1, its standfirst 1.92:1 and its body 1.21:1.
 * The page now follows the theme's own canvas token, which is white in light
 * mode exactly as before.
 */
.hp-local-page { background: var(--hp-color-canvas, var(--hp-color-white)) !important; }
/* Masthead consistency correction (2026-08-06): this wrapper (which contains
   Local Updates' own shared masthead call) previously used a distinct 75rem
   (1200px) cap with baked-in 1rem horizontal padding -- a different sizing
   model from the canonical shell every other Standard-tier page uses, ~20px
   wider and edge-spaced differently. Now shares the same token. */
/* Standard-masthead spacing correction (2026-08-07): the top half of this
   padding used to duplicate the header-to-masthead gap with a different
   formula (2-5rem here vs. the shared clamp(22px,4vw,48px) other pages
   used) -- that gap now lives on the masthead itself (page-surfaces.css),
   so this wrapper only keeps its own page-end bottom padding. */
.hp-feed { width: min(100% - var(--hp-shell-gutter) * 2, var(--hp-shell-max-width)); margin-inline: auto; padding-block: 0 clamp(4rem, 8vw, 7rem); color: var(--hp-color-ink); }
.hp-feed__hero { max-width: 50rem; margin-bottom: var(--hp-space-8); }
.hp-feed__eyebrow { margin: 0 0 var(--hp-space-2); color: var(--hp-color-primary-700); font-size: var(--hp-text-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hp-feed__hero h1 { margin: 0 0 var(--hp-space-4); color: var(--hp-color-ink); font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1; }
.hp-feed__hero p:last-child { max-width: 42rem; margin: 0; color: var(--hp-color-body); font-size: var(--hp-text-lg); line-height: 1.65; }
/* Owner correction (2026-08-19): this filter form used to sit inside its
   own solid, flat --hp-color-primary-100 card (with a matching border and
   rounded corners) directly beneath the masthead. Even though that tint is
   very pale, a flat solid fill reads as a second, separate "block" right
   after the masthead's own fade -- from a distance the two blur together
   into exactly the "purple block, hard edge, white page" look the owner
   flagged, just with the edge one component lower than expected. Dropping
   the card chrome lets the form sit directly on the page's own (white)
   background, matching how the shared .hp-compact-filters pattern used on
   What's On/Jobs/Offers/Volunteering already works -- filters that emerge
   from the page, not a separate slab. */
/* Owner correction (2026-08-20): replaces the always-open 2-column
   .hp-feed-filter grid (confirmed live on a real 375px screenshot to push
   the first update card almost entirely below the first mobile viewport --
   masthead + two full-width dropdowns + Apply-filters button left only a
   sliver of the first card visible). Reuses the same collapsed-by-default
   <details>/<summary> floating-panel pattern already proven on What's On
   (.hp-events-toolbar in events.css, added 2026-08-13) -- zero JS, closed
   at every screen size (not just mobile), so opening it never pushes the
   update grid down the page; the "N published updates" line and the first
   card now sit directly under a single compact "Filters" pill instead of
   two full dropdowns. Rules mirror .hp-events-toolbar* 1:1 (same proven
   sizing), just renamed to this module's own hp-feed-toolbar* prefix
   rather than sharing the literal class names cross-module. */
.hp-feed-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.hp-feed-toolbar__more { position: relative; }
.hp-feed-toolbar__more-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hp-color-primary-200,#c4b5fd); border-radius: 999px; background: var(--hp-color-white); color: var(--hp-color-primary-700); font-weight: 700; cursor: pointer; list-style: none; }
.hp-feed-toolbar__more-toggle::-webkit-details-marker { display: none; }
.hp-feed-toolbar__more[open] .hp-feed-toolbar__more-toggle { background: var(--hp-color-primary-500); border-color: var(--hp-color-primary-500); color: var(--hp-color-white); }
.hp-feed-toolbar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hp-color-primary-500); color: var(--hp-color-white); font-size: .75rem; }
.hp-feed-toolbar__more[open] .hp-feed-toolbar__count { background: rgba(255,255,255,.3); }
.hp-feed-toolbar__panel { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; display: grid; gap: 14px; min-width: 280px; padding: 18px; border: 1px solid var(--hp-color-border); border-radius: 16px; background: var(--hp-color-white); box-shadow: 0 18px 44px rgba(27,20,35,.16); }
.hp-feed-toolbar__panel label { display: grid; gap: var(--hp-space-2); color: var(--hp-color-ink); font-weight: 700; }
.hp-feed-toolbar__panel select { min-height: 44px; width: 100%; padding-inline: var(--hp-space-3); border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-md); background: var(--hp-color-white); color: var(--hp-color-ink); }
.hp-feed-toolbar__actions { display: flex; align-items: center; gap: 14px; }
.hp-feed-toolbar__clear { display: inline-flex; min-height: 44px; align-items: center; color: var(--hp-color-primary-700); font-weight: 700; }
.hp-feed-toolbar .hp-c-btn--primary { min-height: 44px; border-color: var(--hp-color-primary-500) !important; background: var(--hp-color-primary-500) !important; color: var(--hp-color-white) !important; font-weight: 800; }
.hp-feed__status { margin: var(--hp-space-6) 0; color: var(--hp-color-body); font-weight: 700; }
.hp-feed__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--hp-space-6); }
/* Owner fix (2026-08-18): .hp-feed__grid's default grid stretch already
   makes every card in a row match the row's tallest card -- correct for a
   uniform archive grid -- but a plain block box has no way to redistribute
   that extra height, so it collected as an orphaned blank slab under
   whichever card's real content (title/excerpt/meta) was shortest. Making
   the card and its body flex columns lets the same stretched height
   collect as a controlled gap directly above the source line instead. */
.hp-update-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-xl); background: var(--hp-color-white); box-shadow: var(--hp-shadow-card); }
.hp-update-card__image { display: block; height: 13rem; background: var(--hp-color-primary-100); }
.hp-update-card__image img { width: 100%; height: 100%; object-fit: cover; }
/*
 * V12 (Stage B Wave 5, 2026-08-06): a real photo keeps the full-height
 * treatment above -- it's genuine content worth the space. The fallback
 * (no permitted image) used to inherit that same 13rem/11rem height with
 * only a small centred brand-heart icon inside it, which read as "a large
 * blank lavender media area... pushing its title below the first screen"
 * on mobile (the exact tracker finding). Capping the fallback specifically
 * -- never the real-image case -- removes the wasted space without ever
 * rendering a genuinely empty frame.
 */
.hp-update-card__image--fallback { display: grid; height: 6rem; place-items: center; }
.hp-update-card__image--fallback img { width: 3rem; height: auto; }
.hp-update-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--hp-space-6); }
.hp-update-card__meta { display: flex; flex-wrap: wrap; gap: var(--hp-space-2); color: var(--hp-color-body); font-size: var(--hp-text-sm); font-weight: 700; }
.hp-update-card__meta > * { display: inline-flex; min-height: 28px; align-items: center; padding: .2rem .55rem; border-radius: var(--hp-radius-pill); background: var(--hp-color-primary-100); }
.hp-update-card__sponsored { background: var(--hp-color-primary-900) !important; color: var(--hp-color-white); }
.hp-update-card h2 { margin: var(--hp-space-4) 0 var(--hp-space-3); font-size: var(--hp-text-xl); line-height: 1.25; }
.hp-update-card h2 a { display: inline-flex; min-height: 44px; align-items: center; color: var(--hp-color-ink); text-decoration: none; }
.hp-update-card p { color: var(--hp-color-body); line-height: 1.65; }
.hp-update-card__source { padding-top: var(--hp-space-3); border-top: 1px solid var(--hp-color-border); font-size: var(--hp-text-sm); font-weight: 700; }
/* Real card markup (local-feed.php's hp_platform_render_update_card()) is
   meta / h2 / excerpt <p>, then an OPTIONAL .hp-update-card__source <p> --
   :last-of-type correctly targets whichever <p> is genuinely last either
   way, so the stretched-height gap collects there for every card, not
   only the ones that happen to have a source line. */
.hp-update-card__body p:last-of-type { margin-top: auto; }
.hp-feed-empty { margin: var(--hp-space-8) 0; padding: clamp(1.5rem,5vw,3rem); border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-xl); background: var(--hp-color-white); box-shadow: var(--hp-shadow-card); }
.hp-feed-empty h2 { margin-top: 0; font-size: clamp(1.5rem,5vw,2.5rem); }
.hp-feed-empty__eyebrow { margin: 0 0 var(--hp-space-2); color: var(--hp-color-primary-700); font-size: var(--hp-text-sm); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hp-feed-empty__actions { display: flex; flex-wrap: wrap; gap: var(--hp-space-3); margin-top: var(--hp-space-6); }
.hp-feed-empty__actions .hp-c-btn { min-height: 44px; }
.hp-feed-demo { width: min(100%, 32rem); margin-top: var(--hp-space-8); padding: var(--hp-space-4); border: 2px dashed var(--hp-color-primary-400); border-radius: var(--hp-radius-xl); background: var(--hp-color-primary-100); }
.hp-feed-demo__label { margin-bottom: var(--hp-space-4); color: var(--hp-color-primary-900); font-size: var(--hp-text-sm); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hp-update-card--demo { max-width: 25rem; }
.hp-feed-pagination ul { display: flex; flex-wrap: wrap; gap: var(--hp-space-2); justify-content: center; padding: 0; list-style: none; }
.hp-feed-pagination a,.hp-feed-pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-md); }
.hp-feed a:focus-visible,.hp-feed button:focus-visible,.hp-feed select:focus-visible { outline: 3px solid var(--hp-color-primary-500); outline-offset: 3px; }
@media(max-width:767px){.hp-feed__grid{grid-template-columns:1fr}.hp-feed-empty__actions .hp-c-btn{width:100%}.hp-update-card__image{height:11rem}.hp-update-card__image--fallback{height:5rem}.hp-update-card__body{padding:var(--hp-space-4)}.hp-feed-toolbar__panel{left:0;right:auto;min-width:min(280px,calc(100vw - 2 * var(--hp-shell-gutter-mobile,12px)))}}
@media(min-width:768px) and (max-width:1100px){.hp-feed__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.hp-feed *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.hp-update-single { width: min(100% - 2rem, 52rem); margin-inline: auto; padding: clamp(2rem,6vw,5rem) 0 clamp(4rem,8vw,7rem); color: var(--hp-color-ink); }
.hp-update-single__back { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: var(--hp-space-6); color: var(--hp-color-primary-700); font-weight: 800; }
.hp-update-single h1 { margin: var(--hp-space-4) 0; font-size: clamp(2.25rem,7vw,4.5rem); line-height: 1.05; }
.hp-update-single__standfirst { color: var(--hp-color-body); font-size: var(--hp-text-lg); line-height: 1.65; }
.hp-update-single__image { margin: var(--hp-space-8) 0; }
.hp-update-single__image img { width: 100%; border-radius: var(--hp-radius-xl); }
.hp-update-single__content { font-size: var(--hp-text-lg); line-height: 1.8; }
.hp-update-single__source { display: flex; flex-wrap: wrap; gap: var(--hp-space-3); margin-top: var(--hp-space-8); padding: var(--hp-space-4); border-radius: var(--hp-radius-lg); background: var(--hp-color-primary-100); }
.hp-update-single__actions { display: flex; flex-wrap: wrap; gap: var(--hp-space-3); align-items: center; margin-top: var(--hp-space-8); }
.hp-update-single__actions > a { min-height: 44px; }

/* =========================================================
   DARK MODE  (L01.1, 2026-09-12)
   This stylesheet had no dark rules at all -- it predates the dark theme --
   so every surface it paints stayed light while the text on it was
   recoloured. Each rule below sets a surface and its foreground together.
   ========================================================= */

.hp-experience-dark .hp-feed-toolbar__more-toggle {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border-strong, #604571 );
	color: #d6b4ff;
}

.hp-experience-dark .hp-feed-toolbar__panel {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border, #44334f );
	box-shadow: 0 18px 44px rgba( 0, 0, 0, .5 );
}

.hp-experience-dark .hp-feed-toolbar__panel label,
.hp-experience-dark .hp-feed-toolbar__panel select {
	color: var( --hp-color-ink, #eee6f7 );
}

.hp-experience-dark .hp-feed-toolbar__panel select {
	background: var( --hp-color-surface-muted, #191120 );
	border-color: var( --hp-color-border, #44334f );
}

.hp-experience-dark .hp-feed-toolbar__clear,
.hp-experience-dark .hp-feed__eyebrow,
.hp-experience-dark .hp-feed-empty__eyebrow,
.hp-experience-dark .hp-update-single__back {
	color: #d6b4ff;
}

.hp-experience-dark .hp-update-card,
.hp-experience-dark .hp-feed-empty {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border, #44334f );
	box-shadow: none;
}

.hp-experience-dark .hp-update-card__meta > *,
.hp-experience-dark .hp-update-single__source {
	background: #2e2140;
	color: var( --hp-color-text-muted, #c3b6d0 );
}

.hp-experience-dark .hp-update-card h2 a {
	color: var( --hp-color-ink, #eee6f7 );
}

.hp-experience-dark .hp-update-card__image {
	background: #2a1f37;
}

.hp-experience-dark .hp-update-single__source strong,
.hp-experience-dark .hp-update-single__source a {
	color: var( --hp-color-ink, #eee6f7 );
}

/* Same geometry, same guard as the What's On filter panel: absolute at
   left:0 of a toggle that sits part-way along the toolbar, so on a phone it
   can overhang the viewport. */
@media (max-width: 560px) {
	.hp-feed-toolbar__panel {
		right: 0;
		left: auto;
		min-width: 0;
		width: max-content;
		max-width: calc( 100vw - 2rem );
	}
}