/**
 * JD Credit — WhatsApp button in the navigation menu.
 * Rendered by [jd_whatsapp_nav]; see inc/whatsapp-nav-button.php.
 *
 * The button sits at the end of the main menu, so it has to read as one of the
 * menu's own items rather than as a widget parked next to them: same row, same
 * optical centre line, its right edge flush with the last link's.
 */

:root {
	--jd-wa-green: #25d366;
	--jd-wa-green-dark: #1da851;
}

/* The wrapper menu-shortcodes.php puts around a shortcode in a menu label. The
   menu items are flex children, so the wrapper has to be one too or the button
   sits on the text baseline instead of the centre line. */
.jd-menu-shortcode {
	display: flex;
	align-items: center;
}

.elementor-nav-menu > li.menu-item-shortcode,
.menu-item-shortcode {
	display: flex;
	align-items: center;
}

/* Breathing room from the last link, so the button does not crowd it. */
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-shortcode {
	margin-inline-start: 10px;
}

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

.jd-wa-nav {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Elementor's nav-menu stylesheet sets padding and line-height on every <a>
   inside a menu at two classes plus a type selector, which outweighs the class
   above. Inside a menu the button's own box is therefore restated here rather
   than left to whichever stylesheet Elementor happens to print last. */
.elementor-nav-menu .jd-menu-shortcode a.jd-wa-nav,
.elementor-nav-menu .jd-menu-shortcode a.jd-wa-nav:hover,
.elementor-nav-menu .jd-menu-shortcode a.jd-wa-nav:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	line-height: 1.2;
}

.jd-wa-nav:hover,
.jd-wa-nav:focus-visible {
	background-color: rgba(37, 211, 102, 0.12);
	border-color: rgba(37, 211, 102, 0.45);
	text-decoration: none;
}

.jd-wa-nav:focus-visible {
	outline: 2px solid var(--jd-wa-green-dark);
	outline-offset: 2px;
}

.jd-wa-nav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--jd-wa-green);
	color: #fff;
}

.jd-wa-nav__icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

.jd-wa-nav:hover .jd-wa-nav__icon,
.jd-wa-nav:focus-visible .jd-wa-nav__icon {
	background-color: var(--jd-wa-green-dark);
}

.jd-wa-nav__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Three selectors deep so the colours and the line box beat the kit's global
   link styling rather than depending on stylesheet order. */
.jd-menu-shortcode .jd-wa-nav .jd-wa-nav__number {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #1565a8;
}

.jd-menu-shortcode .jd-wa-nav .jd-wa-nav__hours {
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.15;
	color: #7e7e7e;
}

/* ------------------------------------------------- burger dropdown menu -- */

/* Elementor renders the same menu a second time for the burger. There the
   items are stacked and full width, so the button follows suit. */
.jd-menu-shortcode--dropdown {
	width: 100%;
}

.elementor-nav-menu--dropdown .elementor-nav-menu > li.menu-item-shortcode {
	margin-inline-start: 0;
}

.elementor-nav-menu .jd-menu-shortcode--dropdown a.jd-wa-nav,
.elementor-nav-menu .jd-menu-shortcode--dropdown a.jd-wa-nav:hover,
.elementor-nav-menu .jd-menu-shortcode--dropdown a.jd-wa-nav:focus,
.jd-menu-shortcode--dropdown .jd-wa-nav {
	width: 100%;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 0;
	border-color: transparent;
}

.jd-menu-shortcode--dropdown .jd-wa-nav__icon {
	width: 32px;
	height: 32px;
}

.jd-menu-shortcode--dropdown .jd-wa-nav .jd-wa-nav__number {
	font-size: 14px;
}

.jd-menu-shortcode--dropdown .jd-wa-nav .jd-wa-nav__hours {
	font-size: 11px;
}

/* --------------------------------------------------- narrow desktop fit -- */

/* Between the burger breakpoint (1024px) and a roomy desktop the five menu
   links leave no room for a 170px button, so it falls back to the mark alone.
   The number stays reachable through the anchor's aria-label and the title
   attribute, and returns in full in the burger menu below 1025px. */
/* Adding the Reviews item under About Us gave that link a dropdown arrow,
   which pushed the row over the column width in the band just above the
   burger breakpoint. Elementor's own padding control has no setting for this
   band — its tablet value applies at 1024px and below, where the menu is
   already a burger — so the trim is done here. */
@media (min-width: 1025px) and (max-width: 1279px) {
	/* Elementor writes the menu item padding at five classes deep
	   (.elementor-15797 .elementor-element.elementor-element-cb60dad
	   .elementor-nav-menu--main .elementor-item), so this has to match that
	   weight to be heard at all. It applies only in the band above the burger
	   breakpoint, which Elementor's own responsive controls cannot reach. */
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li.menu-item > a.elementor-item {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (min-width: 1025px) and (max-width: 1210px) {
	.elementor-nav-menu .jd-menu-shortcode--main a.jd-wa-nav {
		gap: 0;
		padding: 4px;
	}

	.jd-menu-shortcode--main .jd-wa-nav__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}