/* Elenica Framework 4 — Clean Base */
:root {
  --ef4-container-width: 1200px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ef4-color-text);
  background: var(--ef4-page-bg-default);
  font-family: var(--ef4-font-body);
  font-size: var(--ef4-body-font-size);
  font-weight: var(--ef4-body-font-weight);
  line-height: var(--ef4-body-line-height);
  letter-spacing: var(--ef4-body-letter-spacing);
}
body.ef4-page-context-home { background: var(--ef4-page-bg-home); }
body.ef4-page-context-blog { background: var(--ef4-page-bg-blog); }

h1, h2, h3, h4, h5, h6 {
  color: var(--ef4-color-heading);
  font-family: var(--ef4-font-heading);
  font-weight: var(--ef4-heading-font-weight);
  line-height: var(--ef4-heading-line-height);
  letter-spacing: var(--ef4-heading-letter-spacing);
  text-transform: var(--ef4-heading-text-transform);
}
h1 { font-size: var(--ef4-h1-size); }
h2 { font-size: var(--ef4-h2-size); }
h3 { font-size: var(--ef4-h3-size); }
h4 { font-size: var(--ef4-h4-size); }
h5 { font-size: var(--ef4-h5-size); }
h6 { font-size: var(--ef4-h6-size); }
a {
  color: var(--ef4-color-link);
  text-decoration: var(--ef4-link-text-decoration);
}
a:hover,
a:focus {
  color: var(--ef4-color-link-hover);
  text-decoration: var(--ef4-link-hover-text-decoration);
}

.ef4-site { min-height: 100vh; display: flex; flex-direction: column; }
.ef4-page { min-height: 100vh; background: transparent; }
.ef4-main { flex: 1 0 auto; }

/* EF4 PHASE FOOTER 3.0C — Sticky Footer Frontend Output */
body.ef4-sticky-footer-enabled .ef4-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.ef4-sticky-footer-enabled .ef4-main {
  flex: 1 0 auto;
}
.ef4-container { width: min(100% - 32px, var(--ef4-container-width)); margin-inline: auto; }
.ef4-position { padding: 16px 0; }
.ef4-slideshow {
  margin-top: var(--ef4-slideshow-margin-top, 0px);
  margin-bottom: var(--ef4-slideshow-margin-bottom, 0px);
}
.ef4-empty-notice { padding: 48px 0; text-align: center; color: var(--ef4-color-secondary); }


/* EF4 Typography Engine utilities */
.ef4-menu-typography,
.ef4-header .mod-menu,
.ef4-navigation .mod-menu {
  font-family: var(--ef4-font-menu);
  font-size: var(--ef4-menu-font-size);
  font-weight: var(--ef4-menu-font-weight);
  letter-spacing: var(--ef4-menu-letter-spacing);
  text-transform: var(--ef4-menu-text-transform);
}

/* ==========================================================
   PHASE TYPOGRAPHY FONTS 2.0G — Header Menu Wrapper Font Family Owner Fix
   Scope: EF4-generated desktop header menu wrapper ownership only.
   No inner item selectors, no weights, no Live Preview changes.
   ========================================================== */
.ef4-header-menu-main,
.ef4-header-menu-left,
.ef4-header-menu-right {
    font-family: var(--ef4-font-menu);
}

body.ef4-button-engine-enabled .ef4-button {
    font-family: var(--ef4-font-button);
    font-size: var(--ef4-button-font-size);
    font-weight: var(--ef4-button-font-weight);
    letter-spacing: var(--ef4-button-letter-spacing);
    text-transform: var(--ef4-button-text-transform);
}

/* ==========================================================
   EF4 Button Engine v1 — Frontend Owner Contract
   Scope:
   - explicit .ef4-button owner only;
   - Typography, Colors, Shape & Spacing and Border;
   - normal + hover/focus/focus-visible states;
   - specialized Joomla / third-party / EF4 component buttons remain separate owners.
   ========================================================== */

body.ef4-button-engine-enabled .ef4-button {
    color: var(--ef4-button-text-color);
    background: var(--ef4-button-background);
    padding-inline: var(--ef4-button-padding-x);
    padding-block: var(--ef4-button-padding-y);
    border-radius: var(--ef4-button-radius);
    border-width: var(--ef4-button-border-width);
    border-style: var(--ef4-button-border-style);
    border-color: var(--ef4-button-border-color);
}

body.ef4-button-engine-enabled .ef4-button:hover,
body.ef4-button-engine-enabled .ef4-button:focus,
body.ef4-button-engine-enabled .ef4-button:focus-visible {
    color: var(--ef4-button-hover-text-color);
    background: var(--ef4-button-hover-background);
    border-color: var(--ef4-button-hover-border-color);
}

.ef4-article,
.com-content-article,
.blog,
.item-page {
  font-size: var(--ef4-article-font-size);
  line-height: var(--ef4-article-line-height);
}
.ef4-article h1,
.com-content-article h1,
.item-page h1,
.com-content-category-blog__item .page-header h2,
.com-content-category-blog__item .page-header h2 a {
  font-size: var(--ef4-article-title-size);
}
.com-content-article.item-page .page-header,
.com-content-category-blog__item .page-header {
  text-align: var(--ef4-article-title-align);
}
.article-info,
.ef4-article-meta {
  font-size: var(--ef4-article-meta-size);
}
.ef4-article-intro,
.blog .item-content > p:first-of-type {
  font-size: var(--ef4-article-intro-size);
}

/* EF4 PHASE TYPOGRAPHY 2.0E2 — Blog Paragraph Typography Owner Fix */
.com-content-category-blog.blog .com-content-category-blog__item .item-content p {
  font-size: var(--ef4-article-font-size);
  line-height: var(--ef4-article-line-height);
}
.ef4-footer {
  font-size: var(--ef4-footer-font-size);
  font-weight: var(--ef4-footer-font-weight);
  line-height: var(--ef4-footer-line-height);
}

/* EF4 PHASE 4.1 — Header Engine Skeleton / Positions */
.ef4-top-header {
  background: var(--ef4-top-header-bg);
  border-bottom: var(--ef4-top-header-border-bottom-size, 1px) var(--ef4-top-header-border-bottom-style, solid) var(--ef4-top-header-border-bottom-color, var(--ef4-border-color));
  color: var(--ef4-top-header-text-color);
  font-size: 13px;
  padding: var(--ef4-top-header-padding-y) 0;
}
.ef4-top-header a {
  color: var(--ef4-top-header-link-color);
  text-decoration: none;
}
.ef4-top-header a:hover,
.ef4-top-header a:focus {
  color: var(--ef4-top-header-link-hover-color);
}
.ef4-top-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  min-height: var(--ef4-top-header-min-height);
}
.ef4-top-header__center { text-align: center; }
.ef4-top-header__right { text-align: right; }

/* EF4 PHASE TOP HEADER 1.0E — Overlay Frontend Output
 * Overlay mode removes Top Header from normal flow, so Main Header moves
 * to the top without leaving reserved space. The Top Header remains tied
 * to the page (not the sticky header), therefore it scrolls away naturally.
 * Mobile visibility remains owned by the existing Mobile Header breakpoint. */
.ef4-page--top-header-overlay {
  position: relative;
}

.ef4-page--top-header-overlay > .ef4-top-header--overlay {
  position: absolute;
  top: var(--ef4-top-header-overlay-offset-y, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: calc(var(--ef4-sticky-header-z-index, 1000) + 1);
}

/* Top Header module content: remove only outer vertical margins.
 * This keeps the Top Header height controlled by EF4 while preserving
 * spacing between elements inside each module. Supports direct module
 * output and the common one-wrapper Joomla module markup. */
.ef4-top-header__cell > :first-child {
  margin-block-start: 0;
}
.ef4-top-header__cell > :last-child {
  margin-block-end: 0;
}
.ef4-top-header__cell > :first-child > :first-child {
  margin-block-start: 0;
}
.ef4-top-header__cell > :last-child > :last-child {
  margin-block-end: 0;
}


.ef4-header {
  background: var(--ef4-surface-bg);
  border-bottom: var(--ef4-main-header-border-bottom-size, 1px) var(--ef4-main-header-border-bottom-style, solid) var(--ef4-main-header-border-bottom-color, var(--ef4-border-color));
}
.ef4-header__inner {
  display: grid;
  gap: 12px;
  padding-block: 16px;
}
.ef4-header__row {
  display: grid;
  gap: 16px;
  align-items: center;
}
.ef4-header__main-row {
  grid-template-columns: 1fr auto 1fr;
}
.ef4-header__widgets-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ef4-header-menu-row {
  justify-content: center;
}
.ef4-header-menu-main {
  width: 100%;
}
.ef4-header-logo {
  text-align: center;
  transform: translate(var(--ef4-header-logo-offset-x, 0px), var(--ef4-header-logo-offset-y, 0px));
}

.ef4-header-logo__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ef4-header-logo__image {
  display: block;
  width: auto;
  height: auto;
  max-height: 140px;
}

.ef4-header-menu-left { text-align: right; }
.ef4-header-menu-right { text-align: left; }

.ef4-header--layout-logo_left_menu_right .ef4-header__main-row {
  grid-template-columns: auto 1fr;
}
.ef4-header--layout-logo_left_menu_right .ef4-header-menu-left { display: none; }
.ef4-header--layout-logo_left_menu_right .ef4-header-logo { text-align: left; }
.ef4-header--layout-logo_left_menu_right .ef4-header-menu-right { text-align: right; }

.ef4-header--layout-menu_left_logo_right .ef4-header__main-row {
  grid-template-columns: 1fr auto;
}
.ef4-header--layout-menu_left_logo_right .ef4-header-menu-right { display: none; }
.ef4-header--layout-menu_left_logo_right .ef4-header-menu-left { text-align: left; }
.ef4-header--layout-menu_left_logo_right .ef4-header-logo { text-align: right; }

.ef4-header--layout-logo_top_menu_below .ef4-header__main-row,
.ef4-header--layout-logo_center_menu_below .ef4-header__main-row {
  grid-template-columns: 1fr;
  justify-items: center;
}
.ef4-header--layout-logo_top_menu_below .ef4-header-menu-left,
.ef4-header--layout-logo_top_menu_below .ef4-header-menu-right,
.ef4-header--layout-logo_center_menu_below .ef4-header-menu-left,
.ef4-header--layout-logo_center_menu_below .ef4-header-menu-right { display: none; }

.ef4-header--layout-menu_top_logo_below .ef4-header__main-row {
  grid-template-columns: 1fr;
  justify-items: center;
}
.ef4-header--layout-menu_top_logo_below .ef4-header-menu-left,
.ef4-header--layout-menu_top_logo_below .ef4-header-menu-right { display: none; }
.ef4-header--layout-menu_top_logo_below .ef4-header-menu-row { order: -1; }

.ef4-promo-blocks__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-block: 16px;
}
.ef4-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.ef4-content-layout.has-left-desktop.has-right-desktop {
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(180px, 260px);
}
.ef4-content-layout.has-left-desktop:not(.has-right-desktop) {
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
}
.ef4-content-layout.has-right-desktop:not(.has-left-desktop) {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
}
.ef4-device-mobile {
  display: none;
}
.ef4-above-content,
.ef4-below-content {
  margin-block: 16px;
}

