/**
 * emailmonday Megamenu - core styles
 *
 * Behaviour is Kinsta-style: one shared full-width panel anchored to the nav's
 * left edge, revealed by animating grid-template-rows 0fr -> 1fr on a clipped
 * wrapper (that is what gives the smooth auto-height slide without needing a
 * fixed height). All skinning happens through custom properties, so the four
 * variants at the bottom only ever redefine tokens - never layout.
 */

/* ---------------------------------------------------------------------------
   1. Tokens (defaults = "light" variant)
   ------------------------------------------------------------------------ */

.em-mega {
  /* Layout */
  --em-panel-width: 1100px;
  --em-panel-offset: 0px;          /* vertical gap between bar and panel */
  --em-panel-pad: 32px;
  --em-panel-radius: 10px;
  --em-col-gap: 8px;
  --em-cols: 3;

  /* Accents. The brand red is vivid but only 4.96:1 on white; the deep
     red is 7.0-7.7:1 wherever it is used, so it reads calmer AND
     clearer. Full-strength red is kept for CTAs. */
  --em-accent: #e10707;
  --em-accent-deep: #a80d0d;

  /* Top-level bar */
  --em-top-fg: #333333;
  --em-top-fg-active: var(--em-accent);
  --em-top-size: 15px;
  --em-top-weight: 600;
  --em-top-pad-x: 14px;
  --em-top-h: 40px;                /* control height inside the 56px row */
  --em-top-fg-current: var(--em-top-fg);  /* current page: no highlight, like Kinsta */
  --em-focus-ring: var(--em-accent);      /* keyboard focus outlines only */

  /* Hover treatment. Presets further down override these two; by default the
     text takes the accent and no chip is drawn. */
  --em-top-hover-fg: var(--em-top-fg-active);
  --em-top-hover-bg: transparent;
  --em-top-hover-radius: 6px;

  /* Panel surface */
  --em-panel-bg: #ffffff;
  --em-panel-border: #e5e5e5;
  --em-panel-shadow: 0 18px 40px -12px rgba(17, 17, 17, .18), 0 2px 6px rgba(17, 17, 17, .06);

  /* Panel contents */
  --em-col-title-fg: #8a8a8a;
  --em-col-title-size: 11px;
  --em-col-title-spacing: .09em;
  --em-link-title-fg: #222222;
  --em-link-desc-fg: #6f6f6f;
  --em-link-hover-bg: #f8f8f8;
  --em-link-hover-title-fg: var(--em-accent-deep);
  --em-link-radius: 7px;
  --em-link-pad: 10px 12px;

  /* Promo banner */
  --em-banner-bg: #fbf3f3;
  --em-banner-fg: #444444;
  --em-banner-title-fg: #1a1a1a;
  --em-banner-accent: var(--em-accent);   /* a CTA: stays full strength */
  --em-banner-radius: 8px;

  --em-ease: cubic-bezier(.4, 0, .2, 1);
  --em-speed: .3s;

  position: relative;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

/* Avada's header wrappers clip absolutely positioned children. */
.fusion-header-wrapper .fusion-header,
.fusion-header-wrapper .fusion-row,
.fusion-header-wrapper .fusion-header-v1,
.fusion-main-menu.em-mega,
.em-mega-allow-overflow {
  overflow: visible !important;
}

/* ---------------------------------------------------------------------------
   2. Top-level bar
   ------------------------------------------------------------------------ */

.em-mega__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-mega__item {
  position: static;
  display: flex;
  /* Centred rather than stretched, so a hover chip is a 40px control inside
     the row instead of a full-height slab. Panels are positioned against the
     bar, not the item, so item height does not move them. */
  align-items: center;
}

.em-mega__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  margin: 0;
  padding: 0 var(--em-top-pad-x);
  height: var(--em-top-h);
  border: 0;
  border-radius: var(--em-top-hover-radius);
  background-color: transparent;
  font: inherit;
  font-size: var(--em-top-size);
  font-weight: var(--em-top-weight);
  line-height: 1.2;
  color: var(--em-top-fg);
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .18s var(--em-ease), background-color .16s var(--em-ease);
}

