/**
 * Gallery case filter.
 *
 * Enqueued from inc/theme-gallery-filter.php after main.css and
 * media-queries.css, so equal-specificity rules here win.
 *
 * Tokens follow the theme: DM Sans, #00192c ink, #2a7583 accent, #fcf8f4 cream,
 * squared corners, uppercase 14px/700 controls with 1px letter-spacing.
 */

/* ---------------------------------------------------------------------------
 * Hiding
 *
 * The script hides cards, facets, options and the Load More wrapper with the
 * `hidden` attribute. The UA stylesheet's [hidden]{display:none} loses to any
 * `display` declaration coming from the theme, so state it explicitly for
 * everything inside the filter root.
 * ------------------------------------------------------------------------- */

#gallery-filter-root [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Bar
 * ------------------------------------------------------------------------- */

.gallery-filter {
	margin: 0 auto 56px;
	font-family: "DM Sans", Sans-serif;
}

.gallery-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
}

.gallery-filter-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #00192c;
}

.gallery-filter-facets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.gallery-filter-facet {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Facet button
 * ------------------------------------------------------------------------- */

.gallery-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 0 44px 0 20px;
	position: relative;
	border: 1px solid #00192c;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #00192c;
	cursor: pointer;
	transition: background-color .25s, color .25s;
}

/* Chevron, drawn in CSS so it does not depend on an uploaded asset. */
.gallery-filter-toggle:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s;
}

.gallery-filter-toggle[aria-expanded="true"]:after {
	transform: translateY(-30%) rotate(225deg);
}

.gallery-filter-toggle:hover {
	background-color: #fcf8f4;
}

.gallery-filter-facet.is-active .gallery-filter-toggle {
	background-color: #00192c;
	color: #fff;
}

.gallery-filter-toggle:focus-visible {
	outline: 2px solid #2a7583;
	outline-offset: 2px;
}

.gallery-filter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background-color: #2a7583;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------------- */

.gallery-filter-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 260px;
	padding: 6px 0;
	border: 1px solid #00192c;
	background-color: #fff;
	box-shadow: 0 8px 24px rgba(0, 25, 44, .12);
	text-align: left;
}

.gallery-filter-option {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #00192c;
	cursor: pointer;
	transition: background-color .2s;
}

.gallery-filter-option:hover {
	background-color: #fcf8f4;
}

.gallery-filter-option input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: #2a7583;
	cursor: pointer;
}

.gallery-filter-option-label {
	flex: 1 1 auto;
	white-space: nowrap;
}

.gallery-filter-option-count {
	flex: 0 0 auto;
	font-size: 13px;
	color: rgba(0, 25, 44, .55);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Clear and summary
 * ------------------------------------------------------------------------- */

.gallery-filter-clear {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #2a7583;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gallery-filter-clear:hover {
	color: #00192c;
}

.gallery-filter-summary {
	margin: 18px 0 0;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: rgba(0, 25, 44, .6);
}

/* ---------------------------------------------------------------------------
 * Mobile — panels open inline instead of floating
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.gallery-filter-bar {
		gap: 10px;
	}

	.gallery-filter-facets {
		display: block;
		width: 100%;
	}

	.gallery-filter-facet {
		margin-bottom: 10px;
	}

	.gallery-filter-toggle {
		width: 100%;
		justify-content: flex-start;
	}

	.gallery-filter-panel {
		position: static;
		width: 100%;
		min-width: 0;
		margin-top: -1px;
		box-shadow: none;
	}

	.gallery-filter-option {
		padding: 13px 18px;
	}

	.gallery-filter-option-label {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
 * Case details — single case page
 *
 * Rendered by template-parts/gallery-case-details.php, which emits only the
 * rows that hold a value and nothing at all when the case has no data yet.
 * ------------------------------------------------------------------------- */

.gallery-case-details {
	max-width: 870px;
	margin: 56px auto 0;
	font-family: "DM Sans", Sans-serif;
}

.gallery-case-details-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(0, 25, 44, .15);
}

.gallery-case-details-list li {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 7px;
	padding: 22px 30px;
	border-bottom: 1px solid rgba(0, 25, 44, .15);
	text-align: center;
}

.gallery-case-details-list li.is-wide {
	flex-basis: 100%;
}

.gallery-case-details-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(0, 25, 44, .55);
}

.gallery-case-details-value {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #00192c;
}

.gallery-case-description {
	margin-top: 40px;
}

@media (max-width: 575px) {
	.gallery-case-details {
		margin-top: 36px;
	}

	.gallery-case-details-list li {
		flex: 0 0 50%;
		padding: 18px 10px;
	}
}