/**
 * emailmonday Megamenu - header bar
 *
 * Structure mirrors kinsta.com exactly:
 *
 *   .em-bar         transparent sticky container, max-width 84rem, 40px gutters,
 *                   12px block padding. Nothing visible - it only positions.
 *   .em-bar__inner  the bar you actually see: 56px tall, 8px radius, floating
 *                   over the page rather than spanning the viewport.
 *   panel           drops flush off the bar's bottom edge, square on top and
 *                   rounded 8px on the bottom, spanning the bar's exact width.
 *                   While it is open the bar squares off its own bottom corners
 *                   so the two read as one continuous surface.
 *
 * Scroll behaviour: hidden by translateY(-100%) once scrolled down, revealed
 * the moment you travel up, and never hidden while something in it is open.
 */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */

.em-bar {
  --em-bar-row: 56px;              /* height of the visible bar */
  --em-bar-offset: 12px;           /* gap above and below the bar */
  --em-bar-control: 40px;          /* height of buttons, logo, search field */
  --em-bar-max: 1344px;            /* 84rem, same as Kinsta */
  --em-bar-pad: 40px;              /* gutter outside the bar */
  --em-bar-inner-pad: 20px;        /* padding inside the bar */
  --em-bar-gap: 8px;
  --em-bar-radius: 8px;            /* Kinsta's --topbar-radius */
  --em-bar-field-radius: 8px;      /* search field corners */
  --em-bar-bw: 1px;                /* bar border width */

  --em-bar-bg: #ffffff;
  --em-bar-fg: #333333;
  --em-bar-fg-soft: #6f6f6f;
  --em-bar-border: #e5e5e5;
  --em-bar-accent: #e10707;
  --em-bar-field-bg: #f5f5f6;

  --em-bar-shadow: 0 4px 14px -8px rgba(17, 17, 17, .22);
  --em-bar-shadow-lifted: 0 10px 26px -12px rgba(17, 17, 17, .34);

  --em-bar-ease: cubic-bezier(.4, 0, .2, 1);

  --em-bar-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 2a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 9 2Zm0 2a5 5 0 1 1 0 10A5 5 0 0 1 9 4Z'/%3E%3C/svg%3E");

  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--em-bar-max);
  margin-inline: auto;
  padding: var(--em-bar-offset) var(--em-bar-pad);
  background: transparent;         /* the visible surface is .em-bar__inner */
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  transition: transform .2s ease-in-out;
}

.em-bar *,
.em-bar *::before,
.em-bar *::after { box-sizing: border-box; }

body.admin-bar .em-bar { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .em-bar { top: 46px; }
}

/* ---------------------------------------------------------------------------
   2. Scroll states
   ------------------------------------------------------------------------ */

/* Past the bar and travelling down: get out of the way. */
.em-bar.is-scrolled.is-stuck { transform: translateY(-100%); }

/* Travelling up, or something in the bar is open: come back. */
.em-bar.is-scrolled.is-stuck.is-pinned { transform: translateY(0); }

/* Detached from the top, the bar lifts off the page a little further. */
.em-bar.is-scrolled.is-pinned .em-bar__inner { box-shadow: var(--em-bar-shadow-lifted); }

/* ---------------------------------------------------------------------------
   3. The bar itself
   ------------------------------------------------------------------------ */

.em-bar__inner {
  /* Positioning context for the panels, so they span the bar exactly. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: var(--em-bar-row);
  padding-inline: var(--em-bar-inner-pad);
  background: var(--em-bar-bg);
  border: var(--em-bar-bw) solid var(--em-bar-border);
  border-radius: var(--em-bar-radius);
  box-shadow: var(--em-bar-shadow);
  /* Only the shadow eases. The corners must square off on the very first
     frame the panel opens, or the bar's rounded bottom would show as two
     white notches over the panel's square top while a transition ran. */
  transition: box-shadow .2s ease-in-out;
}

