/* Hereford Post Filter — front-end styles
   Every rule is scoped under .hpf-wrap to prevent conflicts with
   Elementor, themes, or any other plugin on the same page. */

.hpf-wrap {
	--hpf-navy: #1f2a3c;
	--hpf-ink: #00263A;
	--hpf-muted: #6b7280;
	--hpf-border: #e6e8ec;
	--hpf-bg: #f5f6f8;
	--hpf-accent: #41607a;
	--hpf-radius: 10px;
	font-family: "Helvetica Neue", sans-serif;
	color: var(--hpf-ink);
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	display: block;
}

.hpf-wrap * {
	box-sizing: border-box;
}

/* ---------- Controls (tabs + search) ---------- */

.hpf-wrap .hpf-controls {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
	margin-bottom: 24px !important;
	margin-top: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.hpf-wrap .hpf-tabs {
	display: inline-flex !important;
	gap: 8px !important;
	background: #fff !important;
	border: 1px solid var(--hpf-border) !important;
	border-radius: var(--hpf-radius) !important;
	padding: 4px !important;
	margin: 0 !important;
	list-style: none !important;
}

.hpf-wrap .hpf-tab {
	border: none !important;
	background: transparent !important;
	padding: 9px 18px !important;
	border-radius: 7px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--hpf-muted) !important;
	cursor: pointer !important;
	transition: background 0.15s ease, color 0.15s ease !important;
	margin: 0 !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

.hpf-wrap .hpf-tab:hover {
	color: var(--hpf-ink) !important;
	background: transparent !important;
}

.hpf-wrap .hpf-tab.is-active {
	background: #eef1f5 !important;
	color: var(--hpf-ink) !important;
}

.hpf-wrap .hpf-search {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid var(--hpf-border) !important;
	border-radius: var(--hpf-radius) !important;
	background: #fff !important;
	padding: 9px 16px !important;
	flex: 1 !important;
	color: var(--hpf-muted) !important;
	margin: 0 !important;
}

.hpf-wrap .hpf-search-input {
	border: none !important;
	outline: none !important;
	font-size: 14px !important;
	width: 100% !important;
	background: transparent !important;
	color: var(--hpf-ink) !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* ---------- Featured hero cards ---------- */

.hpf-wrap .hpf-featured-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	margin-bottom: 24px !important;
	padding: 0 !important;
}

.hpf-wrap .hpf-featured-card {
	background: var(--hpf-border) !important;
	border: 1px solid var(--hpf-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	display: block !important;
	aspect-ratio: 4 / 3 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative !important;
}

.hpf-wrap .hpf-featured-img {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-size: cover !important;
	background-position: center !important;
	margin: 0 !important;
}

.hpf-wrap .hpf-featured-img.hpf-no-image {
	background-color: var(--hpf-border) !important;
}

.hpf-wrap .hpf-featured-card .hpf-card-body {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 32px 28px 26px !important;
	background: linear-gradient(180deg, rgba(15, 23, 35, 0) 0%, rgba(15, 23, 35, 0.55) 35%, rgba(15, 23, 35, 0.9) 100%) !important;
}

.hpf-wrap .hpf-featured-card .hpf-meta {
	color: rgba(255, 255, 255, 0.85) !important;
}
.hpf-wrap .hpf-featured-card .hpf-excerpt {
	font-family: "Helvetica Neue", Sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #FFFFFF !important;
	flex: none !important;
}

.hpf-wrap .hpf-featured-card .hpf-learn-more,
.hpf-wrap .hpf-featured-card .hpf-learn-more:visited,
.hpf-wrap .hpf-featured-card .hpf-learn-more:hover,
.hpf-wrap .hpf-featured-card .hpf-learn-more:active {
	color: #fff !important;
	font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 100% !important;
}

.hpf-wrap .hpf-featured-title {
	font-size: 22px !important;
	line-height: 1.3 !important;
	font-weight: 300 !important;
	margin: 4px 0 10px !important;
	color: #fff !important;
	padding: 0 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
	font-family: "Helvetica Neue", Sans-serif;
}

.hpf-wrap .hpf-featured-title a,
.hpf-wrap .hpf-featured-title a:visited,
.hpf-wrap .hpf-featured-title a:hover,
.hpf-wrap .hpf-featured-title a:active {
	color: #fff !important;
	text-decoration: none !important;
	font-family: "Helvetica Neue", Sans-serif;
}

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

.hpf-wrap .hpf-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hpf-wrap .hpf-card {
	background: #fff !important;
	border: 1px solid var(--hpf-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative !important;
}

.hpf-wrap .hpf-card-img {
	display: block !important;
	aspect-ratio: 4 / 3 !important;
	height: auto !important;
	background-size: cover !important;
	background-position: center !important;
	flex-shrink: 0 !important;
	margin: 10px !important;
    border-radius: 15px !important;
    padding: 10px !important;
}

.hpf-wrap .hpf-card-img.hpf-no-image {
	background-color: var(--hpf-border) !important;
}

.hpf-wrap .hpf-card-body {
	padding: 18px 20px 22px !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

.hpf-wrap .hpf-card-title {
	font-size: 18px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	margin: 4px 0 10px !important;
	padding: 0 !important;
	color: var(--hpf-ink) !important;
}

.hpf-wrap .hpf-card-title a,
.hpf-wrap .hpf-card-title a:visited,
.hpf-wrap .hpf-card-title a:hover,
.hpf-wrap .hpf-card-title a:active {
	font-family: "Helvetica Neue", Sans-serif;
	font-weight: 300;
	font-size: 26px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #00263A !important;
}

/* ---------- Shared text ---------- */

.hpf-wrap .hpf-meta {
	font-family: "Helvetica Neue", Sans-serif;
	font-weight: 300;
	font-style: Light;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0%;

}

.hpf-wrap .hpf-meta-cat,
.hpf-wrap .hpf-meta-cat:visited,
.hpf-wrap .hpf-meta-cat:hover,
.hpf-wrap .hpf-meta-cat:active {
	color: inherit !important;
	text-decoration: none !important;
}

.hpf-wrap .hpf-icon {
	font-size: 12px !important;
}

.hpf-wrap .hpf-excerpt {
	color: var(--hpf-muted) !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	flex: 1 !important;
	font-family: "Helvetica Neue", Sans-serif;
	font-size: 16px !important;
    line-height: 100% !important;

}

.hpf-wrap .hpf-learn-more,
.hpf-wrap .hpf-learn-more:visited,
.hpf-wrap .hpf-learn-more:hover,
.hpf-wrap .hpf-learn-more:active {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hpf-accent) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

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

.hpf-wrap .hpf-pagination {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 28px !important;
	padding: 0 !important;
}

.hpf-wrap .hpf-page-btn {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	border: none !important;
	background: transparent !important;
	color: var(--hpf-muted) !important;
	font-size: 14px !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 32px !important;
	text-align: center !important;
	box-shadow: none !important;
}

.hpf-wrap .hpf-page-btn.is-active {
	background: transparent !important;
	color: var(--hpf-ink) !important;
	font-weight: 700 !important;
}

.hpf-wrap .hpf-page-next {
	background: var(--hpf-navy) !important;
	color: #fff !important;
	margin-left: 6px !important;
}

.hpf-wrap .hpf-page-next:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.hpf-wrap .hpf-page-ellipsis {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	font-size: 14px !important;
	color: var(--hpf-muted) !important;
	pointer-events: none !important;
	user-select: none !important;
}

/* Pagination with a leading "prev" button (the homepage widget). Scoped
   off the has-prev modifier so the Insights page's pagination (no prev
   button, plain bold active number) is untouched. Stays right-aligned
   and grouped together (inherits justify-content: flex-end from the
   base .hpf-pagination rule) rather than spreading full width. */
.hpf-wrap .hpf-pagination.has-prev .hpf-page-btn.is-active {
	background: var(--hpf-border) !important;
	color: var(--hpf-ink) !important;
	border-radius: 50% !important;
	font-weight: 700 !important;
}

.hpf-wrap .hpf-page-prev {
	background: var(--hpf-navy) !important;
	color: #fff !important;
	margin-right: 6px !important;
}

.hpf-wrap .hpf-page-prev:disabled {
	background: var(--hpf-border) !important;
	color: var(--hpf-muted) !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

.hpf-wrap .hpf-no-results {
	grid-column: 1 / -1 !important;
	text-align: center !important;
	color: var(--hpf-muted) !important;
	padding: 40px 0 !important;
}

/* ---------- Homepage widget ([hereford_post_filter_home]) ---------- */

.hpf-wrap .hpf-home-layout {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 40px !important;
	align-items: stretch !important;
}

.hpf-wrap .hpf-home-hero {
	min-height: 440px !important;
}

/* The reused .hpf-featured-card's 4:3 ratio belongs to the Insights
   page's 2-up hero grid; here it should just fill this column's height. */
.hpf-wrap .hpf-home-hero .hpf-featured-card {
	aspect-ratio: auto !important;
	height: 100% !important;
}

.hpf-wrap .hpf-home-list-col {
	display: flex !important;
	flex-direction: column !important;
	padding-top: 32px !important;
}

.hpf-wrap .hpf-home-list {
	display: block !important;
	flex: 1 !important;
}

.hpf-wrap .hpf-home-item {
	padding: 22px 0 !important;
	border-bottom: 1px solid #c7cbd1 !important;
}

.hpf-wrap .hpf-home-item:first-child {
	padding-top: 0 !important;
}

.hpf-wrap .hpf-home-item-title {
	font-size: 20px !important;
	line-height: 1.35 !important;
	font-weight: 500 !important;
	margin: 6px 0 0 !important;
	padding: 10px 0 12px 0 !important;
	color: var(--hpf-ink) !important;
    font-family: "Helvetica Neue", Sans-serif;
}

.hpf-wrap .hpf-home-item-title a,
.hpf-wrap .hpf-home-item-title a:visited,
.hpf-wrap .hpf-home-item-title a:hover,
.hpf-wrap .hpf-home-item-title a:active {
	color: var(--hpf-ink) !important;
	text-decoration: none !important;
}

.hpf-wrap .hpf-home-list-col .hpf-pagination {
	margin-top: 20px !important;
}

/* ---------- Loading state ---------- */

.hpf-wrap .hpf-results.is-loading {
	opacity: 0.5 !important;
	pointer-events: none !important;
	transition: opacity 0.15s ease !important;
}

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

@media (max-width: 860px) {
	.hpf-wrap .hpf-featured-grid {
		grid-template-columns: 1fr !important;
	}
	.hpf-wrap .hpf-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.hpf-wrap .hpf-home-layout {
		grid-template-columns: 1fr !important;
	}
	.hpf-wrap .hpf-home-hero {
		min-height: 340px !important;
	}
}

@media (max-width: 600px) {
	.hpf-wrap .hpf-controls {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.hpf-wrap .hpf-tabs {
		overflow-x: auto !important;
	}
	.hpf-wrap .hpf-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.hpf-wrap .hpf-tab,
	.hpf-wrap .hpf-results {
		transition: none !important;
	}
}

/* ---------- Keyboard focus ---------- */

.hpf-wrap .hpf-tab:focus-visible,
.hpf-wrap .hpf-page-btn:focus-visible,
.hpf-wrap .hpf-search-input:focus-visible,
.hpf-wrap .hpf-learn-more:focus-visible {
	outline: 2px solid var(--hpf-accent) !important;
	outline-offset: 2px !important;
}

@media (max-width: 860px) {
	.hpf-wrap .hpf-featured-grid {
		grid-template-columns: 1fr !important;
	}
	.hpf-wrap .hpf-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.hpf-wrap .hpf-home-layout {
		grid-template-columns: 1fr !important;
	}
	.hpf-wrap .hpf-home-hero {
		min-height: 340px !important;
	}
	/* Detach the meta line from the bottom-anchored text block so it
	   can sit at the top of the card on its own, unchanged in style.
	   Title/excerpt/learn-more stay exactly where they are today. */
	.hpf-wrap .hpf-featured-card .hpf-card-body {
		top: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
	}
	.hpf-wrap .hpf-featured-card .hpf-meta {
		position: absolute !important;
		top: 16px !important;
		left: 28px !important;
		right: 28px !important;
	}

	.hpf-wrap .hpf-featured-card .hpf-card-body {
		top: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
	}
	.hpf-wrap .hpf-featured-card .hpf-excerpt {
		display: none !important;
		
	}
	.hpf-wrap .hpf-featured-card .hpf-meta {
		position: absolute !important;
		top: 16px !important;
		left: 28px !important;
		right: 28px !important;
	}

	.hpf-wrap .hpf-grid {
		grid-template-columns: 1fr !important;
	}
}