/* EHCNYC - Homepage Tweaks: site-wide "Get Started" CTA redesign.
   Split out of homepage-tweaks.css (which only loads on the front page /
   Weight Loss Programs / Weight Loss Meds, since the rest of that file does
   homepage-specific DOM restructuring that would break other pages) into
   its own unconditionally-enqueued stylesheet, so the header nav button and
   the mobile sticky button - both present on every page - get this look
   everywhere, not just those 3 pages. */

/* "Get Started" CTA redesign - matches the floating Get Started button's
   look (same brand gradient, bold, metallic-silver border), overriding
   ehcnyc-get-started-btn-color's site-wide silver/green recolor for these
   specific buttons. Targeted by the theme's own real button shape
   (.ehc-cta[href="#get-started"]) rather than that plugin's injected
   marker class, so this applies immediately at first paint - no JS-timing
   dependency, and keeps working even if that plugin is ever deactivated.
   Border-radius is deliberately untouched - stays the theme's own .ehc-btn
   value. Font-family isn't set either - these buttons already inherit the
   page's default font same as the floating button does, nothing to match.

   A flat border-color can't give a metallic look - a real border only ever
   takes one solid color. Two background layers instead: the brand gradient
   clipped to the padding-box (the button's interior), and a light-dark-
   light silver gradient clipped to the border-box underneath it - the gap
   between those two clips (the actual border ring) is where the silver
   gradient shows through, which is what reads as a metallic bevel. This
   respects border-radius properly, unlike a border-image gradient (which
   forces square corners regardless of border-radius). border-color itself
   is set to transparent since the real color now comes from that second
   layer, not the border property.

   The theme's own .ehc-cta::after is an opaque solid-#489BB2 layer that
   normally hides its ::before rainbow-glow pseudo-element until hover -
   crucially, a stacking-context descendant (even at its negative z-index)
   always paints ABOVE the element's own background, so this ::after sits
   ON TOP of the gradient above, covering it with flat teal. Only the
   border-box background-clip layer escapes it, since ::after's box is
   sized to the padding box, not the border - which is exactly why the
   metallic border showed correctly while the fill didn't. Recoloring
   ::after to the same gradient (rather than removing it) keeps its
   original job of blocking that rainbow glow at rest. */
.ehc-btn.ehc-cta[href="#get-started"]{
	background-image:
		linear-gradient(135deg,#5AACC0,#489BB2 55%,#0B3846),
		linear-gradient(135deg,#F5F5F5 0%,#C0C0C0 25%,#808080 50%,#C0C0C0 75%,#F5F5F5 100%) !important;
	background-origin:border-box !important;
	background-clip:padding-box, border-box !important;
	border:2px solid transparent !important;
	color:#fff !important;
	font-weight:700 !important;
}
.ehc-btn.ehc-cta[href="#get-started"]::after{
	background:linear-gradient(135deg,#5AACC0,#489BB2 55%,#0B3846) !important;
}
.ehc-btn.ehc-cta[href="#get-started"] *{
	color:inherit !important;
}