/* VWC Therapist Directory
   Tokens first so the whole thing can be rebranded from one block.
   Values default to something that sits quietly inside Divi. */

.vwc-directory,
.vwc-profile {
	--vwc-ink:        #333;
	--vwc-muted:      #6b7280;
	--vwc-line:       #e3e6ea;
	--vwc-bg:         #fff;
	--vwc-bg-soft:    #f7f8fa;
	--vwc-accent:     #336699;
	--vwc-accent-ink: #fff;
	--vwc-ok-bg:      #e8f3ec;
	--vwc-ok-ink:     #1f6b3f;
	--vwc-radius:     10px;
	--vwc-gap:        1.75rem;
}

/* ---------- filters ---------- */

.vwc-filters {
	background: var(--vwc-bg-soft);
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.vwc-filters__top {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

.vwc-search { flex: 1 1 260px; }

.vwc-search input[type="search"] {
	width: 100%;
	padding: .6rem .8rem;
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	font-size: 1rem;
	background: var(--vwc-bg);
}

.vwc-toggle { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }

.vwc-facets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: .75rem;
	/* Without this, grid stretches every facet in a row to match the tallest
	   open one, so closed facets render as tall empty boxes. */
	align-items: start;
}

.vwc-facet {
	background: var(--vwc-bg);
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
}

.vwc-facet > summary {
	cursor: pointer;
	padding: .6rem .8rem;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
}

.vwc-facet > summary::-webkit-details-marker { display: none; }

.vwc-facet > summary::after {
	content: "";
	width: .5rem; height: .5rem;
	border-right: 2px solid var(--vwc-muted);
	border-bottom: 2px solid var(--vwc-muted);
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex: none;
	margin-left: auto;
}

.vwc-facet[open] > summary::after { transform: rotate(-135deg); }

.vwc-facet__count {
	background: var(--vwc-accent);
	color: var(--vwc-accent-ink);
	border-radius: 99px;
	font-size: .72rem;
	padding: .05rem .45rem;
	line-height: 1.5;
}

.vwc-facet__list {
	list-style: none;
	margin: 0;
	padding: 0 .8rem .7rem;
	max-height: 15rem;
	overflow-y: auto;
	/* Every facet has more terms than fit, so a scrollbar is always present.
	   Without a reserved gutter it overlays the count and clips it. */
	scrollbar-gutter: stable;
}

/* Divi styles `li` directly, so resetting only the `ul` loses the cascade.
   ::marker covers browsers that keep a marker box regardless of list-style. */
.vwc-directory ul.vwc-facet__list,
.vwc-directory ul.vwc-card__tags,
.vwc-profile ul.vwc-taglist {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
}

.vwc-directory ul.vwc-facet__list > li,
.vwc-directory ul.vwc-card__tags > li,
.vwc-profile ul.vwc-taglist > li {
	list-style: none !important;
	list-style-type: none !important;
	margin-left: 0;
	padding-left: 0;
	background: none;
}

.vwc-directory ul.vwc-facet__list > li::marker,
.vwc-directory ul.vwc-card__tags > li::marker,
.vwc-profile ul.vwc-taglist > li::marker { content: ""; }

.vwc-directory ul.vwc-facet__list > li::before,
.vwc-directory ul.vwc-card__tags > li::before,
.vwc-profile ul.vwc-taglist > li::before { content: none; display: none; }

.vwc-facet__list li { margin: 0 0 .35rem; }

.vwc-facet__list label {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
	cursor: pointer;
}

/* The checkbox must not shrink, and the term name must be allowed to wrap
   rather than squeezing the count. min-width:0 overrides the flex default of
   min-width:auto, which otherwise refuses to shrink below content width. */
.vwc-facet__list label > input[type="checkbox"] { flex: none; margin: 0; }

.vwc-facet__list label > span:not(.vwc-facet__n) {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.vwc-facet__n {
	flex: none;
	margin-left: auto;
	padding-left: .35rem;
	color: var(--vwc-muted);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.vwc-filters__actions { margin-top: 1rem; display: flex; gap: .6rem; align-items: center; }

.vwc-count { color: var(--vwc-muted); font-size: .9rem; margin: 0 0 1rem; }

/* ---------- grid ---------- */

.vwc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--vwc-gap);
}

.vwc-grid.is-loading { opacity: .45; transition: opacity .12s ease; }

.vwc-card {
	display: flex;
	flex-direction: column;
	background: var(--vwc-bg);
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	overflow: hidden;
}

.vwc-card__media { display: block; aspect-ratio: 1 / 1; background: var(--vwc-bg-soft); }

.vwc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vwc-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--vwc-muted);
	font-weight: 600;
}

