/**
 * Senior Impact News Feed — [si_news_feed]
 *
 * Every rule is scoped under .si-news-feed. The feed now renders inside a theme
 * page, so the standalone page's global reset and bare element selectors (html,
 * body, a, img) would have reached out and flattened the theme's header, footer
 * and sidebars. Custom properties carry an --si- prefix for the same reason:
 * themes very commonly define --primary on :root.
 */

.si-news-feed {
	--si-primary:       #60abd7;
	--si-primary-dark:  #3d8dba;
	--si-primary-deep:  #1a4d6e;
	--si-primary-light: #e8f4fb;
	--si-ink:           #0a0a0a;
	--si-surface:       #ffffff;
	--si-border:        #d8d8d8;
	--si-border-soft:   #ececea;
	--si-text:          #222222;
	--si-muted:         #5f5f5f;
	--si-faint:         #8a8a8a;

	--si-radius:        12px;
	--si-radius-sm:     8px;
	--si-shadow:        0 1px 2px rgba(16, 32, 44, 0.05);
	--si-shadow-lift:   0 6px 20px rgba(16, 32, 44, 0.10);

	--si-font-head:     Georgia, 'Times New Roman', serif;
	--si-font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--si-font-body);
	color: var(--si-text);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* The scoped stand-in for the standalone page's global reset. */
.si-news-feed,
.si-news-feed *,
.si-news-feed *::before,
.si-news-feed *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.si-news-feed img { max-width: 100%; }

.si-news-feed a { color: var(--si-primary-dark); }

/* Visible keyboard focus everywhere */
.si-news-feed a:focus-visible,
.si-news-feed button:focus-visible {
	outline: 3px solid var(--si-primary-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

.si-news-feed .si-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Grid ---------- */

/* Cards align to the top of each row rather than stretching, so a card with no
   image stays its natural height instead of padding itself out to match an
   image-bearing neighbour. */
.si-news-feed .si-grid {
	display: grid;
	grid-template-columns: repeat(var(--si-nf-cols, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}

/* ---------- Feed header ---------- */

.si-news-feed .si-feed-header {
	padding-bottom: 18px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--si-border-soft);
	text-align: center;
}

.si-news-feed .si-feed-title {
	font-family: var(--si-font-head);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #111;
	letter-spacing: -0.01em;
}

.si-news-feed .si-feed-count {
	font-size: 15px;
	color: var(--si-muted);
	margin-top: 6px;
}

/* Chips are a flex row, so text-align on the header does not reach them. */
.si-news-feed .si-prefs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.si-news-feed .si-prefs-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--si-faint);
	margin-right: 2px;
}

.si-news-feed .si-chip {
	display: inline-block;
	background: var(--si-surface);
	border: 1px solid var(--si-border);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--si-muted);
}

.si-news-feed .si-chip--city {
	background: var(--si-primary-light);
	border-color: #bfdff2;
	color: var(--si-primary-deep);
}

.si-news-feed .si-prefs-edit {
	font-size: 14px;
	font-weight: 700;
	color: var(--si-primary-dark);
	text-decoration: none;
	margin-left: 4px;
	white-space: nowrap;
}

.si-news-feed .si-prefs-edit:hover { text-decoration: underline; }

/* ---------- Notices ---------- */

.si-news-feed .si-notice {
	display: flex;
	gap: 14px;
	background: var(--si-primary-light);
	border: 1px solid #a9d3ec;
	border-left: 5px solid var(--si-primary);
	border-radius: var(--si-radius-sm);
	padding: 16px 20px;
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--si-primary-deep);
}

.si-news-feed .si-notice svg { flex-shrink: 0; margin-top: 2px; }

.si-news-feed .si-notice a { color: var(--si-primary-dark); font-weight: 700; }

/* ---------- Article cards ---------- */

.si-news-feed .si-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--si-surface);
	border: 1px solid var(--si-border);
	border-left: 5px solid var(--si-primary);
	border-radius: var(--si-radius);
	text-decoration: none;
	color: inherit;
	box-shadow: var(--si-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-left-color 0.18s ease;
}

