/* HD Header CTA — two-sided Support | Contact pill with its own dropdowns. Bump HDCTA_VER on change. */
.hdcta {
	--teal: #127f86; --aqua: #3ecfb2; --coral: #ff6b4a; --navy: #001b44; --slate: #5a6172; --line: #e3e8ef; --mist: #f5f7fa;
	/* Support blues, from the HD Support site (navy #001b44, deep #0b3a6e, sky #b3e0f2) */
	--deep: #0b3a6e; --blue: #1d5fa3; --bright: #2f7fc8; --sky: #b3e0f2;
	--e: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
	position: relative; display: inline-flex; align-items: stretch; height: 46px; z-index: 30;
	font-family: var(--awb-typography3-font-family, "Lexend"), "Lexend", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased; text-align: left;
}
.hdcta *, .hdcta *::before, .hdcta *::after { box-sizing: border-box; }
.hdcta-i { width: 18px; height: 18px; flex: none; display: block; }
.hdcta__half { display: flex; }
/* Halves stay static so both panels hang from .hdcta itself. */
.hdcta__half--sup .hdcta__btn { z-index: 2; }
.hdcta__half--con .hdcta__btn { z-index: 1; }
/* The white seam along the support side's slanted edge (16px across 46px down). */
.hdcta__half--sup .hdcta__btn::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; background: linear-gradient(to bottom right, transparent calc(50% - 1.6px), rgba(255, 255, 255, .92) calc(50% - 1.2px), rgba(255, 255, 255, .92) calc(50% + .4px), transparent calc(50% + .6px)); pointer-events: none; }

.hdcta__btn { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 46px; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; text-decoration: none !important; white-space: nowrap; overflow: hidden; outline: none; transition: padding .5s var(--spring), background-position .8s var(--e), filter .35s, box-shadow .4s, color .3s; }
.hdcta__lbl { position: relative; z-index: 1; display: inline-block; max-width: 120px; overflow: hidden; transition: max-width .5s var(--spring), opacity .3s, margin .5s var(--spring); }
.hdcta__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; transition: transform .6s var(--spring), background-color .3s; }

/* Support: the help desk's blues, slanted right edge. The paint and the slant live on ::before, which is
   also the only part that takes the pointer, so the button can glow (filter) without the clip cutting it off
   and the corner under the slant still belongs to the Contact side. */