.vwc-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }

.vwc-card__name { font-size: 1.08rem; line-height: 1.3; margin: 0 0 .15rem; }
.vwc-card__name a { color: var(--vwc-ink); text-decoration: none; }
.vwc-card__name a:hover { text-decoration: underline; }

.vwc-card__pronouns { color: var(--vwc-muted); font-size: .84rem; margin: 0 0 .5rem; }

.vwc-badge {
	display: inline-block;
	background: var(--vwc-ok-bg);
	color: var(--vwc-ok-ink);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .2rem .55rem;
	border-radius: 99px;
	margin: 0 0 .6rem;
	align-self: flex-start;
}

.vwc-badge--muted { background: var(--vwc-bg-soft); color: var(--vwc-muted); }

.vwc-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .6rem; padding: 0; }

.vwc-card__tags li {
	list-style: none;
	font-size: .74rem;
	background: var(--vwc-bg-soft);
	border: 1px solid var(--vwc-line);
	border-radius: 99px;
	padding: .12rem .5rem;
	color: var(--vwc-muted);
}

.vwc-card__bio { font-size: .9rem; line-height: 1.5; margin: 0 0 1rem; }

.vwc-card__actions { margin: auto 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- buttons ---------- */

.vwc-btn {
	display: inline-block;
	background: var(--vwc-accent);
	color: var(--vwc-accent-ink) !important;
	border: 1px solid var(--vwc-accent);
	border-radius: var(--vwc-radius);
	padding: .5rem .95rem;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	line-height: 1.4;
}

.vwc-btn:hover { filter: brightness(1.08); }

.vwc-btn--ghost { background: transparent; color: var(--vwc-accent) !important; }

.vwc-btn--block { display: block; text-align: center; width: 100%; margin-bottom: .5rem; }

/* ---------- profile page ---------- */

.vwc-profile { padding: 2.5rem 0; }

/* Belt to the body_class braces: if a theme option or child theme forces a
   sidebar layout back on, Divi's divider still must not cross the profile. */
#main-content .container.vwc-profile::before { display: none; }

.vwc-profile__inner {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 2.5rem;
	align-items: start;
}

.vwc-profile__img { width: 100%; border-radius: var(--vwc-radius); display: block; margin-bottom: 1rem; }

.vwc-profile__name { margin: 0 0 .2rem; line-height: 1.2; }

.vwc-profile__pronouns { color: var(--vwc-muted); margin: 0 0 1.5rem; }

.vwc-profile__bio { line-height: 1.7; margin-bottom: 2rem; }

.vwc-profile__taxrow { border-top: 1px solid var(--vwc-line); padding-top: 1rem; margin-bottom: 1rem; }

.vwc-profile__taxlabel {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--vwc-muted);
	margin: 0 0 .5rem;
}

.vwc-taglist { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }

.vwc-taglist a {
	display: inline-block;
	font-size: .84rem;
	background: var(--vwc-bg-soft);
	border: 1px solid var(--vwc-line);
	border-radius: 99px;
	padding: .2rem .65rem;
	color: var(--vwc-ink);
	text-decoration: none;
}

.vwc-taglist a:hover { border-color: var(--vwc-accent); color: var(--vwc-accent); }

.vwc-note { color: var(--vwc-muted); font-size: .85rem; }

.vwc-profile__back { margin-top: 2rem; }

/* ---------- contact page header ---------- */

.vwc-contacting {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--vwc-bg-soft, #f7f8fa);
	border: 1px solid var(--vwc-line, #e3e6ea);
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 1.5rem;
}

.vwc-contacting__text { margin: 0; }
.vwc-contacting__change { display: block; font-size: .84rem; }

/* ---------- empty ---------- */

.vwc-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--vwc-muted); }

/* ---------- responsive ---------- */

@media (max-width: 780px) {
	.vwc-profile__inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.vwc-facets { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.vwc-facet > summary::after,
	.vwc-grid { transition: none; }
}