/* UberMenu Skin: BNT */

/* ── Base ── */
.ubermenu-skin-bnt {
  font-size: 14px;
  color: #333;
  border: none;
  background: transparent;
}

/* ── Responsive toggle ── */
.ubermenu-skin-bnt.ubermenu-responsive-toggle {
  background: transparent;
  color: #333;
  font-size: 14px;
  text-transform: none;
  font-weight: 400;
}
.ubermenu-skin-bnt.ubermenu-responsive-toggle:hover {
  background: transparent;
  color: #111;
}

/* ── Top-level bar link defaults ── */
.ubermenu-skin-bnt .ubermenu-target {
  color: #555;
}
.ubermenu-skin-bnt .ubermenu-target-description {
  color: #999;
}

/* ── Top-level items ── */
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-target {
  font-weight: 400;
  color: #555;
  text-transform: none;
  border-left: none;
  position: relative;
}
body:not(.rtl) .ubermenu-skin-bnt.ubermenu-horizontal .ubermenu-item-level-0:first-child > .ubermenu-target {
  box-shadow: none;
}

.ubermenu-skin-bnt .ubermenu-item-level-0:hover > .ubermenu-target,
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
  background: transparent;
  color: #333;
}

/* Active / current item – dark green underline */
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-active > .ubermenu-target::after,
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target::after,
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-current-menu-parent > .ubermenu-target::after,
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #00573F;
}

.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target,
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-current-menu-parent > .ubermenu-target,
.ubermenu-skin-bnt .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target {
  color: #333;
  background: transparent;
}

.ubermenu-skin-bnt .ubermenu-item.ubermenu-item-level-0 > .ubermenu-highlight {
  color: #00573F;
  background: transparent;
}
.ubermenu-skin-bnt.ubermenu-vertical .ubermenu-item-level-0 > .ubermenu-target {
  background: transparent;
}

/* ── Stack submenu items on level-0 ── */
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target {
  color: #fff;
}
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target:hover {
  color: #fff;
}


/* =========================================================================
   MEGA / FLYOUT DROP PANEL  –  dark green
   ========================================================================= */
.ubermenu-skin-bnt .ubermenu-submenu.ubermenu-submenu-drop {
  background: #00573F;
  border: none;
}
.ubermenu-skin-bnt.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop {
  border-top: none;
}

/* ── Tab content panel ── */
.ubermenu-skin-bnt .ubermenu-tab-content-panel {
  background: #00573F;
}

/* ── All submenu text – white on green ── */
.ubermenu-skin-bnt .ubermenu-submenu,
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target {
  color: #fff;
  text-align: left;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-highlight {
  color: #fff;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target:hover,
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-active > .ubermenu-target {
  color: #fff;
  text-decoration: underline;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target > .ubermenu-target-description {
  color: rgba(255, 255, 255, 0.7);
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-active > .ubermenu-target > .ubermenu-target-description {
  color: rgba(255, 255, 255, 0.85);
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-current-menu-item > .ubermenu-target {
  color: #fff;
  background: transparent;
}

/* ── Tabs ── */
.ubermenu-nojs.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-tabs .ubermenu-tab:hover > .ubermenu-target,
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-tab.ubermenu-active > .ubermenu-target {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ubermenu-skin-bnt .ubermenu-tabs-group,
.ubermenu-skin-bnt .ubermenu-tab > .ubermenu-target,
.ubermenu-skin-bnt .ubermenu-tab-content-panel {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Mobile modal ── */
.ubermenu-skin-bnt.ubermenu-mobile-modal.ubermenu-mobile-view {
  background: #00573F;
}


/* =========================================================================
   BNT CUSTOM BEHAVIOURS
   ========================================================================= */

/* ── 1. Left-align everything inside the mega panel ── */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target {
  text-align: left;
  justify-content: flex-start;
}

/* ── 2. Submenu link styling – bold white like the screenshot ── */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target {
  font-weight: 700;
  font-size: 0.95em;
  padding: 5px 0;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target:hover {
  text-decoration: underline;
  background: transparent;
}


/* ── 3. Column headers – base styling (no line by default) ── */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-header > .ubermenu-target {
  font-weight: 400;
  color: #fff;
  text-transform: none;
  font-size: 1.15em;
  letter-spacing: normal;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: none;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover {
  color: #fff;
  text-decoration: none;
}

.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-header.ubermenu-has-submenu-stack > .ubermenu-target {
  border-bottom: none;
}

/* ── bnt-line: add this CSS class to any menu item that needs the
   extending line from end of text to column edge.
   UberMenu > Menu Item > CSS Classes field → bnt-line             ── */
.ubermenu-skin-bnt .ubermenu-submenu .bnt-line > .ubermenu-target {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.ubermenu-skin-bnt .ubermenu-submenu .bnt-line > .ubermenu-target::after {
  content: '';
  flex: 1 1 0%;
  min-width: 20px;
  height: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  margin-left: 12px;
  display: block;
}

/* ── 4. "Featured" top-row header with arrow icon ──
   (e.g. "Find a place to visit →") — larger font, icon right      */
.ubermenu-skin-bnt .ubermenu-submenu-type-mega > .ubermenu-item-header:first-child > .ubermenu-target {
  font-size: 1.5em;
  font-weight: 400;
  padding: 15px 0 20px;
}



/* ── 5. Icons to the RIGHT of menu text ──
   Works for icon_left layout (default when an icon is assigned).
   We flip icon after the title via flexbox order.                  */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target.ubermenu-item-layout-icon_left,
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-icon_left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-icon,
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-icon {
  order: 5;
  margin-left: 8px;
  margin-right: 0;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-target-title,
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-target-title {
  order: 1;
  margin-left: 0;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-target-description {
  order: 2;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-sub-indicator,
.ubermenu-skin-bnt .ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-sub-indicator {
  order: 10;
}

/* When a bnt-line item has an icon, place icon before the line */
.ubermenu-skin-bnt .ubermenu-submenu .bnt-line > .ubermenu-target.ubermenu-item-layout-icon_left > .ubermenu-icon {
  order: 3;
}
.ubermenu-skin-bnt .ubermenu-submenu .bnt-line > .ubermenu-target.ubermenu-item-layout-icon_left::after {
  order: 4;
}

/* ── 6. Columns stack vertically by default ──
   Only auto-width columns go full-width. Columns with an explicit
   width class (ubermenu-column-1-3, etc.) keep their set width
   and float so they sit side by side as configured.                */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-column.ubermenu-column-auto {
  float: none;
  width: 100%;
  clear: both;
}

/* ── 7. Submenu items below column header – stacking ── */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-header > .ubermenu-submenu-type-stack {
  width: 100%;
}
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-item-header > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target {
  padding-left: 0;
  text-align: left;
}

/* ── 7. No column separator borders ── */
.ubermenu-skin-bnt .ubermenu-submenu .ubermenu-column + .ubermenu-column {
  border-left: none;
}