.hdcta__half--sup .hdcta__btn { padding: 0 30px 0 16px; margin-right: -16px; color: #fff !important; background: none; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 0 rgba(47, 127, 200, 0)); transition: padding .5s var(--spring), filter .4s var(--e), color .3s; }
.hdcta__half--sup .hdcta__btn::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: auto; border-radius: 999px 0 0 999px; background: linear-gradient(110deg, var(--deep) 0%, #144b86 28%, var(--blue) 50%, var(--bright) 76%, #5aa6dc 100%); background-size: 200% 100%; background-position: 0% 50%; box-shadow: inset 0 0 0 1px rgba(179, 224, 242, .28); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); transition: background-position .8s var(--e); }
.hdcta__half--sup .hdcta__btn > * { pointer-events: auto; }
.hdcta__half--sup .hdcta__ico { background: rgba(179, 224, 242, .18); }
.hdcta__live { position: absolute; left: 34px; top: 9px; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #9aa3b2; box-shadow: 0 0 0 2px var(--deep); display: none; }
.hdcta.is-up .hdcta__live, .hdcta.is-degraded .hdcta__live, .hdcta.is-down .hdcta__live { display: block; }
.hdcta.is-up .hdcta__live { background: #4ade80; }
.hdcta.is-up .hdcta__live::after, .hdcta.is-down .hdcta__live::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #4ade80; animation: hdcta-ping 2.4s var(--e) infinite; }
.hdcta.is-degraded .hdcta__live { background: #fbbf24; animation: hdcta-breathe 2.6s ease-in-out infinite; }
.hdcta.is-down .hdcta__live { background: #f43f5e; }
.hdcta.is-down .hdcta__live::after { border-color: #f43f5e; animation-duration: 1.3s; }
@keyframes hdcta-ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3); opacity: 0; } }
@keyframes hdcta-breathe { 0%, 100% { box-shadow: 0 0 0 2px var(--deep), 0 0 0 2px rgba(251, 191, 36, 0); } 50% { box-shadow: 0 0 0 2px var(--deep), 0 0 0 6px rgba(251, 191, 36, .35); } }

/* Contact: coral, a glint passes now and then */
.hdcta__half--con .hdcta__btn { padding: 0 20px 0 30px; border-radius: 0 999px 999px 0; color: var(--navy) !important; background: linear-gradient(100deg, var(--coral) 0%, #ff8a5c 100%); }
.hdcta__half--con .hdcta__ico { background: rgba(0, 27, 68, .1); }
.hdcta__half--con .hdcta__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: hdcta-glint 9s ease-in-out 3s infinite; }
@keyframes hdcta-glint { 0%, 86% { left: -40%; } 100% { left: 130%; } }

/* Hover / open: the side you're on widens and comes alive; the other side steps back */
.hdcta__half--sup.is-open .hdcta__btn, .hdcta__half--sup .hdcta__btn:hover, .hdcta__half--sup .hdcta__btn:focus-visible { padding: 0 38px 0 20px; filter: drop-shadow(0 0 1.5px rgba(179, 224, 242, .95)) drop-shadow(0 0 14px rgba(47, 127, 200, .85)); }
.hdcta__half--sup.is-open .hdcta__btn::before, .hdcta__half--sup .hdcta__btn:hover::before, .hdcta__half--sup .hdcta__btn:focus-visible::before { background-position: 100% 50%; }
.hdcta__half--sup.is-open .hdcta__ico, .hdcta__half--sup .hdcta__btn:hover .hdcta__ico { transform: rotate(180deg) scale(1.08); background: rgba(179, 224, 242, .3); }
.hdcta__half--con.is-open .hdcta__btn, .hdcta__half--con .hdcta__btn:hover, .hdcta__half--con .hdcta__btn:focus-visible { padding: 0 26px 0 36px; box-shadow: 0 0 14px rgba(255, 107, 74, .8), 0 0 34px rgba(255, 107, 74, .45); }
.hdcta__half--con.is-open .hdcta__ico, .hdcta__half--con .hdcta__btn:hover .hdcta__ico { animation: hdcta-ring .9s ease-in-out; background: rgba(0, 27, 68, .16); }
@keyframes hdcta-ring { 0%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-16deg) scale(1.08); } 20%, 40%, 60% { transform: rotate(16deg) scale(1.08); } 70% { transform: rotate(0) scale(1.04); } }
.hdcta:has(.hdcta__half--sup.is-open) .hdcta__half--con .hdcta__btn, .hdcta:has(.hdcta__half--sup .hdcta__btn:hover) .hdcta__half--con .hdcta__btn { filter: saturate(.75) brightness(.93); }
.hdcta:has(.hdcta__half--con.is-open) .hdcta__half--sup .hdcta__btn, .hdcta:has(.hdcta__half--con .hdcta__btn:hover) .hdcta__half--sup .hdcta__btn { filter: saturate(.75) brightness(.9); }
.hdcta__btn:focus-visible .hdcta__lbl { text-decoration: underline; text-underline-offset: 4px; }

/* Panels: both hang from the pill's right edge; the notch points at the side that opened it */
.hdcta__panel { position: absolute; top: calc(100% + 14px); right: 0; width: 344px; padding: 18px; border-radius: 18px; background: #fff; color: var(--navy); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 26px 2px rgba(255, 255, 255, .3), 0 30px 60px -20px rgba(0, 27, 68, .45); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); transform-origin: calc(100% - var(--nx, 60px)) 0; transition: opacity .25s ease, transform .4s var(--spring), visibility 0s linear .4s; text-transform: none; letter-spacing: normal; font-weight: 400; z-index: 40; }
.hdcta__panel::before { content: ""; position: absolute; top: -7px; right: calc(var(--nx, 60px) - 8px); width: 16px; height: 16px; border-radius: 3px; background: #fff; transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(0, 27, 68, .06); }
.hdcta__panel::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover bridge */
.hdcta__half.is-open .hdcta__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .45s var(--spring), visibility 0s; }
.hdcta__half--sup .hdcta__panel { --tint: var(--blue); --band: linear-gradient(90deg, var(--deep), var(--bright) 60%, var(--sky)); }
.hdcta__half--con .hdcta__panel { --tint: var(--coral); --band: linear-gradient(90deg, var(--coral), #ff8a5c); }
/* The colored band follows the card's rounded top corners and runs a little way down each side before
   fading out: a 4px border ring painted with the band gradient, masked to the ring and to a downward fade. */
.hdcta__band { position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 1; border: 4px solid transparent; border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--band) border-box; pointer-events: none;
	-webkit-mask: linear-gradient(#000 30%, transparent), linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: source-in, xor;
	mask: linear-gradient(#000 30%, transparent), linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
	mask-composite: intersect, exclude; }

.hdcta__head { margin-bottom: 12px; }
.hdcta p.hdcta__eyebrow { margin: 0 0 3px !important; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tint) !important; line-height: 1.4; }
.hdcta .hdcta__status { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px; line-height: 1.4; color: var(--slate) !important; }
.hdcta__status .hdcta-i { width: 15px; height: 15px; color: var(--coral); }
.hdcta__half--sup .hdcta__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9aa3b2; box-shadow: 0 0 0 3px rgba(154, 163, 178, .2); }
.hdcta.is-nostatus .hdcta__half--sup .hdcta__status::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(29, 95, 163, .16); }
.hdcta.is-up .hdcta__half--sup .hdcta__status::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.hdcta.is-degraded .hdcta__half--sup .hdcta__status::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.hdcta.is-down .hdcta__half--sup .hdcta__status::before { background: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, .18); }
.hdcta a.hdcta__status--link { margin: 0; text-decoration: none !important; }
.hdcta__status--link > span { flex: 1; color: var(--navy); font-weight: 500; }
.hdcta__status--link small { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--tint); }
.hdcta__status--link small .hdcta-i { width: 13px; height: 13px; color: var(--tint); transition: transform .3s var(--spring); }
.hdcta__status--link:hover small .hdcta-i { transform: translateX(3px); }

.hdcta__search { position: relative; display: flex; align-items: center; margin: 0 0 10px !important; }
.hdcta__search > .hdcta-i { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--slate); pointer-events: none; }
.hdcta .hdcta__search input { width: 100%; height: 42px !important; margin: 0 !important; padding: 0 14px 0 38px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--mist) !important; color: var(--navy) !important; font: inherit; font-size: 14px !important; box-shadow: none !important; transition: border-color .2s, box-shadow .25s, background-color .2s; }
.hdcta .hdcta__search input:focus { outline: none; border-color: var(--tint) !important; background: #fff !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 16%, transparent) !important; }

.hdcta__rows { display: grid; gap: 2px; }
.hdcta-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none !important; color: var(--navy) !important; transition: background-color .2s, transform .3s var(--spring); }
.hdcta-row__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--tint); background: color-mix(in srgb, var(--tint) 12%, #fff); transition: background-color .25s, color .25s, transform .4s var(--spring); }
.hdcta-row__txt { display: grid; min-width: 0; line-height: 1.3; }
.hdcta-row__txt b { font-size: 14px; font-weight: 600; color: var(--navy); }
.hdcta-row__txt small { font-size: 12.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdcta-row__go { color: var(--tint); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--spring); }
.hdcta-row__go .hdcta-i { width: 16px; height: 16px; }
.hdcta-row:hover, .hdcta-row:focus-visible { background: var(--mist); transform: translateX(2px); outline: none; }
.hdcta-row:hover .hdcta-row__ico, .hdcta-row:focus-visible .hdcta-row__ico { background: var(--tint); color: #fff; transform: rotate(-6deg) scale(1.05); }
.hdcta-row:hover .hdcta-row__go, .hdcta-row:focus-visible .hdcta-row__go { opacity: 1; transform: none; }

/* Report an outage: opens the help desk's outage form (its modal opens itself from ?outage=1). */
.hdcta__alert { --tint: var(--coral); display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 12px; align-items: center; margin-top: 10px; padding: 9px 8px; border-radius: 12px; background: linear-gradient(110deg, #fff1ec, #fff8f5); box-shadow: inset 0 0 0 1px rgba(255, 107, 74, .22); text-decoration: none !important; transition: box-shadow .3s, transform .3s var(--spring); }
.hdcta__alert-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--coral); color: var(--navy); transition: transform .4s var(--spring); }
.hdcta__alert-txt { display: grid; min-width: 0; line-height: 1.3; }
.hdcta__alert-txt b { font-size: 14px; font-weight: 600; color: #b3361b; }
.hdcta__alert-txt small { font-size: 12.5px; color: var(--slate); }
.hdcta__alert:hover, .hdcta__alert:focus-visible { outline: none; transform: translateX(2px); box-shadow: inset 0 0 0 1px rgba(255, 107, 74, .45), 0 8px 22px -10px rgba(255, 107, 74, .7); }
.hdcta__alert:hover .hdcta__alert-ico { transform: rotate(-8deg) scale(1.06); }
.hdcta__alert:hover .hdcta-row__go, .hdcta__alert:focus-visible .hdcta-row__go { opacity: 1; transform: none; }
.hdcta.is-down .hdcta__alert, .hdcta.is-degraded .hdcta__alert { box-shadow: inset 0 0 0 1px rgba(255, 107, 74, .5); }

.hdcta__call { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 12px; border-radius: 14px; background: linear-gradient(110deg, #fff4f0, #fff); box-shadow: inset 0 0 0 1px rgba(255, 107, 74, .25); text-decoration: none !important; transition: box-shadow .3s, transform .3s var(--spring); }
.hdcta__call-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--coral); color: var(--navy); }
.hdcta__call > span:last-child { display: grid; line-height: 1.2; }
.hdcta__call small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c2410c; }
.hdcta__call b { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.hdcta__call:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 107, 74, .5), 0 10px 24px -12px rgba(255, 107, 74, .7); }
.hdcta__call:hover .hdcta__call-ico .hdcta-i { animation: hdcta-ring .9s ease-in-out; }

.hdcta__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--tint) !important; text-decoration: none !important; }
.hdcta__foot .hdcta-i { width: 16px; height: 16px; transition: transform .3s var(--spring); }
.hdcta__foot:hover .hdcta-i { transform: translateX(4px); }