/* The current page is not accented. Set --em-top-fg-current if you ever want
   an indicator back; it stays out of the rule below so hover still wins. */
.em-mega__item.is-current > .em-mega__top {
  color: var(--em-top-fg-current);
}

/* Listed after the current-page rule, and with the extra .is-current
   compounds, so hovering the current item still gives feedback. */
.em-mega__top:hover,
.em-mega__top:focus-visible,
.em-mega__item.is-open > .em-mega__top,
.em-mega__item.is-current > .em-mega__top:hover,
.em-mega__item.is-current > .em-mega__top:focus-visible {
  color: var(--em-top-hover-fg);
  background-color: var(--em-top-hover-bg);
}

.em-mega__top:focus-visible {
  outline: 2px solid var(--em-focus-ring);
  outline-offset: -2px;
}

.em-mega__chevron {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform .25s var(--em-ease);
}

.em-mega__item.is-open > .em-mega__top .em-mega__chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   3. The panel and the grid-rows reveal
   ------------------------------------------------------------------------ */

.em-mega__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  width: min(var(--em-panel-width), calc(100vw - 40px));
  padding-top: var(--em-panel-offset);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--em-ease), visibility 0s linear var(--em-speed);
  text-align: left;
}

.em-mega__item.is-open > .em-mega__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s var(--em-ease), visibility 0s;
}

.em-mega__item[data-em-align="right"] > .em-mega__panel {
  left: auto;
  right: 0;
}

.em-mega__item[data-em-align="center"] > .em-mega__panel {
  left: 50%;
  transform: translateX(-50%);
}

.em-mega__panel-inner {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--em-speed) var(--em-ease);
}

.em-mega__item.is-open > .em-mega__panel .em-mega__panel-inner {
  grid-template-rows: 1fr;
}

.em-mega__panel-clip {
  min-height: 0;
  overflow: hidden;
}

.em-mega__panel-body {
  padding: var(--em-panel-pad);
  background: var(--em-panel-bg);
  border: 1px solid var(--em-panel-border);
  border-radius: var(--em-panel-radius);
  box-shadow: var(--em-panel-shadow);
}

/* ---------------------------------------------------------------------------
   4. Columns and links
   ------------------------------------------------------------------------ */

.em-mega__cols {
  display: grid;
  grid-template-columns: repeat(var(--em-cols), minmax(0, 1fr));
  gap: 24px var(--em-col-gap);
}

.em-mega__col {
  min-width: 0;
}

.em-mega__col-title {
  margin: 0 0 8px;
  padding: 0 12px;
  font-size: var(--em-col-title-size);
  font-weight: 700;
  letter-spacing: var(--em-col-title-spacing);
  text-transform: uppercase;
  color: var(--em-col-title-fg);
}

.em-mega__link {
  display: block;
  padding: var(--em-link-pad);
  border-radius: var(--em-link-radius);
  text-decoration: none;
  transition: background-color .16s var(--em-ease);
}

.em-mega__link:hover,
.em-mega__link:focus-visible {
  background: var(--em-link-hover-bg);
}

.em-mega__link:focus-visible {
  outline: 2px solid var(--em-focus-ring);
  outline-offset: 1px;
}

.em-mega__link-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--em-link-title-fg);
  transition: color .16s var(--em-ease);
}

.em-mega__link:hover .em-mega__link-title,
.em-mega__link:focus-visible .em-mega__link-title {
  color: var(--em-link-hover-title-fg);
}

.em-mega__link-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--em-link-desc-fg);
}

/* ---------------------------------------------------------------------------
   5. Promo banner
   ------------------------------------------------------------------------ */

.em-mega__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--em-banner-bg);
  border-radius: var(--em-banner-radius);
  color: var(--em-banner-fg);
  text-decoration: none;
  transition: filter .18s var(--em-ease);
}

