/* EHCNYC - Request Popup: brand-colored button + modal + form.
 * Brand tokens:
 *   Light: #8BCBDD   Dark: #092E39   White: #FFFFFF
 */

:root {
	--ehcrf-light: #8BCBDD;
	--ehcrf-btn: #489BB2; /* real button color, confirmed via DevTools - distinct from the paler --ehcrf-light used for smaller accents */
	--ehcrf-dark: #092E39;
	--ehcrf-white: #FFFFFF;
	--ehcrf-border: #D6E6EA;
	--ehcrf-muted: #4C6672;
	/* Matches the site's real button font (main.scss .ehc-btn), confirmed
	   via DevTools rather than guessed. Relies on the theme already loading
	   this font site-wide - falls back to sans-serif if it's ever missing. */
	--ehcrf-font: "Hanken Grotesk", sans-serif;
}

/* ---- Trigger button - covers both this plugin's own button (button="true")
   AND the real native WordPress Button block, via the .ehcnyc-open-request
   class added to it in the editor. */

.ehcnyc-request-trigger {
	margin: 1.5rem 0;
}

/* ---- Office Hours + button row, built by office-hours-placement.js ---- */

.ehcnyc-office-hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

/* Selectors below repeat the class (e.g. ".ehcnyc-open-request.ehcnyc-open-
   request") purely to boost specificity above the theme's own button hover
   styles, which were beating this on the hover text color specifically -
   the base (non-hover) color held via !important, but :hover is its own
   specificity fight and the theme was winning that one. */

a.ehcnyc-open-request.ehcnyc-open-request,
button.ehcnyc-open-request.ehcnyc-open-request,
.ehcnyc-request-btn.ehcnyc-request-btn {
	position: relative;
	overflow: hidden; /* clips the shine sweep below to the button's own rounded shape */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	appearance: none;
	border: none !important;
	border-radius: 10px !important; /* matches the "Get Started" button's rounding */
	background: var(--ehcrf-btn) !important;
	background-color: var(--ehcrf-btn) !important;
	color: var(--ehcrf-white) !important;
	padding: 1.1rem 2.6rem !important;
	min-width: 11rem;
	font-family: var(--ehcrf-font) !important;
	font-size: 1.15rem !important;
	line-height: 1.2;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(9, 46, 57, 0.18);
	transition: background-color 0.18s ease, transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.25s ease;
}

/* Diagonal light streak that sweeps across the button on hover. */
a.ehcnyc-open-request.ehcnyc-open-request::after,
button.ehcnyc-open-request.ehcnyc-open-request::after,
.ehcnyc-request-btn.ehcnyc-request-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient( 115deg, transparent, rgba(255, 255, 255, 0.4), transparent );
	transform: skewX(-20deg);
	transition: left 0.65s ease;
	pointer-events: none;
}

a.ehcnyc-open-request.ehcnyc-open-request:hover,
button.ehcnyc-open-request.ehcnyc-open-request:hover,
.ehcnyc-request-btn.ehcnyc-request-btn:hover {
	background: color-mix( in srgb, var(--ehcrf-btn) 82%, var(--ehcrf-dark) 18% ) !important;
	background-color: color-mix( in srgb, var(--ehcrf-btn) 82%, var(--ehcrf-dark) 18% ) !important;
	color: var(--ehcrf-white) !important;
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 26px rgba(9, 46, 57, 0.3);
}

a.ehcnyc-open-request.ehcnyc-open-request:hover::after,
button.ehcnyc-open-request.ehcnyc-open-request:hover::after,
.ehcnyc-request-btn.ehcnyc-request-btn:hover::after {
	left: 120%;
}

@media (prefers-reduced-motion: reduce) {
	a.ehcnyc-open-request.ehcnyc-open-request,
	button.ehcnyc-open-request.ehcnyc-open-request,
	.ehcnyc-request-btn.ehcnyc-request-btn,
	a.ehcnyc-open-request.ehcnyc-open-request::after,
	button.ehcnyc-open-request.ehcnyc-open-request::after,
	.ehcnyc-request-btn.ehcnyc-request-btn::after {
		transition: none !important;
	}
}

a.ehcnyc-open-request.ehcnyc-open-request:focus-visible,
button.ehcnyc-open-request.ehcnyc-open-request:focus-visible,
.ehcnyc-request-btn.ehcnyc-request-btn:focus-visible {
	outline: 3px solid var(--ehcrf-dark);
	outline-offset: 2px;
	color: var(--ehcrf-white) !important;
}

/* ---- Modal shell ---- */

.ehcnyc-request-modal[hidden] {
	display: none;
}

