/*
* Learning components — shared styles for the [rcvda_listing] / [rcvda_training]
* card list and the single course/event renders. Colours reference the base
* theme's --wp--preset--color--* tokens only (no hex literals); dark mode pivots
* through html[data-theme="dark"] (theme-owned), never prefers-color-scheme.
*
* @package RCVDA_Core
*/
.rcvda-learn {
margin-block: var(--wp--preset--spacing--40, 1.5rem);
}
.rcvda-learn__heading {
margin-block: 0 var(--wp--preset--spacing--30, 1rem);
}
.rcvda-learn__intro {
margin-block: 0 var(--wp--preset--spacing--40, 1.5rem);
}
/* ---- Controls ---------------------------------------------------------- */
.rcvda-learn__controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
align-items: center;
justify-content: flex-start;
/* Bound the search + filter controls in a panel, separated from the results —
the canonical directory approach (matches the Fundseekers rfs-search-form).
Keyed to theme tokens so it follows dark mode. */
background: var(--wp--preset--color--base, #fff);
border: 1px solid var(--wp--preset--color--divider, #c3d4e2);
border-radius: 14px;
padding: 1.25rem 1.5rem;
margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
}
/* Neutralise wpautop artifacts — WordPress auto-inserts empty
s and s into
the shortcode HTML. Left in, an empty paragraph becomes a full-width flex row and
adds phantom vertical space (it showed up as uneven padding at the bottom of the
panel once the export row moved inside). The control bar never legitimately
contains a bare/empty
or a , so hide them wherever wpautop drops them. */
.rcvda-learn__controls p:empty,
.rcvda-learn__controls > p,
.rcvda-learn__controls br,
.rcvda-learn__facets br {
display: none;
}
.rcvda-learn__pills {
display: flex;
/* Full-width so the pills always sit on their own line and the facets
(dropdowns + search) wrap onto the line below — never inline with the pills. */
flex: 0 0 100%;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Canonical filter pill — matches the opportunities (rcvda-vac) filter pill:
10px rounded rectangle, 1px border, surface fill, brand-filled when active.
See the Directory control-component styling convergence decision (2026-08-02). */
.rcvda-learn-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 10px;
border: 1px solid var(--wp--preset--color--divider, #c3d4e2);
background: var(--wp--preset--color--surface, #a7c1d9);
color: var(--wp--preset--color--contrast, #0e1f40);
font-weight: 600;
text-decoration: none;
line-height: 1.4;
}
.rcvda-learn-pill:hover,
.rcvda-learn-pill:focus {
border-color: var(--wp--preset--color--brand, #0e1f40);
color: var(--wp--preset--color--brand, #0e1f40);
}
.rcvda-learn-pill.is-active {
background: var(--wp--preset--color--brand, #0e1f40);
border-color: var(--wp--preset--color--brand, #0e1f40);
color: var(--wp--preset--color--on-dark, #fff);
}
/* Sits inline with the pills and grows to fill the rest of the control bar; the
search field then fills the leftover space. Verified in-browser — no overflow
(the earlier "overflow" was actually a 403 on the stylesheet, not these rules). */
/* flex-basis 40rem is the responsive tipping point: with few/narrow pills (the
/courses/ and /events/ archives) the facets stay inline on the pills row; with
the training view's four pills they can't fit, so the whole facets group wraps
to its own full-width row and the filters lay out inline across it (rather than
being squeezed beside the pills and stacking). Verified in-browser on both. */
.rcvda-learn__facets {
display: flex;
flex: 1 1 40rem;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
min-width: 0;
}
.rcvda-learn__field {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
}
/* The search field takes the leftover width of the facets row so it isn't a
stranded narrow box with a gap beside it. */
.rcvda-learn__field--search {
flex: 1 1 12rem;
min-width: 0;
}
/* Canonical dropdown / search field — 10px, 1px border, ~44px tall, keyed to the
theme tokens so it follows dark mode (fixes the white-in-dark directory bug). */
.rcvda-learn__topic,
.rcvda-learn__audience,
.rcvda-learn__search {
padding: 0.55rem 0.75rem;
border: 1px solid var(--wp--preset--color--divider, #c3d4e2);
border-radius: 10px;
/* background-color (not the `background` shorthand) so the select chevron
background-image below is not reset. */
background-color: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--contrast, #0e1f40);
font-size: 1rem;
line-height: 1.4;
box-sizing: border-box;
}
/* Custom dropdown chevron (selects only, not the search input) — the native
`appearance:auto` arrow sits jammed against the edge; this insets it ~0.9rem
with clear text padding. Dark stroke here; swapped to light in dark mode below. */
.rcvda-learn__topic,
.rcvda-learn__audience {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 16px 16px;
padding-right: 2.25rem;
}
.rcvda-learn__topic:hover,
.rcvda-learn__audience:hover,
.rcvda-learn__search:hover,
.rcvda-learn__topic:focus,
.rcvda-learn__audience:focus,
.rcvda-learn__search:focus {
border-color: var(--wp--preset--color--brand, #0e1f40);
}
.rcvda-learn__search {
width: 100%;
}
/* Themed placeholder — the UA default is a grey that reads as an odd brown on the
dark navy field. Muted blue in light, light-blue in dark (set below). */
.rcvda-learn__search::placeholder {
color: var(--wp--preset--color--muted, #033e8c);
opacity: 1;
}
/* Clear-filters link — a quiet secondary control, canonical across the directories. */
.rcvda-learn__clear {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.6rem 0.9rem;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
color: var(--wp--preset--color--muted, #033e8c);
}
.rcvda-learn__clear:hover,
.rcvda-learn__clear:focus {
color: var(--wp--preset--color--brand, #0e1f40);
text-decoration: underline;
}
/* Canonical secondary button (matches .rcvda-vac-btn). Hidden anyway when JS is on. */
.rcvda-learn__go {
padding: 0.6rem 1.2rem;
border: 2px solid var(--wp--preset--color--divider, #c3d4e2);
border-radius: 10px;
background: var(--wp--preset--color--surface, #a7c1d9);
color: var(--wp--preset--color--contrast, #0e1f40);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
}
.rcvda-learn__go:hover,
.rcvda-learn__go:focus {
border-color: var(--wp--preset--color--brand, #0e1f40);
}
/* When JS is active the auto-filtering makes the button redundant. */
.rcvda-learn.is-js .rcvda-learn__go {
display: none;
}
/* ---- Card grid --------------------------------------------------------- */
.rcvda-learn-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
/* Match the opportunities (rcvda-vac) card grid: 300px min columns, 1.5rem gap. */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.rcvda-learn-card {
/* Equal heights per row come from the grid's default align-items:stretch — do
NOT set height:100% here: on an auto-sized grid row it makes the row track
under-compute, so the next row overlaps upward (negative row gap). */
display: flex;
flex-direction: column;
gap: 0.5rem;
/* Canonical card box (matches .rcvda-vac-card): 1.5rem padding, 14px radius,
resting shadow. */
padding: 1.5rem;
border: 1px solid var(--wp--preset--color--divider, #c3d4e2);
border-radius: 14px;
background: var(--wp--preset--color--base, #fff);
box-shadow: 0 1px 3px rgba(16, 34, 75, 0.08);
/* Match the theme's .rcvda-card hover behaviour (subtle lift + accent border
+ shadow), so the listing cards read as the same component family. */
transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
/* Pin the last child to the bottom so the "View …" CTA aligns across cards
(matches the theme's `.rcvda-card > :last-child`). NB wpautop wraps the trailing
bare CTA in a