.em-mega__banner:hover {
  filter: brightness(.97);
}

.em-mega__banner-title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--em-banner-title-fg);
}

.em-mega__banner-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--em-banner-fg);
}

.em-mega__banner-cta {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--em-banner-accent);
  white-space: nowrap;
}

.em-mega__banner-cta::after {
  content: " \2192";
}

/* ---------------------------------------------------------------------------
   6. Backdrop (dims the page behind an open panel, like Kinsta)
   ------------------------------------------------------------------------ */

.em-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 15, 15, .32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s var(--em-ease), visibility 0s linear .24s;
}

body.em-mega-open .em-mega-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .24s var(--em-ease), visibility 0s;
}

/* The open flag always fires so the header bar can stay pinned; switching the
   backdrop off suppresses the dimming only. */
body.em-mega-hide-backdrop .em-mega-backdrop { display: none; }

/* ---------------------------------------------------------------------------
   7. Variants - tokens only
   ------------------------------------------------------------------------ */

/* --- A. dark: closest to Kinsta ----------------------------------------- */
.em-mega[data-em-variant="dark"] {
  --em-panel-bg: #181516;
  --em-panel-border: #2c2729;
  --em-panel-shadow: 0 24px 50px -14px rgba(0, 0, 0, .55);
  --em-panel-radius: 12px;
  --em-col-title-fg: #9b8b87;
  --em-link-title-fg: #f2ece9;
  --em-link-desc-fg: #a1918d;
  --em-link-hover-bg: #241f21;
  --em-link-hover-title-fg: #ff6a3d;
  --em-banner-bg: rgba(238, 60, 0, .12);
  --em-banner-fg: #b8a7a2;
  --em-banner-title-fg: #f7f2f0;
  --em-banner-accent: #ff6a3d;
  --em-banner-radius: 10px;
}

/* --- B. hybrid: light panel, dark promo card ---------------------------- */
.em-mega[data-em-variant="hybrid"] {
  --em-panel-radius: 12px;
  --em-link-hover-bg: #fdf5f5;
  --em-banner-bg: #1c1c1e;
  --em-banner-fg: #b5b5ba;
  --em-banner-title-fg: #ffffff;
  --em-banner-accent: #ff5a5a;
  --em-banner-radius: 10px;
}

/* --- C. editorial: flat, bordered columns, no card hover ---------------- */
.em-mega[data-em-variant="editorial"] {
  --em-panel-radius: 0px;
  --em-panel-pad: 40px;
  --em-panel-shadow: 0 12px 28px -16px rgba(17, 17, 17, .22);
  --em-panel-border: #e5e5e5;
  --em-col-gap: 0px;
  --em-link-hover-bg: transparent;
  --em-link-pad: 9px 0;
  --em-link-radius: 0px;
  --em-col-title-fg: #b0b0b0;
  --em-banner-bg: transparent;
  --em-banner-radius: 0px;
}

.em-mega[data-em-variant="editorial"] .em-mega__col + .em-mega__col {
  padding-left: 28px;
  border-left: 1px solid #ededed;
}

.em-mega[data-em-variant="editorial"] .em-mega__col:not(:last-child) {
  padding-right: 28px;
}

.em-mega[data-em-variant="editorial"] .em-mega__col-title {
  padding: 0 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #ededed;
}

.em-mega[data-em-variant="editorial"] .em-mega__link-title {
  font-size: 15px;
}

.em-mega[data-em-variant="editorial"] .em-mega__link:hover .em-mega__link-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.em-mega[data-em-variant="editorial"] .em-mega__banner {
  padding: 18px 0 0;
  margin-top: 28px;
  border-top: 1px solid #ededed;
}

.em-mega[data-em-variant="editorial"] .em-mega__banner:hover {
  filter: none;
}

