/**
 * RM_A-FLTR Filter Menu Styles
 * Speech bubble design inspired by rimu.richtermusikowski.com
 */

/* Use display: contents to make filter buttons direct flex children of main menu */
.rma-filter-menu,
nav.rma-filter-menu {
	display: contents !important;
}

.rma-filter-buttons,
ul.rma-filter-buttons {
	display: contents !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rma-filter-buttons li {
	margin: 0 8px 8px 0; /* right margin for spacing, bottom for triangle */
	padding: 0;
}

/* Filter Button - Speech Bubble Style */
.rma-filter-btn {
	position: relative;
	/* Use flexbox for reliable cross-browser vertical centering (fixes iOS) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	/* Prevent iOS from inflating button height */
	min-height: 0;
	max-height: 24px;
	padding: 0 9px;
	background: #ffffff;
	border: 1px solid #343434;
	box-sizing: border-box;
	color: #343434;
	font-family: 'NudicaMono_Regular', monospace;
	font-size: 12px;
	line-height: 1; /* Reset line-height, flexbox handles centering */
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	white-space: nowrap;
	transform-origin: center center;
	vertical-align: top;
	/* iOS Safari button reset */
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	margin: 0;
	text-align: center;
}

/* Speech bubble triangle - outer (border) */
.rma-filter-btn::before {
	content: '';
	position: absolute;
	left: -1px;
	top: 23px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px;
	border-color: #343434 transparent transparent #343434;
	transition: transform 0.18s ease;
}

/* Speech bubble triangle - inner (fill) */
.rma-filter-btn::after {
	content: '';
	position: absolute;
	left: 0;
	top: 21px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px;
	border-color: #ffffff transparent transparent #ffffff;
	transition: transform 0.18s ease, border-color 0.18s ease;
}

/* Hover effect - scale 1.1 from center */
@media (pointer: fine) {
	.rma-filter-btn:hover {
		transform: scale(1.1);
		background: #ffffff;
	}

	.rma-filter-btn:hover::before,
	.rma-filter-btn:hover::after {
		transform: scale(1);
	}
}

/* Focus styles */
.rma-filter-btn:focus {
	outline: 2px solid #343434;
	outline-offset: 2px;
}

.rma-filter-btn:focus-visible {
	outline: 2px solid #343434;
	outline-offset: 2px;
}

/* Active state - black background, white text */
.rma-filter-btn[aria-pressed="true"],
.rma-filter-btn.active {
	background: #343434;
	color: #ffffff;
}

/* Active state - inner triangle becomes black */
.rma-filter-btn[aria-pressed="true"]::after,
.rma-filter-btn.active::after {
	border-color: #343434 transparent transparent #343434;
}

/* Active + Hover - keep black, no additional color change */
@media (pointer: fine) {
	.rma-filter-btn[aria-pressed="true"]:hover,
	.rma-filter-btn.active:hover {
		background: #343434;
		transform: scale(1.1);
	}
}

/* Project Grid Filtering */
.rma-project-grid {
	transition: opacity 0.2s ease;
}

.rma-project-grid.is-filtering {
	opacity: 0;
}

.rma-project-item {
	transition: opacity 0.2s ease;
}

.rma-project-item.is-hidden {
	display: none;
}

/* Responsive */
@media (max-width: 768px) {
	.rma-filter-buttons li {
		margin: 0 8px 6px 0; /* Smaller spacing for mobile */
	}

	.rma-filter-btn {
		height: 22px;
		max-height: 22px;
		padding: 0 7px;
		font-size: 11px;
		line-height: 1; /* Flexbox handles centering */
	}

	.rma-filter-btn::before {
		top: 21px;
		border-width: 3px;
	}

	.rma-filter-btn::after {
		top: 19px;
		border-width: 3px;
	}
}