/*
Theme Name:        HerMD
Theme URI:         https://quiknexa.com
Author:            HerCreate
Author URI:        https://hercreate.com
Description:       A premium Divi child theme for obstetrics and gynecology practices. Femora pairs an editorial serif and modern sans in a fluid type scale with a warm rose and aubergine palette, built for patient trust — clear service pages, appointment and contact flows, health tools, and a journal. Fully responsive, accessible, and HIPAA-conscious.
Version:           1.0.0
Requires at least: 6.2
Requires PHP:      7.4
Tested up to:      6.9
Template:          Divi
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       hermd
Tags:              divi, child-theme, demo-content

*/

/* ==========================================================================
   Child Theme Stylesheet
   --------------------------------------------------------------------------
   Table of Contents

   01. Typography
   02. Header & Navigation
       02.1  Desktop Menu Underline
       02.2  Desktop Submenu — left-border animation
       02.3  Mobile Full-Screen Menu
       02.4  Mobile Submenu Collapse
   03. Trust Badge
   04. Eyebrow Badge
   05. Image Hover Effect
   06. Video Button
   07. Floating Animations
   08. Reviews Carousel
   09. Process Timeline
   10. Blog
   11. Contact Form
   12. 404 Error Page
   ========================================================================== */


/* ==========================================================================
   01. Typography
   ========================================================================== */
.et-l--header { position: relative; z-index: 99; }

h1,
h2,
h3,
h4,
h5,
h6 {
	padding-bottom: 0 !important;
}

h1 span,
h2 span,
h3 span,
h4 span {
	color: var(--gcid-primary-color);
}


/* ==========================================================================
   02. Header & Navigation
   ========================================================================== */

.hmd-header .nav li ul {
	border-top: 0;
}

.hmd-header .et_pb_menu .et-menu-nav > ul ul {
	padding: 0;
}

.hmd-header .et_pb_menu ul li a {
	width: 100% !important;
}

.hmd-header .nav li li {
	padding: 0;
	width: -webkit-fill-available !important;
}

/* Keep the close button hidden by default
   (fixes it showing in the footer on desktop). */
.hmd-menu-close {
	display: none;
}


/* 02.1  Desktop Menu Underline
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {

	.hmd-header .et-menu > li > a {
		position: relative;
	}

	.hmd-header .et_pb_menu__menu > nav > ul > li > a::before {
		content: "" !important;
		position: absolute !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important; /* sits just under the text */
		left: 0 !important;
		width: 0 !important;
		height: 2px !important;
		margin: 0 auto !important;
		background: currentColor !important;
		transform: none !important; /* cancels Divi's translateY(-50%) */
		transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}

	.hmd-header .et_pb_menu__menu > nav > ul > li > a:hover::before,
	.hmd-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a::before,
	.hmd-header .et_pb_menu__menu > nav > ul > li.current_page_item > a::before,
	.hmd-header .et_pb_menu__menu > nav > ul > li.current-cat > a::before {
		width: 100% !important;
	}
}


/* 02.2  Desktop Submenu — left-border animation
   -------------------------------------------------------------------------- */

.hmd-header .nav li ul.sub-menu li > a {
	position: relative;
	display: block;
	padding-left: 24px;
	transition: all 0.3s ease;
}

.hmd-header .nav li ul.sub-menu li > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 2px;
	height: 0;
	background: #000;
	transform: translateY(-50%);
	transition: height 0.3s ease;
}

.hmd-header .nav li ul.sub-menu li:hover > a::before,
.hmd-header .nav li ul.sub-menu li.current-menu-item > a::before {
	height: 70%;
}


