/* Modern Archive Layout & Generic Page Styles */
#uwsp-directory {
	.breadcrumb-bar {
		background-color: var(--wp--preset--color--primary, var(--uwsp-purple, #3b1c6f));
		padding: 10px;
		color: var(--wp--preset--color--primary-text, #fff);

		a {
			color: var(--wp--preset--color--primary-text, #fff);
		}
	}

	.entry-header {
		margin-top: 1 !important;
		margin-bottom: .5rem !important;

		.entry-title {
			text-transform: none;
			font-family: "Roboto Condensed", sans-serif;
			font-size: 3.5rem;
			font-weight: 300;

			.uwsp-directory-profile-pronouns-header {
				display: block;
				font-size: 1.25rem;
				color: #666;
				margin-top: -0.5rem;
				font-weight: 200;
				font-style: italic;
			}
		}
	}

	.uwsp-directory-hero {
		margin-bottom: 3rem !important;
		padding-top: 7rem;
		color: var(--wp--preset--color--primary-text, #fff);
		background-color: var(--wp--preset--color--primary, var(--uwsp-purple, #3b1c6f));
		background-color: hsl(from var(--wp--preset--color--primary, var(--uwsp-purple, #3b1c6f)) h s calc(l - 10%));
		background-color: color-mix(in srgb, var(--wp--preset--color--primary, var(--uwsp-purple, #3b1c6f)), #000 20%);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		display: flex !important;

		h1, h2, h3, h4, h5, h6 {
			font-size: 2.5rem;
			font-weight: 700;
			color: var(--wp--preset--color--primary-text, #fff);
			text-transform: uppercase;
			padding-bottom: 1rem;
		}
	}
}

/* Single Profile Layout (Specific to Page) */
.uwsp-directory-profile {
	display: flex;
	gap: 30px;
	flex-direction: row-reverse;
	padding-bottom: 30px;

	aside {
		flex-basis: 33%;
		margin-bottom: 10px;

		.card-contact {
			margin-top: 1rem;
		}
		.uwsp-profile-card {
			margin-top: 20px;
			&:first-child { margin-top: 0; }
		}
	}

	section {
		flex-basis: 67%;
		.card-courses { margin-top: 20px; }
	}

	.card-title {
		font-weight: bold;
		font-size: 1.1rem;
	}

	figure { margin-bottom: 1em; }

	.card-courses {
		table { width: 100%; }
		th { text-align: left; }
		td {
			padding: 4px 7px;
			border: 1px #FFF solid;
			line-height: 16px;
		}
		tr:hover td {
			color: var(--wp--preset--color--primary);
		}
	}

	@media (max-width: 768px) {
		flex-direction: column;
		aside img.wp-post-image { width: auto; }
	}
}

/* Modern Archive Layout */
.uwsp-directory-archive-wrap {
	margin: 2rem 0;

	> header {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		max-width: 100vw;
	}

	.uwsp-directory-hero {
		font-size: 2rem;
		font-weight: 700;
		margin-bottom: 1rem;
		background-color: var(--wp--preset--color--primary, var(--uwsp-purple, #3b1c6f));
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		display: flex !important;
	}

	.uwsp-directory-archive-inner {
		display: flex;
		gap: 2rem;
		align-items: flex-start;

		@media (max-width: 1024px) {
			flex-direction: column;
			gap: 1.5rem;
		}
	}

	.uwsp-directory-sidebar {
		flex: 0 0 280px;
		position: sticky;
		top: 20px;
		min-width: 0;

		@media (max-width: 1024px) {
			flex: 1 1 100%;
			width: 100%;
			position: static;
		}

		.card {
			background: #fff;
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
			margin-bottom: 0.5rem;

			.card-header {
				padding: 1rem;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&.secondary-bg {
					background-color: var(--wp--preset--color--secondary, #f0f0f0);
					border-bottom: 1px solid #ddd;
				}

				.sidebar-title {
					margin: 0;
					font-size: 1.1rem;
					font-weight: 700;
				}

				.sidebar-mobile-toggle {
					display: none;
					background: none;
					border: 1px solid #ccc;
					padding: 5px 10px;
					border-radius: 4px;
					cursor: pointer;
					color: #666;

					@media (max-width: 900px) { display: block; }
				}
			}

			.card-body {
				padding: 1rem;
				@media (max-width: 900px) { display: none; }
			}

			&.is-expanded {
				.card-body { display: block; }
				.sidebar-mobile-toggle { background: #eee; }
			}
		}

		.uwsp-directory-dept-tree {
			font-size: 0.85rem;
			padding: 0;
			margin: 0;
			list-style: none;

			&.depth-0 {
				margin-bottom: 0.5rem;

				@media (min-width: 600px) and (max-width: 1024px) {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 0 2rem;
				}

				@media (min-width: 1025px) {
					display: block;
				}
			}

			ul {
				padding-left: 0.75rem;
				border-left: 1px solid #eee;
				margin-left: 0;
				list-style: none;
			}

			li {
				margin: 0;
				padding: 0;
				list-style: none;

				.dept-item-row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 5px;
					padding: 2px 0;
					border-bottom: 1px solid #fafafa;
					&:hover { background: #fcfcfc; }
				}

				.dept-toggle {
					background: none;
					border: 1px solid #eee;
					border-radius: 2px;
					width: 16px;
					height: 16px;
					padding: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					color: #999;
					font-size: 10px;
					line-height: 1;
					flex-shrink: 0;
					&:hover {
						background: #f0f0f0;
						color: #333;
						border-color: #ccc;
					}
				}

				.dept-checkbox-label {
					flex: 1;
					font-size: 0.825rem;
					line-height: 1.25;
					display: flex;
					align-items: flex-start;
					gap: 6px;
					padding: 4px 0;
					cursor: pointer;
					input { margin-top: 2px; }
				}
			}
		}

		.sidebar-actions {
			margin-top: 1.5rem;
			padding-top: 1rem;
			border-top: 1px solid #eee;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			button { width: 100%; }
			.button-clear {
				text-align: center;
				color: #888;
				font-size: 0.85rem;
				text-decoration: underline;
				&:hover { color: var(--wp--preset--color--primary); }
			}
		}
	}

	.uwsp-directory-content {
		flex: 1;
		min-width: 0;

		@media (max-width: 1024px) {
			width: 100% !important;
		}

		#uwsp-directory-results-container {
			transition: opacity 0.3s ease;
			&.is-loading {
				opacity: 0.5;
				pointer-events: none;
			}
		}

		.uwsp-directory-header {
			margin-bottom: 2rem;
			.uwsp-directory-search-row {
				display: flex;
				flex-wrap: nowrap;
				gap: 1rem;
				align-items: center;
				background: #f9f9f9;
				padding: 1rem;
				border-radius: 4px;
				border: 1px solid #eee;

				@media (max-width: 600px) { flex-wrap: wrap; }

				.search-input-wrap {
					flex: 1;
					min-width: 200px;
					input {
						width: 100%;
						padding: 0.5rem 0.75rem;
						border: 1px solid #ccc;
						border-radius: 4px;
					}
				}
				.sort-wrap,
				.page-size-wrap {
					display: flex;
					align-items: center;
					gap: 0.5rem;
					white-space: nowrap;
					font-size: 0.9rem;
					select {
						padding: 0.25rem 0.5rem;
						border-radius: 4px;
					}
				}
			}
		}

		.uwsp-directory-results {
			display: grid !important;
			grid-template-columns: repeat(4, 1fr) !important;
			gap: 20px !important;
			margin-bottom: 2rem;
			min-width: 0;

			@media (max-width: 1400px) {
				grid-template-columns: repeat(3, 1fr) !important;
			}

			@media (max-width: 1024px) {
				grid-template-columns: repeat(3, 1fr) !important;
			}

			@media (max-width: 800px) {
				grid-template-columns: repeat(2, 1fr) !important;
			}

			@media (max-width: 640px) {
				grid-template-columns: 1fr !important;
				gap: 30px 0 !important;
				width: 100% !important;
				margin: 0 !important;
			}

			.uwsp-profile-card {
				width: 100% !important;
				margin: 0 !important;
				box-sizing: border-box !important;
				max-width: 100% !important;
				min-width: 0;
			}

			.uwsp-directory-no-results {
				grid-column: 1 / -1;
				text-align: center;
				padding: 3rem 1rem;
				background: #f9f9f9;
				border-radius: 4px;
				border: 1px dashed #ccc;

				p {
					margin-bottom: 1.5rem;
					font-size: 1.1rem;
					color: #666;
				}
			}
		}

		.uwsp-directory-pagination {
			display: flex;
			justify-content: center;
			gap: 0.5rem;
			margin-top: 2rem;
			.page-numbers {
				padding: 0.4rem 0.8rem;
				border: 1px solid #ddd;
				border-radius: 3px;
				text-decoration: none;
				color: #333;
				&.current {
					background: var(--wp--preset--color--primary);
					color: #fff;
					border-color: var(--wp--preset--color--primary);
				}
				&:hover:not(.current) { background: #eee; }
			}
		}
	}
}