#header .header-nav-main nav > ul > li > a {
	font-size: 16px;
}

/* .text-color-red is referenced across forms (required-field markers, validation errors) but was never defined, so it silently inherited the surrounding text color instead of standing out as red */
.text-color-red {
	color: #dc3545;
}

html.dark .text-color-red {
	color: #f87171;
}

html.dark .dark-hidden {
	display: none !important;
}

html.dark .dark-visible {
	display: inline-block !important;
}

/* Dark mode overrides for the fixed-value brand utility classes used on our custom pages */
html.dark .custom-bg-color-light-1,
html.dark .custom-bg-color-light-2,
html.dark .bg-color-light {
	background-color: #14162b !important;
}

html.dark .text-color-dark,
html.dark .text-color-quaternary {
	color: #f5f6fa !important;
}

html.dark .custom-text-color-grey-1 {
	color: #b7bacb !important;
}

html.dark .card-text,
html.dark .card p {
	color: #b7bacb;
}

html.dark .badge.bg-color-grey {
	background-color: #232544 !important;
	color: #d7d9e6 !important;
}

html.dark .text-color-tertiary {
	color: #9aa0ff !important;
}

html.dark #header .header-nav-main nav > ul > li > a.active {
	color: #ffffff !important;
}

html.dark .btn.btn-secondary.btn-outline {
	color: #e0a8d4 !important;
	border-color: #e0a8d4 !important;
}

html.dark aside.sidebar .nav-link {
	color: #b7bacb !important;
}

.theme-toggle-btn {
	background-color: #000000;
	color: #ffffff;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
	background-color: #000000;
	color: #ffffff;
}

html.dark .theme-toggle-btn {
	background-color: #ffffff;
	color: #000000;
}

html.dark .theme-toggle-btn:hover,
html.dark .theme-toggle-btn:focus {
	background-color: #ffffff;
	color: #000000;
}

#header .header-nav-features-search-show-icon {
	background-color: rgba(0, 0, 0, 0.06);
	transition: background-color .2s ease;
}

#header .header-nav-features-search-show-icon:hover {
	background-color: rgba(0, 0, 0, 0.12);
}

html.dark #header .header-nav-features-search-show-icon {
	background-color: rgba(255, 255, 255, 0.12);
}

html.dark #header .header-nav-features-search-show-icon:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

html.dark #header .btn-dark {
	background-color: #ffffff;
	border-color: #ffffff;
	color: #212529;
}

html.dark #header .btn-dark:hover,
html.dark #header .btn-dark:focus {
	background-color: #e9ecef;
	border-color: #e9ecef;
	color: #212529;
}

html.dark #header .header-nav-features-search-show-icon i {
	color: #ffffff !important;
}

/* Body copy one step larger than the theme default (14px/13px); headings are unaffected since they size off em units */
p,
li,
blockquote,
dd,
dt,
td,
th {
	font-size: 16px;
}

@media (max-width: 575px) {
	p,
	li,
	blockquote,
	dd,
	dt,
	td,
	th {
		font-size: 15px;
	}
}

/* Typography for rendered rich-text content blocks (blog posts, catalog descriptions, page bodies, etc.) */
.content-entry-body {
	line-height: 1.8;
}

.content-entry-body > *:first-child {
	margin-top: 0;
}

.content-entry-body h2 {
	font-size: 26px;
	font-weight: 700;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.content-entry-body h3 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

.content-entry-body h4 {
	font-size: 17px;
	font-weight: 700;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.content-entry-body p {
	margin-bottom: 1.25rem;
}

.content-entry-body ul,
.content-entry-body ol {
	margin-bottom: 1.25rem;
	padding-left: 1.5rem;
}

.content-entry-body li {
	margin-bottom: 0.5rem;
}

.content-entry-body img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 1.5rem 0;
}

.content-entry-body blockquote {
	border-left: 3px solid var(--tertiary, #4046b3);
	padding-left: 1.25rem;
	margin: 1.5rem 0;
	font-style: italic;
	opacity: 0.85;
}

.content-entry-body a {
	color: var(--tertiary, #4046b3);
	text-decoration: underline;
}

html.dark .content-entry-body a {
	color: #9aa0ff;
}

/*
 * Button legibility fix (2026-07): force white text on the solid pink/magenta buttons.
 * The pink "primary" (#e23c8e), magenta "secondary" (#a33188) and pink "gradient"
 * buttons were rendering with hard-to-read gray text. Background colors are left
 * exactly as-is; only the text/icon color is forced to white. Outline variants are
 * excluded so their colored-text-on-transparent styling is preserved.
 */
.btn-primary:not(.btn-outline),
.btn-secondary:not(.btn-outline),
.btn-gradient:not(.btn-outline),
.btn-primary:not(.btn-outline):hover,
.btn-primary:not(.btn-outline):focus,
.btn-primary:not(.btn-outline):active,
.btn-primary:not(.btn-outline).active,
.btn-secondary:not(.btn-outline):hover,
.btn-secondary:not(.btn-outline):focus,
.btn-secondary:not(.btn-outline):active,
.btn-secondary:not(.btn-outline).active,
.btn-gradient:not(.btn-outline):hover,
.btn-gradient:not(.btn-outline):focus,
.btn-gradient:not(.btn-outline):active {
	color: #ffffff !important;
}

/*
 * Pagination legibility fix (2026-07): force white text on the ACTIVE / hover
 * pagination circle, whose background is the pink/magenta skin color. The number
 * was rendering in gray and was hard to read on the colored circle. Inactive
 * circles keep their gray-text-on-transparent styling (they read fine on white).
 */
.custom-pagination-style-1 .page-item.active .page-link,
.custom-pagination-style-1 .page-item:hover .page-link,
.pagination .page-item.active .page-link {
	color: #ffffff !important;
}

/*
 * Button legibility fix, part 2 (2026-07): the solid blue "tertiary" (#4046b3)
 * and dark-navy "quaternary" (#171940) buttons were also showing gray text
 * (e.g. the "Pitch a Guest Post" button). Force their text/icons to white.
 * Backgrounds unchanged; outline variants excluded so they keep colored text.
 */
.btn-tertiary:not(.btn-outline),
.btn-quaternary:not(.btn-outline),
.btn-tertiary:not(.btn-outline):hover,
.btn-tertiary:not(.btn-outline):focus,
.btn-tertiary:not(.btn-outline):active,
.btn-tertiary:not(.btn-outline).active,
.btn-quaternary:not(.btn-outline):hover,
.btn-quaternary:not(.btn-outline):focus,
.btn-quaternary:not(.btn-outline):active,
.btn-quaternary:not(.btn-outline).active {
	color: #ffffff !important;
}

/*
 * Dark-mode form labels (2026-07): .form-label has no color of its own, so in
 * dark mode it inherited the near-black body color and was barely visible on the
 * dark cards (e.g. the Contact Us form). Give labels a light, legible color.
 * Light mode is unaffected.
 */
html.dark .form-label,
html.dark .col-form-label,
html.dark .form-check-label {
	color: #e2e4ee;
}