/* =====================================================
   RLC Post Filter — Frontend Styles
   Written neutrally so it blends with the Salient theme's
   typography (inherits font-family & text color from the theme).
===================================================== */

.spf-wrapper {
	width: 100%;
	margin: 0 0 60px 0;
	--rpf-accent: #2563eb; /* button/active background — overridden inline per-instance from the admin color picker */
	--rpf-text: #ffffff; /* button/active text — overridden inline per-instance from the admin color picker */
}

/* ---------- Toolbar ---------- */
.spf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 44px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.spf-toolbar-left,
.spf-toolbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* Keeps Sort by pinned to the right even when .spf-toolbar-left is hidden
   (desktop + sidebar Menu Position) — with justify-content:space-between
   alone, a single remaining flex child would otherwise collapse to the
   start (left) of the row instead of staying on the right. */
.spf-toolbar-right {
	margin-left: auto;
}

/* ---------- Dropdown (custom, no <select>, no bullets) ---------- */
.spf-dropdown {
	position: relative;
	display: inline-block;
}

/* Bold, attention-grabbing style for the "top" menu buttons (Categories,
   Attributes, Sort by whenever they're shown as dropdowns — this includes
   on mobile even when "Menu Position" is set to a sidebar, since mobile
   always falls back to the dropdown toolbar). Uses the admin-configurable
   background + text colors rather than the previous plain white/thin-
   border look. */
.spf-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--rpf-accent);
	color: var(--rpf-text);
	border: 1px solid var(--rpf-accent);
	border-radius: 3px;
	padding: 11px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.spf-dropdown-toggle:hover,
