/**
 * Resource directory ([maturepride_resources]).
 * Depends on the shared tokens, card and button rules in mpmp-front.css.
 *
 * Same approach as the verification page: every colour resolves through a
 * --mpmp-* token, so the directory follows the Customizer's Background and Body
 * Text settings and is dark on MaturePride without a second stylesheet.
 *
 * Every rule that paints a background also declares a colour. A control that
 * sets only background inherits the UA's black `buttontext` and renders an
 * invisible label on a dark palette -- the failure that produced a run of
 * "the colours are broken" reports across this stack.
 */

.mpmp-resources {
	padding: 1rem 0 2rem;
}

/* Filter bar -------------------------------------------------------------- */

.mpmp-resources-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem;
	padding: 1rem;
	margin-bottom: 1.25rem;
	background: var(--mpmp-bg, #f8fafc);
	border: 1px solid var(--mpmp-border, #e2e8f0);
	border-radius: 10px;
	color: var(--mpmp-text, #0f172a);
}

.mpmp-resources-search {
	flex: 1 1 16rem;
	min-width: 0;
}

.mpmp-resources-search input[type="search"],
.mpmp-resources-state select {
	width: 100%;
	padding: .55rem .7rem;
	background: var(--mpmp-bg, #fff);
	color: var(--mpmp-text, #0f172a);
	border: 1px solid var(--mpmp-border, #cbd5e1);
	border-radius: 8px;
	font-size: 1rem;
}

.mpmp-resources-state {
	flex: 0 1 13rem;
}

.mpmp-resources-state label {
	display: block;
	margin-bottom: .25rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--mpmp-muted, #64748b);
}

.mpmp-resources-clear {
	align-self: center;
	font-size: .9rem;
	color: var(--mpmp-muted, #64748b);
	text-decoration: underline;
}

.mpmp-resources-clear:hover,
.mpmp-resources-clear:focus {
	color: var(--mpmp-text, #0f172a);
}

.mpmp-resources-note,
.mpmp-resources-count {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--mpmp-muted, #64748b);
}

/* Layout ------------------------------------------------------------------ */

.mpmp-resources-layout {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

@media (max-width: 782px) {
	.mpmp-resources-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Category rail ----------------------------------------------------------- */

.mpmp-resources-cats-title {
	margin: 0 0 .6rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mpmp-muted, #64748b);
}

.mpmp-resources-cat-list,
.mpmp-resources-cat-children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpmp-resources-cat-children {
	margin: .15rem 0 .35rem .75rem;
	padding-left: .6rem;
	border-left: 1px solid var(--mpmp-border, #e2e8f0);
}

.mpmp-resources-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .4rem .55rem;
	border-radius: 7px;
	color: var(--mpmp-text, #0f172a);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.3;
}

.mpmp-resources-cat-children .mpmp-resources-cat {
	font-size: .88rem;
	color: var(--mpmp-muted, #64748b);
}

.mpmp-resources-cat:hover,
.mpmp-resources-cat:focus {
	background: var(--mpmp-bg-subtle, rgba(100, 116, 139, .12));
	color: var(--mpmp-text, #0f172a);
}

.mpmp-resources-cat.is-active {
	background: var(--mpmp-accent, #7c3aed);
	color: #fff;
	font-weight: 600;
}

.mpmp-resources-cat.is-active .mpmp-resources-cat-count {
	color: rgba(255, 255, 255, .85);
}

.mpmp-resources-cat-count {
	flex: 0 0 auto;
	font-size: .78rem;
	color: var(--mpmp-muted, #64748b);
	font-variant-numeric: tabular-nums;
}

/* Cards ------------------------------------------------------------------- */

.mpmp-resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 1rem;
}

.mpmp-resource-card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.15rem;
	background: var(--mpmp-bg, #fff);
	border: 1px solid var(--mpmp-border, #e2e8f0);
	border-radius: 12px;
	color: var(--mpmp-text, #0f172a);
}

.mpmp-resource-head {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.mpmp-resource-logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--mpmp-bg, #fff);
	border: 1px solid var(--mpmp-border, #e2e8f0);
}

.mpmp-resource-headings {
	min-width: 0;
}

.mpmp-resource-name {
	margin: 0 0 .2rem;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--mpmp-heading, var(--mpmp-text, #0f172a));
}

.mpmp-resource-location {
	display: flex;
	align-items: center;
	gap: .3rem;
	margin: 0;
	font-size: .82rem;
	color: var(--mpmp-muted, #64748b);
}

.mpmp-resource-location svg {
	flex: 0 0 auto;
}

.mpmp-resource-desc {
	margin: 0;
	font-size: .93rem;
	line-height: 1.5;
	color: var(--mpmp-text, #0f172a);
}

.mpmp-resource-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
}

.mpmp-resource-tag {
	padding: .16rem .5rem;
	font-size: .74rem;
	background: var(--mpmp-bg-subtle, rgba(100, 116, 139, .14));
	color: var(--mpmp-muted, #475569);
	border-radius: 999px;
}

/* Actions ----------------------------------------------------------------- */

.mpmp-resource-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: auto;
	padding-top: .35rem;
}

.mpmp-resource-visit {
	flex: 0 0 auto;
}

.mpmp-resource-phone,
.mpmp-resource-email {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .9rem;
	color: var(--mpmp-accent, #7c3aed);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.mpmp-resource-phone:hover,
.mpmp-resource-phone:focus,
.mpmp-resource-email:hover,
.mpmp-resource-email:focus {
	text-decoration: underline;
	color: var(--mpmp-accent, #7c3aed);
}

/* Empty state, pagination, footer ----------------------------------------- */

.mpmp-resources-empty {
	padding: 2rem 1.5rem;
	text-align: center;
	background: var(--mpmp-bg, #f8fafc);
	border: 1px dashed var(--mpmp-border, #cbd5e1);
	border-radius: 12px;
	color: var(--mpmp-text, #0f172a);
}

.mpmp-resources-empty p {
	margin: 0 0 .6rem;
}

.mpmp-resources-empty p:last-child {
	margin-bottom: 0;
}

.mpmp-resources-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.mpmp-resources-page-of {
	font-size: .9rem;
	color: var(--mpmp-muted, #64748b);
}

.mpmp-resources-disclaimer {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--mpmp-border, #e2e8f0);
	font-size: .82rem;
	line-height: 1.5;
	color: var(--mpmp-muted, #64748b);
}

/* Respect a reduced-motion preference for any transition added later. */
@media (prefers-reduced-motion: reduce) {
	.mpmp-resources * {
		transition: none !important;
	}
}