.ehcnyc-request-modal {
	font-family: var(--ehcrf-font);
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.ehcnyc-request-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 46, 57, 0.62);
}

.ehcnyc-request-modal__panel {
	position: relative;
	background: var(--ehcrf-white);
	width: 100%;
	max-width: 580px;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 16px;
	padding: 2.1rem 2rem 2rem;
	/* Inset shadow instead of border-top - respects the rounded corners
	   cleanly, where a single-sided border was getting clipped/squared off
	   at the top corners. */
	box-shadow: inset 0 6px 0 0 var(--ehcrf-light), 0 28px 70px rgba(9, 46, 57, 0.35);
}

.ehcnyc-request-modal__close {
	position: absolute;
	top: 0.65rem;
	right: 0.9rem;
	width: 2.1rem;
	height: 2.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ehcrf-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ehcnyc-request-modal__close:hover {
	background: var(--ehcrf-border);
	color: var(--ehcrf-dark);
}

body.ehcnyc-request-open {
	overflow: hidden;
}

/* ---- Modal header (title + subtitle) ---- */

.ehcnyc-request-modal__header {
	margin: 0 0 1.4rem;
}

.ehcnyc-request-modal__title {
	margin: 0.15rem 0 0.2rem;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ehcrf-dark);
}

.ehcnyc-request-modal__subtitle {
	margin: 0;
	font-size: 1rem; /* matches .gform_confirmation_message below, explicitly - not just inherited */
	color: var(--ehcrf-muted);
}

/* ---- Gravity Forms field restyle, scoped to inside this modal ---- */

/* Confirmation message text ("One of our team members will contact you
   as soon as possible!") - explicitly matched to the subtitle above so
   both are guaranteed the same size regardless of what either would
   otherwise inherit from the theme. */
.ehcnyc-request-modal__panel [class*="gform_confirmation_message"] {
	font-size: 1rem;
}

.ehcnyc-request-modal__panel .gform_wrapper .gfield {
	margin-bottom: 1.1rem !important;
}

.ehcnyc-request-modal__panel .gform_wrapper .gfield_label,
.ehcnyc-request-modal__panel .gform_wrapper legend.gfield_label {
	color: var(--ehcrf-dark);
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.4rem;
}

.ehcnyc-request-modal__panel .gform_wrapper .gfield_description {
	color: var(--ehcrf-muted);
	font-size: 0.85rem;
}

.ehcnyc-request-modal__panel .gform_wrapper input[type="text"],
.ehcnyc-request-modal__panel .gform_wrapper input[type="email"],
.ehcnyc-request-modal__panel .gform_wrapper input[type="tel"],
.ehcnyc-request-modal__panel .gform_wrapper select,
.ehcnyc-request-modal__panel .gform_wrapper textarea {
	width: 100%;
	border: 1.5px solid var(--ehcrf-border);
	border-radius: 9px;
	padding: 0.7rem 0.85rem;
	font-size: 0.95rem;
	color: var(--ehcrf-dark);
	background: var(--ehcrf-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ehcnyc-request-modal__panel .gform_wrapper input[type="text"]:focus,
.ehcnyc-request-modal__panel .gform_wrapper input[type="email"]:focus,
.ehcnyc-request-modal__panel .gform_wrapper input[type="tel"]:focus,
.ehcnyc-request-modal__panel .gform_wrapper select:focus,
.ehcnyc-request-modal__panel .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--ehcrf-light);
	box-shadow: 0 0 0 4px rgba(139, 203, 221, 0.35);
}

.ehcnyc-request-modal__panel .gform_wrapper .ginput_container_fileupload {
	border: 1.5px dashed var(--ehcrf-border);
	border-radius: 9px;
	padding: 0.75rem;
}

.ehcnyc-request-modal__panel .gform_wrapper .gform_footer,
.ehcnyc-request-modal__panel .gform_wrapper .gform_page_footer {
	margin-top: 0.4rem;
	padding: 0;
}

.ehcnyc-request-modal__panel .gform_wrapper .gform_button {
	appearance: none;
	border: none;
	border-radius: 10px;
	background: var(--ehcrf-dark);
	color: var(--ehcrf-white);
	padding: 0.85rem 1.8rem;
	font-size: 0.98rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.15s ease;
}
.ehcnyc-request-modal__panel .gform_wrapper .gform_button:hover {
	background: #0d3c4b;
	transform: translateY(-1px);
}

.ehcnyc-request-modal__panel .gform_wrapper .validation_error,
.ehcnyc-request-modal__panel .gform_wrapper .gfield_validation_message {
	color: #b3432b;
	font-size: 0.85rem;
}