/* An open panel makes bar and panel one surface: square off the bottom
   corners and drop the seam between them.
   The second selector exists purely to outrank the is-scrolled.is-pinned
   shadow rule above (four classes); without it the lifted shadow keeps
   painting a line across the join once the page has been scrolled. */
body.em-mega-open .em-bar .em-bar__inner,
body.em-mega-open .em-bar.is-scrolled.is-pinned .em-bar__inner {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: none;
}

.em-bar__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  color: var(--em-bar-fg);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.em-bar__logo img {
  display: block;
  height: var(--em-bar-control);
  width: auto;
  max-width: 100%;
}

.em-bar__logo:focus-visible {
  outline: 2px solid var(--em-bar-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.em-bar__nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

/* Hand panel positioning up to .em-bar__inner. */
.em-bar__nav .em-mega {
  align-self: stretch;
  display: flex;
  position: static;
}

.em-bar__nav .em-mega__list { align-items: stretch; }

.em-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--em-bar-gap);
  flex: none;
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   4. Panels, welded to the bar
   ------------------------------------------------------------------------ */

/* Negative insets put the panel's outer edges over the bar's border, so the
   two line up exactly. top:100% lands on the inner edge of the bar's bottom
   border, which is transparent while open - the panel's background fills it. */
.em-bar .em-mega__panel,
.em-bar .em-mega__item[data-em-align="right"] > .em-mega__panel,
.em-bar .em-mega__item[data-em-align="center"] > .em-mega__panel {
  top: 100%;
  left: calc(-1 * var(--em-bar-bw));
  right: calc(-1 * var(--em-bar-bw));
  width: auto;
  padding-top: 0;                  /* flush: no variant offset in the bar */
  transform: none;
}

.em-bar .em-mega__panel-body {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--em-bar-radius);
  border-bottom-right-radius: var(--em-bar-radius);
}

/* ---------------------------------------------------------------------------
   5. Search - expands leftward out of the icon
   ------------------------------------------------------------------------ */

.em-bar__search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

.em-bar__search-toggle,
.em-bar__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--em-bar-control);
  height: var(--em-bar-control);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--em-bar-fg-soft);
  cursor: pointer;
  transition: background-color .16s var(--em-bar-ease), color .16s var(--em-bar-ease);
}

.em-bar__search-toggle:hover,
.em-bar__burger:hover { background: var(--em-bar-field-bg); color: var(--em-bar-fg); }

.em-bar__search-toggle:focus-visible,
.em-bar__burger:focus-visible { outline: 2px solid var(--em-bar-accent); outline-offset: 1px; }

.em-bar__search-toggle svg { width: 20px; height: 20px; display: block; }

/* Magnifier while closed, X while open, so the control always says what the
   next click does. */
.em-bar__search-toggle .em-bar__icon--close { display: none; }
.em-bar[data-search="expanded"] .em-bar__search-toggle .em-bar__icon--search { display: none; }
.em-bar[data-search="expanded"] .em-bar__search-toggle .em-bar__icon--close { display: block; }
.em-bar[data-search="expanded"] .em-bar__search-toggle { color: var(--em-bar-fg); }

.em-bar__search-field {
  position: absolute;
  right: calc(100% + var(--em-bar-gap));
  top: 50%;
  height: var(--em-bar-control);
  width: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-50%);
  transition: width .3s var(--em-bar-ease), opacity .3s var(--em-bar-ease);
}

.em-bar[data-search="expanded"] .em-bar__search-field {
  width: min(62vw, 720px);
  opacity: 1;
}

.em-bar__search-field::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  background-color: var(--em-bar-fg-soft);
  -webkit-mask-image: var(--em-bar-search-icon);
  mask-image: var(--em-bar-search-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

.em-bar .em-bar__search-field input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 18px 0 42px;
  border: 1px solid var(--em-bar-border);
  border-radius: var(--em-bar-field-radius);
  background: var(--em-bar-field-bg);
  color: var(--em-bar-fg);
  font: inherit;
  font-size: 14px;
  line-height: normal;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .16s var(--em-bar-ease), background-color .16s var(--em-bar-ease);
}

