, which it leaves at the
browser default outside/indented. "Inside" puts the number in the text
flow itself, so a wrapped second line falls back to the left margin under
the number instead of hanging-indented under the first line's text —
noticeable on any numbered list long enough to wrap (e.g. Library
Policies' numbered procedures). !important needed even though this rule
is later in the cascade: that inline block still wins on equal
specificity, same class of issue as the other Divi overrides in this
file. Site-wide since any future ordered list would hit the same Divi
default. */
.entry-content ol {
list-style-position: outside !important;
padding-left: 1.4em !important;
}
/* Client asked (2026-09-10) for a left indent on list content, site-wide —
separate from the padding-left above, which just makes room for the
marker itself. This pushes the whole list (marker + text) in from the
surrounding paragraph's left edge, the way an indented list commonly
reads in a document. Starting value per client's own request — expect to
tune. Excludes .dfl-card-list, which is a full-width card grid, not an
indented list. */
.entry-content ul:not(.dfl-card-list),
.entry-content ol {
margin-left: 20px;
}
.entry-content ul.wp-block-list.dfl-card-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--dfl-gutter);
list-style: none;
margin: 0;
padding: 0;
}
.entry-content ul.wp-block-list.dfl-card-list li {
background: #fff;
border-top: 4px solid var(--dfl-accent);
border-radius: 12px;
padding: var(--dfl-space-md) var(--dfl-space-md) var(--dfl-space-lg);
box-shadow: 0 1px 3px rgba(54, 69, 79, 0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
list-style: none;
}
.entry-content ul.wp-block-list.dfl-card-list li:hover,
.entry-content ul.wp-block-list.dfl-card-list li:focus-within {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(54, 69, 79, 0.14);
}
/* The leading emoji is a plain text node, which CSS :first-child ignores
when matching element siblings - so this still targets the title link/
strong even though the emoji visually comes first. */
.entry-content ul.wp-block-list.dfl-card-list li::first-line {
font-size: 1.8rem;
}
.entry-content ul.wp-block-list.dfl-card-list li > a:first-child,
.entry-content ul.wp-block-list.dfl-card-list li > strong:first-child {
display: block;
font-family: var(--dfl-font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--dfl-accent-ink);
margin-top: var(--dfl-space-xs);
margin-bottom: var(--dfl-space-xs);
}
/* Library Policies page (post 239): the policy text is raw HTML pasted
straight into .entry-content as plain tags with no wrapping group
blocks, so the site-wide ".entry-content > *" rule (margin-bottom:
var(--dfl-gutter), meant for rhythm between page-level sections like
headings/images/groups) applies to every single paragraph here — on top
of Divi's own `p{padding-bottom:1em}`, doubling the gap between
paragraphs. Client asked (2026-09-10) to drop the margin and keep just
Divi's 14px padding for this page's paragraphs specifically. */
.page-id-239 .entry-content > p {
margin-bottom: 0;
}
/* Accessibility audit fixes (2026-09-21) */
/* Divi's own inline Customizer CSS ships `.et-social-icon span{display:none}`
for the footer Facebook/Instagram links — the icon glyph is the only
visible content, but display:none also drops the span's "Facebook"/
"Instagram" text from the accessibility tree, leaving the link with no
name at all (axe: link-name). Swap to the standard visually-hidden
pattern instead: the text stays out of view but is still announced. */
.et-social-icon span {
display: inline-block !important;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Divi's default #footer-info color (#666, tuned for a light background) is
only 2.38:1 against this site's dark-ink footer — fails WCAG AA (needs
4.5:1 for 14px text; axe: color-contrast). Match the light text color
already used for everything else in the footer. */
#footer-info {
color: var(--dfl-paper);
}
/* Divi's own inline Customizer CSS sets Contact Form fields (the real ILL
Overview request form, and any future form built the same way) to a
light #999 on a #eee fill — 2.46:1, fails WCAG AA color-contrast for
both placeholder and typed text. --dfl-muted already clears 4.5:1 on
this exact background and is the token this site already uses for
secondary/muted text elsewhere. */
.et_pb_contact .et_pb_contact_field input,
.et_pb_contact .et_pb_contact_field textarea {
color: var(--dfl-muted);
}
/* Links inline within body copy (Latest News list, Upcoming Events list,
and any future "click here"-style content link) are only distinguished
from surrounding text by color — the sitewide `a, a:hover
{text-decoration:none}` base rule removes the one non-color cue WCAG
1.4.1 requires (axe: link-in-text-block). Button/card-styled links keep
their own shape/border affordance and are excluded so this doesn't
double-underline the Quick Links row or the Children/Teens card grid. */
.entry-content p a,
.entry-content li a,
.entry-content td a,
.wp-block-latest-posts__post-title a {
text-decoration: underline;
}
.entry-content .wp-block-button__link,
.entry-content .dfl-card-list a {
text-decoration: none;
}
/* Medium devices (768px and up) */
@media (min-width: 768px) {
.entry-content ul.wp-block-list.dfl-card-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large devices (992px and up) */
@media (min-width: 992px) {
.entry-content ul.wp-block-list.dfl-card-list {
grid-template-columns: repeat(3, 1fr);
}
}