/* 02.3  Mobile Full-Screen Menu
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	/* Full-screen panel — hidden by default, kept in the DOM for animation. */
	.hmd-header .et_pb_menu .et_mobile_menu {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		gap: 0.2rem;
		position: fixed !important;
		top: 0 !important;
		height: 100vh !important;
		padding: 80px 40px;
		background: #f7f4ef !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow-y: auto;
		z-index: 9999999;
		opacity: 0;
		visibility: hidden;
		transform: scale(1.04);
		transition:
			opacity 0.5s ease,
			visibility 0.5s ease,
			transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* Open state — smooth fade + gentle zoom-in. */
	.hmd-header .et_pb_menu .mobile_nav.opened .et_mobile_menu {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}

	/* Menu links — large, centered, serif. */
	.hmd-header .et_pb_menu .et_mobile_menu li a {
		font-size: 1.5rem !important;
		font-weight: 300 !important;
		text-align: center;
		background: transparent !important;
	}

	.hmd-header .et_pb_menu .et_mobile_menu li a:hover {
		color: #b5988e !important;
	}

	/* Close (×) button — fixed top-right, hidden until the menu opens. */
	.hmd-menu-close {
		display: block;
		position: fixed;
		top: 1rem;
		right: 1.4rem;
		z-index: 100001;
		width: 48px;
		height: 48px;
		padding: 0;
		font-size: 2.4rem;
		line-height: 48px;
		text-align: center;
		color: #2a2521;
		background: none;
		border: 0;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: rotate(-90deg);
		transition:
			opacity 0.5s ease 0.15s,
			visibility 0.5s ease,
			transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
	}

	body.hmd-menu-open .hmd-menu-close {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: rotate(0deg);
	}

	/* Respect reduced-motion. */
	@media (prefers-reduced-motion: reduce) {

		.hmd-header .et_pb_menu .et_mobile_menu,
		.hmd-menu-close {
			transform: none !important;
			transition: none !important;
		}
	}
}


/* 02.4  Mobile Submenu Collapse
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	/* Parent item. */
	.hmd-header .et_mobile_menu .menu-item-has-children {
		position: relative;
	}

	/* + / − toggle. */
	.hmd-header .et_mobile_menu .ml-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 24px;
		height: 24px;
		margin: 0;
		padding: 0;
		font-size: 24px;
		font-weight: 400;
		line-height: 1;
		color: #2a2521;
		cursor: pointer;
		user-select: none;
		transition: transform 0.25s ease;
	}

	/* Rotate when opened. */
	.hmd-header .et_mobile_menu .menu-item-has-children.open .ml-submenu-toggle {
		transform: rotate(180deg);
	}

	/* Hide submenu. */
	.hmd-header .et_mobile_menu .sub-menu {
		display: none !important;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}

	/* Show submenu. */
	.hmd-header .et_mobile_menu .menu-item-has-children.open > .sub-menu {
		display: block !important;
	}

	/* Submenu items. */
	.hmd-header .et_mobile_menu .sub-menu li {
		margin: 0;
		padding: 0;
	}

	.hmd-header .et_mobile_menu .sub-menu li a {
		display: block;
		padding: 10px 0 !important;
		font-size: 1.2rem !important;
		text-align: center;
	}
}


/* ==========================================================================
   03. Trust Badge
   ========================================================================== */

.trust-badge .et-pb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 5px;
}


/* ==========================================================================
   04. Eyebrow Badge
   ========================================================================== */

.eyebrow .et_pb_text_inner p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Status dot. */
body #page-container .eyebrow .et_pb_text_inner p::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5b7f55;
	box-shadow: 0 0 0 4px #eef7f0;
}


/* ==========================================================================
   05. Image Hover Effect
   ========================================================================== */

.hmd-img-effect .et_pb_image_wrap,
.et_pb_post .et_pb_image_container {
	position: relative;
	overflow: hidden;
}

/* Image. */
.hmd-img-effect .et_pb_image_wrap img,
.et_pb_post .et_pb_image_container img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 0.6s ease;
}

/* Zoom. */
.hmd-img-effect:hover .et_pb_image_wrap img,
.et_pb_post:hover .et_pb_image_container img {
	transform: scale(1.15);
}

/* Shine. */
.hmd-img-effect .et_pb_image_wrap::after,
.et_pb_post .et_pb_image_container::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) rotate(-45deg);
	pointer-events: none;
}

/* Shine animation. */
.hmd-img-effect .et_pb_image_wrap:hover::after,
.et_pb_post:hover .et_pb_image_container::after {
	height: 250%;
	background-color: transparent;
	transition: all 600ms linear !important;
}


/* ==========================================================================
   06. Video Button
   ========================================================================== */

:root {
	--ripple-color: 255, 255, 255;
}

.hmd-vid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	animation: ripple 1s linear infinite;
}