.em-bar .em-bar__search-field input::placeholder { color: #9a9a9a; opacity: 1; }

.em-bar .em-bar__search-field input:focus {
  border-color: var(--em-bar-accent);
  background: #ffffff;
}

.em-bar__search-field input::-webkit-search-decoration,
.em-bar__search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.em-bar__search-field input[aria-hidden="true"] { pointer-events: none; }

/* ---------------------------------------------------------------------------
   6. Call to action
   ------------------------------------------------------------------------ */

.em-bar__cta {
  display: inline-flex;
  align-items: center;
  height: var(--em-bar-control);
  padding: 0 18px;
  border-radius: 6px;
  background: var(--em-bar-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .16s var(--em-bar-ease);
}

.em-bar__cta:hover { filter: brightness(1.08); }
.em-bar__cta:focus-visible { outline: 2px solid var(--em-bar-fg); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   7. Burger
   ------------------------------------------------------------------------ */

.em-bar__burger { display: none; position: relative; }

.em-bar__burger span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--em-bar-ease), opacity .16s var(--em-bar-ease);
}

.em-bar__burger span:nth-child(1) { transform: translateY(-6px); }
.em-bar__burger span:nth-child(3) { transform: translateY(6px); }

.em-bar[data-drawer="open"] .em-bar__burger span:nth-child(1) { transform: rotate(45deg); }
.em-bar[data-drawer="open"] .em-bar__burger span:nth-child(2) { opacity: 0; }
.em-bar[data-drawer="open"] .em-bar__burger span:nth-child(3) { transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   8. Utility
   ------------------------------------------------------------------------ */

.em-bar .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.em-bar__drawer-search { display: none; }

@media (prefers-reduced-motion: reduce) {
  .em-bar,
  .em-bar * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   9. Mobile - the nav column becomes a drawer welded to the bar
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .em-bar {
    --em-bar-pad: 16px;
    --em-bar-inner-pad: 14px;
    --em-bar-offset: 10px;
  }

  .em-bar__inner { gap: 12px; }

  .em-bar__burger { display: flex; }

  .em-bar__logo img { height: 34px; }

  /* Collapse the icon-expand pattern; mobile searches from inside the drawer. */
  .em-bar__search { display: none; }

  body.em-bar-drawer-open .em-bar__inner,
  .em-bar[data-drawer="open"] .em-bar__inner {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }

  .em-bar__nav {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--em-bar-bw));
    right: calc(-1 * var(--em-bar-bw));
    display: block;
    max-height: calc(100vh - var(--em-bar-row) - var(--em-bar-offset) * 2 - 20px);
    padding: 8px var(--em-bar-inner-pad) 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--em-bar-bg);
    border: var(--em-bar-bw) solid var(--em-bar-border);
    border-top: 0;
    border-bottom-left-radius: var(--em-bar-radius);
    border-bottom-right-radius: var(--em-bar-radius);
    box-shadow: var(--em-bar-shadow-lifted);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s var(--em-bar-ease), transform .2s var(--em-bar-ease), visibility 0s linear .2s;
  }

  .em-bar[data-drawer="open"] .em-bar__nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .2s var(--em-bar-ease), transform .2s var(--em-bar-ease), visibility 0s;
  }

  .em-bar__drawer-search {
    display: block;
    margin: 8px 0 4px;
    position: relative;
  }

  .em-bar__drawer-search::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 17px;
    height: 17px;
    margin-top: -8.5px;
    background-color: var(--em-bar-fg-soft);
    -webkit-mask-image: var(--em-bar-search-icon);
    mask-image: var(--em-bar-search-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
  }

  .em-bar .em-bar__drawer-search input {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 18px 0 42px;
    border: 1px solid var(--em-bar-border);
    border-radius: var(--em-bar-field-radius);
    background: var(--em-bar-field-bg);
    color: var(--em-bar-fg);
    font: inherit;
    font-size: 15px;
    -webkit-appearance: none;
    appearance: none;
  }

  .em-bar .em-bar__drawer-search input:focus { border-color: var(--em-bar-accent); background: #ffffff; outline: none; }

  .em-bar__nav .em-mega { display: block; width: 100%; }

  /* A drawer that is open must not be yanked off screen by the hide-on-scroll. */
  .em-bar[data-drawer="open"] { transform: translateY(0) !important; }
}