/* EF4 PHASE 4.3B — Additional Corporate Header Layouts */
.ef4-header__layout--logo-left-widget-right,
.ef4-header__layout--widget-left-logo-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ef4-header__layout--logo-left-widget-right .ef4-header-logo {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--logo-left-widget-right .ef4-header-widget-1 {
  justify-self: end;
  text-align: right;
}
.ef4-header__layout--widget-left-logo-right .ef4-header-widget-1 {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--widget-left-logo-right .ef4-header-logo {
  justify-self: end;
  text-align: right;
}

/* EF4 PHASE 8.2E2 — Header Three-Column Preset Implementation
   Preset owner: Logo left / Menu center / Widget right.
   The native menu and external modules in header-menu-main share the same centered slot. */
.ef4-header__layout--logo-left-menu-center-widget-right {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-logo {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  text-align: center;
  width: 100%;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-widget-1 {
  justify-self: end;
  text-align: right;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main > .moduletable,
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main > .module,
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main > .moduletable_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ef4-header__layout--logo-left-menu-center-widget-right .mod-menu,
.ef4-header__layout--logo-left-menu-center-widget-right ul.menu,
.ef4-header__layout--logo-left-menu-center-widget-right ul.nav {
  justify-content: center;
}

.ef4-footer-col--empty {
  min-height: 1px;
}
@media (max-width: 900px) {
  .ef4-top-header__inner,
  .ef4-header__main-row,
  .ef4-header__widgets-row,
  .ef4-promo-blocks__inner,
  .ef4-content-layout,
  .ef4-content-layout.has-left-desktop.has-right-desktop,
  .ef4-content-layout.has-left-desktop:not(.has-right-desktop),
  .ef4-content-layout.has-right-desktop:not(.has-left-desktop) {
    grid-template-columns: 1fr;
  }

  .ef4-device-desktop {
    display: none !important;
  }
  .ef4-device-mobile {
    display: block;
  }
  .ef4-top-header__center,
  .ef4-top-header__right,
  .ef4-header-logo,
  .ef4-header-menu-left,
  .ef4-header-menu-right {
    text-align: center;
  }
}

/* EF4 PHASE 4.2 — Header Basic Styling */
.ef4-header {
  background: var(--ef4-header-bg);
}
.ef4-header > .ef4-container {
  width: min(100% - 32px, var(--ef4-header-container-width));
}
.ef4-header__inner {
  padding: var(--ef4-header-padding-y) var(--ef4-header-padding-x);
}
.ef4-header-logo__image {
  max-width: var(--ef4-header-logo-width);
}
.ef4-header .mod-menu,
.ef4-header ul.menu,
.ef4-header ul.nav,
.ef4-header-menu-left .mod-menu,
.ef4-header-menu-right .mod-menu,
.ef4-header-menu-main .mod-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ef4-header-menu-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ef4-header-menu-left .mod-menu,
.ef4-header-menu-left ul.menu,
.ef4-header-menu-left ul.nav {
  justify-content: flex-end;
}
.ef4-header-menu-right .mod-menu,
.ef4-header-menu-right ul.menu,
.ef4-header-menu-right ul.nav {
  justify-content: flex-start;
}
.ef4-header-menu-main .mod-menu,
.ef4-header-menu-main ul.menu,
.ef4-header-menu-main ul.nav {
  justify-content: center;
}
.ef4-header .mod-menu > li,
.ef4-header ul.menu > li,
.ef4-header ul.nav > li {
  margin: 0;
  padding: 0;
}
.ef4-header .mod-menu a,
.ef4-header ul.menu a,
.ef4-header ul.nav a {
  color: var(--ef4-header-menu-text-color);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color .18s ease;
}
.ef4-header .mod-menu a:hover,
.ef4-header .mod-menu a:focus,
.ef4-header .mod-menu .active > a,
.ef4-header ul.menu a:hover,
.ef4-header ul.menu a:focus,
.ef4-header ul.menu .active > a,
.ef4-header ul.nav a:hover,
.ef4-header ul.nav a:focus,
.ef4-header ul.nav .active > a {
  color: var(--ef4-header-menu-hover-color);
}

/* EF4 PHASE 4.3 — Header Layout Engine */
.ef4-header__layout {
  display: grid;
  align-items: center;
  gap: var(--ef4-header-menu-item-gap);
  width: 100%;
}

.ef4-header__layout--logo-left-menu-right {
  grid-template-columns: auto minmax(0, 1fr);
}
.ef4-header__layout--logo-left-menu-right .ef4-header-logo {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-main,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-right {
  justify-self: end;
  text-align: right;
}

.ef4-header__layout--menu-left-logo-right {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ef4-header__layout--menu-left-logo-right .ef4-header-menu-main,
.ef4-header__layout--menu-left-logo-right .ef4-header-menu-left {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--menu-left-logo-right .ef4-header-logo {
  justify-self: end;
  text-align: right;
}

.ef4-header__layout--split-center-logo {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.ef4-header__layout--split-center-logo .ef4-header-menu-left {
  justify-self: end;
  text-align: right;
}
.ef4-header__layout--split-center-logo .ef4-header-logo {
  justify-self: center;
  text-align: center;
}
.ef4-header__layout--split-center-logo .ef4-header-menu-right {
  justify-self: start;
  text-align: left;
}

.ef4-header__layout--menu-top,
.ef4-header__layout--menu-below,
.ef4-header__layout--logo-top,
.ef4-header__layout--logo-below {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.ef4-header__layout--menu-top {
  margin-bottom: var(--ef4-header-row-gap, 12px);
}
.ef4-header__layout--menu-below {
  margin-top: var(--ef4-header-row-gap, 12px);
}

.ef4-header__widgets-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.ef4-header__layout--logo-left-menu-right .mod-menu,
.ef4-header__layout--logo-left-menu-right ul.menu,
.ef4-header__layout--logo-left-menu-right ul.nav {
  justify-content: flex-end;
}
.ef4-header__layout--menu-left-logo-right .mod-menu,
.ef4-header__layout--menu-left-logo-right ul.menu,
.ef4-header__layout--menu-left-logo-right ul.nav {
  justify-content: flex-start;
}
.ef4-header__layout--split-center-logo .ef4-header-menu-left .mod-menu,
.ef4-header__layout--split-center-logo .ef4-header-menu-left ul.menu,
.ef4-header__layout--split-center-logo .ef4-header-menu-left ul.nav {
  justify-content: flex-end;
}
.ef4-header__layout--split-center-logo .ef4-header-menu-right .mod-menu,
.ef4-header__layout--split-center-logo .ef4-header-menu-right ul.menu,
.ef4-header__layout--split-center-logo .ef4-header-menu-right ul.nav {
  justify-content: flex-start;
}
.ef4-header__layout--menu-top .mod-menu,
.ef4-header__layout--menu-top ul.menu,
.ef4-header__layout--menu-top ul.nav,
.ef4-header__layout--menu-below .mod-menu,
.ef4-header__layout--menu-below ul.menu,
.ef4-header__layout--menu-below ul.nav {
  justify-content: center;
}

/* EF4 PHASE 4.3B — Additional Corporate Header Layouts */
.ef4-header__layout--logo-left-widget-right,
.ef4-header__layout--widget-left-logo-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ef4-header__layout--logo-left-widget-right .ef4-header-logo {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--logo-left-widget-right .ef4-header-widget-1 {
  justify-self: end;
  text-align: right;
}
.ef4-header__layout--widget-left-logo-right .ef4-header-widget-1 {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--widget-left-logo-right .ef4-header-logo {
  justify-self: end;
  text-align: right;
}

/* EF4 PHASE 8.2E2 — Header Three-Column Preset Implementation
   Preset owner: Logo left / Menu center / Widget right.
   The native menu and external modules in header-menu-main share the same centered slot. */
.ef4-header__layout--logo-left-menu-center-widget-right {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-logo {
  justify-self: start;
  text-align: left;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  text-align: center;
  width: 100%;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-widget-1 {
  justify-self: end;
  text-align: right;
}
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main > .moduletable,
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main > .module,
.ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main > .moduletable_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ef4-header__layout--logo-left-menu-center-widget-right .mod-menu,
.ef4-header__layout--logo-left-menu-center-widget-right ul.menu,
.ef4-header__layout--logo-left-menu-center-widget-right ul.nav {
  justify-content: center;
}

.ef4-footer-col--empty {
  min-height: 1px;
}
@media (max-width: 900px) {
  .ef4-header__layout--logo-left-menu-right,
  .ef4-header__layout--menu-left-logo-right,
  .ef4-header__layout--split-center-logo,
  .ef4-header__layout--logo-left-menu-center-widget-right,
  .ef4-header__layout--logo-left-widget-right,
  .ef4-header__layout--widget-left-logo-right,
  .ef4-header__widgets-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .ef4-header__layout--logo-left-menu-right .ef4-header-logo,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right,
  .ef4-header__layout--menu-left-logo-right .ef4-header-menu-main,
  .ef4-header__layout--menu-left-logo-right .ef4-header-menu-left,
  .ef4-header__layout--menu-left-logo-right .ef4-header-logo,
  .ef4-header__layout--split-center-logo .ef4-header-menu-left,
  .ef4-header__layout--split-center-logo .ef4-header-logo,
  .ef4-header__layout--split-center-logo .ef4-header-menu-right,
  .ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-logo,
  .ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-menu-main,
  .ef4-header__layout--logo-left-menu-center-widget-right .ef4-header-widget-1,
  .ef4-header__layout--logo-left-widget-right .ef4-header-logo,
  .ef4-header__layout--logo-left-widget-right .ef4-header-widget-1,
  .ef4-header__layout--widget-left-logo-right .ef4-header-widget-1,
  .ef4-header__layout--widget-left-logo-right .ef4-header-logo {
    justify-self: center;
    text-align: center;
  }
  .ef4-header .mod-menu,
  .ef4-header ul.menu,
  .ef4-header ul.nav {
    justify-content: center !important;
  }
}


/* EF4 PHASE 4.5 — Header Container / Width System */
.ef4-header-width-area {
  margin-inline: auto;
  width: min(100% - 32px, var(--ef4-header-container-width));
}
.ef4-header-width-top {
  width: min(100% - 32px, var(--ef4-top-header-container-width));
}
.ef4-header-width-main {
  width: min(100% - 32px, var(--ef4-main-header-container-width));
}
.ef4-header-width-menu {
  width: min(100% - 32px, var(--ef4-menu-row-container-width));
}
.ef4-container-mode-full {
  width: 100%;
  max-width: none;
}
.ef4-container-mode-boxed,
.ef4-container-mode-custom {
  max-width: none;
}

/* EF4 PHASE 4.5A — Header Menu Basic Normalize Fix
   Temporary safe normalize for header menus until Navigation / Mega Menu Engine is built. */
.ef4-header nav .mod-menu,
.ef4-header nav ul.menu,
.ef4-header nav ul.nav,
.ef4-header .ef4-header-menu-main .mod-menu,
.ef4-header .ef4-header-menu-main ul.menu,
.ef4-header .ef4-header-menu-main ul.nav,
.ef4-header .ef4-header-menu-left .mod-menu,
.ef4-header .ef4-header-menu-left ul.menu,
.ef4-header .ef4-header-menu-left ul.nav,
.ef4-header .ef4-header-menu-right .mod-menu,
.ef4-header .ef4-header-menu-right ul.menu,
.ef4-header .ef4-header-menu-right ul.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ef4-header-menu-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef4-header nav .mod-menu > li,
.ef4-header nav ul.menu > li,
.ef4-header nav ul.nav > li,
.ef4-header .ef4-header-menu-main .mod-menu > li,
.ef4-header .ef4-header-menu-main ul.menu > li,
.ef4-header .ef4-header-menu-main ul.nav > li,
.ef4-header .ef4-header-menu-left .mod-menu > li,
.ef4-header .ef4-header-menu-left ul.menu > li,
.ef4-header .ef4-header-menu-left ul.nav > li,
.ef4-header .ef4-header-menu-right .mod-menu > li,
.ef4-header .ef4-header-menu-right ul.menu > li,
.ef4-header .ef4-header-menu-right ul.nav > li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef4-header nav .mod-menu > li::marker,
.ef4-header nav ul.menu > li::marker,
.ef4-header nav ul.nav > li::marker,
.ef4-header .ef4-header-menu-main .mod-menu > li::marker,
.ef4-header .ef4-header-menu-main ul.menu > li::marker,
.ef4-header .ef4-header-menu-main ul.nav > li::marker,
.ef4-header .ef4-header-menu-left .mod-menu > li::marker,
.ef4-header .ef4-header-menu-left ul.menu > li::marker,
.ef4-header .ef4-header-menu-left ul.nav > li::marker,
.ef4-header .ef4-header-menu-right .mod-menu > li::marker,
.ef4-header .ef4-header-menu-right ul.menu > li::marker,
.ef4-header .ef4-header-menu-right ul.nav > li::marker {
  content: '';
}

.ef4-header nav .mod-menu ul,
.ef4-header nav ul.menu ul,
.ef4-header nav ul.nav ul,
.ef4-header .ef4-header-menu-main .mod-menu ul,
.ef4-header .ef4-header-menu-main ul.menu ul,
.ef4-header .ef4-header-menu-main ul.nav ul,
.ef4-header .ef4-header-menu-left .mod-menu ul,
.ef4-header .ef4-header-menu-left ul.menu ul,
.ef4-header .ef4-header-menu-left ul.nav ul,
.ef4-header .ef4-header-menu-right .mod-menu ul,
.ef4-header .ef4-header-menu-right ul.menu ul,
.ef4-header .ef4-header-menu-right ul.nav ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef4-header nav .mod-menu > li > a,
.ef4-header nav ul.menu > li > a,
.ef4-header nav ul.nav > li > a,
.ef4-header .ef4-header-menu-main .mod-menu > li > a,
.ef4-header .ef4-header-menu-main ul.menu > li > a,
.ef4-header .ef4-header-menu-main ul.nav > li > a,
.ef4-header .ef4-header-menu-left .mod-menu > li > a,
.ef4-header .ef4-header-menu-left ul.menu > li > a,
.ef4-header .ef4-header-menu-left ul.nav > li > a,
.ef4-header .ef4-header-menu-right .mod-menu > li > a,
.ef4-header .ef4-header-menu-right ul.menu > li > a,
.ef4-header .ef4-header-menu-right ul.nav > li > a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

/* EF4 PHASE 4.5B1 — Header Row Gap Frontend Binding Fix
   Applies only to layouts with menu on a separate row: 2, 3, 6, 7, 8.
   Layout 1, 4 and 5 do not use .ef4-header__layout--menu-top / --menu-below, so they remain unchanged. */
.ef4-header__layout--menu-top {
  margin-bottom: var(--ef4-header-row-gap, 12px);
}
.ef4-header__layout--menu-below {
  margin-top: var(--ef4-header-row-gap, 12px);
}

/* EF4 PHASE 4.5B3 — Header Row Gap Real Binding Fix
   Real binding for corporate layouts 7 and 8 only.
   The gap is applied to the header row stack, so it controls the distance between:
   logo/widget row and menu row. */
.ef4-header--layout-logo_left_widget_right_menu_below .ef4-header__inner,
.ef4-header--layout-widget_left_logo_right_menu_below .ef4-header__inner {
  gap: var(--ef4-header-row-gap, 24px);
}

.ef4-header--layout-logo_left_widget_right_menu_below .ef4-header__layout--menu-below,
.ef4-header--layout-widget_left_logo_right_menu_below .ef4-header__layout--menu-below {
  margin-top: 0;
}


/* EF4 PHASE 4.6A — Sticky Header Implementation
   Desktop/tablet header only. Mobile sticky belongs to Mobile Header Engine. */
.ef4-header--sticky-enabled {
  position: sticky;
  top: var(--ef4-sticky-header-offset, 0px);
  z-index: var(--ef4-sticky-header-z-index, 1000);
  transition: background-color .22s ease, box-shadow .22s ease;
}

.ef4-header--sticky-enabled .ef4-header-logo__image {
  transition: width .22s ease, max-width .22s ease;
}

/* EF4 PHASE HEADER 6.0C — Sticky Logo Override Frontend Output */
.ef4-header-logo__image--sticky {
  display: none;
}

.ef4-header--sticky-enabled.ef4-header--has-sticky-logo.is-ef4-sticky-active
.ef4-header-logo__image--default {
  display: none;
}

.ef4-header--sticky-enabled.ef4-header--has-sticky-logo.is-ef4-sticky-active
.ef4-header-logo__image--sticky {
  display: block;
}

.ef4-header--sticky-enabled.is-ef4-sticky-active {
  background: var(--ef4-sticky-header-bg, var(--ef4-header-bg));
  box-shadow: var(--ef4-sticky-header-shadow, none);
}

.ef4-header--sticky-enabled.is-ef4-sticky-active .ef4-header-logo__image {
  width: var(--ef4-sticky-header-logo-width, var(--ef4-header-logo-width));
  max-width: var(--ef4-sticky-header-logo-width, var(--ef4-header-logo-width));
}


/* EF4 PHASE 5.1 — Footer Engine Skeleton / Positions */
.ef4-footer {
  color: var(--ef4-footer-text-color);
  font-size: var(--ef4-footer-font-size);
  font-weight: var(--ef4-footer-font-weight);
  line-height: var(--ef4-footer-line-height);
}
.ef4-footer a {
  color: var(--ef4-footer-link-color);
}
.ef4-footer a:hover,
.ef4-footer a:focus {
  color: var(--ef4-footer-link-hover-color);
}
.ef4-footer-main {
  background: var(--ef4-footer-bg);
  padding: var(--ef4-footer-padding-y) var(--ef4-footer-padding-x);
  border-top: var(--ef4-footer-main-border-top-width) var(--ef4-footer-main-border-top-style) var(--ef4-footer-main-border-top-color);
  border-bottom: var(--ef4-footer-main-border-bottom-width) var(--ef4-footer-main-border-bottom-style) var(--ef4-footer-main-border-bottom-color);
  box-sizing: border-box;
}
.ef4-footer-container,
.ef4-footer-bottom-container {
  margin-inline: auto;
  width: min(100% - 32px, var(--ef4-footer-container-width));
}
.ef4-footer-container.ef4-container-mode-full,
.ef4-footer-bottom-container.ef4-container-mode-full {
  width: 100%;
  max-width: none;
}
.ef4-footer-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}
.ef4-footer-grid-1 { grid-template-columns: minmax(0, 1fr); }
.ef4-footer-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ef4-footer-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ef4-footer-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ef4-footer-col {
  border: var(--ef4-footer-module-border-width) var(--ef4-footer-module-border-style) var(--ef4-footer-module-border-color);
  padding: var(--ef4-footer-module-padding);
  border-radius: var(--ef4-footer-module-border-radius);
  box-sizing: border-box;
}
.ef4-footer-bottom {
  background: var(--ef4-footer-bottom-bg);
  padding: var(--ef4-footer-bottom-padding-y) var(--ef4-footer-bottom-padding-x);
  border-top: var(--ef4-footer-bottom-border-top-width) var(--ef4-footer-bottom-border-top-style) var(--ef4-footer-bottom-border-top-color);
  border-bottom: var(--ef4-footer-bottom-border-bottom-width) var(--ef4-footer-bottom-border-bottom-style) var(--ef4-footer-bottom-border-bottom-color);
  box-sizing: border-box;
}
.ef4-footer-col--empty {
  min-height: 1px;
}
@media (max-width: 900px) {
  .ef4-footer-grid-2,
  .ef4-footer-grid-3,
  .ef4-footer-grid-4 {
    grid-template-columns: 1fr;
  }
}


/* EF4 PHASE 6.1A — TEMPLATE MOBILE FOUNDATION FIX
   Scope: mobile foundation only. Header/Footer/Mobile/Header engines are not otherwise modified. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

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

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .ef4-page,
  .ef4-main,
  .ef4-component,
  .ef4-position,
  .ef4-header,
  .ef4-header__inner,
  .ef4-top-header__inner,
  .ef4-footer,
  .ef4-footer-container,
  .ef4-footer-bottom-container {
    max-width: 100%;
  }

  .ef4-content-layout,
  .ef4-content-layout.has-left-desktop.has-right-desktop,
  .ef4-content-layout.has-left-desktop:not(.has-right-desktop),
  .ef4-content-layout.has-right-desktop:not(.has-left-desktop) {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .ef4-sidebar,
  .ef4-sidebar-left,
  .ef4-sidebar-right,
  .ef4-component {
    width: 100%;
    min-width: 0;
  }

  .ef4-top-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  .ef4-header__inner,
  .ef4-header__main-row,
  .ef4-header__layout,
  .ef4-header__layout--logo-left-menu-right,
  .ef4-header__layout--menu-left-logo-right,
  .ef4-header__layout--split-center-logo,
  .ef4-header__layout--menu-below,
  .ef4-header__layout--logo-left-widget-right,
  .ef4-header__layout--widget-left-logo-right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
    gap: 12px;
    text-align: center;
  }

  .ef4-header-logo,
  .ef4-header-menu-left,
  .ef4-header-menu-right,
  .ef4-header-menu-main,
  .ef4-header-widget-1,
  .ef4-header-widget-2 {
    width: 100%;
    min-width: 0;
    text-align: center !important;
  }

  .ef4-header-logo img,
  .ef4-header-logo__image {
    max-width: 100%;
    height: auto;
  }

  .ef4-header .mod-menu,
  .ef4-header ul.menu,
  .ef4-header ul.nav,
  .ef4-header-menu-left .mod-menu,
  .ef4-header-menu-left ul.menu,
  .ef4-header-menu-left ul.nav,
  .ef4-header-menu-right .mod-menu,
  .ef4-header-menu-right ul.menu,
  .ef4-header-menu-right ul.nav,
  .ef4-header-menu-main .mod-menu,
  .ef4-header-menu-main ul.menu,
  .ef4-header-menu-main ul.nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-wrap: anywhere;
  }

  .ef4-header .mod-menu > li,
  .ef4-header ul.menu > li,
  .ef4-header ul.nav > li {
    min-width: 0;
    max-width: 100%;
  }

  .ef4-header .mod-menu > li > a,
  .ef4-header ul.menu > li > a,
  .ef4-header ul.nav > li > a {
    white-space: normal;
  }

  .ef4-footer-grid,
  .ef4-footer-grid-1,
  .ef4-footer-grid-2,
  .ef4-footer-grid-3,
  .ef4-footer-grid-4 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .ef4-footer-col,
  .ef4-footer-col--empty {
    width: 100%;
    min-width: 0;
  }
}


/* EF4 PHASE 7.1D — MOBILE HEADER VISIBILITY + TOP GRID FIX
   Scope: visibility and mobile top grid only. No layout engine or menu behavior yet. */

/* Desktop default: mobile header hidden. */
.ef4-mobile-header {
  display: none;
}

/* Mobile breakpoint: desktop header hidden, mobile header visible. */
@media (max-width: 900px) {
  .ef4-header,
  .ef4-top-header,
  .ef4-main-header,
  .ef4-header-menu-row {
    display: none !important;
  }

  .ef4-mobile-header {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ef4-mobile-top-bar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ef4-mobile-top-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100%;
    max-width: 100%;
    gap: 0;
    align-items: stretch;
  }

  .ef4-mobile-top-slot,
  .ef4-mobile-top-1,
  .ef4-mobile-top-2,
  .ef4-mobile-top-3,
  .ef4-mobile-top-4 {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .ef4-mobile-top-slot img,
  .ef4-mobile-top-1 img,
  .ef4-mobile-top-2 img,
  .ef4-mobile-top-3 img,
  .ef4-mobile-top-4 img {
    max-width: 100%;
    height: auto;
  }
}


/* EF4 PHASE 7.2 — MOBILE MAIN BAR SKELETON LAYOUT
   Scope: Layout 1 skeleton only — [ Menu Toggle ] [ Logo ] [ mobile-module ].
   No final styling, no menu behavior, no layout 2/3 logic yet. */
@media (max-width: 900px) {
  .ef4-mobile-main {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 12px;
  }

  .ef4-mobile-menu-toggle {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  .ef4-mobile-logo {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    text-align: center;
  }

  .ef4-mobile-logo img,
  .ef4-mobile-logo__image {
    max-width: 100%;
    height: auto;
  }

  .ef4-mobile-module {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    text-align: right;
  }

  .ef4-mobile-module img {
    max-width: 100%;
    height: auto;
  }
}


/* EF4 PHASE 7.2B — MOBILE HEADER LAYOUT ENGINE
   Layout 1: [Menu] [Logo] [Module]
   Layout 2: [Logo] / [Menu] [Module]
   Layout 3: [Menu] [Module] / [Logo]
   Scope: layout structure only. No final styling or menu behavior. */
@media (max-width: 900px) {
  .ef4-mobile-header--layout_1 .ef4-mobile-main {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "toggle logo module";
    align-items: center;
    gap: 12px;
  }

  .ef4-mobile-header--layout_1 .ef4-mobile-menu-toggle { grid-area: toggle; justify-self: start; }
  .ef4-mobile-header--layout_1 .ef4-mobile-logo { grid-area: logo; justify-self: center; text-align: center; }
  .ef4-mobile-header--layout_1 .ef4-mobile-module { grid-area: module; justify-self: end; text-align: right; }

  .ef4-mobile-header--layout_2 .ef4-mobile-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo logo"
      "toggle module";
    align-items: center;
    gap: 10px 12px;
  }

  .ef4-mobile-header--layout_2 .ef4-mobile-logo { grid-area: logo; justify-self: center; text-align: center; }
  .ef4-mobile-header--layout_2 .ef4-mobile-menu-toggle { grid-area: toggle; justify-self: start; }
  .ef4-mobile-header--layout_2 .ef4-mobile-module { grid-area: module; justify-self: end; text-align: right; }

  .ef4-mobile-header--layout_3 .ef4-mobile-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "toggle module"
      "logo logo";
    align-items: center;
    gap: 10px 12px;
  }

  .ef4-mobile-header--layout_3 .ef4-mobile-menu-toggle { grid-area: toggle; justify-self: start; }
  .ef4-mobile-header--layout_3 .ef4-mobile-module { grid-area: module; justify-self: end; text-align: right; }
  .ef4-mobile-header--layout_3 .ef4-mobile-logo { grid-area: logo; justify-self: center; text-align: center; }

  .ef4-mobile-main > * {
    min-width: 0;
  }

  .ef4-mobile-logo img,
  .ef4-mobile-logo__image,
  .ef4-mobile-module img {
    max-width: 100%;
    height: auto;
  }
}


/* EF4 PHASE 7.3A — MOBILE BOTTOM MODULE POSITION / SKELETON
   Scope: mobile-only visibility + skeleton render.
   Position: below Mobile Header and above slideshow. */
.ef4-mobile-bottom-module {
  display: none;
}

@media (max-width: 900px) {
  .ef4-mobile-bottom-module {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ef4-mobile-bottom-module__inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ef4-mobile-bottom-module img,
  .ef4-mobile-bottom-module svg,
  .ef4-mobile-bottom-module video,
  .ef4-mobile-bottom-module iframe {
    max-width: 100%;
    height: auto;
  }
}


/* EF4 PHASE 7.3C4 — MOBILE BREAKPOINT CSS OWNER FIX
   New single owner for Desktop Header / Mobile Header / Mobile Bottom Module visibility
   is the dynamic style generated from ef4_mobile_breakpoint in index.php.
   This block neutralizes older hardcoded 900px visibility rules from 7.1D / 7.3A. */

/* Base state outside selected dynamic breakpoint. */
.ef4-mobile-header,
.ef4-mobile-bottom-module {
  display: none !important;
}

/* Important:
   The selected breakpoint dynamic <style> in index.php is loaded after template.css
   and re-enables these elements only below the selected Mobile Breakpoint. */


/* EF4 PHASE 7.3C6 — DESKTOP HEADER RETURN CSS OWNER FIX
   Neutralizes old hardcoded 900px desktop-header hiding rules.
   The selected Mobile Breakpoint dynamic style in index.php remains the only owner
   that hides Desktop Header and shows Mobile Header / Mobile Bottom Module. */

/* Default state above selected dynamic breakpoint:
   desktop header visible, mobile-only systems hidden. */
.ef4-header {
  display: block !important;
}

.ef4-top-header,
.ef4-main-header,
.ef4-header-menu-row {
  display: block !important;
}

.ef4-mobile-header,
.ef4-mobile-bottom-module {
  display: none !important;
}


/* EF4 PHASE 7.4A — MOBILE BOTTOM MODULE BASIC STYLING CONTROLS
   Styling owner: css/template.css through EF4 :root tokens.
   Visibility owner remains the dynamic Mobile Breakpoint style in index.php. */
.ef4-mobile-bottom-module {
  background: var(--ef4-mobile-bottom-module-bg, #111827);
  min-height: var(--ef4-mobile-bottom-module-min-height, 48px);
  box-sizing: border-box;
}

.ef4-mobile-bottom-module__inner {
  padding: var(--ef4-mobile-bottom-module-padding-y, 10px) var(--ef4-mobile-bottom-module-padding-x, 12px);
  box-sizing: border-box;
}


/* EF4 PHASE 7.4B — MOBILE MENU TOGGLE SKELETON
   Scope: visual placeholder only. No menu engine, offcanvas, dropdown, styling system or animation. */
.ef4-mobile-toggle-placeholder {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: currentColor;
  font: inherit;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: default;
}

.ef4-mobile-toggle-placeholder span {
  display: block;
  font-size: 28px;
  line-height: 1;
}


/* EF4 PHASE 7.4D — MOBILE TOGGLE GHOST ELEMENT CLEANUP
   Scope: only cleanup inside .ef4-mobile-menu-toggle. */
.ef4-mobile-menu-toggle > .moduletable,
.ef4-mobile-menu-toggle > .moduletable_menu,
.ef4-mobile-menu-toggle > .module,
.ef4-mobile-menu-toggle > jdoc\:include {
  display: none !important;
}

.ef4-mobile-menu-toggle {
  overflow: visible;
}


/* EF4 PHASE 7.4F — DUPLICATE MOBILE TOGGLE OWNER CLEANUP
   Scope: remove old duplicate button. Keep only div.ef4-mobile-menu-toggle > ☰ placeholder. */
button.ef4-mobile-menu-toggle {
  display: none !important;
}

div.ef4-mobile-menu-toggle {
  display: block;
}


/* EF4 PHASE 7.5A — MOBILE HEADER BASIC STYLING CONTROLS
   Styling owner: css/template.css through EF4 :root tokens.
   Does not touch menu behavior, EngageBox class or Mobile Bottom Module. */
.ef4-mobile-top-bar {
  background: var(--ef4-mobile-top-bar-bg, #111827);
}

.ef4-mobile-header {
  background: var(--ef4-mobile-header-bg, #ffffff);
}

.ef4-mobile-main {
  padding: var(--ef4-mobile-header-padding-y, 10px) var(--ef4-mobile-header-padding-x, 12px);
}

.ef4-mobile-main {
    background: var(--ef4-mobile-menu-module-bar-bg, transparent);
}

.ef4-mobile-logo img,
.ef4-mobile-logo__image {
  max-width: var(--ef4-mobile-logo-width, 150px);
  width: auto;
  height: auto;
}

.ef4-mobile-toggle-placeholder {
  color: var(--ef4-mobile-toggle-color, #111827);
}

.ef4-mobile-toggle-placeholder span {
  font-size: var(--ef4-mobile-toggle-size, 28px);
}


/* EF4 PHASE 7.5C2 — MOBILE SECTION BOTTOM BORDERS SAFE IMPLEMENTATION
   Only border-bottom. No border-radius. No new helper functions. */
.ef4-mobile-top-bar {
  border-bottom: var(--ef4-mobile-top-bar-border-bottom-size, 0px) var(--ef4-mobile-top-bar-border-bottom-style, solid) var(--ef4-mobile-top-bar-border-bottom-color, #e5e7eb);
  box-sizing: border-box;
}

.ef4-mobile-main {
  border-bottom: var(--ef4-mobile-main-border-bottom-size, 0px) var(--ef4-mobile-main-border-bottom-style, solid) var(--ef4-mobile-main-border-bottom-color, #e5e7eb);
  box-sizing: border-box;
}

.ef4-mobile-bottom-module {
  border-bottom: var(--ef4-mobile-bottom-module-border-bottom-size, 0px) var(--ef4-mobile-bottom-module-border-bottom-style, solid) var(--ef4-mobile-bottom-module-border-bottom-color, #e5e7eb);
  box-sizing: border-box;
}



/* EF4 PHASE 8.2C — Desktop Header Bottom Borders
   Owners: .ef4-top-header and .ef4-header.
   Only border-bottom; no border-radius; no mobile/footer/layout changes. */

/* EF4 PHASE 8.2D1 NATIVE HEADER MENU VISIBILITY POSITION PRESERVE FIX
   Keep header menu module positions rendered. When native menu is disabled,
   hide only the standard Joomla/native menu markup, so external menu modules
   published in the same slots can still render. */
.ef4-header--native-menu-disabled .ef4-header-menu-main > ul,
.ef4-header--native-menu-disabled .ef4-header-menu-left > ul,
.ef4-header--native-menu-disabled .ef4-header-menu-right > ul,
.ef4-header--native-menu-disabled .ef4-header-menu-main > .mod-menu,
.ef4-header--native-menu-disabled .ef4-header-menu-left > .mod-menu,
.ef4-header--native-menu-disabled .ef4-header-menu-right > .mod-menu,
.ef4-header--native-menu-disabled .ef4-header-menu-main > .navbar-nav,
.ef4-header--native-menu-disabled .ef4-header-menu-left > .navbar-nav,
.ef4-header--native-menu-disabled .ef4-header-menu-right > .navbar-nav,
.ef4-header--native-menu-disabled .ef4-header-menu-main > .menu,
.ef4-header--native-menu-disabled .ef4-header-menu-left > .menu,
.ef4-header--native-menu-disabled .ef4-header-menu-right > .menu {
    display: none !important;
}

/* EF4 PHASE 8.2D3B — Header Menu Slot Preset-Aware Alignment Fix
   Owner: desktop header menu slot for the logo-left / menu-right preset.
   Purpose: external modules published in header-menu-main/header-menu-right must align
   to the right in the same visual slot as the native menu. No new control. */
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-main,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: stretch;
  text-align: right;
  width: 100%;
}

.ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > .moduletable,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > .module,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > .moduletable_menu,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > .moduletable,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > .module,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > .moduletable_menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  width: 100%;
}

.ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > *,
.ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > * {
  margin-left: auto;
}

/* EF4 PHASE 8.2E3B — Header Menu Slot Tablet Alignment Fix
   Owner: header-menu-main/header-menu-right slot inside Logo Left / Menu Right preset.
   Purpose: on tablet-sized desktop header layouts, external modules published in the menu slot
   must follow the same centered behavior as the native menu. Mobile Header, Footer and Layout
   Engine are not modified. */
@media (max-width: 1200px) {
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right {
    justify-content: center;
    justify-self: stretch;
    text-align: center;
    width: 100%;
  }

  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > .moduletable,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > .module,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > .moduletable_menu,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > .moduletable,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > .module,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > .moduletable_menu {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main .mod-menu,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main ul.menu,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main ul.nav,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right .mod-menu,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right ul.menu,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right ul.nav {
    justify-content: center;
  }

  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-main > *,
  .ef4-header__layout--logo-left-menu-right .ef4-header-menu-right > * {
    margin-left: auto;
    margin-right: auto;
  }
}

/* EF4 PHASE 8.2F2 — Tablet Sticky Header CSS Fix
   Scope: desktop/tablet Header Engine only.
   Keeps Mobile Header, Footer, Layout Engine and Menu Engine untouched.
   Reason: on tablet width the sticky active class is applied, but the header container can still scroll with the page.
   The fallback below pins only the active desktop/tablet header in the tablet range. */
@media (min-width: 769px) and (max-width: 900px) {
  .ef4-header--sticky-enabled {
    top: var(--ef4-sticky-header-offset, 0px);
    z-index: var(--ef4-sticky-header-z-index, 1000);
  }

  .ef4-header--sticky-enabled.is-ef4-sticky-active {
    position: fixed !important;
    top: var(--ef4-sticky-header-offset, 0px) !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--ef4-sticky-header-z-index, 1000);
  }
}

/* EF4 PHASE 8.4G2 — Footer Responsive Layout Controls
   Owner: .ef4-footer-grid.
   Default Auto preserves the existing responsive behavior.
   Overrides are applied only when the user explicitly selects 1 or 2 columns. */
@media (min-width: 769px) and (max-width: 900px) {
  .ef4-footer-grid.ef4-footer-tablet-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ef4-footer-grid.ef4-footer-tablet-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .ef4-footer-grid.ef4-footer-mobile-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ef4-footer-grid.ef4-footer-mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* EF4 PHASE 9.1B1 — Navigation Alignment Container + Language Fix
   Scope: Desktop Navigation Engine only.
   Owner: .ef4-header-menu-main inside desktop .ef4-header.
   Container-safe rule: do not force the menu owner to browser width.
   Does not target mobile header, future mobile menu module, dropdown or mega menu owners. */
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main {
  display: flex;
  align-items: center;
  max-width: 100%;
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main.ef4-header-width-area {
  margin-inline: auto;
  width: min(100% - 32px, var(--ef4-menu-row-container-width));
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main > .moduletable,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main > .module,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main > .moduletable_menu {
  display: flex;
  align-items: center;
  max-width: 100%;
}

body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main {
  justify-content: flex-start;
  text-align: left;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main > .moduletable,
body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main > .module,
body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main > .moduletable_menu {
  justify-content: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main .mod-menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main ul.menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-left .ef4-header .ef4-header-menu-main ul.nav {
  justify-content: flex-start;
}

body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main {
  justify-content: center;
  text-align: center;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main > .moduletable,
body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main > .module,
body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main > .moduletable_menu {
  justify-content: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main .mod-menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main ul.menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-center .ef4-header .ef4-header-menu-main ul.nav {
  justify-content: center;
}

body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main {
  justify-content: flex-end;
  text-align: right;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main > .moduletable,
body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main > .module,
body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main > .moduletable_menu {
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main .mod-menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main ul.menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-right .ef4-header .ef4-header-menu-main ul.nav {
  justify-content: flex-end;
}

body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main {
  justify-content: stretch;
  text-align: center;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main > .moduletable,
body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main > .module,
body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main > .moduletable_menu {
  justify-content: stretch;
  text-align: center;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main .mod-menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main ul.menu,
body.ef4-navigation-engine-enabled.ef4-nav-align-space_between .ef4-header .ef4-header-menu-main ul.nav {
  justify-content: space-between;
  width: 100%;
}


/* EF4 PHASE 9.1C / 9.1E1B — Navigation Typography Controls + Parent Item Owner Fix
   Scope: Desktop Navigation top-level items only.
   Includes both normal top-level links and parent/deeper top-level items rendered as span/button.
   Dropdown submenu items remain excluded because only direct children of the top-level menu container are targeted. */
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button {
    font-size: var(--ef4-navigation-font-size, var(--ef4-menu-font-size, 15px));
    font-weight: var(--ef4-navigation-font-weight, var(--ef4-menu-font-weight, 600));
    text-transform: var(--ef4-navigation-text-transform, var(--ef4-menu-text-transform, none));
    letter-spacing: var(--ef4-navigation-letter-spacing, var(--ef4-menu-letter-spacing, 0px));
}


/* EF4 PHASE 9.1D / 9.1E1B — Navigation Color Controls + Parent Item Owner Fix */
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button {
    color: var(--ef4-navigation-link-color, var(--ef4-header-menu-text-color, inherit));
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button:focus {
    color: var(--ef4-navigation-link-hover-color, var(--ef4-header-menu-hover-color, currentColor));
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > button {
    color: var(--ef4-navigation-link-active-color, var(--ef4-navigation-link-hover-color, currentColor));
}

/* EF4 PHASE 9.1E / 9.1E1B — Navigation Spacing Controls + Parent Item Owner Fix
   Scope: Desktop Navigation top-level items only.
   Padding is applied to top-level links/spans/buttons; gap is applied to top-level menu containers.
   Mobile Menu, external Joomla menu modules, Dropdown and Mega Menu are not targeted. */
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav {
    gap: var(--ef4-navigation-item-gap, 0px);
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button {
    padding-inline: var(--ef4-navigation-padding-x, 16px);
    padding-block: var(--ef4-navigation-padding-y, 10px);
}


/* EF4 PHASE 9.1F — Navigation Background & Radius Controls
   Scope: Desktop Navigation top-level clickable surfaces only.
   Parent/deeper items rendered as a/span/button are included.
   Dropdown, Mobile Menu, Joomla menu modules and Mega Menu are not targeted. */
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button {
    background: var(--ef4-navigation-item-background, transparent);
    border-radius: var(--ef4-navigation-item-radius, 0px);
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button:focus {
    background: var(--ef4-navigation-item-hover-background, transparent);
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > button {
    background: var(--ef4-navigation-item-active-background, var(--ef4-navigation-item-hover-background, transparent));
}


/* EF4 PHASE 9.1G — Navigation Border Controls
   Scope: Desktop Navigation top-level clickable surfaces only.
   Uses the same safe owner as Background & Radius.
   Dropdown, Mobile Menu, Joomla menu modules and Mega Menu are not targeted. */
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button {
    border-width: var(--ef4-navigation-border-width, 0px);
    border-style: var(--ef4-navigation-border-style, solid);
    border-color: var(--ef4-navigation-border-color, transparent);
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > button:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > button:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > a:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > span:focus,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button:hover,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > button:focus {
    border-color: var(--ef4-navigation-border-hover-color, var(--ef4-navigation-border-color, transparent));
}

body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.current > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.current > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.active > button,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > a,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > span,
body.ef4-navigation-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.current > button {
    border-color: var(--ef4-navigation-border-active-color, var(--ef4-navigation-border-hover-color, var(--ef4-navigation-border-color, transparent)));
}

/* EF4 PHASE 9.2C — Dropdown Width Controls
   Scope: Standard desktop dropdown containers only.
   Does not target top-level items, Mobile Menu, Joomla menu module class system or future Mega Menu Engine. */
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li > ul,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li > ul,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li > ul {
    box-sizing: border-box;
}

body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main .mod-menu > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main .mod-menu > li > ul,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.menu > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.menu > li > ul,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.nav > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.nav > li > ul {
    width: auto;
    min-width: max-content;
}

body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main .mod-menu > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main .mod-menu > li > ul,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.menu > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.menu > li > ul,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.nav > li > .mod-menu__sub,
body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.nav > li > ul {
    width: var(--ef4-dropdown-custom-width, 240px);
    min-width: var(--ef4-dropdown-custom-width, 240px);
}


/* EF4 PHASE 9.2D — Dropdown Background & Radius Controls
   Scope: First-level standard desktop dropdown panel and item clickable surfaces only.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul {
    background: var(--ef4-dropdown-panel-background, transparent);
    border-radius: var(--ef4-dropdown-panel-radius, 0);
    overflow: visible;
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: var(--ef4-dropdown-item-background, transparent);
    border-radius: var(--ef4-dropdown-item-radius, 0);
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover {
    background: var(--ef4-dropdown-item-hover-background, var(--ef4-dropdown-item-background, transparent));
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a {
    background: var(--ef4-dropdown-item-active-background, var(--ef4-dropdown-item-hover-background, var(--ef4-dropdown-item-background, transparent)));
}


/* EF4 PHASE 9.2E — Dropdown Typography & Color Controls
   Scope: First-level standard desktop dropdown item text only.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button {
    font-size: var(--ef4-dropdown-font-size, 14px);
    font-weight: var(--ef4-dropdown-font-weight, 400);
    color: var(--ef4-dropdown-text-color, inherit);
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover {
    color: var(--ef4-dropdown-hover-color, var(--ef4-dropdown-text-color, inherit));
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a {
    color: var(--ef4-dropdown-active-color, var(--ef4-dropdown-hover-color, var(--ef4-dropdown-text-color, inherit)));
}



/* EF4 PHASE 9.2C1B — Dropdown Visibility Hover Foundation
   Scope: Standard desktop dropdown visibility only.
   Enables first-level dropdown panels inside .ef4-header-menu-main when Dropdown Engine is enabled.
   Does not style colors/typography/backgrounds and does not target Mobile, Joomla module menu class system or future Mega Menu Engine. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li {
    position: relative;
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10010;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6):focus-within > ul {
    display: block;
  }
}


/* EF4 PHASE 9.2G2 — Dropdown Panel Offset Control
   Scope: First-level standard desktop dropdown panel only.
   Adds vertical distance from the parent item and a hover bridge so the dropdown does not close while moving the cursor.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul {
    top: calc(100% + var(--ef4-dropdown-panel-offset, 0px));
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6)::after,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6)::after,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6)::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: var(--ef4-dropdown-panel-offset, 0px);
    pointer-events: auto;
    z-index: 10009;
  }
}

/* EF4 PHASE 9.2G1 — Dropdown Panel Padding X/Y Controls
   Scope: First-level standard desktop dropdown panel only.
   Does not target dropdown items, top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul {
    padding: var(--ef4-dropdown-panel-padding-y, 0) var(--ef4-dropdown-panel-padding-x, 0);
}

/* EF4 PHASE 9.2F — Dropdown Spacing & Border Controls
   Scope: First-level standard desktop dropdown item clickable surfaces only.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button {
    padding: var(--ef4-dropdown-item-padding-y, 10px) var(--ef4-dropdown-item-padding-x, 14px);
    border-width: var(--ef4-dropdown-item-border-width, 0);
    border-style: var(--ef4-dropdown-item-border-style, none);
    border-color: var(--ef4-dropdown-item-border-color, transparent);
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li + li,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li + li,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li + li,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li + li,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li + li,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li + li {
    margin-top: var(--ef4-dropdown-item-gap, 0);
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li > button:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > a:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > span:hover,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li > button:hover {
    border-color: var(--ef4-dropdown-item-hover-border-color, var(--ef4-dropdown-item-border-color, transparent));
}

body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub > li.current > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.active > a,
body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul > li.current > a {
    border-color: var(--ef4-dropdown-item-active-border-color, var(--ef4-dropdown-item-hover-border-color, var(--ef4-dropdown-item-border-color, transparent)));
}


/* EF4 PHASE 9.2H1 — Nested Dropdown Level 2 Visibility Foundation
   Scope: Standard desktop nested dropdown level 2 only, inside non-mega top-level dropdowns.
   Uses the existing Dropdown Engine variables so Level 2 inherits current dropdown styling.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li {
    position: relative;
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10020;
    margin: 0;
    padding: var(--ef4-dropdown-panel-padding-y, 0) var(--ef4-dropdown-panel-padding-x, 0);
    list-style: none;
    box-sizing: border-box;
    background: var(--ef4-dropdown-panel-background, transparent);
    border-radius: var(--ef4-dropdown-panel-radius, 0);
    overflow: visible;
  }

  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul {
    width: auto;
    min-width: max-content;
  }

  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > ul,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > ul {
    width: var(--ef4-dropdown-custom-width, 240px);
    min-width: var(--ef4-dropdown-custom-width, 240px);
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li:focus-within > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:hover > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:focus-within > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:hover > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li:focus-within > ul {
    display: block;
  }
}


/* EF4 PHASE 9.2H2B — Nested Dropdown Style Inheritance Fix
   Scope: All standard desktop dropdown item levels inside non-mega dropdowns.
   Purpose: Level 2 / Level 3 dropdown items inherit the same Dropdown Engine typography,
   colors, backgrounds, padding, radius and border as Level 1 dropdown items.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: var(--ef4-dropdown-font-size, 14px);
    font-weight: var(--ef4-dropdown-font-weight, 400);
    color: var(--ef4-dropdown-text-color, inherit);
    padding: var(--ef4-dropdown-item-padding-y, 10px) var(--ef4-dropdown-item-padding-x, 14px);
    background: var(--ef4-dropdown-item-background, transparent);
    border-radius: var(--ef4-dropdown-item-radius, 0);
    border-width: var(--ef4-dropdown-item-border-width, 0);
    border-style: var(--ef4-dropdown-item-border-style, none);
    border-color: var(--ef4-dropdown-item-border-color, transparent);
    text-decoration: none;
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span:hover,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button:hover {
    color: var(--ef4-dropdown-hover-color, var(--ef4-dropdown-text-color, inherit));
    background: var(--ef4-dropdown-item-hover-background, var(--ef4-dropdown-item-background, transparent));
    border-color: var(--ef4-dropdown-item-hover-border-color, var(--ef4-dropdown-item-border-color, transparent));
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.active > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.current > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.active > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.current > button {
    color: var(--ef4-dropdown-active-color, var(--ef4-dropdown-hover-color, var(--ef4-dropdown-text-color, inherit)));
    background: var(--ef4-dropdown-item-active-background, var(--ef4-dropdown-item-hover-background, var(--ef4-dropdown-item-background, transparent)));
    border-color: var(--ef4-dropdown-item-active-border-color, var(--ef4-dropdown-item-hover-border-color, var(--ef4-dropdown-item-border-color, transparent)));
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li + li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li + li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li + li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li + li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li + li,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li + li {
    margin-top: var(--ef4-dropdown-item-gap, 0);
  }
}

/* EF4 PHASE 9.2H3B — Nested Dropdown Manual Edge Direction Foundation
   Scope: Standard desktop dropdowns only, inside non-mega top-level dropdowns.
   Purpose: allows manual left-opening dropdown/flyout direction for items near the right browser edge.
   Usage: add class ef4-dropdown-open-left to the menu item container when possible, or to the item link/span/button when Joomla outputs the class there.
   Does not target top-level Navigation styling, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6).ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6).ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6).ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6).ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6).ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6).ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > span.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > span.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > button.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > button.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > span.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > span.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > button.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > button.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > span.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > span.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > button.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > button.ef4-dropdown-open-left ~ ul {
    left: auto;
    right: 0;
  }

  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ ul,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ .mod-menu__sub,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ ul {
    left: auto;
    right: 100%;
  }
}


/* EF4 PHASE 9.2H4B — Dropdown Text Alignment Control
   Scope: Standard desktop dropdown item clickable surfaces on Level 1 / Level 2 / Level 3.
   Does not target top-level Navigation, Mobile Menu, Joomla module menu class system or future Mega Menu Engine. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > button,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > span,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > button {
    text-align: var(--ef4-dropdown-text-align, left);
  }
}


/* EF4 PHASE 9.3C1 — Mega Menu Trigger Class Foundation
   Scope: desktop Mega trigger classes only. No controls yet.
   Activation classes: mega, mega-full, mega-2, mega-3, mega-4, mega-5, mega-6.
   Mega is desktop-only and isolated from standard Dropdown Engine and Mobile Menu. */
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-full,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-2,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-3,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-4,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-5,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-6,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-full,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-2,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-3,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-4,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-5,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-6,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-full,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-2,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-3,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-4,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-5,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-6 {
    position: relative;
}

body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-full > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-2 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-3 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-4 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-5 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-6 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-full > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-2 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-3 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-4 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-5 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-6 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-full > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-2 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-3 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-4 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-5 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-6 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-full > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-2 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-3 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-4 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-5 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-6 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-full > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-2 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-3 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-4 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-5 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-6 > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-full > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-2 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-3 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-4 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-5 > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-6 > ul {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10030;
    display: none;
    visibility: hidden;
    opacity: 0;
}

body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-full:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-2:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-3:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-4:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-5:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-6:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-full:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-2:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-3:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-4:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-5:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li.mega-6:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-full:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-2:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-3:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-4:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-5:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-6:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-full:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-2:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-3:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-4:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-5:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li.mega-6:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-full:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-2:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-3:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-4:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-5:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-6:hover > .mod-menu__sub,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-full:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-2:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-3:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-4:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-5:hover > ul,
body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li.mega-6:hover > ul {
    display: grid;
    visibility: visible;
    opacity: 1;
}


/* EF4 PHASE 9.3C2E — Mega Detection Owner Fix
   Scope: desktop Mega Menu only.
   Real Joomla markup places mega classes on the top-level <a> link, not on the <li> item:
   <li class="deeper parent"><a class="mega-3">...</a><ul>...</ul></li>
   This block targets the real A-based owner and keeps the standard Dropdown Engine intact. */
@media (min-width: 769px) {
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li:has(> a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6)) {
    position: relative;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10040;
    display: none;
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
    width: min(92vw, 720px) !important;
    min-width: min(92vw, 720px) !important;
    max-width: 92vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: start;
    gap: 18px;
    padding: 20px;
    margin: 0;
    list-style: none;
    overflow: visible;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li:hover > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul),
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li:focus-within > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a.mega-full + :is(.mod-menu__sub, ul) {
    width: min(96vw, 1200px) !important;
    min-width: min(96vw, 1200px) !important;
    max-width: 96vw;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a.mega-2 + :is(.mod-menu__sub, ul) {
    width: min(92vw, 560px) !important;
    min-width: min(92vw, 560px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-3) + :is(.mod-menu__sub, ul) {
    width: min(92vw, 720px) !important;
    min-width: min(92vw, 720px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a.mega-4 + :is(.mod-menu__sub, ul) {
    width: min(94vw, 920px) !important;
    min-width: min(94vw, 920px) !important;
    max-width: 94vw;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a.mega-5 + :is(.mod-menu__sub, ul) {
    width: min(96vw, 1100px) !important;
    min-width: min(96vw, 1100px) !important;
    max-width: 96vw;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a.mega-6 + :is(.mod-menu__sub, ul) {
    width: min(96vw, 1200px) !important;
    min-width: min(96vw, 1200px) !important;
    max-width: 96vw;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li {
    min-width: 0;
    list-style: none;
    margin: 0;
    box-sizing: border-box;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li > :is(a, span, button) {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li > :is(.mod-menu__sub, ul) {
    position: static;
    display: block;
    visibility: visible;
    opacity: 1;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 8px 0 0;
    list-style: none;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
  }
}

/* EF4 PHASE 9.3D1 — Mega Background Controls
   Scope: desktop Mega Menu panel and direct Mega item surfaces only.
   Keeps Dropdown Engine styling isolated and does not target mobile or future Mobile Menu owners. */
@media (min-width: 769px) {
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) {
    background: var(--ef4-mega-panel-background) !important;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li > :is(a, span, button) {
    background: var(--ef4-mega-item-background) !important;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li > :is(a, span, button):hover {
    background: var(--ef4-mega-item-hover-background) !important;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li.active > :is(a, span, button),
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li.current > :is(a, span, button) {
    background: var(--ef4-mega-item-active-background) !important;
  }
}


/* EF4 PHASE 9.3D2B — Mega Item Alignment / Box Model Fix
   Scope: desktop Mega Menu panel and direct Mega item surfaces only.
   Purpose: keep all Mega grid items aligned by forcing border-box sizing and full-width clickable surfaces.
   Does not target Dropdown Engine, top-level Navigation, Mobile Menu or Live Preview. */
@media (min-width: 769px) {
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul),
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) * {
    box-sizing: border-box;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    justify-self: stretch;
    align-self: stretch;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li > :is(a, span, button) {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    display: block;
  }
}


/* EF4 PHASE 9.3D2D — Mega First Item Offset Fix
   Scope: desktop Mega Menu direct grid items only.
   Purpose: neutralize inherited dropdown sibling margins / list offsets on direct Mega panel items
   when Mega classes are placed on the top-level link instead of the <li>.
   Does not target Dropdown Engine, top-level Navigation, Mobile Menu or Live Preview. */
@media (min-width: 769px) {
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) {
    padding-left: 20px;
    padding-right: 20px;
    list-style: none !important;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li,
  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li + li {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li::marker {
    content: none;
  }

  body.ef4-mega-menu-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li > a:is(.mega, .mega-full, .mega-2, .mega-3, .mega-4, .mega-5, .mega-6) + :is(.mod-menu__sub, ul) > li > :is(a, span, button) {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* EF4 PHASE BLOG 2.3B2 — Category Page Outer Spacing Frontend Output
   Owner scope: Joomla Category Blog root only. No Layout Engine, Article Engine, Typography, Colors or Live Preview owners. */
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog {
  margin-top: var(--ef4-blog-page-margin-top, 0px);
  margin-bottom: var(--ef4-blog-page-margin-bottom, 0px);
}

/* EF4 PHASE BLOG 1.0C — Blog Engine First Frontend Output
   Owner scope: Joomla Category Blog only. No Typography, Colors, Layout, Header/Footer, Navigation, Dropdown, Mega or Mobile owners. */
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ef4-blog-article-gap, 24px);
}

body.ef4-blog-engine-enabled.ef4-blog-cards-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item {
  border-radius: var(--ef4-blog-card-radius, 12px);
  padding: var(--ef4-blog-card-padding, 24px);
  box-shadow: 0 var(--ef4-blog-card-shadow, 0px) calc(var(--ef4-blog-card-shadow, 0px) * 3) rgba(0, 0, 0, 0.12);
  overflow: hidden;
}


/* EF4 PHASE BLOG 2.2B2 — Blog Item Content Padding Frontend Output
   Owner scope: content area inside Joomla Category Blog items only. Keeps image/card padding owners untouched. */
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .item-content {
  padding: var(--ef4-blog-content-padding-y, 0px) var(--ef4-blog-content-padding-x, 0px);
  box-sizing: border-box;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .item-image {
  margin: 0 0 var(--ef4-blog-article-gap, 24px) 0;
  border-radius: var(--ef4-blog-image-radius, 10px);
  overflow: hidden;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .item-image img {
  display: block;
  width: 100%;
  height: var(--ef4-blog-image-height, 220px);
  object-fit: cover;
  border-radius: var(--ef4-blog-image-radius, 10px);
}

/* EF4 PHASE BLOG 1.0D — Blog Engine Meta / Read More / Grid Frontend Output
   Owner scope: Joomla Category Blog only. Keeps Article Detail View, Typography, Colors and Layout Engine untouched. */
/* EF4 PHASE BLOG 1.0D2 — Leading Items Grid Isolation Fix
   Joomla leading items remain full-width. Column controls affect only the normal blog items container. */
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__items.items-leading {
  grid-template-columns: 1fr;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__items.blog-items:not(.items-leading) {
  grid-template-columns: repeat(var(--ef4-blog-columns-mobile, 1), minmax(0, 1fr));
}

@media (min-width: 768px) {
  body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__items.blog-items:not(.items-leading) {
    grid-template-columns: repeat(var(--ef4-blog-columns-tablet, 2), minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__items.blog-items:not(.items-leading) {
    grid-template-columns: repeat(var(--ef4-blog-columns-desktop, 3), minmax(0, 1fr));
  }
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .readmore {
  text-align: var(--ef4-blog-readmore-align, left);
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .readmore a,
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .readmore .btn {
  border-radius: var(--ef4-blog-readmore-radius, 6px);
}

body.ef4-blog-engine-enabled.ef4-blog-readmore-button.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .readmore a,
body.ef4-blog-engine-enabled.ef4-blog-readmore-button.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .readmore .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ef4-blog-readmore-padding-y, 10px) var(--ef4-blog-readmore-padding-x, 18px);
  text-decoration: none;
}

body.ef4-blog-engine-enabled.ef4-blog-hide-readmore.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .readmore {
  display: none !important;
}

body.ef4-blog-engine-enabled.ef4-blog-hide-author.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .createdby,
body.ef4-blog-engine-enabled.ef4-blog-hide-author.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .author {
  display: none !important;
}

body.ef4-blog-engine-enabled.ef4-blog-hide-category.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .category-name,
body.ef4-blog-engine-enabled.ef4-blog-hide-category.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .category {
  display: none !important;
}

body.ef4-blog-engine-enabled.ef4-blog-hide-date.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .published,
body.ef4-blog-engine-enabled.ef4-blog-hide-date.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .created,
body.ef4-blog-engine-enabled.ef4-blog-hide-date.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .modified {
  display: none !important;
}


/* EF4 PHASE ARTICLE 1.0C — Article Engine First Frontend Output
   Owner scope: Joomla Article View only. No Blog Engine, Typography, Colors, Header/Footer, Navigation, Dropdown, Mega or Mobile owners. */
/* EF4 PHASE ARTICLE 1.0D — Article Surface Controls
   Owner scope: .com-content-article.item-page surface only. */
/* EF4 PHASE ARTICLE 1.2B2 — Article Container Outer Spacing Frontend Output
   Owner scope: Joomla Article View container only. */
body.ef4-article-engine-enabled .com-content-article.item-page {
  max-width: var(--ef4-article-content-max-width, 1000px);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--ef4-article-container-margin-top, 0px);
  margin-bottom: var(--ef4-article-container-margin-bottom, 0px);
  background: var(--ef4-article-surface-bg-color, #ffffff);
  padding: var(--ef4-article-surface-padding, 0px);
  border-radius: var(--ef4-article-surface-radius, 0px);
  box-shadow: 0 var(--ef4-article-surface-shadow, 0px) calc(var(--ef4-article-surface-shadow, 0px) * 3) rgba(0, 0, 0, 0.12);
  overflow: hidden;
  box-sizing: border-box;
}

body.ef4-article-engine-enabled .com-content-article.item-page .item-image {
  margin-bottom: var(--ef4-article-image-margin-bottom, 24px);
  border-radius: var(--ef4-article-image-radius, 0px);
  overflow: hidden;
}

body.ef4-article-engine-enabled .com-content-article.item-page .item-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--ef4-article-image-radius, 0px);
}

/* EF4 PHASE ARTICLE 1.3B2 — Full Article Image Frontend Output
   Owner scope: Joomla Article View full image only. No Blog Engine, Typography, Colors, Layout, Live Preview or global image owners. */
body.ef4-article-engine-enabled.ef4-article-hide-full-image .com-content-article.item-page .item-image {
  display: none !important;
}

body.ef4-article-engine-enabled.ef4-article-full-image-align-left .com-content-article.item-page .item-image {
  text-align: left;
}

body.ef4-article-engine-enabled.ef4-article-full-image-align-left .com-content-article.item-page .item-image img {
  margin-left: 0;
  margin-right: auto;
}

body.ef4-article-engine-enabled.ef4-article-full-image-align-center .com-content-article.item-page .item-image {
  text-align: center;
}

body.ef4-article-engine-enabled.ef4-article-full-image-align-center .com-content-article.item-page .item-image img {
  margin-left: auto;
  margin-right: auto;
}

body.ef4-article-engine-enabled.ef4-article-full-image-align-right .com-content-article.item-page .item-image {
  text-align: right;
}

body.ef4-article-engine-enabled.ef4-article-full-image-align-right .com-content-article.item-page .item-image img {
  margin-left: auto;
  margin-right: 0;
}

body.ef4-article-engine-enabled.ef4-article-hide-author .com-content-article.item-page .article-info .createdby,
body.ef4-article-engine-enabled.ef4-article-hide-author .com-content-article.item-page .article-info .author {
  display: none !important;
}

body.ef4-article-engine-enabled.ef4-article-hide-category .com-content-article.item-page .article-info .category-name,
body.ef4-article-engine-enabled.ef4-article-hide-category .com-content-article.item-page .article-info .category {
  display: none !important;
}

body.ef4-article-engine-enabled.ef4-article-hide-date .com-content-article.item-page .article-info .published,
body.ef4-article-engine-enabled.ef4-article-hide-date .com-content-article.item-page .article-info .created,
body.ef4-article-engine-enabled.ef4-article-hide-date .com-content-article.item-page .article-info .modified {
  display: none !important;
}

body.ef4-article-engine-enabled.ef4-article-hide-hits .com-content-article.item-page .article-info .hits {
  display: none !important;
}

body.ef4-article-engine-enabled.ef4-article-hide-pagenavigation .com-content-article.item-page .pagenavigation {
  display: none !important;
}




/* EF4 PHASE ARTICLE 1.1B2 — Article Title Spacing Frontend Output
   Owner scope: Joomla Article View page-header only. */
body.ef4-article-engine-enabled .com-content-article.item-page .page-header {
  margin-top: var(--ef4-article-title-margin-top, 0px);
  margin-bottom: var(--ef4-article-title-margin-bottom, 24px);
}

/* EF4 PHASE ARTICLE 1.1D2 — Article Title Side Spacing Frontend Output
   Owner scope: Joomla Article View page-header only. */
body.ef4-article-engine-enabled .com-content-article.item-page .page-header {
  padding-left: var(--ef4-article-title-padding-left, 0px);
  padding-right: var(--ef4-article-title-padding-right, 0px);
}
/* EF4 PHASE ARTICLE 1.0F2 — Meta Details Label Frontend Output
   Owner scope: Joomla Article Meta details label only. Controlled by Article Engine. No Blog Engine, Typography, Colors, Layout or Live Preview owners. */
body.ef4-article-engine-enabled.ef4-article-hide-details-label .com-content-article.item-page .article-info .article-info-term,
body.ef4-article-engine-enabled.ef4-article-hide-details-label.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__item .article-info .article-info-term {
  display: none !important;
}


/* EF4 PHASE UI 1.0E — Global Pagination Controls Frontend Output
   Owner scope: global standard pagination structure + visual defaults.
   PHASE UI 1.0C remains the single foundation; this phase only binds its visual values
   to UI Engine CSS variables. Component/engine-specific owners (for example Blog Engine)
   retain precedence through their more specific selectors. */
:where(.pagination) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

:where(.pagination .page-item) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Keep one small specificity step above the global `a` owner so pagination state
   colors remain authoritative, while still staying easy for component owners to override. */
:where(.pagination) .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--ef4-ui-pagination-border-color, #229ac8);
  border-radius: 6px;
  color: var(--ef4-ui-pagination-text-color, #229ac8);
  background: transparent;
  font-size: var(--ef4-ui-pagination-font-size, 14px);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

:where(.pagination) .page-link:hover,
:where(.pagination) .page-link:focus-visible {
  color: var(--ef4-ui-pagination-hover-text-color, #ffffff);
  background: var(--ef4-ui-pagination-hover-bg, #229ac8);
  text-decoration: none;
}

:where(.pagination) .page-item.active .page-link {
  color: var(--ef4-ui-pagination-active-text-color, #ffffff);
  background: var(--ef4-ui-pagination-active-bg, #229ac8);
  border-color: var(--ef4-ui-pagination-border-color, #229ac8);
  font-weight: var(--ef4-ui-pagination-active-font-weight, 600);
}

:where(.pagination) .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* EF4 PHASE BLOG 2.0B — Pagination Base Frontend Output
   Owner scope: Joomla Category Blog pagination only. No Typography, global Colors, Blog Cards, Article View or Layout owners. */
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .pagination-wrapper {
  display: flex;
  justify-content: var(--ef4-blog-pagination-align, center);
  width: 100%;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--ef4-blog-pagination-align, center);
  gap: var(--ef4-blog-pagination-gap, 8px);
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .page-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ef4-blog-pagination-padding-y, 6px) var(--ef4-blog-pagination-padding-x, 12px);
  border-color: var(--ef4-blog-pagination-border-color, var(--ef4-ui-pagination-border-color, #229ac8));
  border-radius: var(--ef4-blog-pagination-radius, 6px);
  color: var(--ef4-blog-pagination-text-color, var(--ef4-ui-pagination-text-color, #229ac8));
  background: var(--ef4-blog-pagination-bg, transparent);
  text-decoration: none;
  line-height: 1;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .page-link:hover,
body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .page-link:focus-visible {
  color: var(--ef4-blog-pagination-hover-text-color, var(--ef4-ui-pagination-hover-text-color, #ffffff));
  background: var(--ef4-blog-pagination-hover-bg, var(--ef4-ui-pagination-hover-bg, #229ac8));
  border-color: var(--ef4-blog-pagination-hover-border-color, var(--ef4-ui-pagination-border-color, #229ac8));
  text-decoration: none;
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .page-item.active .page-link {
  color: var(--ef4-blog-pagination-active-text-color, var(--ef4-ui-pagination-active-text-color, #ffffff));
  background: var(--ef4-blog-pagination-active-bg, var(--ef4-ui-pagination-active-bg, #229ac8));
  border-color: var(--ef4-blog-pagination-active-border-color, var(--ef4-ui-pagination-border-color, #229ac8));
}

body.ef4-blog-engine-enabled.ef4-page-context-blog .com-content-category-blog.blog .com-content-category-blog__navigation .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}


/* EF4 PHASE UTILITY 1.0D — Back to Top Scroll Behavior
   Owner scope: global Utility Engine floating buttons only.
   Adds safe visibility state for Back to Top; no Live Preview binding, no Header/Blog/Article/Layout owners. */
body.ef4-utility-engine-enabled .ef4-floating-button {
  position: fixed;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.ef4-utility-engine-enabled .ef4-floating-button:hover,
body.ef4-utility-engine-enabled .ef4-floating-button:focus {
  text-decoration: none;
}

body.ef4-utility-engine-enabled .ef4-floating-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

body.ef4-utility-engine-enabled .ef4-floating-button__icon {
  width: 56%;
  height: 56%;
  display: block;
  fill: currentColor;
  pointer-events: none;
}

body.ef4-utility-engine-enabled .ef4-back-to-top {
  width: var(--ef4-back-to-top-size, 48px);
  height: var(--ef4-back-to-top-size, 48px);
  background: var(--ef4-back-to-top-bg-color, #111827);
  color: var(--ef4-back-to-top-icon-color, #ffffff);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

body.ef4-utility-engine-enabled .ef4-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body.ef4-utility-engine-enabled .ef4-floating-call {
  width: var(--ef4-call-button-size, 48px);
  height: var(--ef4-call-button-size, 48px);
  background: var(--ef4-call-button-bg-color, #16a34a);
  color: var(--ef4-call-button-icon-color, #ffffff);
  transform: translate(var(--ef4-call-button-offset-x, 0px), var(--ef4-call-button-offset-y, 0px));
}

body.ef4-utility-engine-enabled .ef4-floating-button--shape-circle {
  border-radius: 999px;
}

body.ef4-utility-engine-enabled .ef4-floating-button--shape-rounded_square {
  border-radius: 14px;
}

body.ef4-utility-engine-enabled .ef4-floating-button--top_right {
  top: 96px;
  right: 20px;
}

body.ef4-utility-engine-enabled .ef4-floating-button--bottom_right {
  right: 20px;
  bottom: 24px;
}

body.ef4-utility-engine-enabled .ef4-floating-button--bottom_left {
  left: 20px;
  bottom: 24px;
}

body.ef4-utility-engine-enabled .ef4-floating-call.ef4-floating-button--bottom_right,
body.ef4-utility-engine-enabled .ef4-floating-call.ef4-floating-button--bottom_left {
  bottom: 96px;
}

@media (min-width: 1025px) {
  body.ef4-utility-engine-enabled .ef4-floating-button--devices-tablet_mobile,
  body.ef4-utility-engine-enabled .ef4-floating-button--devices-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.ef4-utility-engine-enabled .ef4-floating-button--devices-desktop,
  body.ef4-utility-engine-enabled .ef4-floating-button--devices-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.ef4-utility-engine-enabled .ef4-floating-button--devices-desktop {
    display: none !important;
  }

  body.ef4-utility-engine-enabled .ef4-floating-button--top_right {
    top: 88px;
    right: 16px;
  }

  body.ef4-utility-engine-enabled .ef4-floating-button--bottom_right {
    right: 16px;
    bottom: 18px;
  }

  body.ef4-utility-engine-enabled .ef4-floating-button--bottom_left {
    left: 16px;
    bottom: 18px;
  }

  body.ef4-utility-engine-enabled .ef4-floating-call.ef4-floating-button--bottom_right,
  body.ef4-utility-engine-enabled .ef4-floating-call.ef4-floating-button--bottom_left {
    bottom: 84px;
  }
}


/* EF4 PHASE MOBILE HEADER 7.6C — Hamburger & Mobile Module Fine Tuning Frontend Output
   Scope: visual fine tuning only. Uses transform: translate() so the mobile header grid, logo,
   layout presets and module flow remain untouched. No JavaScript, no Utility Engine coupling. */
.ef4-mobile-header .ef4-mobile-menu-toggle {
  transform: translate(var(--ef4-mobile-hamburger-offset-x, 0px), var(--ef4-mobile-hamburger-offset-y, 0px));
}

.ef4-mobile-header .ef4-mobile-module {
  transform: translate(var(--ef4-mobile-module-offset-x, 0px), var(--ef4-mobile-module-offset-y, 0px));
}

/* EF4 PHASE MOBILE HEADER 7.8C — Mobile Logo Fine Tuning Frontend Output
   Scope: visual fine tuning only. Uses transform: translate() on the mobile logo owner only.
   Does not affect Logo Width, Mobile Logo Override, layout presets or other Mobile Header owners. */
.ef4-mobile-header .ef4-mobile-logo {
  transform: translate(var(--ef4-mobile-logo-offset-x, 0px), var(--ef4-mobile-logo-offset-y, 0px));
}

/* EF4 PHASE MOBILE HEADER 7.10C — Mobile Top Modules Fine Tuning Frontend Output
   Scope: independent visual fine tuning for mobile-top-1 through mobile-top-4 only.
   Uses transform: translate() on each position owner without changing the Top Bar grid,
   responsive structure, Mobile Main Bar, Sticky Header or other Engine owners. */
.ef4-mobile-header .ef4-mobile-top-1 {
  transform: translate(var(--ef4-mobile-top-1-offset-x, 0px), var(--ef4-mobile-top-1-offset-y, 0px));
}

.ef4-mobile-header .ef4-mobile-top-2 {
  transform: translate(var(--ef4-mobile-top-2-offset-x, 0px), var(--ef4-mobile-top-2-offset-y, 0px));
}

.ef4-mobile-header .ef4-mobile-top-3 {
  transform: translate(var(--ef4-mobile-top-3-offset-x, 0px), var(--ef4-mobile-top-3-offset-y, 0px));
}

.ef4-mobile-header .ef4-mobile-top-4 {
  transform: translate(var(--ef4-mobile-top-4-offset-x, 0px), var(--ef4-mobile-top-4-offset-y, 0px));
}



/* ==========================================================
   EF4 PHASE BRIDGE 2.0B — VP Prime Top Navigation Typography Bridge
   Scope: VP Prime top-level item titles inside the EF4 desktop header only.
   Requires both Third-Party Bridge Engine and VP Prime Mega Menu Bridge.
   Dropdown items, group titles and descriptions remain intentionally excluded.
========================================================== */
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1
> .mod-megamenu--item-anchor
.mod-megamenu--item-title {
    font-size: var(--ef4-navigation-font-size, var(--ef4-menu-font-size, 15px));
    text-transform: var(--ef4-navigation-text-transform, var(--ef4-menu-text-transform, none));
    letter-spacing: var(--ef4-navigation-letter-spacing, var(--ef4-menu-letter-spacing, 0px));
}

/* ==========================================================
   EF4 PHASE BRIDGE 2.0C — VP Prime Top Navigation Layout Bridge
   Scope: VP Prime top-level layout inside the EF4 desktop header only.
   Requires Navigation Engine, Third-Party Bridge Engine and VP Prime Bridge.
   Dropdown layout, mega panels and nested items remain intentionally excluded.
========================================================== */
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
> .mod-megamenu {
    gap: var(--ef4-navigation-item-gap, 0px);
}

body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1
> .mod-megamenu--item-anchor {
    padding-inline: var(--ef4-navigation-padding-x, 16px);
    padding-block: var(--ef4-navigation-padding-y, 10px);
}

/* ==========================================================
   EF4 PHASE BRIDGE 2.0C.3 — VP Prime Fixed Caret Gap Engine
   Scope: top-level VP Prime items with submenu carets inside the
   EF4 desktop header only. The caret is placed in normal flex flow
   with a fixed 10px gap from the preceding menu content.
   Independent from EF4 padding, font size and letter spacing.
========================================================== */
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1.mod-megamenu--deeper:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor {
    display: flex;
    align-items: center;
}

body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1.mod-megamenu--deeper:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor::after {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    margin-inline-start: 10px;
    transform: none;
}


/* ==========================================================
   EF4 PHASE BRIDGE 2.0D — VP Prime Top Navigation Surface Bridge
   Scope: top-level VP Prime clickable surfaces inside the EF4 desktop header only.
   Maps the existing EF4 Navigation Engine normal, hover and active backgrounds,
   plus item radius, without affecting dropdown items, mega panels or borders.
========================================================== */
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1
> .mod-megamenu--item-anchor {
    background: var(--ef4-navigation-item-background, transparent);
    border-radius: var(--ef4-navigation-item-radius, 0px);
}

body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1:hover
> .mod-megamenu--item-anchor,
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1
> .mod-megamenu--item-anchor:hover,
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1
> .mod-megamenu--item-anchor:focus-visible {
    background: var(--ef4-navigation-item-hover-background, transparent);
}

body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1.mod-megamenu--active
> .mod-megamenu--item-anchor,
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1.mod-megamenu--current
> .mod-megamenu--item-anchor {
    background: var(--ef4-navigation-item-active-background, transparent);
}


/* ==========================================================
   EF4 PHASE BRIDGE 2.1D — VP Prime Dropdown Item Surface Bridge
   Scope: standard VP Prime dropdown item clickable surfaces inside
   the EF4 desktop header only. Excludes top-level items, group titles,
   module content and the dropdown panel itself.
   Requires Dropdown Engine, Third-Party Bridge Engine and VP Prime Bridge.
========================================================== */
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor {
    background: var(--ef4-dropdown-item-background, transparent);
    border-radius: var(--ef4-dropdown-item-radius, 0px);
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group):hover
> .mod-megamenu--item-anchor,
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor:hover,
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor:focus-visible {
    background: var(
        --ef4-dropdown-item-hover-background,
        var(--ef4-dropdown-item-background, transparent)
    );
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group).mod-megamenu--active
> .mod-megamenu--item-anchor,
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group).mod-megamenu--current
> .mod-megamenu--item-anchor {
    background: var(
        --ef4-dropdown-item-active-background,
        var(
            --ef4-dropdown-item-hover-background,
            var(--ef4-dropdown-item-background, transparent)
        )
    );
}


/* ==========================================================
   EF4 PHASE BRIDGE 2.1E — VP Prime Dropdown Layout Bridge
   Scope: VP Prime dropdown panel spacing and standard dropdown
   item spacing inside the EF4 desktop header only.
   Existing panel, surface, typography and border ownership remains unchanged.
========================================================== */
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--container {
    padding-inline: var(--ef4-dropdown-panel-padding-x, 0px);
    padding-block: var(--ef4-dropdown-panel-padding-y, 0px);
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub {
    row-gap: var(--ef4-dropdown-item-gap, 0px);
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor {
    padding-inline: var(--ef4-dropdown-item-padding-x, 14px);
    padding-block: var(--ef4-dropdown-item-padding-y, 10px);
}

/* Preserve a dedicated caret zone while Item Padding X remains the owner
   of the normal horizontal spacing. No new caret control is introduced. */
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item.mod-megamenu--deeper:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor {
    padding-inline-end: calc(var(--ef4-dropdown-item-padding-x, 14px) + 1.5rem);
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item.mod-megamenu--deeper:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor::after {
    inset-inline-end: var(--ef4-dropdown-item-padding-x, 14px);
    right: auto;
}


/* ==========================================================
   EF4 PHASE BRIDGE 2.1F — VP Prime Dropdown Typography Bridge
   Scope: standard VP Prime dropdown item typography inside the
   EF4 desktop header only. Group titles, descriptions, module
   content and top-level navigation remain under their existing owners.
========================================================== */
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor {
    font-size: var(--ef4-dropdown-font-size, 14px);
    font-weight: var(--ef4-dropdown-font-weight, 400);
    text-align: var(--ef4-dropdown-text-align, left);
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor
.mod-megamenu--item-title {
    font-size: inherit;
    font-weight: inherit;
}

/* ==========================================================
   EF4 PHASE BRIDGE 2.1G — VP Prime Dropdown Border Bridge
   Scope: standard VP Prime dropdown item borders inside the
   EF4 desktop header only. Panel shell, group titles, module
   content and top-level navigation remain under existing owners.
========================================================== */
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor {
    border-width: var(--ef4-dropdown-item-border-width, 0px);
    border-style: var(--ef4-dropdown-item-border-style, none);
    border-color: var(--ef4-dropdown-item-border-color, transparent);
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group):hover
> .mod-megamenu--item-anchor,
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor:hover,
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group)
> .mod-megamenu--item-anchor:focus-visible {
    border-color: var(
        --ef4-dropdown-item-hover-border-color,
        var(--ef4-dropdown-item-border-color, transparent)
    );
}

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group).mod-megamenu--active
> .mod-megamenu--item-anchor,
body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
.ef4-header .ef4-header-menu-main
.mod-megamenu--sub
.mod-megamenu--item:not(.mod-megamenu--group).mod-megamenu--current
> .mod-megamenu--item-anchor {
    border-color: var(
        --ef4-dropdown-item-active-border-color,
        var(
            --ef4-dropdown-item-hover-border-color,
            var(--ef4-dropdown-item-border-color, transparent)
        )
    );
}



/* EF4 PHASE DROPDOWN 1.0B — Left Flyout Hover Bridge
   Scope: Standard desktop nested dropdown flyouts opened to the left only.
   Purpose: keeps hover ownership continuous while the pointer crosses from
   the parent dropdown item into a left-opening child flyout.
   Does not reposition the flyout and does not target Mega Menu or Mobile Menu. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li.ef4-dropdown-open-left > ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li.ef4-dropdown-open-left > ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main .mod-menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.menu > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > .mod-menu__sub li > a.ef4-dropdown-open-left ~ ul::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ .mod-menu__sub::before,
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main ul.nav > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > ul li > a.ef4-dropdown-open-left ~ ul::before {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 16px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
}

@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled .ef4-header .ef4-header-menu-main :is(.mod-menu, ul.menu, ul.nav) > li:not(.mega):not(.mega-full):not(.mega-2):not(.mega-3):not(.mega-4):not(.mega-5):not(.mega-6) > :is(.mod-menu__sub, ul) li > :is(span, button).ef4-dropdown-open-left ~ :is(.mod-menu__sub, ul)::before {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 16px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
}


/* EF4 PHASE DROPDOWN 1.0D — Left Flyout Native Gap Fix
   Scope: VP Prime nested desktop dropdown flyouts flipped left by the native
   `mod-megamenu-show-left` hook inside the EF4 header.
   Purpose: neutralizes VP Prime's native -15px horizontal translation only
   for the left-flipped nested flyout, closing the dead hover gap while
   preserving native right: 100% positioning and all right-opening behavior.
   No JS, Mega Menu layout, Mobile Menu, controls or VP Prime files changed. */
@media (min-width: 769px) {
  body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled
  .ef4-header .ef4-header-menu-main
  .mod-megamenu--sub
  .mod-megamenu--expand > .mod-megamenu--container.mod-megamenu-show-left {
    transform: translateY(0) translateX(0) translateZ(0);
  }
}


/* EF4 PHASE USERS 1.0B — Users Form Engine Skeleton
   Scope owner only. No visual styling in this phase.
   Future Users Form Engine rules must remain scoped below:
   body.ef4-users-form-engine-enabled.ef4-users-context
   Joomla com_users markup, validation, forms and layouts remain untouched. */

/* EF4 PHASE USERS 1.0C.4 — Registration Heading Color Fix
   Scope: Joomla com_users registration view only.
   Surgical refinement only: the registration heading uses a neutral dark graphite color
   instead of inheriting the site link/heading blue. No other visual or functional changes. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration {
  --ef4-users-reg-surface: #ffffff;
  --ef4-users-reg-surface-soft: #f8fafc;
  --ef4-users-reg-border: #e5e7eb;
  --ef4-users-reg-border-strong: #cbd5e1;
  --ef4-users-reg-text: var(--ef4-color-text, #1f2937);
  --ef4-users-reg-muted: #64748b;
  --ef4-users-reg-heading: #111827;
  --ef4-users-reg-accent: var(--ef4-color-link, #2563eb);
  --ef4-users-reg-accent-hover: var(--ef4-color-link-hover, #1d4ed8);
  --ef4-users-reg-danger: #b42318;
  --ef4-users-reg-warning: #d97706;
  --ef4-users-reg-success: #15803d;
  --ef4-users-reg-radius: 12px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration {
  width: min(100%, 760px);
  color: var(--ef4-users-reg-text);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration > .page-header {
  margin: 0 0 22px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration > .page-header h1 {
  margin: 0;
}

/* Unified visual owner: the complete Joomla registration form. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form {
  display: block;
  padding: 26px;
  border: 1px solid var(--ef4-users-reg-border);
  border-radius: var(--ef4-users-reg-radius);
  background: var(--ef4-users-reg-surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* Fieldsets remain semantic Joomla owners, but no longer create separate cards. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form fieldset + fieldset {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ef4-users-reg-border);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form legend {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  color: var(--ef4-users-reg-heading);
  font-family: var(--ef4-font-heading);
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .control-group {
  margin: 0 0 18px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form fieldset .control-group:last-child {
  margin-bottom: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .control-label {
  margin: 0 0 7px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .control-label label,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form label {
  color: var(--ef4-users-reg-text);
  font-weight: 600;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .controls {
  margin: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input[type="text"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input[type="email"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input[type="password"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input[type="url"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input[type="tel"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form select,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form textarea {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--ef4-users-reg-border-strong);
  border-radius: 8px;
  background: var(--ef4-users-reg-surface);
  color: var(--ef4-users-reg-text);
  font: inherit;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form textarea {
  min-height: 120px;
  resize: vertical;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form select:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form textarea:focus {
  outline: 0;
  border-color: var(--ef4-users-reg-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Joomla password field: preserve the native input-group and toggle behavior. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group {
  width: 100%;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group .input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group .input-group > input {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 8px 0 0 8px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .input-password-toggle.btn {
  display: inline-flex;
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ef4-users-reg-border-strong);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--ef4-users-reg-surface-soft);
  color: var(--ef4-users-reg-muted);
  box-shadow: none;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .input-password-toggle.btn:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .input-password-toggle.btn:focus {
  border-color: var(--ef4-users-reg-accent);
  background: var(--ef4-users-reg-surface-soft);
  color: var(--ef4-users-reg-accent);
  outline: 0;
  transform: none;
  box-shadow: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .input-password-toggle .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Password requirements are part of the password component, not generic helper text. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form [id$="-rules"].small.text-muted {
  display: block;
  margin: 0 0 8px;
  color: var(--ef4-users-reg-muted);
  font-size: 0.88em;
  line-height: 1.4;
}

/* Keep Joomla's native <meter> logic; EF4 only supplies the presentation. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group meter {
  display: block;
  width: 100%;
  height: 7px;
  margin: 10px 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--ef4-users-reg-surface-soft);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: var(--ef4-users-reg-surface-soft);
  box-shadow: inset 0 0 0 1px var(--ef4-users-reg-border);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: var(--ef4-users-reg-success);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group meter::-webkit-meter-suboptimum-value {
  border-radius: 999px;
  background: var(--ef4-users-reg-warning);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group meter::-webkit-meter-even-less-good-value {
  border-radius: 999px;
  background: var(--ef4-users-reg-danger);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group meter::-moz-meter-bar {
  border-radius: 999px;
  background: var(--ef4-users-reg-accent);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .password-group .text-center {
  min-height: 0;
  margin: 6px 0 0;
  color: var(--ef4-users-reg-muted);
  font-size: 0.84em;
  line-height: 1.4;
  text-align: left !important;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .form-text,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .form-text.text-muted,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form small {
  color: var(--ef4-users-reg-muted);
  font-size: 0.88em;
  line-height: 1.45;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .star,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form label .required {
  color: var(--ef4-users-reg-danger);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form .invalid,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form input.invalid,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form select.invalid,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__form textarea.invalid {
  border-color: var(--ef4-users-reg-danger);
}

/* The native Joomla submit wrapper remains untouched in markup and joins the same card visually. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__submit {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ef4-users-reg-border);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__submit .controls {
  width: 100%;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__register.btn {
  width: 100%;
  min-height: 46px;
  padding: 10px 24px;
  border: 1px solid var(--ef4-users-reg-accent);
  border-radius: 8px;
  background: var(--ef4-users-reg-accent);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.10);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__register.btn:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
.com-users-registration__register.btn:focus {
  border-color: var(--ef4-users-reg-accent-hover);
  background: var(--ef4-users-reg-accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

@media (max-width: 767.98px) {
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
  .com-users-registration {
    width: 100%;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-registration
  .com-users-registration__form {
    padding: 18px;
    border-radius: 10px;
  }
}

/* EF4 PHASE USERS 1.0D.2 — Profile Display Styling
   Scope: Joomla com_users read-only profile view only.
   Purpose: establishes the shared EF4 section-card language for core profile,
   frontend user parameters and dynamic plugin/custom profile sections while
   preserving Joomla/plugin ownership of all internal functionality.
   No Profile Edit styling, overrides, markup changes or plugin-specific rules. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile {
  --ef4-users-profile-surface: #ffffff;
  --ef4-users-profile-surface-soft: #f8fafc;
  --ef4-users-profile-border: #e5e7eb;
  --ef4-users-profile-border-strong: #cbd5e1;
  --ef4-users-profile-text: var(--ef4-color-text, #1f2937);
  --ef4-users-profile-heading: #111827;
  --ef4-users-profile-muted: #64748b;
  --ef4-users-profile-accent: var(--ef4-color-link, #2563eb);
  --ef4-users-profile-accent-hover: var(--ef4-color-link-hover, #1d4ed8);
  --ef4-users-profile-radius: 12px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile {
  width: min(100%, 920px);
  color: var(--ef4-users-profile-text);
}

/* Profile page title + native Joomla edit action. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .page-header {
  margin: 0 0 22px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .page-header h1,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .page-header h2 {
  margin: 0;
  color: var(--ef4-users-profile-heading);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .com-users-profile__edit {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .com-users-profile__edit .btn {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--ef4-users-profile-accent);
  border-radius: 8px;
  background: var(--ef4-users-profile-accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .com-users-profile__edit .btn:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile > .com-users-profile__edit .btn:focus {
  border-color: var(--ef4-users-profile-accent-hover);
  background: var(--ef4-users-profile-accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(15, 23, 42, 0.12);
}

/* Shared section-card language. Dynamic plugin sections receive the same outer shell only. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__core,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__params,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__custom {
  min-width: 0;
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid var(--ef4-users-profile-border);
  border-radius: var(--ef4-users-profile-radius);
  background: var(--ef4-users-profile-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__core > legend,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__params > legend,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__custom > legend {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--ef4-users-profile-border);
  color: var(--ef4-users-profile-heading);
  font-family: var(--ef4-font-heading);
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
}

/* Descriptions supplied by Joomla/plugin fieldsets remain plugin-owned; EF4 only normalizes presentation. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__custom > p {
  margin: -6px 0 16px;
  color: var(--ef4-users-profile-muted);
  line-height: 1.55;
}

/* Read-only label/value structure used by core, params and compatible plugin sections. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 0;
  margin: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal > dt,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal > dd {
  min-width: 0;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--ef4-users-profile-border);
  line-height: 1.5;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal > dt {
  color: var(--ef4-users-profile-muted);
  font-weight: 600;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal > dd {
  color: var(--ef4-users-profile-text);
  overflow-wrap: anywhere;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal > dt:nth-last-of-type(1),
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile dl.dl-horizontal > dd:last-child {
  border-bottom-color: transparent;
}

@media (max-width: 767.98px) {
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile {
    width: 100%;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__core,
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__params,
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__custom {
    padding: 18px;
    border-radius: 10px;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile dl.dl-horizontal {
    display: block;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile dl.dl-horizontal > dt {
    padding: 12px 0 3px;
    border-bottom: 0;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile dl.dl-horizontal > dd {
    padding: 0 0 12px;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile > .com-users-profile__edit {
    justify-content: stretch;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile > .com-users-profile__edit .btn {
    width: 100%;
  }
}

/* EF4 PHASE USERS 1.0E.2 — Profile Edit Styling
   Scope: Joomla com_users profile edit form only.
   Purpose: applies the established EF4 card/form language to standard Joomla
   Form API controls while preserving plugin/MFA ownership and all native logic.
   No overrides, markup changes, plugin-specific UI rules or functional changes. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile {
  --ef4-users-edit-surface: #ffffff;
  --ef4-users-edit-surface-soft: #f8fafc;
  --ef4-users-edit-border: #e5e7eb;
  --ef4-users-edit-border-strong: #cbd5e1;
  --ef4-users-edit-text: var(--ef4-color-text, #1f2937);
  --ef4-users-edit-heading: #111827;
  --ef4-users-edit-muted: #64748b;
  --ef4-users-edit-accent: var(--ef4-color-link, #2563eb);
  --ef4-users-edit-accent-hover: var(--ef4-color-link-hover, #1d4ed8);
  --ef4-users-edit-danger: #b42318;
  --ef4-users-edit-radius: 12px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit.profile-edit {
  display: block;
  width: min(100%, 920px);
  margin: 0;
  color: var(--ef4-users-edit-text);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Every direct Joomla Form API fieldset receives the shared neutral card shell.
   Dynamic plugin fieldsets intentionally receive outer presentation only. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > fieldset {
  min-width: 0;
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid var(--ef4-users-edit-border);
  border-radius: var(--ef4-users-edit-radius);
  background: var(--ef4-users-edit-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > fieldset > legend {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--ef4-users-edit-border);
  color: var(--ef4-users-edit-heading);
  font-family: var(--ef4-font-heading);
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > fieldset > p {
  margin: -6px 0 16px;
  color: var(--ef4-users-edit-muted);
  line-height: 1.55;
}

/* Conservative styling for standard Joomla Form API controls only. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .control-group {
  margin: 0 0 18px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > fieldset > .control-group:last-child {
  margin-bottom: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .control-label {
  margin: 0 0 7px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .control-label label,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form label {
  color: var(--ef4-users-edit-text);
  font-weight: 600;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .controls {
  margin: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="text"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="email"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="password"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="url"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="tel"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form select,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--ef4-users-edit-border-strong);
  border-radius: 8px;
  background: var(--ef4-users-edit-surface);
  color: var(--ef4-users-edit-text);
  font: inherit;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form textarea {
  min-height: 120px;
  resize: vertical;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="text"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="email"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="password"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="url"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form input[type="tel"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form select:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form textarea:focus {
  outline: 0;
  border-color: var(--ef4-users-edit-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Reuse the proven native Joomla password presentation from Registration. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .password-group {
  width: 100%;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .password-group .input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .password-group .input-group > input {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 8px 0 0 8px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .input-password-toggle.btn {
  display: inline-flex;
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ef4-users-edit-border-strong);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--ef4-users-edit-surface-soft);
  color: var(--ef4-users-edit-muted);
  box-shadow: none;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .input-password-toggle.btn:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .input-password-toggle.btn:focus {
  border-color: var(--ef4-users-edit-accent);
  background: var(--ef4-users-edit-surface-soft);
  color: var(--ef4-users-edit-accent);
  outline: 0;
  transform: none;
  box-shadow: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .input-password-toggle .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form [id$="-rules"].small.text-muted {
  display: block;
  margin: 0 0 8px;
  color: var(--ef4-users-edit-muted);
  font-size: 0.88em;
  line-height: 1.4;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .password-group meter {
  display: block;
  width: 100%;
  height: 7px;
  margin: 10px 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--ef4-users-edit-surface-soft);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .password-group meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: var(--ef4-users-edit-surface-soft);
  box-shadow: inset 0 0 0 1px var(--ef4-users-edit-border);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .password-group .text-center,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .form-text,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form small {
  color: var(--ef4-users-edit-muted);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form .star,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form label .required {
  color: var(--ef4-users-edit-danger);
}

/* Dedicated MFA owner: card shell only. Internal Joomla security UI remains untouched. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__multifactor {
  min-width: 0;
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid var(--ef4-users-edit-border);
  border-radius: var(--ef4-users-edit-radius);
  background: var(--ef4-users-edit-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

/* Native Save / Cancel zone. Tasks, validation and formnovalidate remain Joomla-owned. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit {
  margin: 20px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--ef4-users-edit-border);
  border-radius: var(--ef4-users-edit-radius);
  background: var(--ef4-users-edit-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn {
  min-height: 44px;
  margin: 0;
  padding: 9px 20px;
  border-radius: 8px;
}

/* PHASE USERS 1.0E.2B — submit action ownership.
   Keep Joomla's semantic split explicit: Save is primary; Cancel remains a distinct danger/secondary action. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn-primary {
  border-color: var(--ef4-users-edit-accent);
  background: var(--ef4-users-edit-accent);
  color: #ffffff;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn-primary:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn-primary:focus {
  border-color: var(--ef4-users-edit-accent-hover);
  background: var(--ef4-users-edit-accent-hover);
  color: #ffffff;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn-danger {
  border-color: #fecaca;
  background: #ffffff;
  color: var(--ef4-users-edit-danger);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn-danger:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__edit-submit .btn-danger:focus {
  border-color: #fca5a5;
  background: #fff7f7;
  color: #991b1b;
}

@media (max-width: 767.98px) {
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__edit.profile-edit {
    width: 100%;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__edit-form > fieldset,
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__edit-form > .com-users-profile__multifactor,
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__edit-form > .com-users-profile__edit-submit {
    padding: 18px;
    border-radius: 10px;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__edit-form > .com-users-profile__edit-submit .controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
  .com-users-profile__edit-form > .com-users-profile__edit-submit .btn {
    width: 100%;
  }
}

/* PHASE USERS 1.0E.2D — MFA Add Method Action Styling
   Scope: only Joomla MFA "add new method" action links inside Profile Edit.
   Preserve native href/behavior and all MFA/security internals. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__multifactor
.com-users-methods-list-method-addnew-container > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--ef4-users-edit-border-strong);
  border-radius: 7px;
  background: var(--ef4-users-edit-surface-soft);
  color: var(--ef4-users-edit-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__multifactor
.com-users-methods-list-method-addnew-container > a:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__multifactor
.com-users-methods-list-method-addnew-container > a:focus-visible {
  border-color: var(--ef4-users-edit-accent);
  background: #ffffff;
  color: var(--ef4-users-edit-accent);
  text-decoration: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ef4-users-edit-accent) 14%, transparent);
  outline: none;
}

/* PHASE USERS 1.0E.2F — Fancy Select Remove Action Visual Fix
   Scope: Joomla Fancy Select remove action only inside com_users Profile Edit.
   Keep the real remove button, click behavior and accessibility label intact;
   hide only the visible Choices "Remove item" text and replace it with a compact visual ×. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form joomla-field-fancy-select .choices__button_joomla {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0 0 0 6px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ef4-users-edit-muted);
  font-size: 0;
  line-height: 1;
  text-indent: -9999px;
  white-space: nowrap;
  cursor: pointer;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form joomla-field-fancy-select .choices__button_joomla::before {
  content: "×";
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-indent: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form joomla-field-fancy-select .choices__button_joomla:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form joomla-field-fancy-select .choices__button_joomla:focus-visible {
  background: var(--ef4-users-edit-surface-soft);
  color: var(--ef4-users-edit-danger);
  outline: none;
}

/* PHASE USERS 1.0E.2G — MFA Method Typography Refinement
   Scope: only MFA method headings inside Profile Edit.
   Typography only: inherit EF4 heading font and heading color; no layout, spacing or behavior changes. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-profile
.com-users-profile__edit-form > .com-users-profile__multifactor
.com-users-methods-list-method-header :is(h2, h3, h4) {
  color: var(--ef4-users-edit-heading);
  font-family: var(--ef4-font-heading);
}

/* EF4 PHASE USERS 1.0F.2 — Joomla Login View Styling
   Scope: standard Joomla com_users Login View only.
   Purpose: integrates the native login view into the established EF4 Users Form Engine
   without overrides or changes to Joomla authentication, validation, Remember Me,
   Passkey/WebAuthn or account-recovery functionality. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login {
  --ef4-users-login-surface: #ffffff;
  --ef4-users-login-surface-soft: #f8fafc;
  --ef4-users-login-border: #e5e7eb;
  --ef4-users-login-border-strong: #cbd5e1;
  --ef4-users-login-text: var(--ef4-color-text, #1f2937);
  --ef4-users-login-heading: #111827;
  --ef4-users-login-muted: #64748b;
  --ef4-users-login-accent: var(--ef4-color-link, #2563eb);
  --ef4-users-login-accent-hover: var(--ef4-color-link-hover, #1d4ed8);
  --ef4-users-login-radius: 12px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login {
  width: min(100%, 620px);
  padding: 26px;
  border: 1px solid var(--ef4-users-login-border);
  border-radius: var(--ef4-users-login-radius);
  background: var(--ef4-users-login-surface);
  color: var(--ef4-users-login-text);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login > .page-header {
  margin: 0 0 20px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login > .page-header h1,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login > .page-header h2 {
  margin: 0;
  color: var(--ef4-users-login-heading);
  font-family: var(--ef4-font-heading);
  font-weight: 700;
  line-height: 1.25;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__description {
  margin: 0 0 20px;
  color: var(--ef4-users-login-muted);
  line-height: 1.55;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__description > :last-child {
  margin-bottom: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 14px 0 0;
  border-radius: 10px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .control-group {
  margin: 0 0 18px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .control-label {
  margin: 0 0 7px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .control-label label,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form label {
  color: var(--ef4-users-login-text);
  font-weight: 600;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .controls {
  margin: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form input[type="text"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form input[type="email"],
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form input[type="password"] {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--ef4-users-login-border-strong);
  border-radius: 8px;
  background: var(--ef4-users-login-surface);
  color: var(--ef4-users-login-text);
  font: inherit;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form input[type="text"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form input[type="email"]:focus,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form input[type="password"]:focus {
  outline: 0;
  border-color: var(--ef4-users-login-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Native Joomla password visibility control: functionality and accessible label remain intact. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .password-group .input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .password-group .input-group > input {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 8px 0 0 8px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .input-password-toggle.btn {
  display: inline-flex;
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ef4-users-login-border-strong);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--ef4-users-login-surface-soft);
  color: var(--ef4-users-login-muted);
  box-shadow: none;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .input-password-toggle.btn:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .input-password-toggle.btn:focus {
  border-color: var(--ef4-users-login-accent);
  background: var(--ef4-users-login-surface-soft);
  color: var(--ef4-users-login-accent);
  outline: 0;
  transform: none;
  box-shadow: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__remember {
  margin: 2px 0 18px;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__remember .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__remember .form-check-input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__remember .form-check-label {
  margin: 0;
  color: var(--ef4-users-login-text);
  font-weight: 500;
}

/* Joomla extra authentication methods (Passkey/WebAuthn etc.) remain plugin-owned,
   but their standard button shell is normalized as a secondary action. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn {
  width: 100%;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-secondary {
  border: 1px solid var(--ef4-users-login-border-strong);
  background: var(--ef4-users-login-surface-soft);
  color: var(--ef4-users-login-text);
  box-shadow: none;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-secondary:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-secondary:focus {
  border-color: var(--ef4-users-login-accent);
  background: var(--ef4-users-login-surface-soft);
  color: var(--ef4-users-login-accent);
}

/* Keep authentication-plugin artwork/iconography contained inside the secondary action. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-secondary img,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-secondary svg,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-secondary .icon {
  display: inline-block;
  width: 22px;
  max-width: 22px;
  height: 22px;
  max-height: 22px;
  margin-inline-end: 8px;
  object-fit: contain;
  vertical-align: middle;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-primary {
  border: 1px solid var(--ef4-users-login-accent);
  background: var(--ef4-users-login-accent);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.10);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-primary:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__submit .btn-primary:focus {
  border-color: var(--ef4-users-login-accent-hover);
  background: var(--ef4-users-login-accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

/* Recovery / registration actions visually belong to the same login card. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__options {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ef4-users-login-border);
  border-radius: 0;
  background: transparent;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__options .list-group-item {
  display: block;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ef4-users-login-accent);
  text-decoration: none;
  line-height: 1.4;
}

body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__options .list-group-item:hover,
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__options .list-group-item:focus {
  color: var(--ef4-users-login-accent-hover);
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
  .com-users-login {
    width: 100%;
    padding: 18px;
    border-radius: 10px;
  }
}

/* EF4 PHASE USERS 1.0F.3 — Login Password Toggle Text Visual Hide
   Scope: standard Joomla com_users Login View only.
   The visible "Show password / Hide password" text is visually hidden while
   the native eye icon, accessible text and Joomla password-view behavior remain intact. */
body.ef4-users-form-engine-enabled.ef4-users-context.ef4-users-view-login
.com-users-login__form .input-password-toggle .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* EF4 PHASE HEADER 6.1B — Tablet Logo Width Owner Fix
   Restores the shared Header Logo Width token inside the Tablet Header owner.
   This intentionally overrides the older generic responsive max-width:100% rule
   only for the EF4 tablet logo. Mobile and Sticky logo ownership remain unchanged. */
.ef4-header--tablet-extension-enabled
.ef4-header__tablet-logo
.ef4-header-logo__image {
  max-width: var(--ef4-header-logo-width);
}

/* EF4 PHASE HEADER 6.2B — Header Menu Vertical Offset
   Moves the actual EF4 menu owner/wrapper rather than individual links.
   Dedicated two-row menu wrappers move as a whole; single-row menu slots
   use the same shared offset token. */
.ef4-header__layout--menu-top,
.ef4-header__layout--menu-below,
.ef4-header__layout:not(.ef4-header__layout--menu-top):not(.ef4-header__layout--menu-below) > .ef4-header-menu-main,
.ef4-header__layout:not(.ef4-header__layout--menu-top):not(.ef4-header__layout--menu-below) > .ef4-header-menu-left,
.ef4-header__layout:not(.ef4-header__layout--menu-top):not(.ef4-header__layout--menu-below) > .ef4-header-menu-right {
  transform: translateY(var(--ef4-header-menu-offset-y, 0px));
}

/* ==========================================================
   EF4 PHASE THIRD-PARTY BRIDGE 1.0E — VP Prime Top Navigation Border Bridge
   Scope: VP Prime top-level clickable anchors inside the EF4 desktop header only.
   Requires Navigation Engine + VP Prime Bridge.
   Dropdown items, mega panels, group titles, module content and VP Prime files remain untouched.
   ========================================================== */
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--item-anchor {
  border-width: var(--ef4-navigation-border-width, 0px);
  border-style: var(--ef4-navigation-border-style, solid);
  border-color: var(--ef4-navigation-border-color, transparent);
}

body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1:hover > .mod-megamenu--item-anchor,
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--item-anchor:hover,
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--item-anchor:focus-visible {
  border-color: var(--ef4-navigation-border-hover-color, var(--ef4-navigation-border-color, transparent));
}

body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1.mod-megamenu--active > .mod-megamenu--item-anchor,
body.ef4-navigation-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1.mod-megamenu--current > .mod-megamenu--item-anchor {
  border-color: var(
    --ef4-navigation-border-active-color,
    var(--ef4-navigation-border-hover-color, var(--ef4-navigation-border-color, transparent))
  );
}

/* ==========================================================
   EF4 PHASE THIRD-PARTY BRIDGE 1.2B — VP Prime Dropdown Width Bridge
   Scope: VP Prime first-level dropdown panel shell only.
   Maps EF4 Dropdown width mode + custom width to the direct
   level-1 `.mod-megamenu--container` owner.
   Nested submenu containers, smart left-flip transforms,
   panel offset and VP Prime core files remain untouched.
   ========================================================== */

body.ef4-dropdown-engine-enabled.ef4-dropdown-width-auto.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--container {
  width: auto;
  min-width: 0;
}

body.ef4-dropdown-engine-enabled.ef4-dropdown-width-custom.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--container {
  width: var(--ef4-dropdown-custom-width, 240px);
  min-width: var(--ef4-dropdown-custom-width, 240px);
}

/* ==========================================================
   EF4 PHASE THIRD-PARTY BRIDGE 1.2D — Known-Good Panel Offset Recovery
   Scope: VP Prime first-level dropdown panel shell only.
   Recovers the previously user-tested working offset contract.
   No width, nested submenu, smart left-flip, VP Prime core
   or Live Preview changes.
   ========================================================== */

body.ef4-dropdown-engine-enabled.ef4-vpprime-bridge-enabled .ef4-header .ef4-header-menu-main .mod-megamenu > .mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--container {
  margin-top: var(--ef4-dropdown-panel-offset, 0px);
}