/* ==========================================================================
   Rays Room — client feedback round (Oct 2026)
   Loaded after styles.css on the Rays Room templates only (see enqueue.php).

   1. Header: logo fits the bar, solid variant for inner pages
   2. Navigation dropdowns (Our Services, Resources)
   3. Team carousel + cards
   4. Therapist profile: photo crop + intro video
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header
   -------------------------------------------------------------------------- */

/* The logo was 148x90 inside a 76px bar, so it overflowed and got cropped. */
.rays-room .brand__mark {
		width: auto;
		height: 50px;
		max-width: none;
}
@media (max-width: 900px) {
	.rays-room .brand__mark { height: 42px; }
}

/* Inner pages (no full-bleed hero) use a solid bar — same look as the
   homepage bar once you've scrolled past the hero. */
.header--solid {
		background: var(--cream);
		box-shadow: 0 1px 0 rgba(119, 70, 37, 0.16);
}
.header--solid .brand__mark--light { display: none; }
.header--solid .brand__mark--dark { display: block; }
.header--solid .nav a:not(.nav__cta) { color: var(--brown); }
.header--solid .nav__cta { background: var(--brown); color: var(--cream); }
.header--solid .nav__cta:hover { background: var(--dark); }
.header--solid .burger span { background: var(--brown); }

/* Homepage: transparent over the hero, solid once scrolled (script.js adds
   .is-stuck). A soft top shade keeps the cream links readable on any photo. */
.header--overlay:not(.is-stuck):not(.is-open) {
		background: linear-gradient(180deg, rgba(51, 11, 1, 0.38) 0%, rgba(51, 11, 1, 0) 100%);
		box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Navigation dropdowns
   -------------------------------------------------------------------------- */
.nav__item {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.15rem;
}
.nav__parent,
.nav__toggle,
.subnav__toggle {
		font: inherit;
		background: none;
		border: 0;
		cursor: pointer;
}
.nav__parent--button {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0;
		font-size: 0.95rem;
		font-weight: 400;
		color: var(--cream);
		transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}
.nav__parent--button:hover { opacity: 0.72; }
.nav__toggle {
		display: inline-flex;
		align-items: center;
		padding: 0.3rem;
		color: var(--cream);
		line-height: 0;
}
.nav__toggle svg,
.subnav__toggle svg { transition: transform var(--t) var(--ease); }
.nav__item.is-sub-open > .nav__toggle svg,
.nav__item.is-sub-open > .nav__parent--button svg { transform: rotate(180deg); }

.header.is-stuck .nav__parent--button,
.header.is-stuck .nav__toggle,
.header--solid .nav__parent--button,
.header--solid .nav__toggle { color: var(--brown); }

.subnav {
		list-style: none;
		margin: 0;
		padding: 0.55rem;
		min-width: 15rem;
		background: var(--cream);
		border-radius: 16px;
		box-shadow: 0 22px 44px -18px rgba(51, 11, 1, 0.38), 0 0 0 1px rgba(119, 70, 37, 0.1);
}
.subnav__item {
		position: relative;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
}
#header .subnav a.subnav__link {
		flex: 1;
		display: block;
		padding: 0.62rem 0.85rem;
		border-radius: 10px;
		border-bottom: 0;
		font-size: 0.92rem;
		font-weight: 400;
		line-height: 1.3;
		color: var(--brown);
		opacity: 1;
		text-decoration: none;
		white-space: nowrap;
		transition: background var(--t) var(--ease);
}
#header .subnav a.subnav__link:hover,
#header .subnav a.subnav__link:focus-visible { background: rgba(217, 189, 165, 0.5); }
.subnav__toggle {
		color: var(--brown);
		padding: 0.45rem;
		line-height: 0;
		border-radius: 8px;
}

/* Desktop: open on hover, keyboard focus or click */
@media (min-width: 901px) {
		.subnav {
					position: absolute;
					top: calc(100% + 0.75rem);
					left: -0.9rem;
					z-index: 20;
					opacity: 0;
					visibility: hidden;
					transform: translateY(6px);
					transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
	}
		/* invisible bridge so the menu doesn't close on the way down */
		.subnav::before {
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					top: -0.9rem;
					height: 0.9rem;
	}
		.subnav--d2 {
					top: -0.55rem;
					left: calc(100% + 0.35rem);
	}
		.subnav--d2::before { top: 0; bottom: 0; left: -0.5rem; right: auto; width: 0.5rem; height: auto; }
	.subnav__toggle svg { transform: rotate(-90deg); }
	
		.nav__item:hover > .subnav,
		.nav__item:focus-within > .subnav,
		.nav__item.is-sub-open > .subnav,
		.subnav__item--has-sub:hover > .subnav,
		.subnav__item--has-sub:focus-within > .subnav,
		.subnav__item.is-sub-open > .subnav {
					opacity: 1;
					visibility: visible;
					transform: none;
					transition-delay: 0s;
	}
}

