/**
 * VL 17 — header button fixes.
 *
 * Paired with class-vl17-hc-header-fixes.php, which supplies the text labels.
 *
 * Both buttons are brought onto the theme's own button spec, copied from
 * theme.css rather than invented: Poppins, 16px, weight 600, 4px radius, 48px
 * line box, brand red. That is what `.ct-header-layout6 .ct-header-button .btn`
 * already is, so the two buttons end up identical instead of merely similar.
 *
 * These rules deliberately mirror the selectors used in the theme's inline
 * custom CSS so they cancel it out at equal specificity, winning on source
 * order — hence the stylesheet declaring `alico-theme` as a dependency.
 */

/* -------------------------------------------------------------------------
   Payment button — the ePayPolicy "Pay Now" image.

   The image itself is restored by rewriting its host in PHP; see
   class-vl17-hc-header-fixes.php. Nothing here touches the artwork.

   The only thing this does is hide the text label. The theme needs the button
   to have *some* text, and the label the plugin supplies exists so screen
   readers announce something other than a full stop — but the image already
   says "Pay Now", so the text must not be drawn on top of it. `font-size: 0`
   hides it visually while leaving it in the accessibility tree.
   ---------------------------------------------------------------------- */

#ct-header-wrap.ct-header-layout6 .ct-header-button .btn {
	font-size: 0 !important;
	line-height: 48px !important;
}

/* -------------------------------------------------------------------------
   Certificate button

   Styled in the theme's custom CSS at font-size 10px in Arial, with a 15px top
   margin that knocked it off the navigation baseline.

   The class sits on the <li>, so the pill is drawn on the <span> inside the
   link instead. That leaves the <a> carrying the theme's own 84px line-height,
   which is what keeps it aligned with every other menu item, while the span
   centres itself inside that line box.
   ---------------------------------------------------------------------- */

.certificate-form-button {
	margin-top: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: inherit !important;
}

.certificate-form-button > a {
	padding: 0 !important;
	background: none !important;
}

.certificate-form-button > a > span {
	display: inline-block;
	vertical-align: middle;
	padding: 0 24px;
	background-color: #ec1c24;
	border-radius: 4px;
	color: #fff !important;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 48px;
	white-space: nowrap;
	transition: background-color 200ms linear;
}

.certificate-form-button > a:hover > span,
.certificate-form-button > a:focus > span {
	background-color: #c4141b;
}

/* The theme draws a caret marker before the active menu item; it makes no
   sense on a button. */
.certificate-form-button > a::before,
.certificate-form-button > a::after {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.certificate-form-button > a > span,
	#ct-header-wrap.ct-header-layout6 .ct-header-button .btn {
		transition: none !important;
	}
}