.si-news-feed .si-card:hover {
	box-shadow: var(--si-shadow-lift);
	transform: translateY(-2px);
	border-left-color: var(--si-primary-dark);
}

/* 3:2 media box via padding-bottom rather than aspect-ratio, so older browsers
   on older devices still reserve the right space. */
.si-news-feed .si-card-media {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%;
	overflow: hidden;
	background: #e9e9e6;
}

.si-news-feed .si-card-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.si-news-feed .si-card:hover .si-card-media img { transform: scale(1.04); }

.si-news-feed .si-card-body { padding: 18px 20px 18px; }

.si-news-feed .si-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--si-muted);
	margin-bottom: 10px;
}

.si-news-feed .si-card-source {
	color: var(--si-primary-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
}

.si-news-feed .si-card-meta .dot { color: var(--si-border); }

.si-news-feed .si-card-title {
	font-family: var(--si-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.34;
	color: #111;
	margin-bottom: 10px;
}

.si-news-feed .si-card:hover .si-card-title { color: var(--si-primary-deep); }

.si-news-feed .si-card-title .ext {
	display: inline-block;
	vertical-align: 1px;
	margin-left: 7px;
	color: var(--si-faint);
}

.si-news-feed .si-card:hover .si-card-title .ext { color: var(--si-primary-dark); }

/* Clamped to three lines so a long excerpt cannot make one card in a row
   dramatically taller than its neighbours. */
.si-news-feed .si-card-desc {
	font-size: 15px;
	color: #4a4a4a;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 7.2em;
}

.si-news-feed .si-badge {
	display: inline-block;
	background: var(--si-primary-light);
	color: var(--si-primary-deep);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 13px;
	border-radius: 999px;
	margin-top: 14px;
}

/* ---------- Ads ---------- */

.si-news-feed .si-ad {
	background: var(--si-surface);
	border: 1px solid var(--si-border);
	border-radius: var(--si-radius);
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: var(--si-shadow);
}

.si-news-feed .si-ad-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--si-faint);
	text-align: center;
	padding: 6px 4px 5px;
	background: #fafafa;
	border-bottom: 1px solid var(--si-border-soft);
}

.si-news-feed .si-ad-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px;
}

.si-news-feed .si-ad-link img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.si-news-feed .si-ad--leaderboard { margin-bottom: 28px; }

/* A tile occupies one grid cell, sized for a 300x250 creative. */
.si-news-feed .si-ad--tile { margin-bottom: 0; }

/* A banner sits between grid sections at full content width, which is where a
   728x90 creative actually looks right. */
.si-news-feed .si-ad--banner { margin-bottom: 24px; }

/* ---------- Empty state ---------- */

.si-news-feed .si-empty {
	background: var(--si-surface);
	border: 1px dashed var(--si-border);
	border-radius: var(--si-radius);
	text-align: center;
	padding: 56px 28px;
}

.si-news-feed .si-empty svg { color: #c9c9c9; margin-bottom: 16px; }

.si-news-feed .si-empty-title {
	font-family: var(--si-font-head);
	font-size: 22px;
	font-weight: 700;
	color: #333;
	margin-bottom: 8px;
}

.si-news-feed .si-empty p {
	font-size: 16px;
	color: var(--si-muted);
	max-width: 46ch;
	margin: 0 auto;
}

.si-news-feed .si-empty a { font-weight: 700; }

/* ---------- Pagination ---------- */

.si-news-feed .si-pagination {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--si-border-soft);
}

.si-news-feed .si-page-status {
	text-align: center;
	font-size: 14px;
	color: var(--si-muted);
	margin-bottom: 14px;
}

.si-news-feed .si-page-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.si-news-feed .si-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border-radius: var(--si-radius-sm);
	border: 2px solid var(--si-border);
	background: var(--si-surface);
	color: #333;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.si-news-feed .si-page-btn:hover {
	border-color: var(--si-primary);
	background: var(--si-primary-light);
	color: var(--si-primary-deep);
}

