/* Shortcode-only adjustments (the bulk of the styling comes from the
   hacu-styles plugin's hnip-design.css). */

.hnip-positions-wrap { width: 100%; }

/* Filter bar — three inputs share one row at ≥768px, stack below that.
   Base .filter-bar rules live in hnip-design.css (copy of the original
   positions.html design). The overrides below counter Hello Elementor
   reset.css (which forces `width:100%` on every input & select) and
   split the row so the search field gets ~50% and each dropdown ~25%. */

.hnip-positions-wrap .filter-bar {
	width: 100%;
	box-sizing: border-box;
}

.hnip-positions-wrap .filter-bar > input[type="text"],
.hnip-positions-wrap .filter-bar > select {
	width: auto;                 /* beat hello-elementor reset */
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

@media (min-width: 768px) {
	.hnip-positions-wrap .filter-bar {
		flex-wrap: nowrap;           /* keep the three inputs on one line */
	}
	.hnip-positions-wrap .filter-bar > input[type="text"] {
		flex: 2 1 0;                 /* search gets ~2x the share */
	}
	.hnip-positions-wrap .filter-bar > select {
		flex: 1 1 0;                 /* each dropdown ~1x the share */
	}
}

/* Below 768px — each control fills its own line (matches the design's
   @media (max-width: 768px) rule that sets width:100%). */
@media (max-width: 767px) {
	.hnip-positions-wrap .filter-bar {
		flex-wrap: wrap;
	}
	.hnip-positions-wrap .filter-bar > input[type="text"],
	.hnip-positions-wrap .filter-bar > select {
		flex: 1 1 100%;
		width: 100%;
	}
}

.hnip-positions-wrap .results-count {
	font-size: 14px;
	color: #545F71;
}