/* =============================================================================
   High Tech Health — Promo bar
   -----------------------------------------------------------------------------
   Loaded on every page while the bar is showing (and only then). See
   inc/promo-bar.php and PROMO-BAR.md.

   "Classic" reproduces the old WPCode bar exactly: #1a1a1a, white, Open Sans
   15px/1.4, 12px 20px padding = 45px tall. Buttons are sized so the bar stays
   45px with them in it (negative margin absorbs the button's own padding).

   No !important except the line that hides the old bar: the #hth-promo id
   already outranks Jevelin's element and class selectors.
   ========================================================================== */

/* The old WPCode bar. Whenever this file loads, the old one is hidden, so the
   site can never show two bars — in Preview this only affects admins. */
#ht-promo-bar { display: none !important; }


/* ---- Presets ------------------------------------------------------------ */
#hth-promo {
	--pb-bg: #1a1a1a;  --pb-fg: #fff;     --pb-btn-bg: #fff;     --pb-btn-fg: #1a1a1a;
}
#hth-promo.hth-promo--ink {
	--pb-bg: #23303C;  --pb-fg: #fff;     --pb-btn-bg: #6FB9E0;  --pb-btn-fg: #23303C;
}
#hth-promo.hth-promo--sand {
	--pb-bg: #EDE7DD;  --pb-fg: #23303C;  --pb-btn-bg: #23303C;  --pb-btn-fg: #fff;
}
#hth-promo.hth-promo--azure {
	--pb-bg: #1F6C97;  --pb-fg: #fff;     --pb-btn-bg: #fff;     --pb-btn-fg: #1F6C97;
}


/* ---- Bar ---------------------------------------------------------------- */
#hth-promo {
	position: relative;
	z-index: 999999;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 20px;
	background: var(--pb-bg);
	color: var(--pb-fg);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
}
#hth-promo[hidden] { display: none; }
#hth-promo * { box-sizing: border-box; }

#hth-promo strong,
#hth-promo b { font-weight: 700; color: inherit; }

#hth-promo a { color: inherit; }
#hth-promo .hth-promo__text a { text-decoration: underline; text-underline-offset: 2px; }
#hth-promo a.hth-promo__link { text-decoration: none; }
#hth-promo a.hth-promo__link:hover .hth-promo__text,
#hth-promo a.hth-promo__link:focus-visible .hth-promo__text { text-decoration: underline; text-underline-offset: 2px; }

#hth-promo .hth-promo__text--mobile { display: none; }


/* ---- Buttons ------------------------------------------------------------ */
#hth-promo .hth-promo__ctas {
	display: inline-flex;
	gap: 8px;
	margin-left: 14px;
	vertical-align: top;
}
#hth-promo .hth-promo__btn {
	display: inline-block;
	margin: -3px 0;               /* 27px tall button, 21px of layout */
	padding: 2px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 21px;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s ease;
}
#hth-promo .hth-promo__btn:hover { opacity: .85; }
#hth-promo .hth-promo__btn--solid   { background: var(--pb-btn-bg); color: var(--pb-btn-fg); border-color: var(--pb-btn-bg); }
#hth-promo .hth-promo__btn--outline { background: transparent; color: inherit; border-color: currentColor; }
#hth-promo .hth-promo__btn--link    { padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 2px; }

#hth-promo a:focus-visible,
#hth-promo button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* ---- Dismiss ------------------------------------------------------------ */
#hth-promo.hth-promo--dismissible { padding-left: 44px; padding-right: 44px; }
#hth-promo .hth-promo__close {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 32px;
	height: 32px;
	min-width: 0;
	margin: -16px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: inherit;
	font: 400 22px/32px Arial, sans-serif;
	text-transform: none;
	opacity: .7;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
#hth-promo .hth-promo__close:hover { opacity: 1; }


/* ---- Phones ------------------------------------------------------------- */
@media (max-width: 767px) {
	#hth-promo .hth-promo__text--desktop { display: none; }
	#hth-promo .hth-promo__text--mobile  { display: inline; }
	/* Buttons get their own centred row: wrapping inline, the desktop
	   negative margin would let them overlap the text line above. */
	#hth-promo .hth-promo__ctas { display: flex; justify-content: center; margin: 8px 0 0; }
	#hth-promo .hth-promo__btn  { margin: 0; }
	#hth-promo .hth-promo__btn[data-hth-promo-cta="2"] { display: none; }
	#hth-promo.hth-promo--m-nobtn .hth-promo__ctas { display: none; }
}