/* ---------------------------------------------------------------------------
   10. Avada's own header is replaced wholesale in header mode
   ------------------------------------------------------------------------ */

body.em-bar-active .fusion-header-wrapper,
body.em-bar-active .fusion-secondary-header,
body.em-bar-active .fusion-sticky-header-wrapper,
body.em-bar-active .fusion-header-sticky-height { display: none !important; }

/* Stop the page scrolling behind an open mobile drawer. */
body.em-bar-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   11. Variants - the bar takes the same skin as its panel
   ------------------------------------------------------------------------ */

/* Bar and panel are one continuous surface, so the bar has to follow the
   variant. Radius is shared too: in the bar the panel's bottom corners come
   from --em-bar-radius, not from the variant's own --em-panel-radius. */

.em-bar[data-em-variant="soft"] { --em-bar-radius: 14px; --em-bar-field-radius: 10px; }

.em-bar[data-em-variant="editorial"] {
  --em-bar-radius: 0px;
  --em-bar-field-radius: 0px;
  --em-bar-shadow: 0 1px 0 rgba(17, 17, 17, .06);
}

.em-bar[data-em-variant="dark"] {
  --em-bar-bg: #181516;
  --em-bar-fg: #f2ece9;
  --em-bar-fg-soft: #a1918d;
  --em-bar-border: #2c2729;
  --em-bar-accent: #ff6a3d;
  --em-bar-field-bg: #241f21;
  --em-bar-radius: 12px;
  --em-bar-shadow: 0 4px 14px -8px rgba(0, 0, 0, .6);
  --em-bar-shadow-lifted: 0 12px 30px -12px rgba(0, 0, 0, .75);
}

.em-bar[data-em-variant="dark"] .em-mega {
  --em-top-fg: #d9cfcb;
  --em-top-fg-active: #ff6a3d;
  --em-focus-ring: #ff6a3d;
  /* --em-top-fg-current is deliberately left alone: it falls back to
     --em-top-fg, so the current page is unmarked here too. */
}

.em-bar[data-em-variant="dark"] .em-bar .em-bar__search-field input { color: #f2ece9; }
.em-bar[data-em-variant="dark"] .em-bar .em-bar__search-field input::placeholder { color: #8d7c78; }
.em-bar[data-em-variant="dark"] .em-bar .em-bar__search-field input:focus { background: #2b2426; }
.em-bar[data-em-variant="dark"] .em-bar__drawer-search input { color: #f2ece9; }

/* The light hover presets assume a white bar. On the dark variant they need
   dark equivalents, or a #f2f2f3 chip would glare on a #181516 bar. */
.em-bar[data-em-variant="dark"] .em-mega[data-em-hover="chip"],
.em-bar[data-em-variant="dark"] .em-mega[data-em-hover="tint"] {
  --em-top-hover-fg: #ffffff;
  --em-top-hover-bg: #2b2426;
}

.em-bar[data-em-variant="dark"] .em-mega[data-em-hover="ink"],
.em-bar[data-em-variant="dark"] .em-mega[data-em-hover="deep"] {
  --em-top-hover-fg: #ffffff;
  --em-top-hover-bg: transparent;
}