/* Lumina Aesthetics — site-wide custom CSS. */

/* ---------------------------------------------------------------------
   Site-wide hover states for interactive elements.
   Divi's own default button/link hover relies on an icon slide-in
   animation; our buttons have that icon disabled, so hover was
   otherwise invisible. These rules give every clickable element on
   every page a visible hover response.
------------------------------------------------------------------------ */

/* CTA / form buttons (divi/button module -> .et_pb_button) */
.et_pb_button {
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.et_pb_button:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Text links (divi/link module -> a.et_pb_link) — covers card "Learn
   more" links, footer nav links, footer contact-info rows, etc. */
a.et_pb_link {
	transition: color 0.15s ease;
}
a.et_pb_link:hover {
	color: var(--gcid-accent) !important;
	text-decoration: underline;
}

/* Header nav menu (divi/menu module -> plain WP <a> tags, not .et_pb_link) */
.et-menu li a:hover {
	color: var(--gcid-accent) !important;
}

/* Mobile nav hamburger toggle */
.mobile_menu_bar:hover {
	opacity: 0.7;
}

/* Treatments Index — category filter pills (see custom.js for behavior). */
.tp-pill {
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-pill.tp-active {
	background: var(--gcid-accent) !important;
	border-color: var(--gcid-accent) !important;
}

.tp-pill.tp-active p {
	color: var(--gcid-text-inverse) !important;
	font-weight: 600 !important;
}

.tp-pill:not(.tp-active):hover {
	border-color: var(--gcid-accent) !important;
}
.tp-pill:not(.tp-active):hover p {
	color: var(--gcid-accent) !important;
}

/* Clickable cards (treatment cards, blog post cards) — whole-card lift.
   Only applied to cards that actually lead somewhere; purely
   informational cards (reviews, team, gallery) are left alone so hover
   doesn't imply clickability where none exists. */
.hover-card {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}