/*
 * Gentle motion for things that appear: header dropdowns, the burger menu's lists and pop-ups.
 *
 * One easing curve, short durations, small distances: things settle into place rather than
 * snap or bounce. Final positions and looks are unchanged; this only adds the way in.
 * Everything is switched off for visitors who ask their device for reduced motion.
 */

:root {
	--kah-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Header dropdowns (desktop) ---------- */

.header-right .sub-menu {
	transform: translateY(10px);
	transition: opacity 0.45s var(--kah-ease), transform 0.45s var(--kah-ease), visibility 0s linear 0.45s;
}

/* The list beside "Small Animal Services" slides out sideways instead. */
.header-right .sub-menu .sub-menu {
	transform: translateX(-12px);
}

.header-right li.menu-item-has-children:hover > .sub-menu,
.header-right li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.45s var(--kah-ease), transform 0.45s var(--kah-ease), visibility 0s linear 0s;
}

/*
 * Never taller than the screen. On short laptop screens the long list is a little tighter,
 * and if it still does not fit it scrolls inside itself rather than running off the page.
 */
.header-right .sub-menu .sub-menu {
	max-height: calc(100vh - 240px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #b1a06e transparent;
}

@media (max-height: 860px) {
	.header-right .sub-menu .sub-menu li {
		padding-block: 8px;
	}
}

/*
 * On short screens both lists beside the dropdown (Small Animal Services and Equine) start at the
 * top of the dropdown instead of level with their own row, so the long one fits on screen. Both
 * still open to the right.
 */
@media (max-height: 780px) and (min-width: 1000px) {
	.header .header-col .header-right .sub-menu > li.menu-item-has-children {
		position: static;
	}

	.header-right .sub-menu .sub-menu {
		top: 0;
		max-height: calc(100vh - 150px);
	}

	.header-right .sub-menu .sub-menu li {
		padding-block: 6px;
	}
}

/* ---------- Burger menu lists ---------- */

/* Long lists (Small Animal Services) need room to open fully; the page scrolls if the screen is short. */
.header .header-menu .menu-inner li.menu-item-has-children.sub-open > .sub-menu {
	max-height: 1400px !important;
}

.header .header-menu .menu-inner li.menu-item-has-children > .sub-menu {
	transition: max-height 0.6s var(--kah-ease), opacity 0.45s ease;
}

/* ---------- Pop-ups ---------- */

@keyframes kah-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes kah-rise-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Our Team biography pop-up: the dimmed background fades in, the card rises into place. */
.smallAnimalBioModal {
	animation: kah-fade-in 0.35s ease both;
}

.smallAnimalBioModal .modalContent {
	animation: kah-rise-in 0.55s var(--kah-ease) 0.05s both;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.header-right .sub-menu,
	.header-right li.menu-item-has-children:hover > .sub-menu,
	.header-right li.menu-item-has-children:focus-within > .sub-menu {
		transform: none;
		transition: none;
	}

	.header .header-menu .menu-inner li.menu-item-has-children > .sub-menu {
		transition: none;
	}

	.smallAnimalBioModal,
	.smallAnimalBioModal .modalContent {
		animation: none;
	}
}