/**
 * Reusable gallery filter component — the checkbox filter form rendered by
 * inc/gallery-filter.php's medallion_render_gallery_filter(). Deliberately
 * self-contained (its own tokens below) so it can be enqueued on any
 * listing template — not just the Room Gallery — without depending on that
 * template's own CSS variables.
 *
 * Only handles the toggle button + filter panel/form. The results grid
 * (cards, pagination, etc.) is each template's own concern and lives in its
 * own section of style.css.
 *
 * .btn-apply-filter (the submit button) pairs with the shared .btn class
 * from style.css's BUTTONS! section — inc/gallery-filter.php renders it as
 * class="btn btn-apply-filter" — so this file only adds the filter-specific
 * bits (alignment, hover color) on top of that shared base look.
 */

:root {
	--gallery-filter-ink: #1a1a1a;
	--gallery-filter-muted: #6b6b6b;
	--gallery-filter-line: #e2e2e2;
	--gallery-filter-bp: 900px; /* match the consuming template's sidebar breakpoint */
}

/* ---- Mobile filter toggle ---- */

.gallery-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	background: none;
	border: 1px solid var(--gallery-filter-line);
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--gallery-filter-ink);
	cursor: pointer;
}

@media (min-width: 900px) {
	.gallery-filter-toggle {
		display: none;
	}
}

/* ---- Filter panel ---- */

.gallery-filter {
	display: none;
	flex-shrink: 0;
}

.gallery-filter.is-open {
	display: block;
}

@media (min-width: 900px) {
	.gallery-filter {
		display: block;
		width: 280px;
	}
}

.gallery-filter-form {
	border: 1px solid var(--gallery-filter-line);
	border-radius: 4px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.gallery-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gallery-filter-line);
}

.gallery-filter-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	font-style: normal;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gallery-filter-reset {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--gallery-filter-muted);
	font-size: 0.85rem;
	text-decoration: none;
}

.gallery-filter-reset:hover {
	color: var(--gallery-filter-ink);
}

.gallery-filter-group {
	border: none;
	margin: 0;
	padding: 0;
}

.gallery-filter-group legend {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-normal);
	font-style: normal;
	font-size: 1rem;
	padding-bottom: 0.6rem;
	margin-bottom: 0.8rem;
	width: 100%;
	border-bottom: 1px solid var(--gallery-filter-line);
}

.gallery-filter-option {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.95rem;
	padding: 0.35rem 0;
	cursor: pointer;
}

.gallery-filter-option input {
	width: 16px;
	height: 16px;
	accent-color: #f0f0f0;
  border-radius: 0px;
}

/* Base button look (padding, background, color, font, hover) comes from the
   shared .btn class in style.css — pair it in markup: class="btn btn-apply-filter".
   This rule only adds the filter-form-specific bits on top of that. */
.btn-apply-filter {
	align-self: flex-end;
	border: none;
	cursor: pointer;
}

.btn-apply-filter:hover {
	background: var(--goldHex);
}