/**
 * Menu bar redesign (live since 5.9.45).
 *
 * Desktop: pill navigation — semibold links, soft indigo hover tint,
 * gradient pill for the active page (replaces the basic pale pill),
 * subtle header shadow, gradient Account button.
 * Mobile: the plugin's own .emc-menu-btn / .emc-mobile-menu panel
 * refined to match (rounded card, semibold links, indigo open state).
 *
 * Theme colors only. Nothing removed, no text added.
 * Note: the theme's own .ef-mobile-menu / .ef-menu-toggle stay hidden
 * by mobile-menu-replace.php; this file does not touch them.
 */

/* Header bar: soft shadow under the sticky bar */
.ef-header {
  box-shadow: 0 2px 16px rgba(11, 17, 32, 0.06);
}

/* Logo sizing: custom logo in the header, logo image in the footer */
.ef-logo {
  display: flex;
  align-items: center;
}
.ef-logo img.custom-logo,
img.custom-logo {
  max-height: 56px;
  width: auto;
}
.ef-footer__logo .ef-logo__img {
  max-height: 56px;
  width: auto;
}

/* Desktop nav pills */
@media (min-width: 901px) {
  .ef-nav ul {
    gap: 0.5rem;
  }
  .ef-nav a {
    display: inline-block;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  }
  .ef-nav a:hover {
    background: transparent;
    color: #6366f1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  html body .ef-header .ef-nav .current-menu-item a {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  }
  html body .ef-header .ef-nav .current-menu-item a:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
  }
}

/* Account button: gradient primary inside the header bar */
.ef-header__actions .ef-btn--outline {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.ef-header__actions .ef-btn--outline:hover {
  border-color: transparent;
  color: #ffffff;
}

/* Mobile menu refinement (plugin's own button + panel) */
@media (max-width: 900px) {
  .emc-menu-btn {
    border-color: #e2e8f0;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(11, 17, 32, 0.06);
  }
  .emc-menu-btn[aria-expanded="true"] span {
    background: #6366f1;
  }
  .emc-mobile-menu {
    border-radius: 0 0 16px 16px;
  }
  .emc-mobile-menu nav a {
    font-weight: 600;
    padding: 1rem 0.25rem;
  }
  .emc-mobile-menu nav a:hover {
    color: #6366f1;
  }
}

/* Account link in the header (any markup the live header uses for it):
   gradient, so it matches the pills. Kept beside the .ef-btn--outline
   rule above, which covers the theme-copy markup. */
.ef-header__actions a[href*="account"] {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.ef-header__actions a[href*="account"]:hover {
  border-color: transparent;
  color: #ffffff;
}

/* Stronger account-link rule (beats icon-button rules on specificity):
   gradient for the header Account link in any markup the live header
   uses for it. */
html body .ef-header .ef-header__actions a[href*="account"] {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
html body .ef-header .ef-header__actions a[href*="account"]:hover {
  border-color: transparent;
  color: #ffffff;
}

/* Active menu readability: the live theme's own active-link color
   (dark purple) was winning over the white text on the gradient pill,
   leaving dark text on violet. Force white text on every active-link
   variant so the pill always reads clearly. */
html body .ef-header .ef-nav .current-menu-item a,
html body .ef-header .ef-nav .current_page_item a,
html body .ef-header .ef-nav--center .current-menu-item a,
html body .ef-header .ef-nav--center .current_page_item a {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
html body .ef-header .ef-nav .current-menu-item a:hover,
html body .ef-header .ef-nav .current_page_item a:hover,
html body .ef-header .ef-nav--center .current-menu-item a:hover,
html body .ef-header .ef-nav--center .current_page_item a:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff !important;
}

/* Account control gradient, targeted at the control's own classes
   (verified live: <a class="ef-btn ef-btn--outline ef-btn--sm"
   href="/account/">). Container-independent so it applies whatever
   wrapper the live header uses; !important beats the theme's own
   outline-button background, which loads after plugin styles. */
html body .ef-header a.ef-btn--outline[href*="account"] {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
html body .ef-header a.ef-btn--outline[href*="account"]:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Active menu pill: no bottom line, roomy centered padding (5.9.53).
   The hover underline (2px, offset 6px) was leaking onto the active
   pill on hover, drawing a white line under its white text; and the
   pill hugged the label edge to edge. Symmetric padding centers any
   label, short or long. Non-active hover keeps its underline. */
html body .ef-header .ef-nav .current-menu-item a,
html body .ef-header .ef-nav .current_page_item a,
html body .ef-header .ef-nav--center .current-menu-item a,
html body .ef-header .ef-nav--center .current_page_item a,
html body .ef-header .ef-nav .current-menu-item a:hover,
html body .ef-header .ef-nav .current_page_item a:hover,
html body .ef-header .ef-nav--center .current-menu-item a:hover,
html body .ef-header .ef-nav--center .current_page_item a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  padding: 10px 26px !important;
  text-align: center;
}