/* --- D. soft: rounded, tinted, generous (light default is variant "light") */
.em-mega[data-em-variant="soft"] {
  --em-panel-bg: #ffffff;
  --em-panel-radius: 16px;
  --em-panel-pad: 28px;
  --em-panel-border: transparent;
  --em-panel-shadow: 0 24px 48px -18px rgba(225, 7, 7, .18), 0 4px 14px rgba(17, 17, 17, .07);
  --em-panel-offset: 10px;
  --em-link-radius: 10px;
  --em-link-hover-bg: #fdf2f2;
  --em-col-title-fg: #c25c5c;
  --em-banner-bg: linear-gradient(100deg, #e10707 0%, #ff5a3c 100%);
  --em-banner-fg: rgba(255, 255, 255, .82);
  --em-banner-title-fg: #ffffff;
  --em-banner-accent: #ffffff;
  --em-banner-radius: 12px;
}

/* ---------------------------------------------------------------------------
   7b. Hover presets for the top-level bar
   Set data-em-hover on .em-mega. Contrast figures are against white.
   ------------------------------------------------------------------------ */

/* Neutral chip, no brand colour - what kinsta.com actually does: a neutral
   background plus a small text shift, accent reserved for CTAs. */
.em-mega[data-em-hover="chip"] {
  --em-top-hover-fg: #111111;      /* 16.9:1 on the chip */
  --em-top-hover-bg: #f2f2f3;
}

/* Brand-tinted chip: keeps a hint of red without the glare. */
.em-mega[data-em-hover="tint"] {
  --em-top-hover-fg: var(--em-accent-deep);      /* 7.0:1 on the tint */
  --em-top-hover-bg: #fdf2f2;
}

/* Text only, deepened red - the default idea, calmer. */
.em-mega[data-em-hover="deep"] {
  --em-top-hover-fg: var(--em-accent-deep);      /* 7.7:1, up from 4.96:1 */
  --em-top-hover-bg: transparent;
}

/* Text only, just darker ink. The quietest option. */
.em-mega[data-em-hover="ink"] {
  --em-top-hover-fg: #111111;      /* 18.9:1 */
  --em-top-hover-bg: transparent;
}

/* The original: full-strength brand red, text only. */
.em-mega[data-em-hover="red"] {
  --em-top-hover-fg: var(--em-accent);      /* 4.96:1 - the weakest of the set */
  --em-top-hover-bg: transparent;
}

/* ---------------------------------------------------------------------------
   8. Reduced motion
   ------------------------------------------------------------------------ */

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

/* ---------------------------------------------------------------------------
   9. Small screens - accordion fallback (only if this nav is visible there)
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .em-mega__list { flex-direction: column; align-items: stretch; }
  .em-mega__item { display: block; }

  .em-mega__top {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    height: auto;                /* no fixed control height in the accordion */
    background-color: transparent;
  }

  .em-mega__panel {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-top: 0;
    transform: none;
  }

  .em-mega__panel-body {
    padding: 4px 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  .em-mega__cols { grid-template-columns: 1fr; gap: 12px; }
  .em-mega__banner { margin-top: 12px; }
  .em-mega-backdrop { display: none; }

  .em-mega[data-em-variant="editorial"] .em-mega__col + .em-mega__col {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   10. Defensive overrides for Avada
   In menu-only mode the nav keeps Avada's .fusion-main-menu hook class so the
   theme still positions it, which also drags in Avada's own item sizing:
   `body:not(.fusion-header-layout-v6) .fusion-main-menu > ul > li > a
    { height: var(--nav_height) }` at (0,2,4). Our items size themselves, so
   these have to out-rank it. !important is deliberate - it is a targeted
   override of theme CSS we do not control, not a shortcut.
   ------------------------------------------------------------------------ */

.em-mega.fusion-main-menu > ul > li > a,
.em-mega.fusion-main-menu > ul > li > button,
.em-mega.fusion-main-menu > ul > li > .em-mega__top {
  height: var(--em-top-h) !important;
  line-height: 1.2 !important;
}

/* Avada also gives its menu a fixed height and a float. */
.em-mega.fusion-main-menu,
.em-mega.fusion-main-menu > ul {
  height: auto !important;
}