/* =========================================================================
   Sticky contact bar for phones  (.phb-mobile-bar)
   -------------------------------------------------------------------------
   Call / Email / WhatsApp pinned to the bottom of the screen. Hidden from
   768px up, where the header already shows the phone number and the Contact
   button.
   ========================================================================= */

.phb-mobile-bar {
	display: none;
}

@media (max-width: 767px) {

	.phb-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9000;          /* over the page, under the mobile menu overlay */
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		box-sizing: border-box;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -6px 24px rgba(4, 7, 42, .14);
	}

	.phb-mobile-bar .phb-bar-btn {
		box-sizing: border-box;   /* the theme sets content-box on links */
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 46px;       /* comfortable tap target */
		padding: 10px 8px;
		border-radius: 999px;
		font-family: "Instrument Sans", sans-serif;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		color: #fff;
		text-decoration: none;
		white-space: nowrap;
		transition: filter .15s ease;
	}

	.phb-mobile-bar .phb-bar-btn:hover,
	.phb-mobile-bar .phb-bar-btn:focus { color: #fff; filter: brightness(1.08); }
	.phb-mobile-bar .phb-bar-btn:active { filter: brightness(.94); }

	.phb-mobile-bar .phb-bar-ico {
		width: 17px;
		height: 17px;
		flex: 0 0 17px;
		fill: currentColor;
	}

	/* site palette, not the reference site's blue/black/green */
	.phb-bar-call  { background: #04072A; }
	.phb-bar-email { background: #05C9F5; color: #04072A !important; }
	.phb-bar-wa    { background: #25D366; }

	/* The bar covers the end of the page, so give the document room. The parent
	   theme sets body padding-bottom through a :not() selector, so this needs
	   the extra class to outweigh it rather than reaching for !important. */
	html body.phb-has-contact-bar { padding-bottom: 76px; }

	/* lift the theme's scroll-to-top button clear of the bar */
	.trx_addons_scroll_to_top,
	.sc_layouts_scroll_to_top { bottom: 86px !important; }

	/* narrow phones: drop the labels before the pills start wrapping */
	@media (max-width: 359px) {
		.phb-mobile-bar .phb-bar-btn span { display: none; }
		.phb-mobile-bar .phb-bar-ico { width: 19px; height: 19px; flex-basis: 19px; }
	}
}

/* the bar is a navigation aid, not page furniture */
@media print {
	.phb-mobile-bar { display: none !important; }
}