/**
 * File Name:     filter-tray.css
 * Version:       1.0.0
 * Last Modified: 2026-10-14
 * Package:       UTRF_Extensions
 *
 * Available Technologies: facet column styling and the slide-out tray.
 * Above 1100px the column is a plain sidebar. At 1100px and narrower (the site's
 * one "wide" breakpoint; see theme-overrides.css) it becomes a full-height tray that
 * slides in from the left, opened by the "Filters" button (js/filter-tray.js).
 * Scoped to the page's own body class; the theme and Genesis Blocks set the
 * upstream rules, so selectors carry the page class to win the cascade.
 */

:root {
	--utrf-tray-teal: #007a89;
	--utrf-tray-teal-dark: #00606c;
	--utrf-tray-z-overlay: 100000;
	--utrf-tray-z-panel: 100001;
}

/* Elements the script adds: hidden until the layout is narrow, except Clear all. */
.page-available-technologies {
	.utrf-filters__open,
	.utrf-filter-tray__bar,
	.utrf-filter-tray__overlay {
		display: none;
	}

	/* Filter options: a touch smaller and tighter than the theme's body text. */
	.facetwp-facet {
		font-size: 0.9em;

		.facetwp-checkbox {
			line-height: 2em;
			margin-block-end: 3px;
		}
	}

	/* Innovators: a scrollable list in a window instead of a dropdown. The window is
	 * cut mid-row (about 9 and a half rows show) and keeps a visible thin scrollbar and
	 * edge shadows that appear only where more content lies, so it reads as scrollable. */
	.facetwp-facet-tech_innovators {
		background:
			linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat local,
			linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 24px no-repeat local,
			radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)) top / 100% 8px no-repeat scroll,
			radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)) bottom / 100% 8px no-repeat scroll,
			#fff;
		border: 1px solid #ccd0d4;
		border-radius: 3px;
		max-block-size: 21.5em; /* 9 and a half rows, so the tenth shows half; em of the 0.9em facet text */
		overflow-y: auto;
		padding: 8px 10px;
		scrollbar-color: #8c9196 #f0f0f1;
		scrollbar-width: thin;
	}

	/* Filters in play (FacetWP's selections): the group name, then one tag per chosen
	 * value. Clicking a tag removes it, as before. Takes no space when nothing is chosen. */
	.facetwp-selections {
		ul {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			gap: 8px 16px;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			font-size: 0.9em;
			gap: 8px;
			line-height: 1.2;
			margin: 0;
		}

		.facetwp-selection-label {
			color: #50575e;
		}

		.facetwp-selection-value {
			background-color: #eef8fe;
			background-position: right 8px center;
			border: 1px solid #b9d6e4;
			border-radius: 3px;
			margin: 0;
			padding: 5px 28px 5px 10px;
			transition: background-color 0.2s ease-in-out;

			&:hover {
				background-color: #d9ecf7;
			}
		}

		&:has(li) {
			margin-block-end: 20px;
		}
	}

	.utrf-filter-tray__clear {
		background: transparent;
		border: 0;
		color: #00697a;
		cursor: pointer;
		font-size: 0.9em;
		margin-block-end: 8px;
		padding: 0;
		text-decoration: underline;

		&[hidden] {
			display: none;
		}

		&:hover,
		&:focus-visible {
			color: var(--utrf-tray-teal-dark);
		}

		&:focus-visible {
			outline: 2px solid var(--utrf-tray-teal);
			outline-offset: 2px;
		}
	}
}

/* Wide: a fixed-width sidebar column beside the results. */
@media only screen and (min-width: 1101px) {
	.page-available-technologies .gb-2-col-wideright > .gb-layout-column-wrap {
		column-gap: 24px; /* a gutter between the filters and the results */
		grid-template-columns: minmax(200px, 270px) 1fr;
	}
}

/* Narrow: the facet column becomes the tray. */
@media only screen and (max-width: 1100px) {
	.page-available-technologies {
		.gb-2-col-wideright > .gb-layout-column-wrap {
			grid-template-columns: 1fr;
		}

		.utrf-filters__open {
			align-items: center;
			background-color: var(--utrf-tray-teal);
			border: 0;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
			display: inline-flex;
			font-family: Poppins, sans-serif;
			font-size: 14px;
			gap: 0.4em;
			letter-spacing: 0.5px;
			line-height: 28px;
			margin-block-end: 16px;
			padding: 6px 18px;
			text-transform: uppercase;
			transition: background-color 0.2s ease-in-out;

			&:hover,
			&:focus-visible {
				background-color: var(--utrf-tray-teal-dark);
				color: #fff;
			}

			&:focus-visible {
				outline: 2px solid var(--utrf-tray-teal);
				outline-offset: 2px;
			}
		}

		.utrf-filter-tray {
			background-color: #fff;
			box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
			inline-size: min(100vw, 420px);
			inset-block: var(--wp-admin--admin-bar--height, 0px) 0;
			inset-inline-start: 0;
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: 0;
			position: fixed;
			transform: translateX(-100%);
			transition:
				transform 0.25s ease-in-out,
				visibility 0s linear 0.25s;
			visibility: hidden;
			z-index: var(--utrf-tray-z-panel);

			&.is-open {
				transform: translateX(0);
				transition-delay: 0s;
				visibility: visible;
			}

			> .gb-block-layout-column-inner {
				padding: 0 20px 28px;
			}
		}

		.utrf-filter-tray__bar {
			align-items: center;
			background-color: #fff;
			border-block-end: 1px solid #e0e0e0;
			display: flex;
			gap: 12px;
			inset-block-start: 0;
			justify-content: space-between;
			margin-inline: -20px;
			margin-block-end: 16px;
			padding: 10px 20px;
			position: sticky;
			z-index: 1;
		}

		.utrf-filter-tray__title {
			font-family: Poppins, sans-serif;
			font-size: 18px;
			font-weight: 600;
		}

		.utrf-filter-tray__close {
			background-color: var(--utrf-tray-teal);
			border: 0;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
			font-family: Poppins, sans-serif;
			font-size: 14px;
			letter-spacing: 0.5px;
			line-height: 24px;
			padding: 6px 16px;
			text-transform: uppercase;

			&:hover,
			&:focus-visible {
				background-color: var(--utrf-tray-teal-dark);
				color: #fff;
			}

			&:focus-visible {
				outline: 2px solid var(--utrf-tray-teal);
				outline-offset: 2px;
			}
		}

		.utrf-filter-tray__overlay {
			background-color: rgba(0, 0, 0, 0.5);
			display: block;
			inset: 0;
			opacity: 0;
			pointer-events: none;
			position: fixed;
			transition: opacity 0.25s ease-in-out;
			z-index: var(--utrf-tray-z-overlay);

			&.is-open {
				opacity: 1;
				pointer-events: auto;
			}
		}
	}

	/* No page scroll behind an open tray. */
	body.utrf-filters-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-available-technologies .utrf-filter-tray,
	.page-available-technologies .utrf-filter-tray__overlay {
		transition: none;
	}
}

@media print {
	.page-available-technologies .utrf-filters__open,
	.page-available-technologies .utrf-filter-tray__overlay {
		display: none;
	}
}