.si-news-feed .si-page-btn[aria-current="page"] {
	background: var(--si-primary);
	border-color: var(--si-primary-dark);
	color: var(--si-ink);
	cursor: default;
}

.si-news-feed .si-page-gap {
	min-width: 24px;
	text-align: center;
	color: var(--si-faint);
	font-weight: 700;
	user-select: none;
}

/* ---------- Preferences dialog ----------
 *
 * The dialog is relocated to <body> on load, so it cannot inherit the custom
 * properties defined on .si-news-feed. It carries its own copy.
 */

.si-nf-modal {
	--si-primary:       #60abd7;
	--si-primary-dark:  #3d8dba;
	--si-primary-deep:  #1a4d6e;
	--si-primary-light: #e8f4fb;
	--si-surface:       #ffffff;
	--si-border:        #d8d8d8;
	--si-border-soft:   #ececea;
	--si-text:          #222222;
	--si-muted:         #5f5f5f;
	--si-faint:         #8a8a8a;
	--si-radius:        12px;
	--si-radius-sm:     8px;
	--si-font-head:     Georgia, 'Times New Roman', serif;
	--si-font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: var(--si-font-body);
	color: var(--si-text);
	box-sizing: border-box;
}

.si-nf-modal *,
.si-nf-modal *::before,
.si-nf-modal *::after {
	box-sizing: border-box;
}

.si-nf-modal[hidden] {
	display: none;
}

.si-nf-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(10, 26, 36, 0.55);
}

.si-nf-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 40px);
	background: var(--si-surface);
	border-radius: var(--si-radius);
	box-shadow: 0 18px 50px rgba(10, 26, 36, 0.35);
	overflow: hidden;
}

.si-nf-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--si-border-soft);
}

.si-nf-modal-title {
	margin: 0;
	font-family: var(--si-font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #111;
}

.si-nf-modal-x {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -8px -8px -8px 0;
	padding: 0;
	color: var(--si-muted);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.si-nf-modal-x:hover {
	background: var(--si-primary-light);
	color: var(--si-primary-deep);
}

/* The body scrolls, the header and footer stay put, so the save button is
   always reachable on a short screen. */
.si-nf-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 24px 24px;
}

.si-nf-modal-intro {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--si-muted);
}