@keyframes ripple {

	0% {
		box-shadow:
			0 0 0 0 rgba(var(--ripple-color), 0.1),
			0 0 0 5px rgba(var(--ripple-color), 0.2),
			0 0 0 20px rgba(var(--ripple-color), 0.2),
			0 0 0 35px rgba(var(--ripple-color), 0.2);
	}

	100% {
		box-shadow:
			0 0 0 5px rgba(var(--ripple-color), 0.1),
			0 0 0 20px rgba(var(--ripple-color), 0.2),
			0 0 0 35px rgba(var(--ripple-color), 0.2),
			0 0 0 45px rgba(var(--ripple-color), 0);
	}
}


/* ==========================================================================
   07. Floating Animations
   ========================================================================== */

.hmd-left-animate {
	animation: left-animate 5s infinite linear alternate;
}

@keyframes left-animate {

	50% {
		left: 40px;
	}
}

.hmd-right-animate {
	animation: right-animate 6s infinite linear alternate;
}

@keyframes right-animate {

	50% {
		right: 40px;
	}
}


/* ==========================================================================
   08. Reviews Carousel
   ========================================================================== */

.hmd-review .et_pb_group_carousel_dot {
	width: 30px;
	height: 8px;
	border-radius: 20px;
	background: #333;
}


/* ==========================================================================
   09. Process Timeline
   ========================================================================== */

.hmd-process.et_pb_timeline .et_pb_timeline_item {
	width: auto !important;
}

.hmd-process .et_pb_timeline_marker {
	margin-left: -8px;
}


/* ==========================================================================
   10. Blog
   ========================================================================== */

.hmd-blog .et_pb_post,
.hmd-blog .et_pb_blog_grid .et_pb_post {
	padding: 0;
	background: transparent;
	border: 0;
}

.hmd-blog .et_pb_image_container {
	margin: 0;
}

.hmd-blog .entry-title {
	display: -webkit-box;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Read more — base reset. */
.hmd-blog .et_pb_post a.more-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 0;
	color: var(--gcid-primary-color);
	text-decoration: none;
	transition: all 0.3s ease;
}

.hmd-blog .et_pb_post a.more-link::before {
	content: "Read More";
	font-size: 16px;
	letter-spacing: 0.3px;
	text-transform: capitalize;
	color: var(--gcid-primary-color);
	transition: color 0.3s ease;
}

/* Default icon. */
.hmd-blog .et_pb_post a.more-link::after {
	content: "&";
	font-family: "ETmodules";
	font-size: 16px;
	color: var(--gcid-primary-color);
	transition: all 0.3s ease;
}

/* Hover effect. */
.hmd-blog .et_pb_post:hover a.more-link::before {
	color: var(--gcid-secondary-color);
}

/* Icon change on hover. */
.hmd-blog .et_pb_post:hover a.more-link::after {
	content: "\24";
	color: var(--gcid-secondary-color);
	transform: translateX(4px);
}


/* ==========================================================================
   11. Contact Form
   ========================================================================== */

.hmd-form .et-pb-contact-message ul {
	display: none;
}


/* ==========================================================================
   12. 404 Error Page
   ========================================================================== */

/* Total cell size — fluid 80px → 380px, anchored at 360px viewport. */
.fnf-cell {
	position: relative;
	aspect-ratio: 1;
	width: clamp(5rem, calc(0.2778 * (100vw - 360px) + 5rem), 23.75rem);
}

.fnf-swimmer {
	offset-rotate: auto;
	offset-distance: 0%;
}

@keyframes fnfPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.04);
	}
}

@keyframes fnfCorona {

	to {
		transform: rotate(360deg);
	}
}

@keyframes fnfLash {

	0%,
	100% {
		transform: rotate(-7deg);
	}

	50% {
		transform: rotate(7deg);
	}
}

@keyframes fnfPathA {

	0% {
		offset-distance: 0%;
		opacity: 0;
	}

	8% {
		opacity: 1;
	}

	82% {
		opacity: 1;
	}

	100% {
		offset-distance: 100%;
		opacity: 0;
	}
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {

	.fnf-anim {
		animation: none !important;
	}

	.fnf-swimmer {
		offset-distance: 22% !important;
		animation: none !important;
		opacity: 1 !important;
	}
}