/* ==========================================================================
   PIN — Find a Chapter finder styling
   Pairs with the [pin_find_a_chapter] shortcode. Shares the same variables as
   pin-open-seats.css — if both are loaded, define the :root block only once.
   ========================================================================== */

/* Tokens live in the child theme style.css (single source). */

.pin-fac { font-family: var(--pin-sans); color: var(--pin-ink); }

/* ---- Controls: day pills + meal toggle ----------------------------------- */
.pin-fac__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 1rem;
}
.pin-fac__days { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-fac__meals { display: flex; gap: 6px; margin-left: auto; }

.pin-fac__day,
.pin-fac__meal {
	font-family: var(--pin-sans);
	font-size: 0.8rem;
	line-height: 1;
	padding: 8px 14px;
	border: 1px solid var(--pin-line-strong);
	border-radius: 20px;
	background: #fff;
	color: var(--pin-ink);
	cursor: pointer;
	transition: all 0.15s ease;
}
.pin-fac__meal { font-size: 0.72rem; }
.pin-fac__day:hover,
.pin-fac__meal:hover { border-color: var(--pin-garnet); }

.pin-fac__day.is-active {
	background: var(--pin-garnet);
	border-color: var(--pin-garnet);
	color: var(--pin-paper);
	font-weight: 500;
}
.pin-fac__meal.is-active {
	background: var(--pin-garnet-tint);
	border-color: var(--pin-garnet-tint);
	color: var(--pin-garnet);
	font-weight: 500;
}
.pin-fac__day-count {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.65rem;
	opacity: 0.7;
}

/* ---- Panels + cards ------------------------------------------------------ */
.pin-fac__panel { display: none; }
.pin-fac__panel.is-active { display: block; }

.pin-fac__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.pin-fac__card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px;
	border: 1px solid var(--pin-line);
	border-radius: var(--pin-radius);
	background: #fff;
	text-decoration: none;
	color: var(--pin-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.pin-fac__card:hover {
	border-color: var(--pin-garnet);
	background: var(--pin-paper);
}
.pin-fac__name { font-weight: 500; font-size: 0.95rem; }
.pin-fac__meta { font-size: 0.72rem; color: var(--pin-ink-soft); }
.pin-fac__venue { font-size: 0.72rem; color: var(--pin-ink-soft); line-height: 1.4; }
.pin-fac__seat {
	align-self: flex-start;
	margin-top: 6px;
	font-size: 0.65rem;
	color: var(--pin-open);
	background: #e6f0df;
	padding: 3px 9px;
	border-radius: 20px;
}

/* ---- No-JS fallback: show every day, hide the day pills ------------------ */
.no-js .pin-fac__days { display: none; }
.no-js .pin-fac__panel { display: block; }

@media (max-width: 640px) {
	.pin-fac__grid { grid-template-columns: 1fr; }
	.pin-fac__meals { margin-left: 0; }
}