.si-nf-group {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.si-nf-group:last-of-type {
	margin-bottom: 0;
}

.si-nf-group-title {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0 0 8px;
	font-family: var(--si-font-head);
	font-size: 17px;
	font-weight: 700;
	color: #111;
	border-bottom: 2px solid var(--si-primary);
}

.si-nf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Real buttons with aria-pressed rather than the clickable divs on
   news-preferences.php, so they are reachable by keyboard and announced. */
.si-nf-pill {
	padding: 11px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	/* The theme sets button { text-transform: uppercase; letter-spacing: .75px }.
	   These are real buttons now, unlike the divs on news-preferences.php, so
	   they inherit that - and city and topic names are much harder to read in
	   caps at this size. */
	text-transform: none;
	letter-spacing: normal;
	color: #444;
	background: var(--si-surface);
	border: 2px solid var(--si-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Hover deliberately stays off the brand blue. It used to paint a ring in
   --si-primary, the exact hue a selected pill is filled with, so a pill you had
   just clicked off still read as on for as long as the cursor sat on it. Blue
   now means selected and nothing else. */
.si-nf-pill:hover {
	border-color: var(--si-faint);
	background: #f5f5f5;
	color: var(--si-text);
}

/* The check carries the state alongside the fill, so it survives for readers who
   cannot separate the two hues. */
.si-nf-pill.is-selected {
	background: var(--si-primary-deep);
	border-color: var(--si-primary-deep);
	color: #fff;
}

.si-nf-pill.is-selected::before {
	content: "\2713\00a0";
	font-weight: 700;
}

/* Hovering a selected pill flips the check to an X - "click to remove". */
.si-nf-pill.is-selected:hover {
	background: #123d58;
	border-color: #123d58;
	color: #fff;
}

.si-nf-pill.is-selected:hover::before {
	content: "\2715\00a0";
}

.si-nf-pill:focus-visible,
.si-nf-modal-x:focus-visible,
.si-nf-btn:focus-visible {
	outline: 3px solid var(--si-primary-deep);
	outline-offset: 3px;
}

.si-nf-modal-error {
	margin: 18px 0 0;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #8a1f16;
	background: #fce8e6;
	border-left: 4px solid #b3261e;
	border-radius: var(--si-radius-sm);
}

.si-nf-modal-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 24px;
	background: #fafafa;
	border-top: 1px solid var(--si-border-soft);
}

.si-nf-btn {
	min-height: 48px;
	padding: 0 24px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	border-radius: var(--si-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.si-nf-btn--primary {
	color: #fff;
	background: var(--si-primary-dark);
	border: 2px solid var(--si-primary-dark);
}

.si-nf-btn--primary:hover {
	background: var(--si-primary-deep);
	border-color: var(--si-primary-deep);
}

.si-nf-btn--ghost {
	color: var(--si-muted);
	background: transparent;
	border: 2px solid var(--si-border);
}

.si-nf-btn--ghost:hover {
	border-color: var(--si-primary);
	color: var(--si-primary-deep);
}

.si-nf-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Stops the page behind the dialog scrolling. */
body.si-nf-modal-open {
	overflow: hidden;
}

/* ---------- Dialog triggers (inside the feed) ---------- */

/* The chip-row "Edit" is a button now but must still look like the link it
   replaced. */
.si-news-feed button.si-prefs-edit {
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var(--si-primary-dark);
	background: none;
	border: 0;
	cursor: pointer;
}

.si-news-feed button.si-prefs-edit:hover {
	text-decoration: underline;
}

.si-news-feed .si-nf-linkbtn {
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var(--si-primary-dark);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

/* Sits above the notice and the grid, and is the first thing in the feed when
   the shortcode runs with header="no". */
.si-news-feed .si-nf-prefs-actions {
	margin: 0 0 24px;
}

.si-news-feed .si-nf-btn {
	min-height: 48px;
	padding: 0 24px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	border-radius: var(--si-radius-sm);
	cursor: pointer;
}

.si-news-feed .si-nf-btn--primary {
	color: #fff;
	background: var(--si-primary-dark);
	border: 2px solid var(--si-primary-dark);
}

.si-news-feed .si-nf-btn--primary:hover {
	background: var(--si-primary-deep);
	border-color: var(--si-primary-deep);
}

.si-news-feed .si-prefs-edit:focus-visible,
.si-news-feed .si-nf-linkbtn:focus-visible,
.si-news-feed .si-nf-btn:focus-visible {
	outline: 3px solid var(--si-primary-deep);
	outline-offset: 3px;
}

@media (max-width: 600px) {

	.si-nf-modal {
		padding: 0;
	}

	.si-nf-modal-panel {
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.si-nf-modal-foot {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.si-nf-modal-foot .si-nf-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.si-nf-pill,
	.si-nf-btn {
		transition: none;
	}
}

/* ---------- Responsive ---------- */

/* 3 or 4 across steps down to 2, then everything to a single column. The
   single-column step is set where a 3:2 image plus three lines of excerpt stops
   being comfortable side by side, not at a round number. A feed already set to
   1 or 2 columns is left alone by the first step, so it can only ever shrink. */
@media (max-width: 1000px) {
	.si-nf--cols-3 .si-grid,
	.si-nf--cols-4 .si-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.si-news-feed .si-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.si-news-feed .si-card-title { font-size: 21px; }
	.si-news-feed .si-card-desc { font-size: 16px; -webkit-line-clamp: 4; max-height: 10.4em; }
}

@media (max-width: 700px) {
	.si-news-feed .si-feed-title { font-size: 25px; }
	.si-news-feed .si-card-body { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.si-news-feed * { transition: none !important; }
	.si-news-feed .si-card:hover { transform: none; }
	.si-news-feed .si-card:hover .si-card-media img { transform: none; }
}