/**
 * Directory Category + Location Sidebar
 *
 * Styles the category list and location-search blocks rendered at the top of
 * the Genesis Primary Sidebar on the directory pages (/jobs/, /classifieds/,
 * /resumes/). Markup: includes/integrations/directorist-category-sidebar.php.
 */

.community-directory-sidebar-block {
	background: #fff;
	border: 1px solid var(--community-color-border);
	border-radius: var(--community-border-radius-md);
	padding: var(--community-spacing-md);
	margin-bottom: var(--community-spacing-lg);
}

/* Match the .widget-title styling of the sibling Marketplace/Community widgets:
   a tinted full-bleed header band with regular-weight dark text and a thin
   bottom rule. Top corner-radius mirrors the block so the band sits cleanly
   inside the rounded card. */
.community-directory-sidebar-block__title {
	margin: calc(-1 * var(--community-spacing-md)) calc(-1 * var(--community-spacing-md)) var(--community-spacing-md);
	padding: var(--community-spacing-md);
	background: var(--community-color-surface);
	border-bottom: 1px solid var(--community-color-border);
	border-top-left-radius: var(--community-border-radius-md);
	border-top-right-radius: var(--community-border-radius-md);
	font-size: 15px;
	font-weight: var(--community-font-weight-normal);
	color: var(--community-color-text-primary);
}

/* --- Category list --- */

.community-directory-categories,
.community-directory-categories__children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Inset the top-level list so its text aligns with the sibling Marketplace
   widget's content (which has 8px inner padding on .textwidget). */
.community-directory-categories {
	padding: 0 var(--community-spacing-sm);
}

.community-directory-categories__children {
	margin-left: var(--community-spacing-md);
	border-left: 1px solid var(--community-color-border);
	padding-left: var(--community-spacing-sm);
}

.community-directory-categories__item {
	margin: 0;
}

.community-directory-categories__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--community-spacing-sm);
	padding: var(--community-spacing-xs) 0;
	color: var(--community-color-text-primary);
	text-decoration: none;
	font-size: var(--community-font-size-sm);
}

.community-directory-categories__link:hover .community-directory-categories__name,
.community-directory-categories__link.is-active .community-directory-categories__name {
	color: var(--community-color-primary);
}

.community-directory-categories__link.is-active {
	font-weight: var(--community-font-weight-semibold);
}

/* Top-level categories in a hierarchical directory (e.g. Equipment's "Used
   For Sale" / "Used Wanted" / "Parts") render as section headings — mirrors
   the Marketplace widget's tab text ("Used Equipment"): brand-red, medium
   weight, no underline. Applied to every top-level sibling once any of them
   has children, so headers stay consistent even when one branch is empty. */
.community-directory-categories__link--section-header .community-directory-categories__name {
	color: var(--community-color-primary);
	font-weight: var(--community-font-weight-medium);
}

.community-directory-categories__name {
	flex: 1 1 auto;
}

.community-directory-categories__count {
	flex: 0 0 auto;
	background: var(--community-color-surface);
	color: var(--community-color-text-muted);
	font-size: var(--community-font-size-xs);
	font-weight: var(--community-font-weight-medium);
	padding: 2px var(--community-spacing-sm);
	border-radius: var(--community-border-radius-full);
}

/* Show More wrapper. The button itself wears `.sidebar-viewall`; the outline
   styling is sourced from directorist-frontend.css. Override only the user-agent
   <button> font-family inheritance so it reads identically to the View All
   anchors elsewhere. */
.community-directory-categories__show-more {
	margin-top: var(--community-spacing-sm);
}

.community-directory-categories__show-more .sidebar-viewall {
	font-family: inherit;
	cursor: pointer;
	margin-top: 0 !important;
	background: var(--community-color-surface) !important;
    color: var(--community-color-text-muted) !important;
    font-size: var(--community-font-size-xs) !important;
    font-weight: 400 !important;
    padding: 4px var(--community-spacing-sm) !important;
    border-radius: 8px !important;
    border: 1px solid var(--community-color-text-muted) !important;
}

/* --- Location search --- */

.community-directory-location-form {
	display: flex;
	flex-direction: column;
	gap: var(--community-spacing-sm);
	padding: 0 var(--community-spacing-sm);
}

/* Input wrapper anchors the inline crosshair button on the right. */
.community-directory-location-form__input-wrap {
	position: relative;
}

.community-directory-location-form__input {
	width: 100%;
	padding: var(--community-spacing-sm);
	padding-right: 36px;
	border: 1px solid var(--community-color-border);
	border-radius: var(--community-border-radius-sm);
	font-size: var(--community-font-size-sm);
}

input.community-directory-location-form__input {
	padding: 14px !important;
    font-size: var(--community-font-size-sm) !important;
}

/* The current-location control is an icon-only button sitting inside the input.
   Clicking it delegates to the existing top-bar handler (see the JS module);
   the SVG inherits color from the button so :hover/focus shifts are one-line. */
.community-directory-location-form__current-location {
	position: absolute;
	top: 50%;
	right: var(--community-spacing-sm);
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 4px;
	color: var(--community-color-text-muted);
	cursor: pointer;
	line-height: 0;
	background-color: #fff;
	border-radius: 10px;
}

.community-directory-location-form__current-location:hover,
.community-directory-location-form__current-location:focus-visible {
	color: var(--community-color-primary);
}

/* Nominatim suggestion dropdown — anchored below the input, mirrors the
   top-bar's autocomplete UX. Hidden by default; the JS toggles the hidden
   attribute when there are results to show. */
.community-directory-location-form__suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--community-color-border);
	border-radius: var(--community-border-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	max-height: 240px;
	overflow-y: auto;
}

.community-directory-location-form__suggestion {
	padding: var(--community-spacing-sm) var(--community-spacing-md);
	font-size: var(--community-font-size-sm);
	color: var(--community-color-text-primary);
	cursor: pointer;
	border-bottom: 1px solid var(--community-color-border);
}

.community-directory-location-form__suggestion:last-child {
	border-bottom: 0;
}

.community-directory-location-form__suggestion:hover {
	background: var(--community-color-surface);
	color: var(--community-color-primary);
}

/* The submit button wears the canonical primary-CTA styling sourced from
   directorist-frontend.css (same rule as the "Post an Equipment" / .directorist-btn).
   Just align it to the form's start so it sizes naturally and inherits the
   form's font-family. */
.community-directory-location-form__submit {
	font-family: inherit;
	cursor: pointer;
	padding: 10px !important;
    font-size: 14px !important;
}