.spf-dropdown.is-open .spf-dropdown-toggle {
	filter: brightness(0.9);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.spf-dropdown-label {
	white-space: nowrap;
}

.spf-dropdown-caret {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	transition: transform 0.2s ease;
	opacity: 0.85;
}

.spf-dropdown.is-open .spf-dropdown-caret {
	transform: rotate(-135deg);
	margin-top: 3px;
}

.spf-dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	max-width: calc(100vw - 24px); /* CSS-only safety net: never wider than the screen, even before JS repositions it. */
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: 8px 0;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Once JS moves an open menu to be a direct child of <body> (see
   script.js), it switches to position: fixed with an explicit top/left
   computed from its button — this deliberately escapes any ancestor's
   overflow:hidden or transform-based clipping (both common in Salient's
   row/animation wrappers), so the menu can never get visually cut off
   no matter where in the page it's rendered from. */
.rpf-portaled-menu {
	position: fixed;
	z-index: 999999;
}

.spf-toolbar-right .spf-dropdown-menu {
	left: auto;
	right: 0;
}

.spf-dropdown.is-open .spf-dropdown-menu,
.rpf-portaled-menu.is-open-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.spf-dropdown-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spf-dropdown-menu a {
	display: block;
	padding: 10px 18px;
	font-size: 13px;
	color: inherit;
	text-decoration: none;
	list-style: none;
	white-space: nowrap;
}

.spf-dropdown-menu a:hover {
	background: rgba(0, 0, 0, 0.045);
}

.spf-dropdown-menu a.is-active {
	font-weight: 600;
	color: var(--rpf-accent);
}

/* ---------- Sidebar layout ("Menu Position": Left/Right Sidebar) ----------
   Desktop-only arrangement. On mobile the sidebar is always hidden and the
   normal dropdown toolbar (rendered alongside it for exactly this reason)
   takes over instead — see the media query below. */
.spf-layout-with-sidebar {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.spf-sidebar {
	display: none; /* Hidden by default (mobile); shown at the desktop breakpoint below. */
	flex: 0 0 260px;
	width: 260px;
}

.spf-sidebar-right .spf-sidebar {
	order: 2;
}

.spf-main {
	flex: 1 1 auto;
	min-width: 0;
}

.spf-sidebar-section {
	margin-bottom: 32px;
}

.spf-sidebar-section:last-child {
	margin-bottom: 0;
}

.spf-sidebar-heading {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 14px 0;
}

.spf-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spf-sidebar-list li {
	list-style: none;
	margin: 0 0 4px 0;
}

/* Bold, clearly visible text by default — deliberately not the thin/faint
   gray links a plain sidebar menu often defaults to. */
.spf-sidebar-list a {
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	list-style: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.spf-sidebar-list a:hover {
	background: rgba(0, 0, 0, 0.05);
}

.spf-sidebar-list a.is-active {
	background: var(--rpf-accent);
	color: var(--rpf-text);
}

@media (min-width: 1000px) {
	[data-menu-position="sidebar_left"] .spf-toolbar-left,
	[data-menu-position="sidebar_right"] .spf-toolbar-left {
		display: none;
	}

	.spf-sidebar {
		display: block;
	}
}

/* ---------- Results: Grid layout ---------- */
.spf-results {
	margin-bottom: 40px;
}

.spf-results.spf-layout-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 36px;
}

@media (max-width: 999px) {
	.spf-results.spf-layout-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.spf-results.spf-layout-grid {
		grid-template-columns: 1fr;
	}
}

.spf-layout-grid .spf-post-card {
	display: flex;
	flex-direction: column;
}

.spf-layout-grid .spf-post-thumb {
	margin-bottom: 22px;
}

/* ---------- Results: List layout (image left) ---------- */
.spf-results.spf-layout-list {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.spf-layout-list .spf-post-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 32px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.spf-layout-list .spf-post-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.spf-layout-list .spf-post-thumb {
	flex: 0 0 300px;
	max-width: 300px;
}

.spf-layout-list .spf-post-body {
	flex: 1 1 auto;
}

@media (max-width: 700px) {
	.spf-layout-list .spf-post-card {
		flex-direction: column;
		gap: 22px; /* Matches the Grid layout's thumbnail spacing once stacked. */
	}
	/* Once flex-direction switches to column above, flex-basis controls
	   HEIGHT instead of width — so the old "flex-basis: 100%" here was
	   actually sizing the thumbnail's height against an undefined
	   container height, which could collapse it to nearly nothing on
	   mobile. Reset to a fixed size (flex: none) and control width
	   directly instead — height then comes naturally from aspect-ratio,
	   exactly like the Grid layout's thumbnail. Spacing below it comes
	   from the parent's `gap` above, not a separate margin, so it
	   doesn't stack with `gap` and double up. */
	.spf-layout-list .spf-post-thumb {
		flex: none;
		width: 100%;
		max-width: 100%;
	}
}

/* ---------- Post thumbnail: uses the "Scale Background Image To
   Column" technique like Salient — the image is shown as a CSS
   background-image (background-size: cover; background-position:
   center center) on .spf-post-thumb, NOT as a regular <img> element.

   Reason: many themes (including Salient) have global CSS for the
   <img> tag (e.g. height:auto, sometimes with !important) that can
   override our <img>'s object-fit/height rules. By using a background
   image, we fully avoid that conflict since there's no <img> element
   for the theme's CSS to "override".

   border-radius and overflow:hidden are applied on the CONTAINER
   (.spf-post-thumb), so the rounded corners stay consistent on all
   sides for every aspect ratio option. ---------- */
.spf-post-thumb {
	--spf-thumb-ratio: 4 / 3; /* default ratio when "Lock Aspect Ratio" isn't enabled in admin */
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: var(--spf-thumb-ratio);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.spf-post-thumb-link {
	display: block;
	width: 100%;
	height: 100%;
}

.spf-post-thumb.spf-ratio-1-1 {
	--spf-thumb-ratio: 1 / 1;
}

.spf-post-thumb.spf-ratio-16-9 {
	--spf-thumb-ratio: 16 / 9;
}

.spf-post-thumb.spf-ratio-3-2 {
	--spf-thumb-ratio: 3 / 2;
}

.spf-post-thumb.spf-ratio-4-3 {
	--spf-thumb-ratio: 4 / 3;
}

.spf-post-thumb.spf-ratio-4-5 {
	--spf-thumb-ratio: 4 / 5;
}

/* ---------- Post card content ---------- */
.spf-post-meta {
	margin-bottom: 10px;
}

.spf-post-date {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.55;
}

.spf-post-title {
	margin: 0 0 16px 0;
	line-height: 1.35;
	font-size: 21px;
}

.spf-post-title a {
	color: inherit;
	text-decoration: none;
}

.spf-post-title a:hover {
	text-decoration: underline;
}

.spf-post-excerpt {
	margin-bottom: 16px;
	line-height: 1.75;
	opacity: 0.85;
}

.spf-post-excerpt p {
	margin: 0 0 12px 0;
}

.spf-read-more {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	margin-bottom: 20px;
}

/* ---------- Attributes (tag) below post content ---------- */
.spf-post-attributes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed rgba(0, 0, 0, 0.12);
}


.spf-attribute-pill {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	padding: 7px 13px;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.055);
	color: inherit;
	text-decoration: none;
	list-style: none;
	transition: background 0.2s ease;
}

.spf-attribute-pill:hover {
	background: rgba(0, 0, 0, 0.12);
}

/* ---------- Pagination (Salient-style numbered) ---------- */
.spf-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
	padding-top: 30px;
}

.spf-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 3px;
	font-size: 13px;
	color: inherit;
	text-decoration: none;
	list-style: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.spf-page-link:hover {
	border-color: rgba(0, 0, 0, 0.35);
}

.spf-page-link.is-active {
	background: #222;
	border-color: #222;
	color: #fff;
}

.spf-page-dots {
	padding: 0 6px;
	opacity: 0.5;
}

.spf-no-posts {
	padding: 60px 0;
	text-align: center;
	opacity: 0.7;
}

.spf-error {
	padding: 16px 20px;
	background: #fff4f4;
	border: 1px solid #f3c5c5;
	border-radius: 4px;
	color: #8a2c2c;
}

/* ---------- Loading state ---------- */
.spf-wrapper.is-loading .spf-results-container,
.spf-wrapper.is-loading .spf-pagination-container {
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