/* Narrower desktops: the pill folds to its two icons, and a side unfolds its label when you reach for it. */
@media (max-width: 1400px) {
	.hdcta { width: 114px; justify-content: flex-end; } /* a fixed footprint: an unfolding label grows to the left, over the menu, instead of pushing it */
	.hdcta__half--sup .hdcta__btn { padding: 0 26px 0 12px; }
	.hdcta__half--con .hdcta__btn { padding: 0 14px 0 26px; }
	.hdcta__half .hdcta__lbl { max-width: 0; opacity: 0; margin-right: -9px; }
	.hdcta__half.is-open .hdcta__lbl, .hdcta__half .hdcta__btn:hover .hdcta__lbl, .hdcta__half .hdcta__btn:focus-visible .hdcta__lbl { max-width: 120px; opacity: 1; margin-right: 0; }
	.hdcta__half--sup.is-open .hdcta__btn, .hdcta__half--sup .hdcta__btn:hover, .hdcta__half--sup .hdcta__btn:focus-visible { padding: 0 32px 0 14px; }
	.hdcta__half--con.is-open .hdcta__btn, .hdcta__half--con .hdcta__btn:hover, .hdcta__half--con .hdcta__btn:focus-visible { padding: 0 18px 0 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.hdcta *, .hdcta *::before, .hdcta *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* The notch takes the panel's accent color so it reads as part of the top band. */
.hdcta__half--sup .hdcta__panel::before { background: #2370b6; box-shadow: none; }
.hdcta__half--con .hdcta__panel::before { background: var(--coral); box-shadow: none; }

/* Phones: the pill is replaced by plain Support and Contact items in the menu, which are hidden on desktop. */
.awb-menu:not(.collapse-enabled) .hd-mobile-only { display: none !important; }

/* Header row: the pill's column takes just the room the pill needs and the menu takes the rest,
   so the menu never wraps or slides under the pill as the window narrows. */
.fusion-tb-header .fusion-builder-row:has(.hdcta) > .fusion-layout-column:has(.hdcta) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
.fusion-tb-header .fusion-builder-row:has(.hdcta) > .fusion-layout-column:has(.awb-menu):not(:has(.hdcta)) { flex: 1 1 0% !important; width: auto !important; min-width: 0; }
.hdcta { margin-left: 28px; justify-content: flex-end; } /* with the resting width pinned by JS, a widening side grows left, over the menu, never pushing it */
/* Between the phone menu and roomy desktops, tighten the gaps between menu items so they stay on one line. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.fusion-tb-header .fusion-builder-row:has(.hdcta) .awb-menu__main-ul > li { margin-left: 0 !important; margin-right: 14px !important; }
	.fusion-tb-header .fusion-builder-row:has(.hdcta) .awb-menu__main-ul > li:last-child { margin-right: 0 !important; }
	.hdcta { margin-left: 18px; }
}

/* The main menu sits centered between the logo and the pill (Avada had it pushed right). */
@media (min-width: 1025px) {
	.fusion-tb-header .fusion-builder-row:has(.hdcta) .awb-menu_desktop { --awb-justify-content: center; }
	.fusion-tb-header .fusion-builder-row:has(.hdcta) .awb-menu_desktop .awb-menu__main-ul { justify-content: center !important; }
	/* With JS, the script measures the logo and the pill and sets the exact offset. */
	.fusion-tb-header .fusion-builder-row:has(.hdcta) .awb-menu_desktop .awb-menu__main-ul.hdcta-menu { justify-content: flex-start !important; }
}