/* Mobile: dropdowns become tap-to-expand sections inside the burger menu */
@media (max-width: 900px) {
		.header.is-open .nav {
					max-height: calc(100svh - var(--header-h));
					overflow-y: auto;
	}
		.nav__item {
					flex-wrap: wrap;
					justify-content: space-between;
					border-bottom: 1px solid rgba(119, 70, 37, 0.14);
	}
		.nav__item > a.nav__parent {
					flex: 1;
					border-bottom: 0;
	}
		.nav__parent--button {
					flex: 1;
					justify-content: space-between;
					padding: 0.95rem 0.2rem;
					font-size: 1.02rem;
					color: var(--brown);
	}
		.nav__toggle {
					padding: 0.95rem 0.6rem;
					color: var(--brown);
	}
	.nav__parent--button.nav__toggle { padding: 0.95rem 0.2rem; }
		.subnav {
					display: none;
					width: 100%;
					min-width: 0;
					padding: 0 0 0.7rem 0.75rem;
					background: transparent;
					box-shadow: none;
					border-radius: 0;
	}
	.subnav--d2 { padding-bottom: 0.2rem; }
		.nav__item.is-sub-open > .subnav,
	.subnav__item.is-sub-open > .subnav { display: block; }
	.subnav__item.is-sub-open > .subnav__toggle svg { transform: rotate(180deg); }
		#header .subnav a.subnav__link {
					white-space: normal;
					padding: 0.7rem 0.4rem;
					font-size: 0.98rem;
	}
}

/* --------------------------------------------------------------------------
   3. Team carousel
   Same card for everyone; a slow loop that pauses while a card is hovered or
   focused. Touch screens and reduced-motion get a swipeable row instead.
   -------------------------------------------------------------------------- */
.team-carousel {
		--card-w: 17rem;
		--card-gap: 1.25rem;
		position: relative;
		margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.team-carousel__viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		/* room for the lift + shadow on hover */
		padding: 1.25rem 0 2.5rem;
		margin: -1.25rem 0 -2.5rem;
}
.team-carousel__viewport::-webkit-scrollbar { display: none; }
.team-carousel__track {
		list-style: none;
		margin: 0;
		padding: 0 0.25rem;
		display: flex;
		gap: var(--card-gap);
		width: max-content;
}
.team-carousel__item {
		flex: 0 0 var(--card-w);
		display: flex;
		scroll-snap-align: start;
}

.team-carousel.is-marquee .team-carousel__viewport {
		overflow: hidden;
		scroll-snap-type: none;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.team-carousel.is-marquee .team-carousel__track {
		animation: rr-team-marquee var(--rr-marquee-dur, 60s) linear infinite;
}
.team-carousel.is-marquee:hover .team-carousel__track,
.team-carousel.is-marquee:focus-within .team-carousel__track,
.team-carousel.is-offscreen .team-carousel__track { animation-play-state: paused; }

@keyframes rr-team-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(var(--rr-shift, 0px) * -1)); }
}

@media (max-width: 560px) {
	.team-carousel { --card-w: 15.5rem; --card-gap: 1rem; }
}

/* Card */
.tcard {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 1.75rem 1.35rem 1.5rem;
		background: var(--tan);
		border-radius: var(--r-card);
		color: var(--dark);
		text-align: center;
		text-decoration: none;
		overflow: hidden;
		transform-style: preserve-3d;
		transition: transform 180ms ease, box-shadow 180ms ease;
		will-change: transform;
}
.tcard::before,
.tcard::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;
		pointer-events: none;
		opacity: 0;
		transition: opacity 220ms ease;
}
.tcard::before {
		background: radial-gradient(
					circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
					rgba(254, 254, 242, 0.55),
					rgba(254, 254, 242, 0.18) 24%,
					transparent 55%
				);
		mix-blend-mode: soft-light;
}
.tcard::after {
		box-shadow: inset 0 0 0 1px rgba(254, 254, 242, 0.45);
		background: linear-gradient(180deg, transparent 55%, rgba(51, 11, 1, 0.08));
}
a.tcard:hover { box-shadow: 0 26px 60px -20px rgba(51, 11, 1, 0.38); }
a.tcard:hover::before,
a.tcard:hover::after { opacity: 1; }
a.tcard:focus-visible {
		outline: 3px solid var(--brown);
		outline-offset: 3px;
}

.tcard__photo {
		position: relative;
		z-index: 2;
		flex: 0 0 auto;
		width: 9.5rem;
		height: 9.5rem;
		margin-bottom: 1.15rem;
		border-radius: 50%;
		overflow: hidden;
		background: var(--cream);
		box-shadow: 0 0 0 5px rgba(254, 254, 242, 0.75);
}
.tcard__photo img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		transform: scale(1.02);
		transition: transform 420ms ease;
}
a.tcard:hover .tcard__photo img { transform: scale(1.08); }

.tcard__body {
		position: relative;
		z-index: 2;
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
}
.rays-room .tcard__name {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 1.5rem;
		line-height: 1.15;
		color: var(--dark);
}
.tcard__roles {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.9em;
		font-size: 0.66rem;
		font-weight: 600;
		letter-spacing: 0.09em;
		line-height: 1.45;
		text-transform: uppercase;
		color: var(--brown);
}
.tcard__bio {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 4.5em;
		font-size: 0.88rem;
		line-height: 1.5;
		color: var(--dark);
}
.tcard__more {
		margin-top: auto;
		padding-top: 0.55rem;
		font-size: 0.85rem;
		font-weight: 500;
		color: var(--brown);
		text-decoration: underline;
		text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
		.tcard,
	.tcard__photo img { transition: none; }
}

/* --------------------------------------------------------------------------
   4. Therapist profile
   -------------------------------------------------------------------------- */

/* Photo was being stretched to fill a fixed box — crop it instead. */
.rays-room .profile__media img {
		width: 100%;
		height: auto !important;
		aspect-ratio: 4 / 5;
		object-fit: cover !important;
		border-radius: var(--r-card);
}

.profile__video {
		margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
.profile__video video {
		display: block;
		width: 100%;
		max-height: 75vh;
		border-radius: var(--r-card);
		background: var(--dark);
}
.rays-room .profile__video figcaption {
		margin-top: 0.65rem;
		font-size: 0.85rem;
		color: var(--brown);
}