/*
 * Inner / ancillary page styling — brings non-homepage pages closer to the redesign.
 * Loaded site-wide; selectors only match inner pages (the homepage disables the title hero).
 */

/* Page-title band → brand blue gradient with white text.
   Kadence paints the gray on .entry-hero-container-inner (background:--global-palette7).
   Covers singular pages (.page-hero-section), the blog/posts index — e.g. /newsroom/
   (.post-archive-hero-section), and other archives like categories (.archive-hero-section);
   each uses a different title class (.entry-title vs .page-title/.archive-title). */
.entry-hero.page-hero-section .entry-hero-container-inner,
.entry-hero.post-archive-hero-section .entry-hero-container-inner,
.entry-hero.archive-hero-section .entry-hero-container-inner {
	background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-primary) 100%) !important;
}
.entry-hero.page-hero-section .entry-title,
.entry-hero.page-hero-section .entry-title a,
.entry-hero.post-archive-hero-section .page-title,
.entry-hero.post-archive-hero-section .archive-title,
.entry-hero.archive-hero-section .page-title,
.entry-hero.archive-hero-section .archive-title,
.entry-hero.page-hero-section .kadence-breadcrumbs,
.entry-hero.page-hero-section .kadence-breadcrumbs a,
.entry-hero.post-archive-hero-section .kadence-breadcrumbs,
.entry-hero.post-archive-hero-section .kadence-breadcrumbs a,
.entry-hero.archive-hero-section .kadence-breadcrumbs,
.entry-hero.archive-hero-section .kadence-breadcrumbs a,
.entry-hero.page-hero-section .archive-description,
.entry-hero.post-archive-hero-section .archive-description,
.entry-hero.archive-hero-section .archive-description {
	color: #fff !important;
}
.entry-hero.page-hero-section .kadence-breadcrumbs a:hover,
.entry-hero.post-archive-hero-section .kadence-breadcrumbs a:hover,
.entry-hero.archive-hero-section .kadence-breadcrumbs a:hover {
	color: var(--blue-light) !important;
}

/* Content area — brand typography + link colors */
.single-entry .entry-content,
.archive .entry-content {
	font-family: var(--font-sans);
	color: var(--text-strong);
}
.single-entry .entry-content a,
.archive .entry-content a {
	color: var(--blue-primary);
}
.single-entry .entry-content a:hover,
.archive .entry-content a:hover {
	color: var(--blue-dark);
}
.single-entry .entry-content h1,
.single-entry .entry-content h2,
.single-entry .entry-content h4 {
	color: var(--text-darkest);
}
.single-entry .entry-content h2 {
	margin: 1.5em 0 0.5em;
}
.single-entry .entry-content h3 {
	color: var(--blue-dark);
	margin: 1.35em 0 0.4em;
}
.single-entry .entry-content blockquote {
	border-left: 3px solid var(--blue-primary);
	padding-left: 16px;
	margin-left: 0;
	color: var(--text-medium);
	font-style: italic;
}
.single-entry .entry-content ul li::marker {
	color: var(--blue-primary);
}

/* Base font site-wide. Kadence's --global-body-font-family is a system stack and the
   nav inherits it; only the homepage escaped this (home.css set body to Arimo). Force
   the brand font with an explicit stack + !important so it wins over Kadence's variable
   cascade regardless of selector specificity. */
body,
button,
input,
select,
textarea,
#site-navigation,
#site-navigation a,
#site-navigation a span,
.header-navigation a {
	font-family: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Also retarget Kadence's own font variables so headings/blocks follow suit. */
:root {
	--global-body-font-family: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	--global-heading-font-family: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	--global-primary-nav-font-family: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Match the homepage nav weight/size (home.css sets 15px / 600 on `nav a`; ancillary
   pages don't load home.css, so the Kadence nav was larger and lighter). */
#site-navigation a,
.header-navigation a {
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* External-link indicator — a small northeast arrow after links that leave the
   site. The `is-external` class is added at runtime by assets/js/external-links.js
   (enqueued site-wide). Loads everywhere inner.css does, i.e. all pages. */
a.is-external::after {
	content: "\2197"; /* ↗ U+2197 NORTH EAST ARROW */
	display: inline-block;
	margin-left: 0.15em;
	font-size: 0.85em;
	line-height: 1;
	vertical-align: baseline;
	text-decoration: none;
}

/* Get Involved page — feature photo floated top-right (text wraps left).
   Injected by kcdems_get_involved_feature_image() in functions.php. */
.page-feature-img {
	float: right;
	width: 340px;
	max-width: 42%;
	margin: 0 0 20px 28px;
}
.page-feature-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
	/* Stack full-width on mobile rather than squeezing the text column. */
	.page-feature-img {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px;
	}
}

/* Become a Member — bottom CTA trio (Newsletter / PCO / Donate).
   Injected by kcdems_become_member_ctas() in functions.php. */
.member-cta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 980px;
	margin: 44px auto 8px;
	clear: both;
}
.member-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--blue-light, #E8EEFF);
	border: 1px solid #d0dbe8;
	border-radius: 6px;
	padding: 28px 22px;
}
.member-cta-icon {
	color: var(--blue-primary, #0044CC);
	margin-bottom: 12px;
	line-height: 0;
}
.member-cta h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
	color: var(--text-darkest, #1A1A1A);
}
.member-cta p {
	margin: 0 0 18px;
	color: var(--text-medium, #4A5568);
	font-size: 0.95rem;
	line-height: 1.5;
}
.member-cta .btn {
	margin-top: auto;
	display: inline-block;
	background: var(--blue-primary, #0044CC);
	color: #fff !important;
	padding: 10px 22px;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
}
.member-cta .btn:hover {
	background: var(--blue-dark, #003399);
}
@media (max-width: 768px) {
	.member-cta-grid {
		grid-template-columns: 1fr;
	}
}